Screen Design ist die Gestaltung einzelner Bildschirmansichten: Layout, Typografie, Farbe, Bildeinsatz und die Zustände der Bedienelemente. Der Begriff kommt aus der deutschen Agenturpraxis und benennt dort den gestalterischen Teil der Arbeit an einer Oberfläche, angesiedelt zwischen Konzeption und Umsetzung. Englischsprachig heißt derselbe Schritt meist UI Design.
- Screen Design
Die Gestaltung einzelner Bildschirmansichten: Layout, Typografie, Farbe und Zustände der Bedienelemente.
Beispiel: „Das Screen Design für die Startseite steht, jetzt fehlen die Ansichten für Tablet und Telefon.“Auch: Screendesign, in einem Wort geschrieben. Beide Schreibweisen sind gebräuchlich.
Abgrenzung zum Grafikdesign: Screen Design gestaltet eine Ansicht, die auf Eingaben reagiert und ihre Breite wechselt. Grafikdesign gestaltet ein Ergebnis, dessen Format feststeht.
Was im Screen Design entschieden wird
Screen Design beantwortet, wie eine Ansicht aussieht, wenn sie fertig ist. Dazu gehört das Raster, in dem die Inhalte liegen, die Schriftgrößen für jede Ebene, der Umgang mit Farbe und Kontrast, die Behandlung von Bildern und die Frage, wie sich das Ganze bei 1400 und bei 375 Pixeln Breite verhält.
Die Arbeit endet nicht bei der Hauptansicht. Zu jedem Entwurf gehören die Ansicht ohne Inhalt, die Ansicht während des Ladens und die Ansicht mit einem Fehler. Wer sie ausspart, verlagert die Entscheidung in die Entwicklung, und dort wird sie unter Zeitdruck getroffen.
Die Grenze zu Benutzeroberfläche und Grafikdesign
Die Benutzeroberfläche ist das Ergebnis, Screen Design der Weg dorthin: derselbe Gegenstand, einmal als Sache und einmal als Tätigkeit benannt. Zum Grafikdesign liegt die Grenze beim Verhalten. Ein Plakat ist fertig, sobald es gedruckt ist. Eine Bildschirmansicht muss jede Breite, jeden Zustand und jede Textlänge überstehen, die später im CMS eingetragen wird. Webdesign ist der Oberbegriff darüber und meint Konzeption, Gestaltung, Text und Technik zusammen.
Wie Screen Design im Projekt abläuft
Vor dem Screen Design steht das Wireframe, das Anordnung und Reihenfolge ohne Gestaltung klärt. Wir gestalten danach zuerst zwei bis drei Ansichten vollständig aus, darunter eine mit viel und eine mit wenig Inhalt, weil sich an diesen beiden fast alle Regeln ablesen lassen. Der Rest entsteht schneller, weil Schriftgrößen, Abstände und Farben dann entschieden sind, und wandert häufig direkt in ein UI-Kit.