Ein Entwurfswerkzeug ersetzt keine Gestaltungsentscheidung, aber es macht Varianten billig und Abstimmung möglich. Der eigentliche Unterschied zwischen einem nützlichen und einem nutzlosen Entwurf liegt nicht am Werkzeug, sondern daran, was der Entwurf abdeckt.
Was ein Entwurf abdecken muss
Ein Entwurf, der nur den Idealfall zeigt, verschiebt Arbeit in die Umsetzung. Nötig sind:
Mindestens drei Breiten. Klein, mittel, groß. Besser vier, weil die Zwischenbreiten die sind, in denen Layouts brechen und für die niemand entwirft.
Alle Zustände interaktiver Elemente. Ruhe, Überfahren, Fokus, Aktiv, Deaktiviert. Der Fokuszustand fehlt in den meisten Entwürfen, und genau deshalb fehlt er später auf der Seite. Siehe Tastaturbedienung.
Leer- und Fehlerzustände. Eine Liste ohne Einträge, ein Formular mit Fehlermeldung, eine Suche ohne Ergebnis. Diese Zustände kommen im Betrieb vor und sind nirgends entworfen.
Realistische Textlängen. Nicht Blindtext gleicher Länge, sondern echte Titel in echter Länge. Deutsche Texte sind im Schnitt länger als englische, und Komposita brechen Layouts.
Echte Bilder in echten Formaten. Ein hochformatiges Foto in einem Layout, das für Querformat entworfen wurde, ist ein Problem, das im Entwurf nicht sichtbar wird.
Ein Abstands- und Farbsystem, nicht Einzelwerte. Wenn im Entwurf Abstände von 27 und 53 Pixel vorkommen, entsteht in der Umsetzung Unruhe. Siehe Layout und Raster.
Geprüfte Kontraste. Farben, die im Entwurf gut aussehen und die Kontrastanforderungen verletzen, werden in der Umsetzung entweder falsch übernommen oder müssen neu entschieden werden. Siehe Kontraste prüfen.
Werkzeugkategorien
Browserbasierte Oberflächenwerkzeuge. Der Standard für Webprojekte. Sie kennen Komponenten mit Varianten, Zustände, Rasterlayouts, geteilte Bibliotheken und Zusammenarbeit im Team. Kostenlose Stufen reichen für Einzelpersonen fast immer.
Klassische Vektorprogramme. Brauchbar für Illustrationen, Logos und Icons, für Layoutentwürfe von Websites weniger geeignet, weil sie keine Komponenten mit Zuständen verwalten.
Bildbearbeitungsprogramme. Nicht geeignet für Layoutentwürfe. Sie verwalten Pixelflächen und kennen keine wiederverwendbaren Bausteine. Für die Bildvorbereitung dagegen richtig, siehe Bildbearbeitung.
Der Browser selbst. Bei kleinen Projekten oft der schnellste Weg: Man arbeitet mit echten Textlängen, echten Zwischenbreiten und echten Zuständen. Varianten sind teurer zu erzeugen, aber das Ergebnis ist von Anfang an real.
Papier. Für die erste Struktur unterschätzt. Ein Blatt mit der Seitenliste und der Reihenfolge der Abschnitte pro Seite klärt mehr als drei Stunden im Entwurfswerkzeug.
Wann sich ein Entwurf lohnt
Lohnt:
- Mehrere Personen müssen abstimmen und freigeben
- Ein eigenes Gestaltungsraster entsteht
- Mehrere Seitentypen mit gemeinsamen Bausteinen
- Die Umsetzung macht jemand anders als die Gestaltung
- Varianten sollen verglichen werden
Lohnt nicht:
- Fünf Seiten in einem Baukasten mit Vorlage
- Eine Landingpage, die in zwei Stunden im Browser steht
- Ein Theme, das ohnehin die Struktur vorgibt
Im zweiten Fall ist ein Entwurf reine Zusatzarbeit: Es wird zweimal gestaltet, einmal im Werkzeug und einmal im echten System, und die beiden Ergebnisse weichen voneinander ab.
Übergabe an die Umsetzung
Was gebraucht wird, damit eine Umsetzung ohne Rückfragen möglich ist:
- Abstandsreihe und Rastermaße
- Farbwerte mit Rollen und geprüften Kontrastkombinationen
- Schriftfamilien, Schnitte, Größen, Zeilenhöhen
- Zustände jedes interaktiven Elements
- Verhalten je Breite, insbesondere was umbricht und was ausgeblendet wird
- Bildmaße und Seitenverhältnisse
- Leer- und Fehlerzustände
- Alternativtexte für informative Bilder
Punkt 8 wird nie im Entwurf notiert und dann in der Umsetzung erfunden oder vergessen. Wer sie im Entwurf mitschreibt, bekommt bessere Alternativtexte, weil die Person, die das Bild ausgewählt hat, am besten weiß, was es aussagen soll.