IndexStyle

Ein Wörterbuch der Gestaltungsstile, geschrieben aus den Werken selbst.

Es ist blankes HTML. Es öffnet sich in jedem Browser und auf jedem Gerät, ohne App und ohne Konto, und Maschinen lesen dieselbe Seite.

Einträge776

Wörterbuch

Suche nach einem Stil oder beschreibe dein Vorhaben. Namensübereinstimmungen kommen zuerst; Zweck, Wirkung und Medium ergänzen Alternativen.

BeispieleBauhauseine hochwertige Karriereseiteeine vertrauenswürdige Finanz-App

24/48 angezeigt

Gedeutet alsTrustWeb / UIFinanzen

494

GOV.UK Design System — GDS Transport auf der Startseite von GOV.UK, 2025 — Wikimedia Commons / Public domain

GOV.UK Design System

GOV.UK デザインシステム / 2012– / Stil / Bildschirmsprachen

Warum passendTrustWeb / UIFinanzenTechnique

Die Gestaltungssprache, die der Government Digital Service der britischen Regierung für öffentliche Dienste veröffentlicht und pflegt. Alles läuft in einer einzigen schmucklosen, links ausgerichteten Spalte in der GDS Transport, und die grüne Schaltfläche behält rechte Ecken und gewinnt ihre Dicke aus einem dunkleren grünen Band an der Unterkante, um beim Drücken genau um diese Dicke einzusinken. Was den Tastaturfokus trägt, wird gelb und bekommt eine schwarze Linie darunter.

Eine einzige schmucklose, links ausgerichtete Spalte, fast ohne Kästen und ohne Schatten / Eine grüne Schaltfläche mit rechten Ecken und einem dunkleren grünen Band an der Unterkante, die beim Drücken genau um diese Tiefe einsinkt / Was den Tastaturfokus trägt, wird gelb und bekommt eine schwarze Linie darunter gezogen / Die Schriftgrade springen grob über 48, 36, 24, 19 und 16px, dazwischen gibt es nichts

design.mdBild-Prompt

539

Skeleton Screen — KI-generierte Interpretation
KI-Interpretation, keine Referenz

Skeleton Screen

スケルトン・スクリーン / 2013– / Technik / Interface-Stile

Warum passendTrustWeb / UIFinanzenTechnique

Ein Umgang mit dem Laden, der auf den Ladekreisel verzichtet, zuerst die leere Seite zeigt und die Information nach und nach hineinfließen lässt. Luke Wroblewski stellte das Verfahren 2013 unter diesem Namen vor, als Lehre aus seiner eigenen Anwendung Polar. Gezeigt wird nicht, dass man wartet, sondern dass es vorangeht.

Während des Ladens erscheinen weder Ladekreisel noch Fortschrittsbalken / Dort, wo Text und Bilder landen, stehen bereits leere Flächen in der Größe, die sie einnehmen werden / Die Anordnung steht fest, bevor die Daten kommen, und nichts verrutscht, wenn sie eintreffen / Die Information erscheint nicht auf einmal, sondern Bereich für Bereich

design.mdBild-Prompt

42

Bento Grid — KI-generierte Interpretation
KI-Interpretation, keine Referenz

Bento Grid

ベントーグリッド / 2020s / Layout / Informationsdesign

Warum passendTrustWeb / UIFinanzenTechnique

Teilt unterschiedliche Arten von Information in eigenständige Kästen und gibt so das Gesamtbild auf einen Blick.

Große und kleine Karten / Ausgerichtete Stege / Übersicht auf einem Screen / Module

design.mdBild-Prompt

1

Swiss — Josef Müller-Brockmann, Plakat Musica Viva — Wikimedia Commons / Public domain

Swiss

スイス・スタイル / 1950s– / Stil / Funktionalismus

Warum passendTrustWeb / UIFinanzenCalm

Stellt die Ordnung in den Vordergrund und macht die Information selbst zum Protagonisten.

Strenges Raster / Serifenlose Schrift / Asymmetrie / Sachliche Fotografie

design.mdBild-Prompt

118

Fluent 2 — KI-generierte Interpretation
KI-Interpretation, keine Referenz

Fluent 2

フルーエント2 / 2022– / Stil / Microsoft UI

Warum passendTrustWeb / UIFinanzenTechnique

