DucDZ Checkliste

DESIGN-BIBLIOTHEK

Designsystem

Sorgen Sie dafür, dass die Komponenten konsistent, leicht verständlich und benutzerfreundlich sind.

Weitere WerkzeugeAgent skillFigma skill

Checklisten entdecken

Plattform oder Thema wählen.

Weitere Werkzeuge

Gestaltungsgrundlagen

Regeln für Typografie, Farben, Abstände, Tokens und Barrierefreiheit festlegen.

5
Designsystem

Typografie

Erstellen Sie klare Inhaltshierarchien in jeder Größe.

8 PrüfpunkteDesignsystem

Design-Token

Gemeinsame Werte benennen und verwalten.

7 PrüfpunkteDesignsystem

Barrierefreiheit

Stellen Sie sicher, dass das Produkt auf vielfältige Weise angezeigt und manipuliert werden kann.

10 PrüfpunkteDesignsystem

Abstand / Raster

Halten Sie den Layout-Rhythmus konsistent, wenn sich Inhalte und Bildschirme ändern.

7 PrüfpunkteDesignsystem

Farbsystem

Verwenden Sie Farben, die eine klare Rolle spielen und in jeder Benutzeroberfläche ihre Bedeutung behalten.

8 Prüfpunkte

Oberflächenkomponenten

Struktur, Varianten und Zustände jeder Komponente prüfen.

27
Designsystem

Akkordeon

Reduzieren Sie Inhalte und erleichtern Sie gleichzeitig das Auffinden und Navigieren.

6 PrüfpunkteDesignsystem

Banner

Stellen Sie wichtige Informationen in den richtigen Kontext.

6 PrüfpunkteDesignsystem

Optionsfelder

Macht die Einzelauswahl klar und einfach zu bedienen.

6 PrüfpunkteDesignsystem

Tooltip

Fügen Sie eine Erklärung hinzu, ohne die erforderlichen Informationen auszublenden.

6 PrüfpunkteDesignsystem

Modaler Dialog

Sorgen Sie dafür, dass Ihre Entscheidungen fokussiert bleiben und Schlusszeilen leicht zu finden sind.

6 PrüfpunkteDesignsystem

Eingabefeld

Hilft bei der korrekten Eingabe und Korrektur von Fehlern direkt im Informationsfeld.

8 PrüfpunkteDesignsystem

Knopf

Klären Sie Aktionen und Reaktionen nach der Aktivierung.

6 PrüfpunkteDesignsystem

Umschalten

Ändern Sie den Status, ohne die Auswirkung erraten zu müssen.

6 PrüfpunkteDesignsystem

Schublade

Öffnen Sie sekundäre Inhalte und behalten Sie dabei den Kontext des Hauptbildschirms bei.

8 PrüfpunkteDesignsystem

Datumsauswahl

Hilft bei der Auswahl von Daten, ohne das Format oder den Zeitraum zu verwechseln.

8 PrüfpunkteDesignsystem

Semmelbrösel

Gibt die Position und den Pfad nach oben in der Inhaltsstruktur an.

4 PrüfpunkteDesignsystem

Alarm

Berichten Sie, was passiert ist und welche Schritte erforderlich sind.

6 PrüfpunkteDesignsystem

Skelett

Zeigt bevorstehende Inhalte an, ohne dass das Layout springt.

5 PrüfpunkteDesignsystem

Karussell

Ermöglicht Ihnen, Inhalte nacheinander zu durchsuchen und gleichzeitig den Standort zu kontrollieren.

7 PrüfpunkteDesignsystem

Schieberegler

Hilft bei der Auswahl eines kontrollierten Werts oder Wertebereichs.

6 PrüfpunkteDesignsystem

Toast

Kurzes Feedback nach Aktion ohne blockierende Arbeit.

8 PrüfpunkteDesignsystem

Tabs

Wechseln Sie zwischen Inhaltsbereichen auf derselben Ebene.

7 PrüfpunkteDesignsystem

Kontrollkästchen

Wählen Sie mehrere Elemente aus oder aktivieren Sie eine unabhängige Auswahl.

6 PrüfpunkteDesignsystem

Suchleiste

Beginnen Sie Ihre Suche mit einem klaren Umfang und einer klaren Antwort.

7 PrüfpunkteDesignsystem

Laden

Zeigt an, dass die Aufgabe ausgeführt wird und wann sie verarbeitet werden muss.

6 PrüfpunkteDesignsystem

Symbol

Sorgen Sie dafür, dass das Symbol in jeder Größe erkennbar und aussagekräftig ist.

5 PrüfpunkteDesignsystem

Tisch

Präsentieren Sie strukturierte Daten zum Scannen und Vergleichen.

10 PrüfpunkteDesignsystem

Karte

Sammeln Sie Informationen und Aktionen in einer einfach zu scannenden Einheit.

5 PrüfpunkteDesignsystem

Abzeichen

Fügen Sie Menge oder Status hinzu, ohne den Hauptinhalt zu beeinträchtigen.

4 PrüfpunkteDesignsystem

Avatar

Zeigen Sie Identität und stellen Sie kontrollierte Foto-Updates bereit.

6 PrüfpunkteDesignsystem

Dropdown-Menü

Bringen Sie verwandte Aktionen in einfach zu verwaltende Menüs ein.

8 PrüfpunkteDesignsystem

Stepper

Erhöhen oder verringern Sie eine Zahl in klaren Schritten.

7 Prüfpunkte

Prüfen und Fortschritt speichern

Jeden geprüften Punkt markieren.
Der Fortschritt wird in diesem Browser gespeichert.

Checkliste suchen

↑↓ Eintrag wählen · Enter öffnenStrg K

Checklisten verwenden

  1. Checkliste wählenKategorie wählen oder mit Ctrl / ⌘ K suchen.
  2. Jeden Punkt prüfenDesign mit den Hinweisen abgleichen und geprüfte Punkte markieren.
  3. Speichern und fortsetzenCheckliste zum späteren Aufrufen speichern. Der Fortschritt bleibt in diesem Browser und wird nicht zwischen Geräten synchronisiert.