[SimonDerDude]

Webdesign Workflow

[Morgo]

Es kommt auch immer ganz auf das Budget des Projektes an und darauf, was bereits angeliefert wird...aber stark zusammengefasst sieht ein optimaler Workflow bei mir ungefähr so aus:

1. strategische Ziele definieren (lassen)
Fragestellung: Was soll überhaupt mit dem Projekt erreicht werden?

2. Mittel auswählen
Fragestellung: Wie erreicht man diese Ziele?

3. Inhalt, Elemente und deren Gewichtung definieren (ggf. funktionales Wireframe/"Mock-up")
Fragestellung: Was muss alles dargestellt werden, und mit welcher Priorität?

4. Scribbeln, Ideenfindung, Stilauswahl, Bildrecherche, Farbauswahl, Ideen zur Typographie

5. Grid (!!!), grobes Layout-Wireframe (SW)

6. Feines Layout-Wireframe (SW)

7. Ausgestaltung des Entwurfs (Grafiken, Farben, ...)

8. 5,6 und 7 Wiederholen für verschiedene Darstellungen der Seite: Startseite, Inhalte, Übersichtsseiten, Teaser etc pp.

9. Review, Abstimmung, Review, Abstimmung, Review, Abstimmung, Review, Abstimmung [...]

10. Umsetzung


Wobei natürlich in der Praxis die Reihenfolge immer etwas anders abläuft..

[sahnemuh]

Bei uns normalerweise so:
- "Ist" Analyse, Wettbewerbsanalyse, Kundenmeinung einholen, In Gesprächen mit dem Kunden eruieren was eigentlich erreicht werden soll (sofern er es denn weiß)
- Ggf. Marktforschung, Nutzerbefragung, Analyse der Tracking-Daten (falls vorhanden)
- Entwicklung einer Leitidee auf Basis der Auswertung der oben gewonnenen Erkentnisse
- Entwicklung eines Grobkonzeptes: Was soll die Seite leisten, was ist die "Leitidee", welche Informationen soll die Seite transportieren
- Abstimmung des Grobkonzepts mit dem Kunden
- Erstellen eines Feinkonzeptes: Inhaltliche Konzeption der Website. Dafür z.B. Personas definieren (also "Beispielnutzer"), deren Ansprüche u.a. an die Webseite die Ausgangsbasis für die Navigationsstruktur und die Gewichtung/Tonalität der Inhalte liefern.
- Anfertigen von Wireframes auf Basis der inhaltlichen Struktur
- Abstimmung des Feinkonzepts mit dem Kunden
- Anfertigen von Entwürfen auf Basis der Wireframes. Ggf. Mockups für Prozesse (Formularwizards) und Rich Interfaces um die UX zu testen. Dabei richtet sich das Layout nach den Anforderungen des Nutzers und der Struktur der zu vermittelnden Inhalte, sowie dem CD des Kunden.
- Abstimmung der Entwürfe mit dem Kunden
- Ggf. Tests der Entwürfe bei Marktforschung (Eye-Tracking, Nutzerbefragungen, Aufmerksamkeitstests etc.)
- Abstimmung der Ergebnisse mit dem Kunden, Ggf. Anpassungen
- Produktion (bei uns: Meist erst HTML/CSS/JS, dann Dynamisierung)
- interne und externe Beta-Tests
- Bugfixing und Modifikationsschleifen
- Livegang

Alles in allem: Fragen, fragen, analysieren, analysieren, konzipieren und noch mehr konzipieren.
Die Gestaltung vom Inhalt der Webseite abhängig machen (Form follows function!).
Welches Raster benutzt wird und ob die Buttons rot, grün oder lila sind ist in den meisten Fällen weniger entscheidend als das die Nutzerführung gut ist.
Wenn's dir hilft schau bei einer der 298383 "Beautiful CSS Site Galeries". Letztenendes soll das Layout aber nach dem Kunden und nicht nach dir aussehen (sofern du nicht der Ober-Style Guru mit internationalem Ansehen bist auf das der Kunde gerne setzen möchte). "Trends" sind da zumeist nur bedingt angebracht, da sich das Layout quasi von selbst aus dem CD und der Struktur ergibt. Wenn man die Handwerklichen Dinge beherrscht (ein Tischler sollte sich mit Holz auskennen und wir mit Rastern, Farben und Blickführung) sollten sich da eigentlich kaum Fragen ergeben (mal abgesehen von mache ich die Linie jetzt 3 oder 4 Pixel dick und ist der Button plastisch genug oder kann da noch ein wenig mehr Kontrast rein).