Erklärung Eine Snackbar ist ein UI Pattern, das genutzt wird, um den Benutzer einer Webanwendung über einen gerade ablaufenden oder abgeschlossenen Prozess zu informieren. Dies geschieht in Form einer kurzen Meldung, die meist vorübergehend am oberen oder unteren Bildschirmrand erscheint. Snackbars sollten so gestaltet sein, dass sie die Benutzerfreundlichkeit nicht beeinträchtigen und ohne die Interaktion […]
Mehr erfahren
Erklärung Ein Design System ist in der Regel eine Kombination aus (Living) Style Guides, Component Libraries und allgemein gefassten Richtlinien – bspw. zur Tonalität von Inhalten oder zur Verwendung von Komponenten. Es dient im Idealfall als »Single Source of Truth«, um das Design verschiedener Plattformen und Channels (z. B. Web, Print, App) möglichst zentral zu […]
Mehr erfahren
Erklärung Ein Pop-Over wird auf einer Webseite dazu genutzt, um zusätzliche Inhalte anzuzeigen. Diese Inhalte sind zwar nicht wichtig genug, um von vornherein auf der Webseite dargestellt zu werden, können aber zu einem verbesserten Benutzererlebnis beitragen. Ein Pop-Over tritt in der Regel erst nach einer Aktion des Benutzers auf, wenn z. B. ein bestimmtes Element […]
Mehr erfahren
Erklärung »Inclusive Design« bezeichnet den Ansatz, im gesamten Designprozess die Bedürfnisse unterschiedlichster Personen zu berücksichtigen. In Web Design Projekten wird dabei von Beginn an der Fokus auf alle Menschen gerichtet. Es geht darum Barrieren zu erkennen, aus der Vielfalt der Menschen zu lernen und durch diese Erkenntnisse ein Design zu entwickeln, von denen alle profitieren können. […]
Mehr erfahren
Erklärung Sog. »Responsive Patterns« sind erprobte und bewährte Lösungen für oft wiederkehrende Problemstellungen im Responsive Web Design (RWD). Bei diesen Lösungen steht die optimale Darstellung auf unterschiedlichen Ausgabegeräten und Displaygrößen im Vordergrund. Einige Beispiele: Priority+ Navigation: Je nach verfügbarem Platz zeigt die horizontale Navigation nur so viele Elemente, wie auf den Bildschirm passen. Die restlichen […]
Mehr erfahren
Erklärung UI Patterns sind erprobte und bewährte Lösungen für oft wiederkehrende Problemstellungen im User Interface (UI) Design. Das betrifft sowohl Layout-Anforderungen für ganze Seiten als auch einzelne Komponenten. Einige Beispiele für Komponenten sind: Accordions = Problem: Wie stellt man Inhalte bereit, die nur optional von Interesse sind, z. B. bei FAQ? Breadcrumbs = Problem: Wie weiß […]
Mehr erfahren
Erklärung »Dark Patterns» sind Vorgehensweisen (deshalb Muster = pattern), mit denen unlautere Ziele erreichen werden sollen. Diese laufen in der Regel den eigentlichen Absichten derjenigen zuwider, die mit »dunklen Mustern« attackiert werden. Im Bereich des Web Design trifft das vor allem auf zwei Anwendungsbereiche zu: Besucher von Webseiten sollen dort eine Aktion auslösen, die sie gar […]
Mehr erfahren
Erklärung Von Faden (engl. verblassen) spricht man im Web Design, wenn Elemente von einem Zustand in den anderen übergehen – »überblenden«. Der Übergang von dem einen in den anderen Zustand ist beim Faden nicht schlagartig sondern an eine Zeitkomponente gekoppelt. »Fade-In« oder »Fade-Out« beschriebt dabei im speziellen den Übergang vom unsichtbaren in den sichtbaren Zustand, bzw. […]
Mehr erfahren
Erklärung Im Unterschied zu einem konventionellen Styleguide legt ein Living Styleguide (LSD) vor allem das Erscheinungsbild und Verhalten einer Website oder Applikation fest. Typografische und gestalterische Vorgaben werden in Komponenten unterschiedlicher Komplexität umgesetzt. Ein Living Styleguide ist im Prinzip eine Website, so dass die in ihm festgehaltenen Vorgaben ohne Verluste im Ausgabemedium Browser überprüft werden […]
Mehr erfahren
Erklärung Das sog. Card-Element ist eine häufig benutzte Komponente im User Interface-Design (UI Design) – insbesondere im responsive Design. Das Card-Element dient als anklickbarer Einstiegspunkt zu ausführlicheren Informationen. Die Card enthält in der Regel verschiedene Elemente wie Bild, Überschrift und Teaser. Card-Elemente sind sowohl in der Anordnung ihrer eigenen Bestandteile als auch in der Anordnung in Gruppen […]
Mehr erfahren