Screen Design bezeichnet die Gestaltung digitaler Benutzeroberflächen für alle Arten von Bildschirmen – von Fernsehern, Desktopmonitoren und Tablets bis zu Smartphones und Wearables – unter Berücksichtigung der spezifischen Eigenschaften jedes Mediums.
Rubrik: Intermediale Gestaltung · Unterrubrik: Crossmedia · Niveau: Einsteiger Synonyme / Auch bekannt als: Bildschirmgestaltung, GUI Design, UI Design, Interface Design
Was ist Screen Design?
Screen Design (auch: Bildschirmgestaltung) ist die Disziplin der visuellen Gestaltung digitaler Oberflächen. Es umfasst die Anordnung von Inhalten, die visuelle Hierarchie, Typografie, Farbe, Abstände und interaktive Elemente auf digitalen Bildschirmen. Screen Design ist ein zentrales Teilgebiet des UI-Designs (User Interface Design) und muss stets in Verbindung mit UX-Design (User Experience) gedacht werden: Die Oberfläche muss nicht nur schön aussehen, sondern auch intuitiv nutzbar sein.
Erklärung
Verschiedene Screens, verschiedene Anforderungen
Jeder Bildschirmtyp stellt spezifische gestalterische Anforderungen:
TV-Screen: Fernseher werden typischerweise aus größerem Abstand betrachtet (Lean-Back-Situation). Das beeinflusst Schriftgrößen (mindestens 24–30px Körpergröße für gute Lesbarkeit auf 3 m Abstand), Kontraste (starke Kontraste notwendig), Farbgestaltung (Sättigung und Helligkeit reagieren auf TV-Bildtechnologien anders als auf Monitoren) und Interaktionsdesign (Navigation mit Fernbedienung, nicht mit Maus). HbbTV und Smart-TV-Interfaces folgen eigenen Designstandards.
Desktop-Monitor: Der klassische Arbeitsbildschirm ermöglicht komplexe, informationsdichte Layouts. Benutzer sitzen typisch 60–80 cm vom Bildschirm entfernt (Lean-Forward-Situation). Mausinteraktion erlaubt Hover-States, präzise Klickziele und komplexe Navigationssysteme. Auflösungen variieren stark: von FullHD (1920×1080) bis 4K (3840×2160) und Retina (HiDPI). Responsive Design für Desktop bedeutet: Layouts, die im Querformat, mit Seitenleisten und in großen Formaten funktionieren.
Tablet: Touchinteraktion prägt das Tablet-Design, aber im Unterschied zum Smartphone ist mehr Platz für komplexere Layouts vorhanden. Typische Tablets haben Diagonalen von 9–13 Zoll. Finger-friendly Design (Mindestgröße für Touch-Targets: 44×44 pt nach Apple-Richtlinien), aber auch Nutzungsszenarien (oft im Hoch- und Querformat) müssen bedacht werden.
Smartphone: Das dominante Zugangsgerät zum Web. Mobile-First-Design priorisiert den Smartphone-Screen als primären Gestaltungsraum. Kleine Bildschirme (typisch 5–7 Zoll), einhändige Bedienung, Daumenfreundliche Zones (unten im Bildschirm für wichtige Aktionen), begrenzte Informationsdichte, kurze Aufmerksamkeitsspannen. Schrift, Abstände und Interaktionselemente müssen für Touch optimiert sein.
Wearables (Smartwatch, AR-Brille): Sehr kleine Displays (Smartwatch ca. 1,4–1,8 Zoll) oder kontextuelle Einblendungen in der realen Welt (AR). Inhalte müssen auf das Wesentlichste reduziert werden; Interaktionen sind minimal (Wischen, Tippen, Sprachsteuerung). Design für Wearables erfordert radikale Konzentration auf eine Kerninformation.
Responsive vs. Adaptive Design
Responsive Design: Das Layout passt sich flüssig an jede Bildschirmgröße an. CSS-Flexbox, Grid und Media Queries ermöglichen, dass dasselbe HTML-Dokument auf allen Devices unterschiedlich dargestellt wird. Responsive Design ist der heutige Standard für Websites.
Adaptive Design: Für definierte Breakpoints (z. B. 320px, 768px, 1024px, 1440px) werden separate, fest definierte Layouts erstellt. Bei jedem Breakpoint ändert sich das Layout sprunghaft. Adaptive Design bietet mehr Kontrolle, erfordert aber mehr Pflegeaufwand. Native Apps verwenden oft adaptive Ansätze (iPhone-Layout vs. iPad-Layout vs. Mac-Layout).
Progressive Enhancement: Eine Gestaltungsphilosophie, die mit dem einfachsten, zugänglichsten Basis-Layout beginnt und für leistungsfähigere Geräte und Browser schrittweise erweitert. Im Gegensatz dazu steht Graceful Degradation (von oben nach unten vereinfachen).
Auflösungen und Pixeldichten (PPI)
Pixeldichte (Pixel per Inch, PPI) ist ein entscheidender Faktor: Ein Retina-Display hat doppelt so viele Pixel pro Inch wie ein Standard-Display. Grafiken müssen daher in mehreren Auflösungen exportiert werden (@1x, @2x, @3x), um auf allen Bildschirmen scharf zu erscheinen. Für Vektorgrafiken (SVG) ist Pixeldichte kein Problem; für Rastergrafiken (JPEG, PNG) ist sie kritisch. Gängige Bildschirmauflösungen 2024: FullHD (1920×1080), QHD (2560×1440), 4K/UHD (3840×2160), Smartphone-Displays (1080×2340 u. v. m.).
Typografie auf dem Screen
Screen-Typografie unterscheidet sich von Printtypografie: Auf Bildschirmen werden Schriften gerendert (von der Grafikkarte berechnet), was bei kleinen Schriftgrößen zu Unschärfen führen kann. Web-sichere Schriften und Google Fonts / Adobe Fonts ermöglichen konsistente Typografie. Grundprinzipien: Ausreichende Schriftgröße (min. 16px für Fließtext im Web), genügend Zeilenabstand (1.4–1.6 × Schriftgröße), guter Kontrast (WCAG-Richtlinien: min. 4,5:1 für normalen Text), begrenzte Schriftfamilien (2–3 Familien pro Projekt).
Beispiele
- BBC iPlayer: Ein ausgezeichnetes Beispiel für TV-Screen-Design, optimiert für den großen Bildschirm und Fernbedienungsnavigation.
- Apple iOS: Prägendes Beispiel für Mobile Screen Design – klare Hierarchie, großzügige Touch-Targets, konsistente Systemgeste.
- Figma: Desktop-App-Design mit komplexen Werkzeugpaletten, optimiert für Maus und große Bildschirme.
- Apple Watch Infograph-Zifferblatt: Radikale Informationsverdichtung für miniaturisierte Screen-Oberflächen.
- Airbnb: Responsive Website, die auf Smartphone, Tablet und Desktop konsequent dasselbe Designsystem in kanaloptimierter Form zeigt.
In der Praxis
Werkzeuge für Screen Design: Figma (Standard für UI-Design und Prototyping), Sketch (macOS-spezifisch), Adobe XD, InVision (Prototyping), Zeplin / Supernova (Handoff zu Entwicklern). Für TV-Design: Adobe After Effects (Animationen), HbbTV-Spezifikationen. Für Responsive: Tailwind CSS, Bootstrap (Frameworks), CSS Grid und Flexbox.
Vergleich & Abgrenzung
Screen Design = Visuelle Gestaltung von Bildschirmoberflächen. UI Design = Umfasst Screen Design plus Interaktionsdesign. UX Design = Benutzererfahrung insgesamt (Konzept, Architektur, Usability). Responsive Design = Technische und gestalterische Methode für flexible Layouts. Graphic Design = Visuelle Gestaltung allgemein (Print + Digital).
Häufige Fragen (FAQ)
Was kommt zuerst: Mobile oder Desktop? Die Mobile-First-Philosophie (zuerst für das Smartphone gestalten, dann für größere Screens erweitern) ist heute Standard im professionellen Screen Design. Sie erzwingt Fokus, da auf kleinen Screens nur das Wesentlichste Platz hat. Desktop-Layouts werden anschließend mit den vorhandenen Stärken des größeren Formats erweitert.
Wie wichtig ist Barrierefreiheit im Screen Design? Sehr wichtig – sowohl aus ethischen Gründen als auch zunehmend aus gesetzlichen (EU Accessibility Act 2025). WCAG-Kontraste, ausreichende Schriftgrößen, Tastaturnavigierbarkeit und Screen-Reader-Kompatibilität sollten von Anfang an eingeplant werden, nicht nachträglich.
Verwandte Einträge
Weiterführend
- Krug, Steve (2014): Don't Make Me Think, Revisited. 3. Auflage. New Riders, Berkeley.
- Wroblewski, Luke (2011): Mobile First. A Book Apart, New York.
- Marcotte, Ethan (2011): Responsive Web Design. A Book Apart, New York.
- Lidwell, William / Holden, Kritina / Butler, Jill (2010): Universal Principles of Design. Rockport, Beverly.
