Screendesign: was dahintersteckt und woran du gutes erkennst

Was ist Screendesign?

Screendesign ist die Gestaltung von Oberflächen, die auf einem Bildschirm bedient werden: Websites, Apps, Software, Automaten. Es legt fest, wie Layout, Typografie, Farbe, Bilder und Bedienelemente zusammenwirken, und wie jedes Element in seinen Zuständen aussieht: im Ruhezustand, unter der Maus, im Tastaturfokus, während des Ladens und im Fehlerfall.

Der Unterschied zum Print liegt im Format. Ein Plakat hat eine Größe, ein Bildschirm hat sie nicht. Dieselbe Seite läuft auf einem 27-Zoll-Monitor, auf einem Telefon mit 360 Pixeln Breite, bei einer Systemschriftgröße von 200 Prozent und im dunklen Farbmodus. Screendesign entwirft deshalb keine festen Bilder, sondern Regeln, aus denen sich das Bild auf jedem Gerät ergibt.

Der Begriff stammt aus der Zeit, in der Bildschirmseiten weitgehend statisch waren. In der Ausbildung zur Mediengestalterin und zum Mediengestalter Digital und Print ist er bis heute geläufig, ebenso in Ausschreibungen aus dem deutschsprachigen Raum. Im Berufsalltag hat ihn UI-Design abgelöst.

Wo Screendesign überall vorkommt

Überall dort, wo Menschen etwas über einen Bildschirm erledigen. Die Website ist davon nur der bekannteste Fall.

• Websites und Onlineshops
• Web-Anwendungen und Auswertungsansichten, in denen Leute täglich arbeiten
• Apps für Telefon und Tablet
• Kassen, Automaten und Terminals, die im Stehen und oft in Eile bedient werden
• Displays in Geräten und Fahrzeugen
• E-Mails, die in Dutzenden Programmen unterschiedlich dargestellt werden

Je öfter jemand eine Oberfläche benutzt, desto teurer wird jeder Reibungspunkt darin. Bei einer Kassenoberfläche, die tausendmal am Tag angefasst wird, zahlt sich eine gut gesetzte Schaltfläche anders aus als auf einer Kontaktseite.

Screendesign, UI-Design und Webdesign: was ist was

Die Begriffe überschneiden sich, gemeint sind aber unterschiedlich große Ausschnitte derselben Arbeit.

Ich nenne meine Arbeit UI-Design, weil der Anteil an Zuständen und Komponenten heute den Ausschlag gibt. Wenn jemand nach Screendesign fragt, meint er in aller Regel dasselbe.

Screendesign und User Experience

UX klärt, welche Schritte es gibt und in welcher Reihenfolge sie kommen. Screendesign klärt, wie diese Schritte auf dem Bildschirm aussehen und sich anfühlen. Beides greift ineinander, ersetzt sich aber nicht: wenn drei Felder in einem Formular überflüssig sind, hilft es niemandem, sie schön zu machen. Umgekehrt scheitert ein sauber gedachter Ablauf an einer Schaltfläche, die keiner findet.

In kleinen Projekten macht dieselbe Person beides. Ab einer gewissen Größe trennen sich die Rollen, und dann ist die Übergabe zwischen ihnen die kritische Stelle.

Warum Screendesign im Webdesign-Prozess wichtig ist

Weil hier die Entscheidungen fallen, die später am teuersten zu korrigieren sind. Das Screendesign legt die Struktur der Seite fest, die Bedienlogik, die Schriftgrößen und die Farbkontraste. Alles davon steckt danach in jedem Template und in jeder Komponente.

Die Reihenfolge auf dem Bildschirm ist eine Gestaltungsentscheidung. Wer sie dem Zufall überlässt, bekommt Seiten, auf denen die wichtigste Aussage unter drei gleich lauten Kacheln liegt. Farbe, Schrift und Bildsprache wiederum transportieren Haltung, bevor jemand ein Wort gelesen hat, und wer sie später austauschen will, fasst die halbe Oberfläche an.

Am teuersten wird die Barrierefreiheit. Kontraste, Klickflächen und Fokuszustände entstehen im Entwurf. Seit Juni 2025 verlangt das BarrierefreiheitsstärkungsgesetzDeutsches Gesetz, das seit Juni 2025 von vielen Anbietern barrierefreie digitale Angebote verlangt. von vielen Anbietern barrierefreie digitale Angebote. Wer das erst nach dem Launch prüft, baut zweimal.

Woran du gutes Screendesign erkennst

Gutes Screendesign führt den Blick, hält die Bedienung erreichbar und bleibt in sich stimmig. Die fünf Merkmale unten kannst du an jedem Entwurf nachprüfen, auch ohne Designausbildung.