Fasst Farbe, Schrift, Abstand, Radius und Tiefe in Tokens und setzt die Materialien Solid, Acrylic, Mica und Smoke rollenbezogen in allen Microsoft-Produkten ein.

Mica und Acrylic / Neutrale Tonhierarchie / Weiche Eckradien / Tiefe als Token

design.mdBild-Prompt

538

Solarized — Xcode 4 mit angewandtem Solarized Light, 2011 — Wikimedia Commons / CC BY 2.0 · © Jason Brennan from Ottawa, Canada

Solarized

ソラライズド / 2011– / Stil / Interface-Stile

Warum passendTrustWeb / UIFinanzenTechnique

Sechzehn Farben für Terminal und Editor, die Ethan Schoonover mit allen Werten offengelegt hat. Sie bestehen aus acht Grundtönen und acht Akzenten, und die Helligkeitsabstände der Grundtöne sind im CIELAB symmetrisch angelegt, sodass der Wechsel zwischen hellem und dunklem Grund den Leseeindruck nicht verändert. Der Helligkeitsunterschied wird gesenkt, und die Wörter trennt der Unterschied im Farbton.

Die Gründe sind weder reines Schwarz noch reines Weiß, einer neigt ins Blaugrüne, der andere ins Cremefarbene / Der Helligkeitsabstand zwischen Text und Grund bleibt klein und trifft das Auge sanfter als Schwarz auf Weiß / Die acht Akzente liegen in der Helligkeit fast gleichauf und sind allein am Farbton zu unterscheiden / Auch nach dem Wechsel von hellem zu dunklem Grund erscheint derselbe Akzent in derselben Rolle

design.mdBild-Prompt

554

Carbon Design System — IBM Carbon — UI-shell usage example from the archived official documentation — Carbon Design System contributors / Apache-2.0

Carbon Design System

Carbon Design System / 2015– / Stil / Bildschirmsprachen

Warum passendTrustWeb / UIFinanzenTechnique

IBMs System für datenreiche Unternehmensprodukte verbindet ein strenges Raster, IBM Plex und kompakte Komponenten, damit komplexe Arbeit lesbar bleibt.

IBM Plex und deutliche typografische Hierarchie / Weiße oder tiefgraue Arbeitsflächen / Dichte Tabellen, Filter und Seitennavigation / Blau für Handlung und Fokus reserviert

design.mdBild-Prompt

472

Material Design — Google, UI-Komponenten von Material Design — Wikimedia Commons / Public domain

Material Design

マテリアルデザイン / 2014– / Stil / Google UI

Warum passendTrustWeb / UIFinanzenTechnique

Entwurfssystem, das die physische Metapher von Papier und Tinte auf Regeln für Schatten und Überlagerung herunterbricht. Elemente erhalten eine Höhe, der Schatten zeigt die Hierarchie, die Bewegung trägt physische Kausalität. Es wurde zum Muster dafür, dass Interfacegestaltung als System verteilt wird.

Hierarchie und Schatten über die Höhe ausgedrückt / Flächen, die sich wie Papierbögen überlagern / Bewegung, die Ursache und Wirkung zeigt / Normierte Einheit für Abstände

design.mdBild-Prompt

326

Banknote Guilloche — US-Note zu 2 Dollar der Educational Series, 1896 — Wikimedia Commons / Public domain

Banknote Guilloche

紙幣のギヨシェ / 18th century– / Technik / Öffentliches Design

Warum passendTrustWeb / UIFinanzenTechnique

Der Banknotenstil, in dem maschinengeschnittene Guillochenkurven und gestochene Porträts die Fälschung abwehren und zugleich Kredit sichtbar machen. Die amerikanische Educational Series von 1896 erhob die Banknote zum allegorischen Meisterwerk.

Durchlaufende Guillochenkurven / Gestochene Tiefdruckporträts / Feine Guillochierarbeit im Grund / Hierarchien der Wertstufen

design.mdBild-Prompt

543

GitHub Primer — GitHub Primer ViewComponents — official file-tree snapshots across appearance modes — Copyright (c) 2020 GitHub / MIT

GitHub Primer

GitHub Primer / 2017– / Stil / Bildschirmsprachen

Warum passendTrustWeb / UIFinanzenTechnique

