Abstandsmaßstab Spacing Scale
Eine Spacing-Scale ist eine kleine Sammlung von Abstandsgrößen. Sie zeigt Gruppen und bewahrt einen stetigen visuellen Rhythmus.
↗Design
Lernen Sie, wie man Bildschirme klar, konsistent, leicht nutzbar und für alle zugänglich gestaltet.
01 / Atlas
Alle Begriffe aus Design
Einen Begriff öffnen für eine einfache Bedeutung, ein Beispiel, wann er verwendet wird, wie offiziell er ist und seinen Codenamen.
-
01 · Kern -
02 · Mehr Details Affordance Affordance
Ein Affordance ist ein sichtbarer oder spürbarer Hinweis. Er zeigt, wie man etwas benutzt.
↗ -
03 · Mehr Details Apple Human Interface Guidelines Apple Human Interface Guidelines
Die Apple Human Interface Guidelines erklären das Design für Apple-Plattformen. Sie behandeln Aktionen, Optik, Steuerelemente, Eingaben, Barrierefreiheit und Plattform-Unterschiede.
↗ -
04 · Mehr Details Aqua Aqua
Aqua ist ein glänzender Design-Stil aus dem frühen macOS. Es nutzt leuchtende Bedienelemente, tiefe Glaseffekte, dünne Streifen und grelles Blau.
↗ -
05 · Kern B2B-Firmenseite B2B Corporate Site
Eine B2B-Corporate-Site hilft Geschäftspartnern, die Fähigkeiten, Regeln, Vertrauenswürdigkeit und Passgenauigkeit eines Unternehmens zu prüfen. Sie unterstützt auch beim Kauf oder bei Partnerschaften.
↗ -
06 · Kern Barrierefreiheit Accessibility
Barrierefreiheit hilft Menschen mit verschiedenen Fähigkeiten, ein Produkt zu verstehen und zu benutzen.
↗ -
07 · Mehr Details Border Radius & Squircle — Lernpaket Border Radius & Squircle — Learning Bundle
Dieser Leitfaden trennt drei Ideen. Sie sind Standard-CSS-border-radius, Entwurf von Eckformen: Squircle, und andere squircle-ähnliche Formen oder Plattformmasken. Das Paket ist kein standardisierter Designbegriff.
↗ -
08 · Mehr Details Claymorphism Claymorphism
Claymorphism ist ein verspielter Stil mit pummeligen Formen und runden Ecken. Weiche Schatten und pastellfarbene Flächen lassen es wie Ton aussehen.
↗ -
09 · Mehr Details CSS Squircle-Ecke CSS Squircle Corner
Im CSS Borders Level 4 Entwurf ist squircle ein Eckformwert für eine konvexe Superellipse zwischen rund und quadratisch. Es entspricht superellipse(2), benötigt einen von Null verschiedenen Border-Radius und erfordert immer noch eine Browser-Unterstützungsprüfung.
↗ -
10 · Kern CSS-Rahmenradius CSS Border Radius
CSS border-radius macht Box-Ecken aus Viertel-Ellipsen unter Verwendung horizontaler und vertikaler Radien. Es ändert das Zeichnen und Clipping, aber nicht die Layoutgröße der Box und erzeugt keine mathematische Squircle.
↗ -
11 · Kern Dark Mode Dark Mode
Dark Mode passt Flächen, Text, Rahmen, Medien und Zustände für eine dunkle Umgebung an.
↗ -
12 · Kern Design-Token Design Token
Ein Design Token benennt eine Design-Entscheidung. Beispiele sind eine Farbe, ein Abstand, eine Schriftart oder eine Bewegungs-Geschwindigkeit.
↗ -
13 · Kern Designsystem Design System
Ein Design System ist eine geteilte, gepflegte Sammlung von Regeln, Design Tokens, Komponenten, Mustern und Anleitungen.
↗ -
14 · Kern Direct-to-Consumer E-Commerce DTC E-commerce
DTC-E-Commerce lässt eine Marke direkt an Kunden verkaufen. Es deckt Entdeckung, Produktwahl, Zahlung, Lieferung und Hilfe nach dem Kauf ab.
↗ -
15 · Kern Editorial Design Editorial Design
Editorial Design ordnet eine Geschichte durch Lesetempo, Schrift, Bilder, Bildunterschriften und wiederkehrende Seitenmuster an.
↗ -
16 · Kern Farbkontrast Color Contrast
Farbkontrast ist der gemessene Helligkeitsunterschied zwischen Inhalt und dem direkten Hintergrund. Es zeigt, ob Texte und Kanten leicht zu erkennen sind.
↗ -
17 · Kern Farbpalette Color Palette
Eine Color Palette ist eine geplante Farbgruppe. Jede Farbe hat eine klare Rolle, einen Status oder eine Oberfläche.
↗ -
18 · Kern Farbverlauf Gradient
Ein Gradient ist ein sanfter Wechsel zwischen Farben oder Transparenz. Er kann einer Linie, einem Kreis, einem Winkel oder einem Netz folgen.
↗ -
19 · Kern Flaches Design Flat Design
Flaches Design verwendet einfache Formen, einfarbige Farben und klare flache Bereiche mit wenig künstlicher Tiefe.
↗ -
20 · Mehr Details Flüssigglas Liquid Glass
Flüssigglas ist ein beweglicher, transparenter Materialstil. Er nutzt linseartige Biegungen, Glanzlichter und Formen, die scheinbar zusammengefügt oder flexibel erscheinen.
↗ -
21 · Kern Fokus-Ring Focus Ring
Eine sichtbare Linie oder Hervorhebung um das Bedienelement, das gerade Tastatureingaben erhält.
↗ -
22 · Mehr Details Frutiger Aero Frutiger Aero
Frutiger Aero ist ein hoffnungsvoller Stil der Mitte der 2000er Jahre. Er mischt glänzende Oberflächen mit blauem Himmel, Wasser, grünen Pflanzen, Blasen und freundlich aussehender Technologie.
↗ -
23 · Mehr Details Glassmorphismus Glassmorphism
Glassmorphismus ist ein visueller Stil mit klaren, geschichteten Oberflächen. Es verwendet Unschärfe, helle Rahmen und ein kleines Maß an Tiefe.
↗ -
24 · Mehr Details Ikonographie Iconography
Ikonographie ist ein gemeinsames Symbolset mit einheitlichem Aussehen und klaren Bedeutungen für Aktionen und Ideen.
↗ -
25 · Kern Interaktionszustand Interaction State
Ein Interaktions-Zustand zeigt, wie ein Element aktuell aussieht. Beispiele sind Standard, Hover, Fokus, Gedrückt, Deaktiviert, Laden, Fehler und Erfolg.
↗ -
26 · Kern Komponente Component
Eine Komponente ist ein wiederverwendbarer Teil einer Oberfläche mit klarem Aufbau, Verhalten, Status und Grenzen.
↗ -
27 · Kern Material Design Material Design
Material Design ist ein System für Komponenten und Interaktionen. Es verwendet geschichtete Oberflächen, Bewegung mit Zweck, flexible Layouts und gemeinsame Designtoken.
↗ -
28 · Mehr Details Memphis-Stil Memphis Style
Memphis-Stil ist ein mutiger postmoderner Look. Er verwendet starke Formen, aufeinanderprallende Farben, Muster, ungleichmäßige Balance und verspielte Energie.
↗ -
29 · Kern Minimalismus Minimalism
Minimalismus entfernt, was ein Design nicht benötigt. Er hält das Produkt dennoch klar, nützlich und unterscheidbar.
↗ -
30 · Mehr Details Neobrutalismus Neobrutalism
Neobrutalismus ist ein mutiger, kontrastreicher digitaler Stil. Er verwendet einfache Formen, dicke Rahmen, direkte Farben und ein klares mechanisches Layout.
↗ -
31 · Mehr Details Neumorphismus Neumorphism
Neumorphismus ist ein sanfter, kontrastarmer Stil. Licht- und Dunkelschatten lassen Bedienelemente so erscheinen, als wären sie aus einer einfarbigen Oberfläche erhaben oder hineingedrückt.
↗ -
32 · Kern Notion-artiger Arbeitsbereich Notion-style Workspace
Ein Notion-style Workspace nutzt das ruhige Aussehen von Dokumenten. Es bevorzugt lesbaren Text, Inhalts-Blöcke, ruhige Bedienelemente und offenen Raum.
↗ -
33 · Kern Organisches Design Organic Design
Organisches Design folgt Formen, die in der Natur vorkommen. Es verwendet ungleichmäßige Kurven, taktile Texturen, natürliche Farben und weniger mechanische Layouts.
↗ -
34 · Mehr Details Progressive Offenlegung Progressive Disclosure
Progressive Offenlegung zeigt zuerst die benötigten Optionen und enthüllt schwierigere Optionen nur, wenn sie relevant werden.
↗ -
35 · Kern Responsives Design Responsive Design
Responsives Design lässt Layout, Inhalt und Steuerungen sich ändern, um zum verfügbaren Platz und Gerät zu passen.
↗ -
36 · Kern SaaS-Marketingseite SaaS Marketing Site
Eine SaaS Marketing Site erklärt einer Zielgruppe ein Problem und einen Software-Dienst. Sie hilft Besuchern, die Passung zu beurteilen und den nächsten Schritt zu wählen.
↗ -
37 · Kern Schatten & Höhe Shadow & Elevation
Ein Schatten ist ein visueller Effekt. Elevation ist das Tiefenverhältnis zwischen Oberflächen, das der Scharten erklären kann.
↗ -
38 · Mehr Details Schweizer Stil Swiss Style
Der Schweizer Stil verwendet klare Raster und ungleichmäßige, aber ausgewogene Layouts. Er verwendet auch serifenlose Schriftarten, Fotos und eine strikte visuelle Ordnung.
↗ -
39 · Mehr Details Skala eingeben Type Scale
Eine Type-Scale ist eine kleine, geplante Sammlung von Textgrößen und Zeilenhöhen.
↗ -
40 · Mehr Details Skeuomorphismus Skeuomorphism
Skeuomorphismus kopiert vertraute reale Objekte, um eine digitale Steuerung zu erklären. Es kann auch deren Materialien kopieren.
↗ -
41 · Kern Terminal-Ästhetik Terminal Aesthetic
Terminal-Ästhetik leiht sich von Kommandozeilenbildschirmen. Sie verwendet monospaced Text, eine enge Hierarchie, Prompt-Zeichen, wenige Farben und einen klaren Status.
↗ -
42 · Kern Typografie Typography
Typografie ist, wie Textstile ausgewählt und angeordnet werden, um Wörter lesbar, geordnet und markenkonform zu machen.
↗ -
43 · Kern Variante Variant
Eine Variante ist eine genehmigte Version einer Komponente für eine andere Größe, Stärke oder Einstellung.
↗ -
44 · Kern Verspielte Illustration Playful Illustration
Verspielte Illustration verwendet lebhafte Charaktere, Formen, Farben und visuelle Witze. Sie kann Wärme, Bedeutung oder Markencharakter hinzufügen.
↗ -
45 · Kern Visuelle Hierarchie Visual Hierarchy
Visuelle Hierarchie zeigt, was Menschen zuerst, als Nächstes und zuletzt bemerken, durch Größe, Kontrast, Platzierung und Raum.
↗ -
46 · Mehr Details Volkssprache Web Vernacular Web
Das Volkssprach-Web kopiert die alltäglichen Seiten, die Gemeinschaften erstellen. Es unterscheidet sich von polierten Systemen, die von großen Gruppen gemacht werden.
↗ -
47 · Mehr Details Wabi-sabi Wabi-sabi
Wabi-sabi ist eine japanische Sicht auf Schönheit. Es schätzt Begrenzungen, Veränderung, ungleiche Formen, Alter und ehrliche Materialien mehr als perfekte Politur.
↗ -
48 · Mehr Details Web Brutalismus Web Brutalism
Web-Brutalismus ist ein roher Webstil. Er zeigt Struktur, Browser-Standards, schlichte Typografie und geplante Rauheit statt gewöhnlicher Politur.
↗ -
49 · Mehr Details Windows Aero Windows Aero
Windows Aero ist ein Desktop-Stil aus den späten 2000er Jahren. Er verwendet durchsichtige Fensterrahmen, unscharfes Glas, weiches Leuchten und geschichtete Ränder.
↗ -
50 · Mehr Details Y2K Digitale Ästhetik Y2K Digital Aesthetic
Diese digitale Ästhetik ist ein Retro-Future-Stil aus der späten 1990er- und frühen 2000er-Jahre-Digitalkultur. Sie verwendet oft Chrom, Pixel, helle Verläufe und verspielte Computer-Details.
↗