Aktualisiert am 10. Oktober 2026 von Nicolas Finet, CEO von Sortlist. Neu sind die seit 2025 geltenden Anforderungen des Barrierefreiheitsstärkungsgesetzes, aktuelle UX-Kennzahlen und KI-gestützte Designwerkzeuge. Der Schwerpunkt liegt auf einem Screendesign, das Orientierung, Verständlichkeit und messbare Nutzungserlebnisse auf kleinen wie großen Bildschirmen verbindet.
Das Wichtigste in Kürze
- Ein gutes Screendesign führt Nutzer mit klarer Navigation, verständlichen Inhalten und einer sichtbaren Hierarchie zur nächsten Handlung.
- Seit dem 28. Juni 2025 müssen vom BFSG erfasste digitale Dienstleistungen barrierefrei gestaltet sein; Barrierefreiheit gehört deshalb bereits in Wireframes und Komponenten.
- Bewerten Sie Entwürfe nicht nur optisch, sondern mit Nutzertests, responsiven Prüfungen und Kennzahlen wie LCP, INP und CLS.
Was sich beim Screendesign geändert hat
Das Screendesign ist weiterhin der sichtbare Teil einer Website oder Anwendung, umfasst aber längst mehr als Farben und Formen. Navigation und Orientierung sollten ineinandergreifen, Inhaltselemente aus Text, Bild, Grafik oder Animation schnell erfassbar bleiben und für kleinere Displays gezielt angepasst werden. Praktische Grundlagen dazu bieten unsere Beiträge über Responsive Webdesign, minimalistisches Webdesign und Farbkombinationen im Webdesign.
Seit der ursprünglichen Veröffentlichung dieses Artikels im September 2024 sind zwei Entwicklungen besonders relevant: Das deutsche Barrierefreiheitsstärkungsgesetz ist seit dem 28. Juni 2025 vollständig in Kraft, und Werkzeuge wie Figma Make oder Framer Wireframer erzeugen aus Anweisungen bereits interaktive beziehungsweise responsive Entwürfe. Ein generierter Entwurf ersetzt jedoch weder eine verständliche Informationsarchitektur noch Tests mit echten Nutzern.
Screendesign-Werkzeuge im Vergleich
Die Bewertung ist eine redaktionelle Sortlist-Einordnung für typische Screendesign-Aufgaben, Stand Oktober 2026; sie ist kein allgemeingültiger Produkttest.
| Werkzeug | Zentrale Funktionen | Geeignet für | Sortlist-Bewertung |
|---|---|---|---|
| Figma Design | Komponenten, Varianten, Designsysteme und kollaborative Prototypen | Produktteams mit regelmäßigem Design-Development-Handoff | Sehr gut für skalierbare Oberflächen und Zusammenarbeit |
| Figma Make | Prompt-zu-App, interaktive Prototypen, Import bestehender Bibliotheken und Backend-Anbindung | Schnelle, realitätsnahe Konzepttests | Sehr gut für Exploration; Ergebnisse müssen fachlich geprüft werden |
| Figma Sites | Responsive Webelemente, Interaktionen, Vorschau in HTML/CSS und Veröffentlichung | Landingpages, Portfolios und kampagnenbezogene Websites | Gut für designgetriebene Webprojekte mit überschaubarer Logik |
| Framer Wireframer | KI-generierte, responsive Seitenstrukturen, Bearbeitung im Canvas und direkte Veröffentlichung | Frühe Wireframes und kleinere Marketingseiten | Gut für schnelle Strukturvarianten; Marken- und UX-Details nachschärfen |
| Penpot | Open Source, Self-Hosting, Komponenten sowie Layouts auf Basis von CSS Flexbox und Grid | Teams mit offenen Standards oder eigener Infrastruktur | Sehr gut für entwicklungsnahe und selbst gehostete Workflows |
Vier Kennzahlen für die Qualitätsprüfung
- 28. Juni 2025: Seit diesem Datum gilt das BFSG vollständig. Für erfasste Dienstleistungen im elektronischen Geschäftsverkehr betrifft es nicht nur neue Websites. Die Bundesfachstelle Barrierefreiheit nennt insbesondere Online-Shops, Apps und Buchungssysteme.
- 9 zusätzliche Erfolgskriterien: Die am 5. Oktober 2023 veröffentlichte WCAG 2.2 ergänzt WCAG 2.1 unter anderem um Anforderungen an Fokus, Authentifizierung und Zeigerbedienung.
- 24 × 24 CSS-Pixel: Dies ist die Mindestgröße für Zeigerziele nach WCAG 2.2 auf Konformitätsstufe AA, sofern keine der dokumentierten Ausnahmen greift. Sichtbare Icons dürfen kleiner sein, wenn die aktive Fläche oder der Abstand die Anforderung erfüllt.
- LCP ≤ 2,5 Sekunden, INP ≤ 200 Millisekunden und CLS ≤ 0,1: Diese Schwellenwerte gelten laut web.dev am 75. Perzentil als „gut“. Sie messen Ladegeschwindigkeit, Reaktionsfähigkeit und visuelle Stabilität unter realen Nutzungsbedingungen.
Für vom BFSG erfasste Online-Angebote genügt es nicht, nur neue Unterseiten barrierefrei anzulegen. Die Bundesfachstelle empfiehlt, die gesamte Website mitzudenken und mindestens Navigation sowie kauf- oder buchungsrelevante Bereiche zugänglich zu gestalten.
Praxisempfehlung der Bundesfachstelle Barrierefreiheit, BFSG-Newsletter 1/2025
Checkliste für ein verständliches Screendesign
- Aufgabe definieren: Legen Sie pro Seitentyp fest, welche Hauptaufgabe Nutzer erledigen sollen und welche Information sie dafür benötigen.
- Hierarchie vor Dekoration: Ordnen Sie Überschrift, Inhalt und Handlungsoptionen zuerst als Wireframe. Negative Flächen können den Fokus verstärken, wenn sie bewusst statt nur dekorativ eingesetzt werden; Beispiele erläutert der Ratgeber von Sichtbarer Werden vom 18. Juni 2025.
- Navigation abgrenzen: Kennzeichnen Sie Hauptnavigation, aktuelle Position, Unterbereiche und interaktive Zustände visuell eindeutig.
- Responsive entwerfen: Prüfen Sie nicht nur verkleinerte Desktop-Layouts. Reihenfolge, Textlänge, Navigation und Interaktionsflächen müssen auf kleinen Bildschirmen separat funktionieren.
- Zustände dokumentieren: Ergänzen Sie Hover, Fokus, aktiv, deaktiviert, Fehler, Laden und Erfolg. So bleibt das Verhalten bei der Umsetzung nachvollziehbar.
- Mit Aufgaben testen: Lassen Sie Personen konkrete Kernaufgaben ausführen und protokollieren Sie Abbrüche, Fehlklicks und Verständnisfragen. Weitere Prüfpunkte finden Sie in den Webdesign Best Practices.
Mini-Tool: Screendesign-Prioritätscheck
Markieren Sie nur Kriterien, die im aktuellen Entwurf nachweislich erfüllt und getestet wurden. Die Gewichtung ist ein Priorisierungsmodell für interne Reviews und ersetzt weder einen Nutzertest noch eine rechtliche Barrierefreiheitsprüfung.
Häufige Fragen zu Screendesign und User Experience
Was ist der Unterschied zwischen Screendesign, UI und UX?
Screendesign beschreibt die konkrete visuelle Gestaltung digitaler Oberflächen. UI-Design umfasst zusätzlich Komponenten und Interaktionszustände; UX betrachtet das gesamte Nutzungserlebnis, einschließlich Struktur, Abläufen, Erwartungen und Ergebnissen.
Warum sollte Screendesign bereits barrierefrei geplant werden?
Kontraste, Fokusdarstellung, Zielgrößen, Lesereihenfolge und Fehlermeldungen sind Gestaltungsentscheidungen. Werden sie erst nach der Entwicklung geprüft, müssen Komponenten häufig aufwendiger angepasst werden.
Reicht ein responsives Layout für eine gute mobile UX?
Nein. Ein Layout kann technisch umbrechen und trotzdem schwer bedienbar sein. Prüfen Sie zusätzlich Inhaltsreihenfolge, Navigation, Textlänge, Formulare, Ladeverhalten und Touch-Ziele auf realen Geräten.
Können KI-Werkzeuge einen Screendesigner ersetzen?
KI-Werkzeuge können Wireframes, Varianten und interaktive Prototypen beschleunigen. Sie kennen jedoch nicht automatisch Ihre Nutzerforschung, Geschäftsregeln, Markenanforderungen oder rechtlichen Rahmenbedingungen; die fachliche Bewertung bleibt notwendig.
Wann sollte ein Screendesign mit Nutzern getestet werden?
Testen Sie zunächst den klickbaren Ablauf, bevor visuelle Details abgeschlossen sind, und wiederholen Sie den Test vor der Veröffentlichung mit einem realitätsnahen Prototyp. So lassen sich Strukturprobleme früher von rein visuellen Problemen trennen.
Wie finde ich Unterstützung für ein Screendesign-Projekt?
Beschreiben Sie Zielgruppe, wichtigste Aufgaben, vorhandenes Designsystem, technische Plattform und gewünschte Tests. Über Sortlist ein Screendesign-Projekt starten können Sie diese Anforderungen strukturiert an passende Spezialisten übermitteln.
Screendesign umfasst das grafische Layout und Design von Benutzeroberflächen bei unterschiedlichsten Displays. Dabei wird das Screendesign als eine Unterkategorie des User Interface Designs gewertet. Während das Interface Design die Funktionalität liefert, bringt das Screendesign die Funktion in eine optimale Form. Die Anwendungsgebiete sind vielfältig und beschränken sich nicht nur auf die Darstellung von Webseiten.
Benutzerfreundlichkeit und User Experience stehen im Vordergrund bei der Entwicklung von Screendesigns. Hierbei muss die Zielgruppe bedacht werden, der Anwendungsbereich definiert und auf Effizienz geachtet werden. Je nach Verwendungszweck und Absicht tritt bei manchen Projekten das Screendesign oder das Interface Design in den Vordergrund. Zu denken, dass Screendesign nur einen dekorativen Aspekt verfolgt, ist weit gefehlt. Mit der richtigen gestalterischen Umsetzung kann die Funktionalität und Usability der Anwendung unterstützt werden. Wie Ihnen ein gutes Screendesign gerade im Webbereich gelingt, erklären wir in diesem Artikel.
Einsatzgebiete für Screendesign
Screendesign kommt nicht nur bei Apps und Websites zum Tragen. Es gibt viele unterschiedliche Anwendungsbereiche, in denen Menschen mit Maschinen kommunizieren müssen. Ist bei dieser Interaktion ein Display involviert, so muss dieses Display benutzerfreundlich und funktionell entsprechend der Aufgaben gestaltet werden.
Die Anforderungen an die Gestaltung können stark variieren. Die Gestaltung einer Website ist ein ganz anderes Thema als das Screendesign bei Displays für medizinische Geräte oder für Roboter in der Automobilbranche.
Es muss außerdem immer bedacht werden, an welche Personen sich das Screendesign richtet. Handelt es sich um Menschen, die täglich funktionelle Displays nutzen, oder werden Benutzeroberflächen für User entwickelt, die weniger Umgang mit digitalen Medien pflegen? Mitarbeiter einer automatisierten Produktionslinie in der Automobilbranche stellen sich zum Beispiel schnell auf neue Benutzeroberflächen ein. Sie geben täglich Anweisungen an Maschinen und Roboter mithilfe von Displays. Komplizierte Strukturen werden schnell wahrgenommen.
Entwickeln Sie hingegen das Screendesign einer Lernapp für ältere Menschen, um die geistige Aktivität zu bewahren, gelten ganz andere Kriterien. Viele nutzen wahrscheinlich nur selten ein Tablet oder Smartphone. Benutzeroberflächen sollten hier einfach und leicht nachvollziehbar gestaltet sein.
Ein Wimpernschlag für gutes Screendesign
Nur 50 Millisekunden benötigt der User im Durchschnitt, um zu entscheiden, ob das Screendesign einer Website gelungen ist oder nicht. Bei einer entsprechenden Studie an der Carleton University unter der Leitung von Professorin Gitte Lindgaard wurde herausgefunden, dass diese kurze Zeitspanne ausreicht, um ein erstes Urteil zu fällen. Den Probanden wurden 125 unterschiedliche Website zuerst für 500 Millisekunden gezeigt. Im letzten Durchgang wurde diese Zeitspanne auf 50 Millisekunden reduziert. Das Urteil hinsichtlich der Qualität blieb gleich.
Wie gelingt ein gutes Screendesign?
Screendesign muss verschiedenen Ansprüchen genügen. Wie ein Monitor oder Display gestaltet wird, hängt wie so oft von der Zielgruppe ab. Unternehmen richten die Gestaltung ihrer Internetpräsenz an der eigenen Kundengruppe und deren Vorlieben aus.
Schwierig wird es, wenn öffentliche Displays wie zum Beispiel ein Fahrkartenautomat, ein Bankautomat oder die Benutzeroberfläche der Touchscreens in modernen Autos entwickelt werden. Hier sind die Zielgruppen breiter gefächert und das Design muss selbsterklärend funktionieren. Gerade bei Automaten im öffentlichen Raum, die für jeden nutzbar sind, kommt es auf ein funktionelles, leicht verständliches Design an.
Screendesign für Webseiten
Bei Webseiten sollten Sie darauf achten, dass die Gestaltung auch zu Ihrem Unternehmen passt. Meist wird die Entwicklung einer Website in die Marketingstrategie integriert, um ein kohärentes Erscheinungsbild an die Außenwelt zu liefern. Besitzen Sie ein Logo und sind bestimmte Farben im Corporate Design festgelegt, müssen diese berücksichtigt werden und sich im Screendesign widerspiegeln.
Bedenken Sie ebenfalls die mobile Aktivität der Zielgruppe. Viele Nutzer besuchen Webseiten von Tablets oder Smartphones. Das Screendesign muss sich auch an diese veränderten Bildschirmformate anpassen können. Die Nutzung von mobilen Endgeräten steigt stetig an. Die Mehrheit der Suchanfragen wird mittlerweile von Smartphones abgesetzt.
Die Nutzer im Mittelpunkt
Die Nutzer stehen beim Screendesign immer im Vordergrund. Egal für welche Anwendung Sie ein Screendesign entwickeln, denken Sie immer an die Bedürfnisse der Zielgruppe. Die unterschiedlichen Design-Elemente wie Bilder, Symbole, Texte und Schaltflächen sollten so angeordnet sein, dass schnell klar ist, wie die Website zum Beispiel funktioniert.
Eine genaue Analyse Ihrer Zielgruppe bringt Ihnen wichtige Informationen. Welche Fähigkeiten, Vorlieben oder Ziele Ihre Kunden haben, nimmt Einfluss auf die Gestaltung und das Screendesign. Je besser Sie sich in den User hineinversetzen können, desto besser können Sie Lösungen anbieten. Das Gleichgewicht zwischen Funktionalität und einem ansprechenden Design ist der Schlüssel zum Erfolg.
Es muss nicht immer alles neu sein
Marktforschungsstudien und psychologische Analysen geben viele wichtige Anhaltspunkte, welche Art des Screendesign besonders gut von den Usern angenommen wird. Sie müssen das Rad in dieser Hinsicht nicht neu erfinden. Einige Unternehmen und Plattformen bieten gut gefüllte Online-Bibliotheken an, in denen sich unterschiedliche Standard-Bildschirmvorlagen befinden. Nutzen Sie ruhig bereits vorhandene Konzepte und entwickeln Sie diese weiter. Auf diese Weise sparen Sie eine Menge an Zeit und Ressourcen. Lassen Sie sich von existierenden Designs inspirieren.
Einfach ist besser
Die Reduktion auf das Wesentliche bringt nicht nur mehr Übersichtlichkeit für Ihre Webpräsenz, es steigert auch den Wert. Es gibt immer noch Kunden, die dem Internet und Online Shops kritisch gegenüberstehen, weil sie es für wenig glaubwürdig halten. Nach dem Motto, jeder kann sich doch mal schnell eine Website bauen.
Screendesign kann hier einen klaren Design Look bringen, der Vertrauen weckt und zum Beispiel bei Online Shops Qualität vermittelt. Ästhetisch ansprechende Designs werden stark mit der Qualität des Produktes verbunden. Dabei müssen die angebotenen Produkte oder Dienstleistungen an sich nicht teuer sein. Große Konzerne wie IKEA oder H&M machen es vor. Ein gutes Screendesign mit hoher Effizienz funktioniert auch oder besonders bei Produkten, die für jeden Geldbeutel gemacht sind.
Ein übersichtlicher Aufbau erleichtert den Usern zu finden, wonach sie suchen. Dabei kann die Unterteilung des Bildschirms in unterschiedliche Abschnitte sehr hilfreich sein. Typografie und farbliche Akzente heben wichtige Elemente hervor und leiten das Auge des Nutzers.
Häufig verwendete Elemente beim Screendesign
Es können einige gestalterische Elemente klar definiert werden, die Sie bei jedem Screendesign finden werden. Einige Elemente übernehmen mitunter verschiedene Funktionen und sind flexibel einsetzbar. Das Zusammenspiel der unterschiedlichen Elemente sollte eine intuitive und effektive Webseite hervorbringen, auf der sich User schnell zurechtfinden.
Orientierungselemente
Gerade bei komplexen Websites sind Orientierungselemente essentiell für ein gutes Screendesign. Generell wird eine Website von vielen Menschen als ein großer Raum wahrgenommen. Ohne Orientierungshilfen kommt der Nutzer sich leicht verloren vor, da die Komplexität der gesamten Website nicht erkannt werden kann. Es wird ja immer nur eine Webseite präsentiert.
Integrieren Sie in Ihr Screendesign optische Markierungen, ähnlich einem Leitsystem in echten Gebäuden. Diese zeigen dem Besucher, wo er sich befindet. So kann zum Beispiel in der Menüleiste die aktuelle Seite hervorgehoben werden. Benennen Sie diese korrekt. Der Name sollte auch entsprechend in der URL erscheinen. In Online Shops für Mode finden sich hier zum Beispiel oft die Kategorien Mode, Taschen, Schmuck oder Accessoires. Die aktuelle Seite kann zum Beispiel fett hervorgehoben werden.
Navigationselemente
Diese Elemente unterstützen den Besucher, die gewünschte Seite zu finden. Anders als in einem echten Gebäude kann der User durch die Navigationselemente alle anderen Seiten sehen, ohne die momentane Position zu verlassen. Das Screendesign sollte eindeutig und leicht zu nutzen sein.
Menüleisten, bei denen die einzelnen Unterpunkte über ein zusätzliches herausklappbares Menü verfügen, werden besonders gern eingesetzt. Hier kann der Nutzer sehen, was sich unter der Hauptkategorie befindet und bekommt eine Ahnung, auf welchen Webseiten bestimmte Inhalte zu finden sind. Dabei sollte sich die Navigationsleiste optisch von den anderen Elementen abgrenzen. Navigations- und Orientierungselemente verschmelzen oft miteinander und bringen noch mehr Effizienz.
Inhaltselemente
Inhaltselemente sollten für Ihre Kunden leicht verständlich sein. Darunter fallen Bilder, Texte, Animationen und Grafiken. Bei kleinen Bildschirmen muss das Screendesign entsprechend angepasst sein, damit auch hier die Inhalte schnell erfasst werden können.
Layoutelemente
Layoutelemente haben in dem Sinne keine inhaltliche Bedeutung. Sie dienen vielmehr der Ästhetik und unterstützen die Struktur der Seite. Grafische Elemente wie Schatten, Linien und Farbflächen werden besonders oft genutzt. Damit lassen sich zum Beispiel Navigationselemente zusammenzufassen oder bestimmte Abschnitte auf der Webseite hervorheben.
Verzichten Sie an dieser Stelle lieber auf rein dekorative Elemente, die dem User keinen Mehrwert liefern. Hier können Sie im Extremfall eher das Gegenteil erwirken. Denn zu viele irrelevante Elemente lenken vom Inhalt eher ab und frustrieren den Nutzer.
Emotionale Elemente
Vergessen Sie nicht die Gefühle Ihrer Zielgruppe. Menschen sind emotionale Wesen und fast alle Entscheidungen sind emotional motiviert. Es ist also durchaus legitim, mit Farbe oder einer witzigen Headline ein bisschen Spaß auf die Webseiten zu bringen. Dies kann Neugierde wecken und motiviert zum Weiterklicken. Auch bei seriösen Firmen dürfen also Elemente auftauchen, die unsere Emotionen ansprechen.
Interaktionselemente
Navigationselemente und Links zählen zwar auch zu interaktiven Elementen. Jedoch beschreiben die Interaktionselemente in unserem Fall Formulare, Kommentarfelder oder Newsletter Abos. Der Besucher kann aktiv werden, Feedback hinterlassen oder Fragen stellen. Wichtig bei diesen Elementen, sie zeigen dem Besucher, dass sein Kommentar oder Fragebogen korrekt registriert wurde. In vielen Fällen wird eine neue Seite geladen, welche die entsprechende Aktion bestätigt. Im Falle eines Fehlers sollten Sie den Nutzer auch darüber aufklären und angeben, warum die Aktion nicht erfolgreich war.
Dokumentation des Screendesigns im Styleguide
Nutzen Firmen und Unternehmen unterschiedliche Kanäle, um mit den Kunden in Kontakt zu treten, so empfiehlt sich hier unbedingt die Daten des Screendesigns in einem Styleguide festzuhalten.
In einem Styleguide werden alle wichtigen Informationen zum Farbkonzept, Schriftart, Schriftgröße, Seitenstruktur oder auch zu Textsatz und Abständen vermerkt. Diese Angaben sind für Designer, Entwickler und Programmierer ein Leitfaden, damit alle Präsentationen untereinander stimmig sind und mit dem Corporate Design der Firma harmonieren.
So verfügt zum Beispiel die Deutsche Bahn über eine Website und über physische Ticketschalter. Beide Kanäle verfügen über spezielle Displays und Bildschirmgrößen und bedienen mitunter unterschiedliche Zielgruppen. Kaufen junge technisch affine Menschen eher online auf der Website oder mit einer App, finden Sie an Ticketschaltern jede Altersgruppe. Auch Menschen, die wenig mit Technik am Hut hat, möchten Fahrkarten kaufen.
Hier ist es die Aufgabe des Screendesigners, mit den Programmieren ein Konzept zu entwickeln, dass die Bedürfnisse aller erfüllt. Immer den Angaben des Styleguides folgend, der die Zusammengehörigkeit von Website, App und Ticketschalter demonstriert.
Wie werden Sie Ihre Seiten gestalten?
Screendesign wurde lange Zeit unterschätzt und als rein dekorativer Aspekt abgetan. Dabei ist ein gutes Screendesign Teil des Erfolgs einer Webseite oder einer Anwendung mit Touchscreen und Display. Egal ob das Screendesign für Webseiten, Ticketautomaten oder Benutzeroberflächen bei automatisierten Produktlinien geschaffen wird. Die User-Experience muss immer im Vordergrund stehen. Sie können sich jederzeit an eine App-Entwicklungsagentur oder an eine Software-Entwicklungsagentur wenden, die Sie bei Ihrer Strategie unterstützt.
Je nach Wirkungsbereich können die Anforderungen stark variieren. Um hier ein allumfassendes Konzept zu schaffen, das sowohl Webpräsentationen, Apps oder auch Touchscreens an stationären Geräten beinhaltet, muss mitunter der Rat von Experten her. Marketing Agenturen verfügen über das Know-how Web-, Screen- und Interfacedesign gekonnt zu verbinden und alles in eine erfolgreiche Marketingkampagne zu packen.
