Bewährte Interface-Lösungen – dokumentiert, erklärt, direkt anwendbar
UI-Pattern-Bibliothek
Von Navigation über Formulare bis Feedback-Elemente.
Für schnelle Entscheidungen und bessere Nutzerführung.
Hero & Intro
Split-Screen Hero
Dieses Pattern teilt den "Above the Fold"-Bereich in zwei vertikale Hälften. Es ist ideal, um ein starkes Visual zu zeigen, ohne die Lesbarkeit der Headline durch unruhige Hintergründe zu gefährden. Es sorgt für eine extrem schnelle Erfassbarkeit der Botschaft.
Nutze die Blickrichtung von Personen im Bild, um subtil auf die Headline oder den CTA-Button zu lenken.
Typography-Only Hero
Ein radikaler Ansatz, der komplett auf Bilder verzichtet. Die Typografie wird hier zum grafischen Anker. Es signalisiert Selbstbewusstsein und intellektuelle Tiefe – ideal, wenn das Copywriting der Star sein soll.
Wähle eine charakterstarke Display-Schrift aus unserem Font-Explorer. Das Kerning ist hier dein wichtigstes Werkzeug.
Immersive Video Hero
Ein bildschirmfüllendes Video-Loop dient als atmosphärischer Hintergrund. Es fesselt die Aufmerksamkeit deutlich länger als statische Bilder und eignet sich hervorragend für emotionales Storytelling.
Das Video sollte unter 2MB groß sein. Nutze ein dunkles Overlay, damit der Text immer lesbar bleibt.
Glassmorphism Card Hero
Ein zentrales Interface-Element schwebt über einem unscharfen, farbigen Hintergrund. Dieser Trend nutzt den "Frosted Glass"-Effekt, um Tiefe zu erzeugen und UI-Elemente hervorzuheben.
Achte auf starke Kontraste bei der Schrift innerhalb der Glaskarte, um die Barrierefreiheit (Readability) zu gewährleisten.
Product Reveal Hero
Das Produkt ragt oft von unten oder der Seite in den Viewport hinein. Dies erzeugt eine greifbare Nähe zum Produkt und eignet sich perfekt für haptische oder visuell starke Güter.
Nutze Scroll-Animationen (Parallax), die das Produkt beim Herunterscrollen leicht bewegen oder vergrößern.
Features & Services
Modern Bento Grid
Inspiriert von japanischen Lunchboxen, ordnet dieses Muster Informationen in Modulen an. Es erlaubt, unterschiedliche Prioritäten durch verschiedene Kachelgrößen visuell darzustellen.
Konsistenz ist der Schlüssel. Nutze für alle Kacheln den exakt gleichen Border-Radius und identische Zwischenräume.
Z-Pattern Layout
Ein klassisches Wechselspiel aus Bild und Text. Das Auge scannt die Seite in einer Z-Form. Dieses Pattern ist psychologisch gelernt und extrem effizient für erklärungsbedürftige Inhalte.
Verwende großzügigen Weißraum zwischen den Zeilen. Zu enges Stacking wirkt veraltet; viel Platz wirkt modern.
Card-Stacking Scroll
Beim Scrollen bleiben Karten oben im Viewport "kleben" (Sticky), während die nächste Karte darüber gleitet. Das erzeugt eine starke visuelle Hierarchie und Belohnung beim Entdecken.
Nutze unterschiedliche Helligkeitsstufen für die Karten, um den Stapel-Effekt (Depth) visuell zu verstärken.
Feature Marquee
Kurze Schlagworte oder Icons laufen horizontal durch das Bild. Dies eignet sich hervorragend, um die Breite eines Angebots zu zeigen, ohne die Seite unnötig in die Länge zu ziehen.
Die Geschwindigkeit ist entscheidend: Es darf nicht hektisch wirken. Ein langsamer, flüssiger Scroll-Vibe wirkt hochwertiger.
Tabbed Content
Statt alle Infos untereinander zu zeigen, werden sie in Tabs gruppiert. Der Nutzer entscheidet selbst, was für ihn relevant ist. Dies spart Platz und erhöht die Interaktionsrate.
Die aktiven Tabs müssen sich visuell deutlich abheben, damit der Nutzer immer weiß, wo er sich befindet.
Social Proof & Trust
Infinite Logo Marquee
Ein endloser Stream von Logos signalisiert: "Andere vertrauen uns bereits". Es ist die effizienteste Form, Glaubwürdigkeit ohne viel Erklärungsbedarf zu erzeugen.
Setze alle Logos auf Graustufen mit reduzierter Deckkraft, damit sie das Gesamtdesign nicht stören.
Masonry Testimonials
Ein asymmetrisches Raster aus Zitaten. Es wirkt weniger starr als ein klassisches Grid und vermittelt das Gefühl einer echten, organisch gewachsenen Community.
Hebe besonders wichtige Zitate durch eine andere Hintergrundfarbe oder eine größere Kachel hervor.
Featured-In Bar
Eine schmale Sektion direkt unter dem Hero-Bereich. Sie zeigt Logos von Presse-Outlets oder Zertifikaten. Es ist ein "Bürge-System", das sofort Vertrauen schafft.
Weniger ist mehr. Zeige nur die 3-5 stärksten Logos, um den Fokus nicht zu verwässern.
Big Number Counter
Große Zahlen, die beim Herunterscrollen hochzählen. Es belegt die Erfahrung und den Impact einer Marke durch harte Fakten in einem dynamischen Format.
Kombiniere die Zahl immer mit einem kurzen, klaren Label (z.B. "Erfolgreiche Projekte"), um den Kontext zu sichern.
Case Study Highlight
Eine großflächige Sektion, die ein einzelnes Projekt intensiv vorstellt. Es geht weg von der Menge hin zur Qualität und zeigt Problemlösungskompetenz.
Nenne das Ergebnis zuerst: "300% mehr Traffic für Kunden X" zieht stärker als nur der Name des Projekts.
Conversion & CTA
Floating Footer CTA
Eine dezente Leiste am unteren Bildschirmrand. Sie erscheint oft erst nach einer gewissen Scrolltiefe und bietet den wichtigsten nächsten Schritt permanent an.
Die Leiste sollte nicht mehr als 60-80px hoch sein, um den eigentlichen Content nicht zu verdecken.
Full-Width Impact CTA
Ein massiver Bereich am Ende der Seite. Er nutzt oft eine Komplementärfarbe zum Rest des Designs, um ein finales, unmissverständliches Angebot zu machen.
Halte den Text extrem kurz. Eine starke Headline und ein Button sind oft alles, was du hier brauchst.
Split-CTA Layout
Zwei Sektionen nebeneinander für unterschiedliche Pfade (z.B. "Für Privatkunden" vs. "Für Geschäftskunden"). Es hilft dem Nutzer, sich sofort selbst zu segmentieren.
Verwende unterschiedliche Helligkeiten für die beiden Seiten, um die visuelle Trennung zu verstärken.
Micro-Form Newsletter
Ein einzeiliges Formular, das oft nur aus E-Mail-Feld und Absenden-Button besteht. Es wird organisch in den Textfluss eingebaut und wirkt weniger "verkäuferisch".
Platziere dieses Formular idealerweise am Ende eines hilfreichen Artikels – dort ist die Bereitschaft am höchsten.
Exit-Intent Layout
Ein Pop-up Design, das speziell darauf ausgelegt ist, einen "unwiderstehlichen" Mehrwert (Lead Magnet) anzubieten. Es zielt auf die Psychologie der "Loss Aversion" ab.
Vermeide aggressive Farben. Biete echte Hilfe an statt nur Druck aufzubauen, um die Brand-Reputation zu wahren.
Content & Struktur
Clean FAQ Accordion
Fragen und Antworten, die sich erst beim Klick öffnen. Dies verhindert "Walls of Text" und lässt die Seite sauber und aufgeräumt wirken, während alle Infos verfügbar bleiben.
Nutze klare Icons für den Zustand (Plus/Minus) und achte auf eine flüssige Animation beim Öffnen.
Interactive Timeline
Ein vertikaler oder horizontaler Pfad, der Meilensteine verbindet. Es hilft dem Nutzer, komplexe Abläufe oder die Entwicklung einer Marke zeitlich einzuordnen.
Verwende Scroll-Trigger: Lass die Punkte der Timeline erst erscheinen, wenn der Nutzer an die entsprechende Stelle scrollt.
Team-Grid (Hover)
Ein Raster aus Porträts, die beim Drüberfahren zusätzliche Infos (Social Links, Expertise) einblenden. Es wirkt modern und interaktiv, ohne überladen zu sein.
Einheitliche Hintergründe bei den Teamfotos sind entscheidend für die professionelle Ruhe des Grids.
Multi-Step Process
Eine visuelle Abfolge von Arbeitsschritten. Es verdeutlicht dem Kunden, wie einfach die Zusammenarbeit ist, und schafft Transparenz über den Ablauf.
Verwende Icons und kurze Headlines. Der Nutzer sollte den Prozess in unter 5 Sekunden verstehen können.
Sticky Sidebar Nav
Ein Inhaltsverzeichnis, das am Rand "mitläuft". Es erlaubt dem Nutzer, jederzeit zwischen den Sektionen zu springen, ohne lange scrollen zu müssen.
Hebe den aktuell sichtbaren Menüpunkt farblich hervor (ScrollSpy), um die Orientierung zu perfektionieren.
Hero & Intro
Split-Screen Hero
Dieses Pattern teilt den "Above the Fold"-Bereich in zwei vertikale Hälften. Es ist ideal, um ein starkes Visual zu zeigen, ohne die Lesbarkeit der Headline durch unruhige Hintergründe zu gefährden. Es sorgt für eine extrem schnelle Erfassbarkeit der Botschaft.
Nutze die Blickrichtung von Personen im Bild, um subtil auf die Headline oder den CTA-Button zu lenken.
Typography-Only Hero
Ein radikaler Ansatz, der komplett auf Bilder verzichtet. Die Typografie wird hier zum grafischen Anker. Es signalisiert Selbstbewusstsein und intellektuelle Tiefe – ideal, wenn das Copywriting der Star sein soll.
Wähle eine charakterstarke Display-Schrift aus unserem Font-Explorer. Das Kerning ist hier dein wichtigstes Werkzeug.
Immersive Video Hero
Ein bildschirmfüllendes Video-Loop dient als atmosphärischer Hintergrund. Es fesselt die Aufmerksamkeit deutlich länger als statische Bilder und eignet sich hervorragend für emotionales Storytelling.
Das Video sollte unter 2MB groß sein. Nutze ein dunkles Overlay, damit der Text immer lesbar bleibt.
Glassmorphism Card Hero
Ein zentrales Interface-Element schwebt über einem unscharfen, farbigen Hintergrund. Dieser Trend nutzt den "Frosted Glass"-Effekt, um Tiefe zu erzeugen und UI-Elemente hervorzuheben.
Achte auf starke Kontraste bei der Schrift innerhalb der Glaskarte, um die Barrierefreiheit (Readability) zu gewährleisten.
Product Reveal Hero
Das Produkt ragt oft von unten oder der Seite in den Viewport hinein. Dies erzeugt eine greifbare Nähe zum Produkt und eignet sich perfekt für haptische oder visuell starke Güter.
Nutze Scroll-Animationen (Parallax), die das Produkt beim Herunterscrollen leicht bewegen oder vergrößern.
Features & Services
Modern Bento Grid
Inspiriert von japanischen Lunchboxen, ordnet dieses Muster Informationen in Modulen an. Es erlaubt, unterschiedliche Prioritäten durch verschiedene Kachelgrößen visuell darzustellen.
Konsistenz ist der Schlüssel. Nutze für alle Kacheln den exakt gleichen Border-Radius und identische Zwischenräume.
Z-Pattern Layout
Ein klassisches Wechselspiel aus Bild und Text. Das Auge scannt die Seite in einer Z-Form. Dieses Pattern ist psychologisch gelernt und extrem effizient für erklärungsbedürftige Inhalte.
Verwende großzügigen Weißraum zwischen den Zeilen. Zu enges Stacking wirkt veraltet; viel Platz wirkt modern.
Card-Stacking Scroll
Beim Scrollen bleiben Karten oben im Viewport "kleben" (Sticky), während die nächste Karte darüber gleitet. Das erzeugt eine starke visuelle Hierarchie und Belohnung beim Entdecken.
Nutze unterschiedliche Helligkeitsstufen für die Karten, um den Stapel-Effekt (Depth) visuell zu verstärken.
Feature Marquee
Kurze Schlagworte oder Icons laufen horizontal durch das Bild. Dies eignet sich hervorragend, um die Breite eines Angebots zu zeigen, ohne die Seite unnötig in die Länge zu ziehen.
Die Geschwindigkeit ist entscheidend: Es darf nicht hektisch wirken. Ein langsamer, flüssiger Scroll-Vibe wirkt hochwertiger.
Tabbed Content
Statt alle Infos untereinander zu zeigen, werden sie in Tabs gruppiert. Der Nutzer entscheidet selbst, was für ihn relevant ist. Dies spart Platz und erhöht die Interaktionsrate.
Die aktiven Tabs müssen sich visuell deutlich abheben, damit der Nutzer immer weiß, wo er sich befindet.
Social Proof & Trust
Infinite Logo Marquee
Ein endloser Stream von Logos signalisiert: "Andere vertrauen uns bereits". Es ist die effizienteste Form, Glaubwürdigkeit ohne viel Erklärungsbedarf zu erzeugen.
Setze alle Logos auf Graustufen mit reduzierter Deckkraft, damit sie das Gesamtdesign nicht stören.
Masonry Testimonials
Ein asymmetrisches Raster aus Zitaten. Es wirkt weniger starr als ein klassisches Grid und vermittelt das Gefühl einer echten, organisch gewachsenen Community.
Hebe besonders wichtige Zitate durch eine andere Hintergrundfarbe oder eine größere Kachel hervor.
Featured-In Bar
Eine schmale Sektion direkt unter dem Hero-Bereich. Sie zeigt Logos von Presse-Outlets oder Zertifikaten. Es ist ein "Bürge-System", das sofort Vertrauen schafft.
Weniger ist mehr. Zeige nur die 3-5 stärksten Logos, um den Fokus nicht zu verwässern.
Big Number Counter
Große Zahlen, die beim Herunterscrollen hochzählen. Es belegt die Erfahrung und den Impact einer Marke durch harte Fakten in einem dynamischen Format.
Kombiniere die Zahl immer mit einem kurzen, klaren Label (z.B. "Erfolgreiche Projekte"), um den Kontext zu sichern.
Case Study Highlight
Eine großflächige Sektion, die ein einzelnes Projekt intensiv vorstellt. Es geht weg von der Menge hin zur Qualität und zeigt Problemlösungskompetenz.
Nenne das Ergebnis zuerst: "300% mehr Traffic für Kunden X" zieht stärker als nur der Name des Projekts.
Conversion & CTA
Floating Footer CTA
Eine dezente Leiste am unteren Bildschirmrand. Sie erscheint oft erst nach einer gewissen Scrolltiefe und bietet den wichtigsten nächsten Schritt permanent an.
Die Leiste sollte nicht mehr als 60-80px hoch sein, um den eigentlichen Content nicht zu verdecken.
Full-Width Impact CTA
Ein massiver Bereich am Ende der Seite. Er nutzt oft eine Komplementärfarbe zum Rest des Designs, um ein finales, unmissverständliches Angebot zu machen.
Halte den Text extrem kurz. Eine starke Headline und ein Button sind oft alles, was du hier brauchst.
Split-CTA Layout
Zwei Sektionen nebeneinander für unterschiedliche Pfade (z.B. "Für Privatkunden" vs. "Für Geschäftskunden"). Es hilft dem Nutzer, sich sofort selbst zu segmentieren.
Verwende unterschiedliche Helligkeiten für die beiden Seiten, um die visuelle Trennung zu verstärken.
Micro-Form Newsletter
Ein einzeiliges Formular, das oft nur aus E-Mail-Feld und Absenden-Button besteht. Es wird organisch in den Textfluss eingebaut und wirkt weniger "verkäuferisch".
Platziere dieses Formular idealerweise am Ende eines hilfreichen Artikels – dort ist die Bereitschaft am höchsten.
Exit-Intent Layout
Ein Pop-up Design, das speziell darauf ausgelegt ist, einen "unwiderstehlichen" Mehrwert (Lead Magnet) anzubieten. Es zielt auf die Psychologie der "Loss Aversion" ab.
Vermeide aggressive Farben. Biete echte Hilfe an statt nur Druck aufzubauen, um die Brand-Reputation zu wahren.
Content & Struktur
Clean FAQ Accordion
Fragen und Antworten, die sich erst beim Klick öffnen. Dies verhindert "Walls of Text" und lässt die Seite sauber und aufgeräumt wirken, während alle Infos verfügbar bleiben.
Nutze klare Icons für den Zustand (Plus/Minus) und achte auf eine flüssige Animation beim Öffnen.
Interactive Timeline
Ein vertikaler oder horizontaler Pfad, der Meilensteine verbindet. Es hilft dem Nutzer, komplexe Abläufe oder die Entwicklung einer Marke zeitlich einzuordnen.
Verwende Scroll-Trigger: Lass die Punkte der Timeline erst erscheinen, wenn der Nutzer an die entsprechende Stelle scrollt.
Team-Grid (Hover)
Ein Raster aus Porträts, die beim Drüberfahren zusätzliche Infos (Social Links, Expertise) einblenden. Es wirkt modern und interaktiv, ohne überladen zu sein.
Einheitliche Hintergründe bei den Teamfotos sind entscheidend für die professionelle Ruhe des Grids.
Multi-Step Process
Eine visuelle Abfolge von Arbeitsschritten. Es verdeutlicht dem Kunden, wie einfach die Zusammenarbeit ist, und schafft Transparenz über den Ablauf.
Verwende Icons und kurze Headlines. Der Nutzer sollte den Prozess in unter 5 Sekunden verstehen können.
Sticky Sidebar Nav
Ein Inhaltsverzeichnis, das am Rand "mitläuft". Es erlaubt dem Nutzer, jederzeit zwischen den Sektionen zu springen, ohne lange scrollen zu müssen.
Hebe den aktuell sichtbaren Menüpunkt farblich hervor (ScrollSpy), um die Orientierung zu perfektionieren.
Was sind UI-Pattern?
UI-Pattern sind bewährte Lösungsansätze für wiederkehrende Gestaltungsprobleme in digitalen Interfaces. Sie sind keine fertigen Templates, die man blind kopiert, sondern dokumentierte Best Practices – erprobte Wege, wie bestimmte Interaktionen, Navigationsprinzipien oder Inhaltsstrukturen so umgesetzt werden können, dass Nutzer intuitiv damit umgehen können.
Der entscheidende Punkt: UI-Pattern funktionieren, weil sie auf gelernten Verhaltensweisen aufbauen. Nutzer kennen das Hamburger-Menü, die Breadcrumb-Navigation, den Sticky Header oder den Fortschrittsbalken beim Checkout – und zwar ohne Anleitung. Genau das ist die Stärke von Patterns: Sie sparen kognitive Energie auf Nutzerseite, weil das Interface sich so verhält, wie es erwartet wird.
Warum das Rad nicht jedes Mal neu erfinden?
Kreativität im Webdesign bedeutet nicht, bei jedem Projekt bei null anzufangen. Gutes UI-Design kombiniert bewährte Muster mit durchdachter Anpassung an den konkreten Kontext. Wer UI-Pattern kennt, erkennt schnell, welcher Ansatz für welches Problem der richtige ist – und kann dann die Energie in die wirklich projektspezifischen Entscheidungen stecken.
Das spart nicht nur Zeit, sondern schützt auch vor teuren Fehlern. Viele schlechte UX-Entscheidungen entstehen nicht aus Unwissenheit, sondern weil Designer versuchen, eine originelle Lösung zu finden, wo eine bewährte Standardlösung die Nutzererwartung besser erfüllt hätte.
Was die Pattern-Sammlung abdeckt
Von Navigationssystemen über Formulargestaltung und Filtermechaniken bis hin zu Feedback-Elementen, Onboarding-Flows und Ladezuständen. Jedes Pattern wird beschrieben, sein typischer Einsatzbereich erklärt und auf häufige Stolperfallen hingewiesen. Denn Pattern richtig einzusetzen heißt auch, zu wissen, wann sie nicht passen.
Für wen ist die Pattern-Sammlung gedacht?
Für UI-Designer, die ihren Methodenkoffer strukturieren wollen. Für Webdesigner, die häufig im Interface-Bereich arbeiten und konkrete Lösungsvorlagen suchen. Und für alle, die im Kundenprojekt erklären müssen, warum eine bestimmte Interaktion so gebaut ist, wie sie gebaut ist – Pattern liefern dafür die sachliche Grundlage.
Gutes Interface-Design fühlt sich selbstverständlich an. UI-Pattern sind der Grund dafür.