GitHubs Designsystem übersetzt dichte Entwicklungsabläufe in gemeinsame Regeln für Farbe, Schrift, Icons, Abstände und Komponenten. Es bevorzugt den Arbeitsfluss gegenüber Dekoration und hält viele Zustände und Aktionen auf engem Raum, ohne Barrierefreiheit oder responsive Anpassung aufzugeben.

Neutrale Flächen mit blauen Links und zurückhaltenden Statusfarben / Octicons zusammen mit kurzen Aktionsbezeichnungen / Feine Linien trennen Listen, Tabs und Seitenleisten / Gleichmäßige Stufen für Schrift und Abstände auch bei hoher Dichte

design.mdBild-Prompt

568

GitLab Pajamas — KI-generierte Interpretation
KI-Interpretation, keine Referenz

GitLab Pajamas

GitLab Pajamas / 2018– / Stil / Bildschirmsprachen

Warum passendTrustWeb / UIFinanzenTechnique

GitLabs Bildschirmsprache verbindet Code, Issues, Review, CI/CD und Sicherheit in einem DevSecOps-Produkt durch GitLab Sans und Mono, permanente Navigation, dichte Listen und eine violett gefärbte Neutralpalette.

GitLab Sans mit GitLab Mono für Code / Geschichtete Struktur aus linker Navigation und Anwendungsrahmen / Dichte Issue-, Merge-Request- und Pipeline-Listen / Weiße oder anthrazitfarbene Flächen mit Violett als Markenfokus

design.mdBild-Prompt

229

Schematic Transit Diagram — Aktuelles Beispiel eines schematischen Liniennetzplans (CC BY-SA 3.0) · © Oslo_Metro_diagram.svg : Arsenikk derivative work: Arsenikk (talk)

Schematic Transit Diagram

スキーマティック路線図 / 1933– / Layout / Informationsdesign

Warum passendTrustWeb / UIFinanzenTechnique

Verzichtet auf geografische Genauigkeit zugunsten von Waagerechten, Senkrechten und 45-Grad-Linien mit gleichmäßig verteilten Stationen. Becks Plan der Londoner Underground von 1933 machte ihn zur gemeinsamen Sprache der Liniennetzpläne weltweit.

Auf 45 Grad beschränkte Linienführung / Gleichmäßige Stationsabstände / Farbcodierte Linien / Unabhängigkeit von der Geografie

design.mdBild-Prompt

534

Breeze — Breeze unter KDE Plasma 5, helles Farbschema (Kubuntu 20.10), 2020 — Wikimedia Commons / CC BY 4.0 · © Kubuntu, Breeze

Breeze

ブリーズ / 2014– / Stil / Bildschirmsprachen

Warum passendTrustWeb / UIFinanzenTechnique

Der voreingestellte visuelle Stil, den KDE zusammen mit Plasma 5 einführte. Die Ankündigung beschreibt ihn selbst als flaches Thema mit hohem Kontrast, und die Sinnbilder werden einfacher und nahezu einfarbig geordnet. Statt Schmuck trägt der Satz die Unterscheidung der Elemente, und eine helle und eine dunkle Fassung liegen von Anfang an als Paar vor.

Flache Flächen ohne Schattierung, bei denen allein Farbunterschied und Kontrast die Grenzen ziehen / Sinnbilder und Symbole sind aufs Einfarbige hin geordnet, die Zahl der Farben bleibt klein / Der Kontrast zwischen Überschrift und Text übernimmt die Aufgabe des Schmucks, und der Satz trägt das Bild / Dieselben Symbole gibt es als aufeinander abgestimmtes Paar in Hell und Dunkel

design.mdBild-Prompt

571

Canonical Vanilla — KI-generierte Interpretation
KI-Interpretation, keine Referenz

Canonical Vanilla

Canonical Vanilla / 2013– / Stil / Bildschirmsprachen

Warum passendTrustWeb / UIFinanzenTechnique

Canonicals CSS-basierte Bildschirmsprache vereint Ubuntu, MAAS, Juju und verwandte Seiten und Anwendungen durch Ubuntu-Schrift, geteilte Raster, linierte Abschnitte und großzügigen Raum, optimiert für lange technische Inhalte.

