Projektrahmenbedingungen
- Rahmenbedingungen des Projektes festlegen
- Ablauf dem Kunden erklären (wie sich Design und technische Umsetzung entwickelt)
- Entscheider auf Kundenseite festlegen- wer nimmt später die einzelnen Schritte ab
- Breakpoints festlegen
- Designaspekte besprechen: Gibt es optische Vorgaben, Moodboard vorhanden?
- Wichtig! Kunde muss liefern (Inhalte, Feedback)
Konzeption/Content Strategie
NEU und MODERN ein absolutes MUSS: Content first!
- Inhalts-Inventur durchführen!
- Wo müssen Inhalte erstellt werden?
- Ziele der Website, Unternehmensziele, Erwartungen und Bedürfnisse der Zielgruppe und deren Nutzungsverhalten müssen berücksichtigt werden
- Aufgrund der „Inventur ergeben sich Seiten-Strukturen, so dass die Navigation festgelegt werden kann (Mobil First nicht vergessen)
Wireframes (die Content Choreographie)
- aufgrund der Inhaltsanalyse können Wireframes erstellt werden, die einzelnen Seiten werden herausgearbeitet (Grundlage für die Umsetzung
- Hier geht es nur um die Positionierung der Inhalte – jeweils mit den Breakpoints erstellen
Prototyp – Umsetzung
- Nach den Wireframes kann der erste interaktive Inhalt erstellt werden
- Struktur, Flexibilität und Funktionalität der Website verdeutlichen
- Gestaltung ist noch nicht vorhanden, aber es kann an der Semantik Struktur und Funktionen Korrekturen vorgenommen werden.
Design & Look
- Merke: es wird nicht ein vollständiges ausgearbeitetes Design entworfen! Es werden nach und nach einzelnde Elemente ausgewählt und gestaltet.
- Moodboards oder Stylescapes einsetzen (dienen dazu, die optische Richtung und gewünschte Wirkung zu visualisieren)
Stylescapes sind konkreter als Moodboard, diese enthalten alle relefanten Elemente wie Typo, Icons, Farben, Bilder Buttons etc) - Stilrichtung mit dem Kunden parallel besprechen und entwickeln
- Erst dann wird es auf den Prototypen übertragen.
Testen & besprechen
- Prototyp kann jetzt vom Designer und Entwickler ausgearbeitet werden. Auf verschiedenen Browsern und Geräten testen und optimieren.
- Prüfungskriterien:
Inhalte, Design, techn. Funktionalität, Verhalten interaktiver Elemente - mit dem Kunden werden Zwischenschritte und nach und nach alle Komponenten besprochen und erarbeitet.
Kommunikation = entscheidender Erfolgsfaktor
- Es geht darum grundsätzlich keine vollständigen Seiten zu designen, sondern die Komponenten, einzelne Module, da die Website aus vielen verschiedenen Kompenenten besteht, die zusammen das Design bilden:
Navigation, Inhaltsfelder, Slider, Buttons, Formulare usw…
Vorteil Kunde:
Kunde kann Zwischenstände ansehen, testen und bewerten, muss nicht am Ende „eine große Seite“ abnehmen. (iterative Prozess) Dies verhindert, dass evtl. zu lange in eine falsche Richtung entwickelt wird.
= effiziente Abstimmung und Kommunikation = Erfolgsfaktor
Abnahme und Launch
Nach der Abnahme durch den Auftgraggeber erfolgt ggf. Einpflegung in das Frontend Gerüst oder Content Management System und die Onlinestellung.
Kurz noch zu responsive Strategien
- Graceful Degradation (Desktop first)
Es wird zuerst von einem großen Bildschirm ausgehend entwickeln, nach und nach für kleinere Auflösungen optimiert, inhaltlich und funktionstechnisch entsprechend angepasst (abgespeckt“ - Progressive Enhancement (Mobile first)
zuerst wird mit kleinen Auflösungen und einem „schwachen“ System angefangen. Schrittweise dann auf große Systeme erweitert.
>>dieses Vorgehen ist eigentlich zeitgemäßer, hier stehen die Inhalte von Anfang an im Vordergrund - ich bevorzuge trotzdem Desktop first, unter Einbeziehung von Content first
Fazit:
>Anforderungen an die Projektbeteiligten steigen
>Kunde muss flexibler werden
>Design und Code sollten parallel entwickelt werden.
Design, Funktionen und Struktur folgend den Anforderungen des Inhalts