15.06.2017 Contao Konferenz Potsdam
Jonas Hellwig
kulturbanause.de
@_kulturbanause
Front-End-Designer @ kulturbanause
Autor, Dozent
Veränderung von Layouts
Veränderter Workflow
Stellenwert von Prototyping
Arten des Prototypings
Tools für visuelles Prototyping
Planung & Konzeption
Wireframes
Layout
Technische Umsetzung
Qualitätskontrolle
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!
Responsive Web Design erscheint auf alistapart.com
Flexible Media
Media Queries
Entstanden aus altem Workflow
Fixed Grid
Globale Breakpoints
Orientierung an Gerätegrößen
»Set breakpoints based on content, never on specific devices,
products or brands«
Google Web Fundamentals
Entstanden aus modernem Workflow
Fluid Grid
Komponentenbasierte Breakpoints
Schwierig umsetzbar mit statischen Grafiken
»We’re not designing pages, we’re designing systems of components«
Stephen Hay
»Wir dürfen nicht in einem zu hohen Detailgrad ins Projekt einsteigen.«
Schnelle Erstellung
Schnelle Iterationen
Schnelle Kommunikation
Digitale Skizzen
Frankenstein Prototypen
Clickdummys
Style Tiles
Technische/Frontend-Protoypen
Planung des Projekts
Ersatz eines statischen Layouts
Prüfung der technischen Machbarkeit
User Testing
Intern (Konzepter, Designer, Developer)
Extern (Kunden, ggf. Projektleiter)
Prototyp ist Zwischenschritt
Prototyp wird zum Produkt
Vorteile/Nachteile
Vorteile/Nachteile
Vorteile/Nachteile
InVision + Craft für Sketch/Photoshop
Vorteile/Nachteile
Vorteile/Nachteile
Vorteile/Nachteile
Vorteile/Nachteile
Vorteile/Nachteile
kulturbanause.de
blog.kulturbanause.de
@_kulturbanause