Thema
Design
Interfaces, die funktionieren: Layout, Typografie, Farbe und Interaktion.
- 17 Artikel
-
Design
Comic Sans: Warum die meistgehasste Schrift der Welt unfair behandelt wird
Comic Sans gilt als meistgehasste Schrift der Welt, zu Unrecht. Ihre Geschichte zeigt, warum der Hass eigentlich dem falschen Einsatz gilt. -
Design
Formulare, die niemand abbricht: 12 Regeln für bessere Formular-UX
Sichtbare Labels, Validierung im richtigen Moment, hilfreiche Fehlermeldungen: 12 erprobte Regeln für Formulare, an einem Checkout-Beispiel Schritt für Schritt erklärt. -
Design
Design Systems für kleine Teams: Wann es sich lohnt und wie du klein anfängst
Wann sich ein Design System für kleine Teams lohnt und wie du es in zwölf Wochen aufbaust: von der UI-Inventur über Design Tokens bis zu den ersten zehn Komponenten. -
Design
Touch-Ziele: Wie groß Buttons auf dem Smartphone sein müssen
44, 48 oder 24? Woher die bekannten Mindestgrößen für Touch-Ziele kommen, warum die Trefferfläche wichtiger ist als die sichtbare Größe und was an der Daumenzone wirklich dran ist. -
Design
Dark Mode richtig gestalten: Farben, Kontraste und typische Fehler
Ein guter Dark Mode ist mehr als invertierte Farben. Was die Forschung zur Lesbarkeit sagt und wie du Flächen, Akzentfarben, Kontraste und Bilder für dunkle Oberflächen gestaltest. -
Design
Die vergessenen Screens: Empty States, Ladezustände und Fehlerseiten
Leere Listen, Ladeanzeigen und Fehlerseiten entscheiden oft darüber, ob Menschen weitermachen oder aufgeben. Wie diese Zustände den Weg zeigen, statt Leere zu hinterlassen, an einem Rechnungstool Schritt für Schritt erklärt. -
Design
Farben im Interface: Die Grundlagen für deine erste Farbpalette
Neutraltöne, Primärfarbe, Akzent und Statusfarben: So baust du ohne Farbtheorie eine erste Farbpalette für dein Interface, die verständlich ist und genug Kontrast hat. -
Design
Abstände und Raster im Interface: Weißraum, 8-Punkt-System und Layout-Grids einfach erklärt
Warum Abstände über Ordnung und Lesbarkeit entscheiden: Weißraum, das 8-Punkt-System und Layout-Grids einfach erklärt, mit Vorher-nachher-Beispielen und einer Anleitung für Figma. -
Design
Mobile First und Responsive Design: So funktioniert deine Website auf jedem Bildschirm
Was Responsive Design und Mobile First bedeuten, wie du Inhalte für kleine Bildschirme sortierst, Breakpoints setzt und Touch-Ziele richtig dimensionierst. Eine Einführung ohne Vorwissen, an einem durchgehenden Beispiel erklärt. -
Design
Typografie für Bildschirme: Schriftgröße, Zeilenlänge und Zeilenabstand
Welche Schriftgröße, wie viele Zeichen pro Zeile, wie viel Zeilenabstand? Bewährte Werte für Text am Bildschirm, woher sie stammen und wie du sie direkt in Figma und im CSS umsetzt. -
Design
Buttons richtig gestalten: Hierarchie, Beschriftung, Zustände und Größe
Welcher Button ist der wichtigste, was steht drauf, wie reagiert er und wie groß muss er sein? Die Gestaltung von Buttons und Call to Actions, an einem Beispiel Schritt für Schritt erklärt. -
Design
Gestaltgesetze im Interface: Nähe, Ähnlichkeit und Geschlossenheit
Warum Menschen manche Elemente als zusammengehörig sehen und andere nicht: Nähe, Ähnlichkeit und Geschlossenheit verständlich erklärt, mit Vorher-nachher-Beispielen und einer Einstellungsseite, die Schritt für Schritt besser wird. -
Design
Visuelle Hierarchie: So lenkst du den Blick durch dein Interface
Größe, Gewicht, Farbe, Abstand und Position entscheiden, was Menschen auf deiner Seite zuerst sehen. So setzt du visuelle Hierarchie gezielt ein, mit Vorher-nachher-Beispielen und einfachen Tests. -
Design
Wireframe, Mockup, Prototyp: Was ist der Unterschied?
Wireframe, Mockup und Prototyp beantworten drei verschiedene Fragen: Was steht wo, wie sieht es aus, und funktioniert es? An einem Beispielprojekt siehst du, wann du welchen Entwurf brauchst und wem du was zeigst. -
Design
Die 4 meistgestellten Fragen zum Burger-Menü
Wird das Burger-Icon überhaupt erkannt, welche Nachteile hat es – und wann ergibt die versteckte Navigation wirklich Sinn? -
Design
Was ist Atomic Design?
Wie die Design-Methode Atomic Design Webprojekte in ihre kleinsten Bausteine zerlegt und die Zusammenarbeit von Design und Entwicklung vereinfacht.