Design & UX

Von Above the Fold bis Wireframe

Gestaltung, Nutzerführung und Interface-Design – was gute digitale Erlebnisse ausmacht.

A

Above the Fold

Above the Fold bezeichnet den Bereich einer Webseite, der ohne Scrollen sofort sichtbar ist – jener Bildschirm-Ausschnitt, den ein Besucher in den ersten Sekundenbruchteilen wahrnimmt und auf dessen Grundlage die Entscheidung fällt, ob weiter gelesen oder die Seite verlassen wird.

B

Bildoptimierung

Bildoptimierung umfasst die Auswahl moderner Bild-Formate (WebP, AVIF), die Ausspielung in passenden Größenstufen und eine sinnvolle Komprimierung, damit Bilder schnell laden, ohne sichtbar an Qualität zu verlieren.

F

Farbwahrnehmung

Farbwahrnehmung beschreibt, wie unterschiedlich Menschen Farben sehen. Etwa acht Prozent aller Männer und weniger als ein Prozent aller Frauen haben eine Form der Farbsehschwäche – meist eine Rot-Grün-Verwechslung.

Fokus-Indikator

Der Fokus-Indikator ist das visuelle Signal, das anzeigt, welches Element gerade Tastatur-Fokus hat – meist ein farbiger Outline-Ring um Schaltfläche, Verweis oder Formular-Feld. Er ist verbindliche Grundlage einer barrierefrei bedienbaren Website.

K

Kontrast-Ratio

Die Kontrast-Ratio ist das Helligkeits-Verhältnis zwischen Vorder- und Hintergrund-Farbe – die zentrale Messgröße für visuelle Lesbarkeit nach den Web Content Accessibility Guidelines (WCAG).

M

Motion-Design

Motion-Design bezeichnet die gezielte Animation von Bedien-Elementen, Übergängen und kleinen Interaktionen innerhalb einer Benutzeroberfläche – mit dem Ziel, Aufmerksamkeit zu lenken, Zustände zu verdeutlichen und die Marken-Tonalität zu transportieren.

Motion-Graphics

Motion-Graphics sind animierte 2D-Grafiken, in denen Typografie, Formen, Icons und Diagramme bewegt erzählen – die Standard-Form für Erklärvideos, Service-Prozess-Filme und animierte Infografiken.

P

prefers-color-scheme

prefers-color-scheme ist eine CSS-Media-Query, die das vom Betriebs-System gesetzte Farb-Schema (hell oder dunkel) erkennt. Sie ist die Grundlage für einen automatisch passenden Dunkel-Modus auf Websites – ohne dass Besucher einen Umschalt-Knopf bedienen müssen.

prefers-reduced-motion

prefers-reduced-motion ist eine CSS-Media-Query, mit der Besucher mit Gleichgewichts-Sensitivität oder Migräne-Veranlagung dem Browser signalisieren können, dass sie weniger Animation wünschen. Websites respektieren diese Einstellung, indem sie aufwändige Bewegung durch flache Übergänge ersetzen.

S

Storyboard

Ein Storyboard ist eine skizzenartige Bild-Sequenz, die jede Szene eines Videos vor der eigentlichen Produktion bildgenau festlegt – Layout, Komposition, Übergänge, Stil und Sprecher-Timing in einer einzigen Ansicht.

U

Usability

Usability beschreibt, wie einfach und effizient eine Person eine Website oder Anwendung tatsächlich nutzen kann, um ein bestimmtes Ziel zu erreichen – mess- und beobachtbar in Erfolgsquote, Bearbeitungs-Dauer, Klick-Anzahl und subjektiver Zufriedenheit.

V

Visuelle Hierarchie

Visuelle Hierarchie ist die gestalterische Anordnung von Elementen, die dem Auge eine klare Reihenfolge vorgibt – sodass die wichtigste Botschaft zuerst wahrgenommen wird und untergeordnete Inhalte erkennbar nachgelagert sind.

W

Wireframe

Ein Wireframe ist eine bewusst schlichte, in der Regel grau gehaltene Skizze einer Webseite, die Struktur und Anordnung der Inhalte zeigt – ohne Farben, Bilder oder finale Typografie. Sie dient als Diskussions-Grundlage, bevor das eigentliche Design beginnt.

Zurück zur Übersicht