1. Hierarchie. Auf jedem Screen ist genau eine Sache die größte. Überschrift, Fließtext und Beiwerk unterscheiden sich deutlich in Größe, Gewicht und Farbe. Wo alles gleich laut ist, führt nichts.
2. Kontrast. Fließtext braucht mindestens 4,5:1 gegen seinen Hintergrund, große Schrift ab 24 Pixel (fett ab 18,7 Pixel) mindestens 3:1. Das ist Erfolgskriterium 1.4.3 der WCAG 2.2 (öffnet in neuem Tab).
3. Abstand. Was zusammengehört, steht enger beieinander als das, was nicht dazugehört. Gruppen entstehen über den Weißraum, bevor ein Rahmen nötig wird.
4. Sichtbarer Fokus. Wer per Tastatur bedient, muss jederzeit sehen, wo er gerade steht. Der Fokusrahmen ist ein Erfolgskriterium der WCAG (2.4.7) und gehört in den Entwurf, weil er sonst im CSS wegoptimiert wird.
5. Klickfläche. Ein Bedienelement misst mindestens 24 mal 24 Pixel (WCAG 2.2, Kriterium 2.5.8, Stufe AA). Bequem wird es ab 44 mal 44 Pixeln, dem Wert aus Apples Human Interface Guidelines (öffnet in neuem Tab).

Dazu kommt die Zeilenlänge: Fließtext liest sich am besten bei ungefähr 45 bis 75 Zeichen pro Zeile. Auf einem breiten Monitor heißt das, dass die Textspalte schmaler bleibt als das Fenster.

Konsistenz: gleiche Dinge sehen gleich aus

Konsistenz heißt, dass dieselbe Funktion überall dieselbe Form hat. Eine Schaltfläche, die auf der Startseite grün und rund ist, bleibt auf der Kontaktseite grün und rund. Das ist der Punkt, an dem eine Oberfläche vorhersagbar wird: Leute lernen die Regel einmal und wenden sie danach überall an.

Praktisch entsteht Konsistenz über wiederverwendbare Bausteine. Wer Schaltflächen, Formularfelder und Karten einmal als Komponente anlegt und daraus die Seiten baut, bekommt sie geschenkt. Ab einer gewissen Projektgröße wird daraus ein Design-SystemEin dokumentierter Baukasten aus wiederverwendbaren Komponenten und Regeln für Design und Code..

Konzeption im Screendesign: von der Struktur zum Entwurf

Die Konzeption ist der Teil vor der Gestaltung, in dem Inhalt und Struktur geklärt werden. Sie kostet wenig und spart viel, weil Änderungen an einer Skizze Minuten dauern und Änderungen an einem fertigen Entwurf Tage.

1. Ziel und Inhalt klären. Was soll auf dieser Seite passieren, für wen, und welche Inhalte gibt es dafür wirklich schon? Fehlender Text ist der häufigste Grund, warum Entwürfe später auseinanderfallen.
2. Struktur als WireframeEine schwarz-weiße Skizze einer Seite, die Struktur und Reihenfolge klärt, bevor Gestaltung dazukommt.. Schwarzweiße Skizzen ohne Farbe und ohne fertige Schrift. Solange nichts gestaltet ist, diskutieren alle über die Sache statt über Geschmack.
3. Zustände sammeln. Zu jedem Element gehören der leere Zustand, der Ladezustand, der Fehlerfall und der Erfolgsfall. Diese vier fehlen in Entwürfen am häufigsten und tauchen im Projekt garantiert auf.
4. Visuelles Design. Erst jetzt Farbe, Typografie, Bildsprache und Abstände, abgeleitet aus der Marke und geprüft gegen die Kontrastwerte.
5. PrototypEine klickbare Vorschau der Website, die vor der Programmierung zeigt, wie sich alles anfühlt. und Test. Verklickbare Fassung, mit der sich ein Ablauf durchspielen lässt. Fünf Leute aus der Zielgruppe reichen, um die groben Stolperstellen zu finden.
6. Übergabe. Komponenten, Abstände, Farbwerte und Schriftgrößen dokumentiert, damit die Umsetzung nichts raten muss.

Diese Reihenfolge ist der Grund, warum ich in der Konzeptionsphase keine Farbdiskussion führe. Sie kommt in Schritt vier, und dann geht sie schnell.

Womit Screendesign gemacht wird

