Der Entwurf sieht auf 1440 Pixeln fertig aus. Dann kommt eine längere Überschrift, das Produkt ist nicht lieferbar und das Kontaktformular meldet einen Fehler. Für keinen dieser Fälle gibt es eine gestaltete Ansicht. Die Entwicklung muss nun Entscheidungen nachholen, die im statischen Entwurf nicht sichtbar waren.

Ergänze in Figma die fehlenden Zustände und notiere die Regeln dazu: Was rückt bei wenig Platz untereinander? Wie sieht ein ausverkauftes Produkt aus? Welche Eingaben bleiben nach einem Fehler erhalten? Repräsentative Ansichten mit diesen Angaben reichen weiter als ein Entwurf für jede Bildschirmbreite.

Seitentypen zählen statt Screenshots

Eine Startseite, eine Angebotsübersicht und eine Angebotsdetailseite sind drei unterschiedliche Seitentypen. Zwanzig Angebote auf derselben Vorlage sind dagegen nicht automatisch zwanzig neue Layouts. Beschreibe die wiederkehrenden Abschnitte und zeige, welche Inhalte variieren.

Für die Übergabe helfen echte Texte oder zumindest realistische Längen. „Lorem ipsum“ verrät nicht, ob eine deutsche Leistungsbezeichnung auf einem schmalen Bildschirm umbricht. Dasselbe gilt für Bilder: Ein Hochformat benötigt einen anderen Ausschnitt als ein breites Interfacebild. Lege fest, welche Details beim Zuschneiden erhalten bleiben müssen.

Fiktives Beispiel: Eine Fahrradwerkstatt zeigt Leistungen als Kacheln. „Inspektion“ passt überall. „Fehlersuche an elektronischen Schaltungen“ beansprucht mehrere Zeilen. Eine Probe mit beiden Titeln zeigt, ob Preise und Links weiterhin gut zusammenstehen. Die Lösung sollte für die Vorlage gelten, nicht nur für diese zwei Texte.

Zustände gemeinsam durchgehen

Nimm ein interaktives Element und beschreibe seinen vollständigen Ablauf. Bei einem Anfrageformular etwa: leer, teilweise ausgefüllt, ungültig, wird gesendet, gespeichert oder fehlgeschlagen. Was bleibt nach einem Fehler erhalten? Wohin gelangt der Tastaturfokus? Was liest eine Person mit Screenreader?

Schreibe Fehlermeldungen bereits in den Entwurf. Neben einem leeren E-Mail-Feld hilft „Bitte ergänze die E-Mail-Adresse“; bei einer fehlerhaften Adresse ist eine andere Meldung nötig. Die W3C-Hinweise zu Formularrückmeldungen erklären, wie sich diese Meldungen verständlich zuordnen lassen.

Kläre außerdem die Grenze zum Server. Die MDN-Dokumentation zur Formularvalidierung unterscheidet Eingabehilfen im Browser von der weiterhin nötigen Prüfung auf dem Server. Wenn das Backend fehlt, ist die sichtbare Bestätigungsseite noch kein Nachweis einer gespeicherten Anfrage.

Kleine Ansicht heißt nicht bloß kleinerer Text

Auf schmalen Bildschirmen ändern sich Reihenfolge und Platzbedarf. Welche Information soll vor dem Bild stehen? Wo bleibt die Suche erreichbar? Passt die wichtigste Aktion, ohne Inhalt zu verdecken? Vereinbare diese Entscheidungen an repräsentativen Ansichten.

Prüfe auch Zwischenbreiten und vergrößerte Schrift. Ein Layout kann bei 390 und 1440 Pixeln ordentlich aussehen und dazwischen trotzdem kollidieren. Für die Abnahme zählt die funktionierende Seite mit realen Inhalten. Ein pixelgenauer Vergleich eines einzelnen Screenshots deckt diese Fälle nicht ab.

Wenn Gestaltung und Inhalte vorliegen, passt Website & Landingpage entwickeln. Für Änderungen an vorhandenen Produktseiten gibt es Shop-Oberfläche anpassen. Bei einer Web-App mit Datenzuständen ist Web-App-Oberfläche entwickeln gesondert beschrieben.

Gib offene Fragen mit der Figma-Datei weiter und benenne, wer sie beantwortet. Markiere entschiedene Ansichten als freigegeben, damit die Entwicklung nicht versehentlich einen älteren Zwischenstand übernimmt.