Übersicht
|
Classic
|
Responsive
|
First
|
- Layout
- Page-Design
- Design = Layout = Content
|
(* Mobile)
|
Internet
|
als Layoutmedium (analog Print: Coverdesign)
|
als Informationsmedium (analog Buchinhalt: Gliederung)
|
Sicherheit durch
|
Design Dokument
|
Schnelle Feedbacks & Teamwork
|
Content
|
= Design = Layout
|
unabhängig von Design & Layout
|
Design
|
- Page Design & Graceful Degradation
|
- Module Design: Atomic WebDesign mit StyleTiles
- Mobile First & Progressive Enhancement
|
Layout
|
Statisch
|
Dynamisch
|
Phase 1
|
Ziele & Strategie & Konzeption
|
Ziele & Strategie & Konzeption
|
Phase 2
|
|
- Content Strategy
- PIM Strategy -> Implementierung
|
Phase 3
|
Design: Vom Wireframe zum Photoshop-Design
|
Design + Coding + Testing: Mobile Low Fidelity
|
Phase 4
|
Coding
|
Design + Coding + Testing: Mobile High Fidelity
|
Phase 5
|
Testing
|
Design + Coding + Testing: Next Screen
|
Phase 6
|
Retour
|
Design + Coding + Testing: Next Screen
|
Prinzip
|
Do not fail!
|
Fail fast!
|
|
|
|
Bildquelle: http://www.wsol.com/a-more-flexible-workflow/
Content Choreography
- Inhalte unabhängig vom HTML-Markup anordnen
- Das Markup selbst bleibt unverändert
- Sehr mächtig in Kombination mit RESS etc.
Mobile First
- Mobile First erleichert die Priorisierung von Inhalten
- Wir können prüfen ob die HTML-Struktur semantisch sinnvoll ist
- Einziger Nachteil: unsere Sichtweise muss verändert werden
RESS
- RESS = Reponsive Design + Server Side Components
- Robustes Reponsive Design
- Optimierte, ausgetauschte Inhalte durch serverseitige Abfrage
Workflow
|
Klassischer Workflow
|
RWD Workflow
|
Nachteile
|
- Überflüssige Arbeit (z.B. viele Layouts)
- Falsche Erwartungshaltung beim Kunden durch statische Grafiken
- Flexible Layouts, Interaktionen, Animation lassen sich schlecht darstellen
- Eine fehlerhafte Planung führt zu aufwändigen Korrekturen
- Strukturelle oder funktionelle Änderungen haben oft Auswirkungen auf das Design, das führt zu doppelten Korrekturschleifen
- Die User Experience (z.B. die Benutzung per Touch-Screen) kann schlecht optimiert werden
- Der klassische Workflow ist langsam, unflexibel und somit teuer
|
- Designer, Entwickler und Agenturen müssen umdenken
- Designer und Entwickler müssen sehr gut zusammenarbeiten oder sind im Idealfall ein und dieselbe Person
- Die Anforderungen an den Kunden steigen
|
Vorteile
|
- Wir haben uns an diesen Ablauf gewöhnt
- Ein Projekt kann linear bearbeitet werden, einzelne Abteilungen oder Mitarbeiter arbeiten nacheinander an verschiedenen Bereichen der Website
- Der Workflow ist auch für Außenstehende leicht vorstellbar und anschaulich zu präsentieren
|
- Das flexible Design, Animationen und Interaktionen lassen sich bereits in einer frühen Projektphase perfekt abbilden
- Das Design und die Struktur folgt den Anforderungen des Inhalts (Form follows Function)
- Fehler in der Konzeption werden frühzeitig (im Prototypen) erkannt und können behoben werden
- Design und Funktion werden Anfangs getrennt bearbeitet und können sich daher nicht gegenseitig negativ beeinflussen.
- Der responsive Workflow ist schnell – Design und Code können parallel bearbeitet werden.
|
Quellen