Dünne große Überschriften mit kleineren fetten Überschriften in Ubuntu / Asymmetrische 25/75- und 50/50-Teilungen / Feine Linien über Abschnitten und großzügiger Vertikalraum / Weiße Flächen, dunkler Text und orange- oder auberginefarbener Fokus

design.mdBild-Prompt

7

Minimalism — Dan Flavin, Untitled (to Don Judd, Colorist) 1–5, 1987, Tate Modern — Wikimedia Commons / CC BY 2.0 · © Grand Parc—Bordeaux, France from France

Minimalism

ミニマリズム / 1960s– / Stil / Funktionalismus

Warum passendTrustWeb / UIFinanzenCalm

Nimmt Elemente weg, um Bedeutung und Spannung des Verbleibenden zu maximieren.

Weite Leerräume / Wenige Elemente / Stille Farbigkeit / Präzise Abstände

design.mdBild-Prompt

544

Adobe Spectrum — KI-generierte Interpretation
KI-Interpretation, keine Referenz

Adobe Spectrum

Adobe Spectrum / 2013– / Stil / Bildschirmsprachen

Warum passendTrustWeb / UIFinanzenTechnique

Adobes anwendungsübergreifendes Designsystem. Nach den Prinzipien Rational, Menschlich und Fokussiert verändert es die Dichte zwischen Desktop und Mobilgerät und verhindert zugleich, dass werkzeugreiche Oberflächen vom eigentlichen Werk ablenken.

Neutrale Flächen, leuchtende Farbe bleibt der Auswahl vorbehalten / Icons, Schrift und Rahmen skalieren gemeinsam / Werkzeugleisten und Eigenschaftenfelder sind durch feine Teilungen verbunden / Das kreative Werk bleibt stärker als die Oberfläche

design.mdBild-Prompt

489

Adwaita — Nathan Hadley, GNOME-Einstellungen 48, 2025 — Wikimedia Commons / CC BY-SA 4.0 · © Nathan Hadley (Pigeon)

Adwaita

アドワイタ / 2011– / Stil / Bildschirmsprachen

Warum passendTrustWeb / UIFinanzenTechnique

Adwaita nennt GNOME das eigene Standardaussehen, und die Richtlinien verlangen, dass ein und derselbe Satz von Bauteilen die helle, die dunkle und die kontrastreiche Fassung tragen muss. Eine Kopfleiste quert die obere Fensterkante, und die Schaltflächen darauf werden ohne Hintergrund und ohne Rahmen gezeichnet. Symbole sind einheitlich einfarbige Piktogramme von 16x16px.

Eine einzige Kopfleiste quer über die obere Fensterkante, auf drei Ausrichtungspunkte verteilt, mit dem Fenstertitel in der Mitte / Die Schaltflächen der Kopfleiste tragen weder Hintergrund noch Rahmen, auf der Fläche stehen nur Zeichen und Beschriftung / Einfarbige symbolische Piktogramme, gezeichnet in 16x16px, mit Hauptstrichen von 2px und frontalen Formen ohne Perspektive / Eine veröffentlichte Palette mit fünf Stufen je Farbton, darunter Blue 3 in #3584e4

design.mdBild-Prompt

566

PatternFly — PatternFly — official desktop data-list demo snapshot — Copyright (c) 2019 Red Hat, Inc. / MIT

PatternFly

PatternFly / 2012– / Stil / Bildschirmsprachen

Warum passendTrustWeb / UIFinanzenTechnique

Red Hats quelloffene Bildschirmsprache für Unternehmensprodukte hält komplexe Infrastruktur durch dichte Navigation, Datenansichten und streng kontrollierte Statusfarben handhabbar.

Dunkler Masthead und linke Navigation / Dichte Tabellen und Formulare auf weißen oder hellgrauen Flächen / Blau für Hauptaktionen, Rot, Orange oder Grün für Status / Liste, Detail und Aktion in abgestimmten Bereichen

design.mdBild-Prompt

556

SAP Fiori — KI-generierte Interpretation
KI-Interpretation, keine Referenz

SAP Fiori

SAP Fiori / 2013– / Stil / Bildschirmsprachen

Warum passendTrustWeb / UIFinanzenTechnique

SAPs rollenbasierte Designsprache reduziert Unternehmensprozesse auf die Informationen und Aktionen, die jede Person benötigt, und führt sie konsistent über Geräte hinweg.

