Ü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
|
Module Design: Atomic WebDesign mit StyleTiles
|
| 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
|
| Phase 4
|
Coding
|
Design + Coding + Testing: 2. Screen
|
| Phase 5
|
Testing
|
Design + Coding + Testing: 3. Screen
|
| Phase 6
|
Retour
|
Design + Coding + Testing: 4. Screen
|
| Prinzip
|
Do not fail!
|
Fail fast!
|
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
http://media.kulturbanause.de/blog/2014/03/mtc2014-slides-content-choreography/index.html#/1
