15.06.2017 Contao Konferenz Potsdam


Visuelles Prototyping


Jonas Hellwig
kulturbanause.de
@_kulturbanause

Jonas Hellwig


Front-End-Designer @ kulturbanause

Autor, Dozent

Was erwartet euch?

Veränderung von Layouts

Veränderter Workflow

Stellenwert von Prototyping

Arten des Prototypings

Tools für visuelles Prototyping

Der Weg vom statischen zum flexiblen Layout

Der klassische Workflow

Planung & Konzeption

Wireframes

Layout

Technische Umsetzung

Qualitätskontrolle

Probleme gab es schon vor responsive Design …

Keine Mouse-Over-Effekte

Keine Scrolling-Effekte

Falsche Inhalte

Fiktiver Browser

Falscher Betrachtungsabstand

Falsche Erwartungshaltung beim Kunden

Wir müssen den Interpretationsspielraum zwischen Präsentation und Endergebnis minimieren!

Beispiele

FT

Spotify

Altkraft

25.05.2010

Responsive Web Design erscheint auf alistapart.com

Responsive Web Design

Flexible Grid

Flexible Media

Media Queries

Adaptive Layout

Entstanden aus altem Workflow

foodsense.is

Fixed Grid

Globale Breakpoints

Orientierung an Gerätegrößen

»Set breakpoints based on content, never on specific devices,
products or brands«
Google Web Fundamentals

Responsive Layout

Entstanden aus modernem Workflow

microsoft.com

Fluid Grid

Komponentenbasierte Breakpoints

Schwierig umsetzbar mit statischen Grafiken

»We’re not designing pages, we’re designing systems of components«
Stephen Hay

Modulares Design

Responsive Pattern 1, 2

Foundation Building Blocks

Atomic Design

Frontend-Styleguides

U.S. Web Design Standards

Atlassian

Der neue Workflow

Foundation: Rapid Prototyping

Workflow bei kulturbanause

Tweet von Jen Simmons

»Wir dürfen nicht in einem zu hohen Detailgrad ins Projekt einsteigen.«

Visuelles Prototyping

Anforderungen an visuelle Prototypen

Schnelle Erstellung

Schnelle Iterationen

Schnelle Kommunikation

Arten von Prototypen

Pen & Paper

Digitale Skizzen

Frankenstein Prototypen

Clickdummys

Style Tiles

Technische/Frontend-Protoypen

Ziele der Prototypen

Planung des Projekts

Ersatz eines statischen Layouts

Prüfung der technischen Machbarkeit

User Testing

Zielgruppen

Intern (Konzepter, Designer, Developer)

Extern (Kunden, ggf. Projektleiter)

Qualitätsanspruch

Prototyp ist Zwischenschritt

Prototyp wird zum Produkt

Tools

Balsamiq Mockups

Website

Vorteile/Nachteile

Ähnliche Programme

Adobe Comp CC

Axure

Style Tiles

Website

Invision

Website

Vorteile/Nachteile

Ähnliche Programme

Marvel

JustInMind

Craft

Adobe Experience Design (XD)

Website

Vorteile/Nachteile

Ähnliche Programme

Sketch

InVision + Craft für Sketch/Photoshop

Froont

Website

Vorteile/Nachteile

Webflow

Website

Vorteile/Nachteile

Muse CC

Website

Muse > Contao: Conmunicator

Vorteile/Nachteile

Design in the Browser

Bootstrap & Foundation

Bootstrap

Foundation

Vorteile/Nachteile

Chrome Tools & Co.

Beispiel

Vorteile/Nachteile

Fazit

Vielen Dank!


Jonas Hellwig

kulturbanause.de

blog.kulturbanause.de

@_kulturbanause