Rollenbasierte Launchpad-Kacheln / Shell-Leiste und Objektseiten / Kompakte Tabellen und semantischer Status / Ruhiges Blau auf hellen Arbeitsflächen

design.mdBild-Prompt

546

Ant Design — KI-generierte Interpretation
KI-Interpretation, keine Referenz

Ant Design

Ant Design / 2015– / Stil / Bildschirmsprachen

Warum passendTrustWeb / UIFinanzenTechnique

Ein Designsystem, das Unternehmens-Webanwendungen mit wiederverwendbaren Komponenten und Seitenmustern bei niedriger Entropie hält. Seine Werte Natürlich, Gewiss, Bedeutungsvoll und Wachsend systematisieren Tabellen, Formulare, Hierarchie und Zustände, ohne die Informationsdichte zu verringern.

Dichte Tabellen in kleiner Schrift und mit feinen Linien / Blaue Hauptaktionen mit eindeutigen semantischen Farben / Einheitliche Formulare, Seitennavigation, Bäume und Tabellen / Lesbarkeit durch Ausrichtung und Wiederholung statt durch großzügigen Raum

design.mdBild-Prompt

557

U.S. Web Design System — Startseite von USA.gov, 2023 — Wikimedia Commons / Public domain

U.S. Web Design System

米国Webデザインシステム / 2015– / Stil / Öffentliches Design

Warum passendTrustWeb / UIFinanzenCalm

Ein gemeinsames System für zugängliche, mobilfreundliche und vertrauenswürdige Webdienste der US-Bundesverwaltung, aufgebaut aus geprüften Mustern des öffentlichen Dienstes.

Weiß, Marineblau und zurückhaltendes Bundesrot / Große schlichte Überschriften und gut lesbarer Text / Banner für offizielle Webseiten / Klare Formulare, Hinweise und Schrittanzeigen

design.mdBild-Prompt

547

Shopify Polaris — KI-generierte Interpretation
KI-Interpretation, keine Referenz

Shopify Polaris

Shopify Polaris / 2017– / Stil / Bildschirmsprachen

Warum passendTrustWeb / UIFinanzenTechnique

Shopifys UI-Framework gibt Produkten, Bestellungen, Zahlungen und Kunden eine gemeinsame Handelssprache. Karten und Abschnitte trennen Entscheidungen, kurze Status- und Handlungstexte helfen, den Shop in Bewegung zu halten.

Weiße Karten auf hellem Grund gestapelt / Grün als Zeichen für Erfolg oder Fortschritt / Titel, Status und wichtigste Aktion oben gebündelt / Kompakte Kennzeichnungen für Produkt-, Bestell- und Zahlungsstatus

design.mdBild-Prompt

59

Isotype — Otto Neurath und Gerd Arntz, Gesellschaft und Wirtschaft, 1930 — via gerdarntz.org

Isotype

アイソタイプ / 1920s–1940s / Layout / Informationsdesign

Warum passendTrustWeb / UIFinanzenTechnique

Übersetzt Mengen in wiederholte, gleich große Symbole und macht den Vergleich noch vor der Sprache lesbar.

Einheitliche Piktogramme / Wiederholung der Zeichen / Vergleichsachsen / Reduzierte Farbigkeit

design.mdBild-Prompt

230

Pictogram System — AIGA/DOT-Symbol „Restaurant“ — Wikimedia Commons / Public domain

Pictogram System

案内用ピクトグラム / 1964– / Stil / Informationsdesign

Warum passendTrustWeb / UIFinanzenTechnique

Einheitliche Zeichensysteme, die Einrichtungen und Handlungen ohne Sprache benennen. Tokio 1964 systematisierte Sport- und Leitsymbole; der Verkehrszeichensatz von AIGA/DOT wurde als gemeinfreies System zum Weltstandard.

Geometrisierte Menschenfiguren / Einheitliche Strichstärke / Konsistenz als System / Unabhängigkeit von der Sprache

design.mdBild-Prompt

Redaktionelle Grundsätze

IndexStyle sammelt nicht jeden Begriff aus dem Designumfeld. Ein eigener Eintrag muss eine erkennbare, reproduzierbare und von Nachbarn unterscheidbare Bildsprache beschreiben. Aufnahmekriterien

Nach oben