Der Webdesign-Prozess, Schritt für Schritt
Webdesign ist nicht der Teil, in dem jemand Farben aussucht. Es ist eine Abfolge von Entscheidungen, die sich von „wofür ist diese Website“ bis auf „dieser Button, diese Größe, diese Beschriftung“ verengt, und jeder Schritt ist billiger zu ändern als der darauffolgende.
Dieser Leitfaden behandelt die Phasen der Reihe nach, was jede hervorbringt, und die zwei Punkte, an denen Designprojekte zuverlässig steckenbleiben.
Discovery: was das Design erreichen muss#
Vor allem Visuellen braucht die Designerin dasselbe wie die Entwicklung: das primäre Ziel, die Zielgruppe, die Seitenstruktur und die Randbedingungen. Fängt sie ohne diese an, bekommen Sie ein Design, das im Portfolio gut aussieht und scheitert, sobald echte Inhalte eintreffen.
Diese Phase erzeugt Einigkeit, keine Artefakte. Eine einseitige Zusammenfassung, die beide Seiten akzeptieren, genügt.
- Die eine Handlung, die die Website antreiben muss, und wie sie gemessen wird.
- Zwei oder drei Besuchergruppen und die Frage, mit der jede ankommt.
- Markenvorgaben, die wirklich existieren: Logo, Farben, Schriften, Tonalität.
- Technische Randbedingungen: das CMS, die Plattform, die Geräte, auf die es tatsächlich ankommt.
- Beispiele für Websites, die dem Kunden gefallen — und, nützlicher, warum.
Struktur und Wireframes#
Wireframes klären Anordnung und Hierarchie ohne die Farbdiskussion. Sie beantworten, was auf jedem Template steht, in welcher Reihenfolge und was der Besucher tun soll — solange Änderungen noch Minuten kosten.
Wireframen Sie die Templates, nicht jede Seite. Die meisten Websites haben vier bis acht verschiedene Templates und dutzende daraus gebaute Seiten.
| Template | Beantwortet die Frage | Hauptaktion |
|---|---|---|
| Startseite | Was ist das und ist es für mich? | In den richtigen Bereich gehen |
| Bereichs-Hub | Was steckt hier drin? | Einen Eintrag wählen |
| Artikel / Detail | Die eigentliche Antwort | Lesen, dann den nächsten Schritt gehen |
| Produkt | Ist es das Richtige und was kostet es? | In den Warenkorb legen |
| Kontakt / Formular | Wie fange ich an? | Absenden |
| Suchergebnisse | Gefunden? | Ergebnis öffnen oder verfeinern |
Wireframen Sie mit realistischen Textlängen. Ein Layout, das um eine Sechs-Wort-Überschrift gebaut ist, bricht in dem Moment, in dem eine echte vierzehn Wörter lang wird.
Visuelles Design und das Designsystem#
Visuelles Design überträgt die Marke auf die Wireframes: Typo-Skala, Farbe, Abstände, Zustände und Komponenten. Bei allem, was größer als eine Broschürenseite ist, lohnt sich ein kleines System — ein Satz Komponenten mit definierten Zuständen — statt einer Sammlung unverbundener Seitenbilder.
Der Grund ist nicht Ordnungsliebe. Ein System sagt der Entwicklung, was in den Fällen passiert, die die Mockups nicht zeigen, und diese Fälle sind der Großteil der Website.
- Eine Typo- und eine Abstandsskala, damit keine Zahl ein Einzelfall ist.
- Farb-Tokens, deren Kontrast gegen die tatsächlichen Hintergründe geprüft ist.
- Komponentenzustände: Standard, Hover, Fokus, Aktiv, Deaktiviert, Ladend, Fehler, Leer.
- Responsives Verhalten je Komponente, nicht nur eine Mobilversion der Startseite.
- Was bei zu viel Inhalt passiert und was bei keinem.
Wo Designprojekte steckenbleiben#
Zwei Fehler verursachen den Großteil der Verzögerung, und beide sind Prozessprobleme, keine Geschmacksfragen.
- Feedback ohne Verantwortlichen. Sechs Leute kommentieren, zwei widersprechen sich, und die Designerin soll schlichten. Benennen Sie eine Person, die Feedback bündelt und entscheidet.
- Inhalt, der nicht existiert. Designs werden gegen Platzhaltertext freigegeben, dann kommt der echte Text doppelt so lang und das Layout wird neu gemacht. Gestalten Sie mit echtem Inhalt, auch mit grobem echtem Inhalt.
- Unbegrenzte Korrekturrunden. Legen Sie die Zahl vorab fest — meist zwei oder drei — und was eine weitere Runde kostet. Ohne Grenze treiben Projekte, statt fertig zu werden.
- Freigabe, die keine ist. „Sieht gut aus“ in einem Meeting ist keine Freigabe. Holen Sie sie schriftlich ein, je Template, mit Datum.
Die nützlichste Frage in einer Abnahme ist nicht „gefällt es Ihnen“, sondern „hilft das dem Besucher bei dem, wofür die Website vereinbart wurde“. Geschmacksdiskussionen enden nie; Zieldiskussionen schon.
Häufige Fragen
Mit wie vielen Korrekturrunden sollte ich rechnen?
Zwei oder drei sind bei einem Template-Projekt üblich. Wichtiger als die Zahl ist, dass sie schriftlich vereinbart ist, zusammen mit den Kosten einer weiteren Runde. Unbegrenzte Korrekturen klingen großzügig und bedeuten in der Praxis, dass das Projekt nie zu einer Entscheidung kommt, weil nichts zum Festlegen zwingt.
Sollten Design und Entwicklung dieselbe Person oder dasselbe Team sein?
Bei kleinen Projekten ist eine Person für beides effizient und spart eine Übergabe. Bei größeren sind es wirklich verschiedene Fähigkeiten, und die Trennung liefert meist bessere Arbeit — vorausgesetzt, das Design liefert ein System mit Zuständen und Responsive-Regeln statt einer Bildersammlung. Das Risiko liegt in der Übergabe, nicht in der Trennung.
Brauche ich ein fertiges Design, bevor die Entwicklung beginnt?
Sie brauchen die Templates gestaltet, nicht jede Seite. Die Entwicklung kann starten, sobald das Designsystem und die zwei oder drei komplexesten Templates stehen; der Rest kann während der Umsetzung fertig werden. Ohne irgendetwas Geklärtes zu starten bedeutet Nacharbeit, und jede letzte Seite vor der ersten Codezeile fertigzustellen bedeutet, Leerlauf zu bezahlen.
Welche Ergebnisse sollte ich am Ende bekommen?
Bearbeitbare Quelldateien für jedes Template und jede Komponente, eine dokumentierte Typo- und Farbskala, exportierte Assets in den Formaten, die die Umsetzung braucht, und die schriftlich festgehaltenen Responsive-Regeln. Fragen Sie vor Beginn, ob Sie die Quelldateien erhalten oder nur Exporte — der Unterschied zählt beim ersten Mal, wenn Sie eine Kleinigkeit ohne die ursprüngliche Designerin ändern müssen.
webdesign prozesswebsite design ablaufwireframesdesignsystemwebsite mockupswebdesign workflow