Der Standard im Markt ist Figma, weil es im Browser läuft und mehrere Leute gleichzeitig an einer Datei arbeiten können. Daneben stehen Sketch als macOS-Anwendung und Penpot als quelloffene Alternative, die sich auf eigenen Servern betreiben lässt. Ich arbeite in Figma.

Vorlagen und fertige UI-Kits nehmen dir die Struktur ab und taugen als Ausgangspunkt für Standardfälle wie Anmeldeformulare oder Auswertungsansichten. Deine Marke bleibt trotzdem deine Arbeit: eine Vorlage sieht aus wie tausend andere Projekte, die dieselbe Vorlage benutzt haben.

Screendesign für Websites: was der Browser erzwingt

Im Browser gibt es keine feste Seitengröße und keine Kontrolle über die Umgebung. Der Entwurf muss deshalb mit Bedingungen rechnen, die auf dem Bildschirm des Designstudios nie auftreten.

Die Breite liegt irgendwo zwischen 320 und über 2000 Pixeln. Ich entwerfe deshalb zuerst die schmale Fassung, weil dort die Frage nach der Wichtigkeit am schärfsten gestellt wird. Dazu kommen Einstellungen, über die allein die Nutzenden bestimmen: vergrößerte Schrift, dunkler Farbmodus, reduzierte Bewegung. Ein Entwurf, der nur bei Standardwerten funktioniert, ist unfertig.

Und der Text wächst. Eine Überschrift, die im Entwurf zwei Zeilen braucht, füllt auf dem Telefon vier, und aus dem Englischen übersetzte Inhalte sind im Deutschen oft ein Drittel länger.

Screendesign und Ladezeit

Jede Gestaltungsentscheidung hat einen Preis in Kilobyte. Ein bildschirmfüllendes Foto über der Überschrift, drei eingebundene Schriftschnitte und ein automatisch laufendes Karussell kosten zusammen leicht ein Megabyte, und das trifft zuerst die Leute mit schlechter Verbindung. Der Richtwert der Core Web VitalsDrei Messwerte von Google für die gefühlte Qualität einer Seite: LCP, CLS und INP. für den Ladezeitpunkt des größten sichtbaren Elements liegt bei 2,5 Sekunden.

Das lässt sich im Entwurf steuern. Auf dieser Website habe ich die Achse für optische Größe aus der Überschriftenschrift entfernt und die Datei damit von 65,7 auf 34,5 Kilobyte gebracht, ohne sichtbaren Unterschied im Satzbild. Beim Nachladen springt außerdem der Text, wenn die Ersatzschrift breitere Zeichen hat: Layout Shift durch Schriften zeigt, wie du den Sprung misst und wegkalibrierst.

Screendesign und SEO

Screendesign ist kein Rankingfaktor. Google bewertet keine Ästhetik, und Kennzahlen wie Verweildauer oder Absprungrate fließen nicht in das Ranking ein. Was aus dem Entwurf heraus tatsächlich auf die Sichtbarkeit wirkt, sind vier handfeste Dinge:

• Die Überschriftenhierarchie, wenn sie aus der Gestaltung folgt und nicht aus der Schriftgröße geraten wird
• Die Ladezeit, weil die Core Web Vitals messbar in die Bewertung eingehen
• Die Bedienbarkeit auf dem Telefon, weil Google die mobile Fassung indexiert
• Text, der als Text vorliegt, statt als Schrift in einer Bilddatei

Screendesign und KI: was du an einem generierten Entwurf prüfst

KI-Werkzeuge liefern in Sekunden vollständige Bildschirmentwürfe. Als Ausgangspunkt für Varianten ist das nützlich, und ich benutze es selbst für schnelle Richtungsskizzen. Vor der Umsetzung lohnt sich aber ein fester Prüfgang, weil generierte Entwürfe an immer denselben Stellen dünn sind.

1. Kontraste nachmessen. Helle Grautöne auf Weiß sehen im Entwurf ruhig aus und reißen die 4,5:1 regelmäßig.
2. Zustände suchen. Fokus, Fehler, leer und ladend fehlen fast immer. Wer sie im Entwurf ausspart, verschiebt die Arbeit in die Umsetzung.
3. Texte lesen. Platzhaltertexte in Entwürfen sind kurz, gleich lang und immer perfekt. Deine echten Inhalte sind es nicht.
4. Zielgruppe abgleichen. Generierte Oberflächen sehen aus wie der Durchschnitt ihres Trainingsmaterials, also jung, hell und technikaffin. Wenn deine Kundschaft 65 ist, passt das nicht.
5. Herkunft klären. Bei Bildern und Symbolen aus generativen Werkzeugen ist die Rechtelage ein eigenes Thema, das vor dem Launch geklärt gehört.