Details sind kein Luxus — sie sind UX

Wir trainieren Regeln, die überall funktionieren: Konsistenz, States, Rhythmus, Accessibility.

Detail Manifesto

Fünf Prinzipien, die unsere Methode definieren.

Konsistenz schlägt Kreativität

Ein wiederholbares System ist wertvoller als hundert einzigartige Lösungen.

States sind nicht optional

Hover, Active, Disabled, Focus - jedes Element braucht alle States, nicht nur Default.

Spacing ist mathematisch

8px, 16px, 24px - keine Zufallszahlen. Rhythmus entsteht durch Systematik.

Accessibility ist Design

Kontrast, Focus, Labels - das ist keine Extra-Aufgabe, sondern Teil der Qualität.

Hand-off ist Kommunikation

Gutes Design endet nicht in Figma - es muss für Entwickler lesbar sein.

Our Review Method

Drei Durchgänge für jedes UI-Design - so stellen wir Qualität sicher.

1

Structure Pass

Was wir prüfen: Layout, Spacing, Visual Hierarchy

Sind die Abstände konsistent? Folgt die Hierarchie einem klaren System? Gibt es White Space Chaos?

2

State Pass

Was wir prüfen: Hover, Active, Disabled, Focus, Loading

Hat jedes interaktive Element alle notwendigen States? Sind die Übergänge flüssig? Gibt es Motion wo nötig?

3

Accessibility Pass

Was wir prüfen: Contrast, Focus Visible, Labels

Ist der Kontrast WCAG-konform? Sind Focus States sichtbar? Können Screen Reader alles lesen?

Design Standards Library

Unsere wichtigsten Regeln - kurz erklärt.

Spacing uses 4/8/12/16/24/32/48/64

Alle Abstände folgen dieser Skala. Keine 15px, keine 22px - nur Vielfache von 4.

Warum? Weil es Konsistenz schafft und Entwicklern klare Tokens gibt.

Focus visible always

Jedes fokussierbare Element bekommt einen sichtbaren Focus State - mindestens 2px Outline.

Warum? Weil Keyboard-Navigation ohne sichtbare Focus States unmöglich ist.

One shadow system

Wir nutzen maximal 5 Shadow-Stufen: s0 (none), s1 (subtle), s2 (medium), s3 (raised), s4 (modal).

Warum? Weil zu viele Shadows die Hierarchie zerstören.

Color contrast minimum 4.5:1

Text auf Hintergrund braucht mindestens 4.5:1 Kontrast - für große Texte reicht 3:1.

Warum? WCAG 2.1 Level AA Standard - und weil lesbar einfach besser ist.

Button states: 4 minimum

Default, Hover, Active, Disabled - das ist das absolute Minimum. Besser noch Loading State dazu.

Warum? Weil Nutzer sofort sehen müssen, was klickbar ist und was nicht.

Tooling & Handoff

Wie wir auf echte Arbeit vorbereiten.

In Figma

  • Components mit allen Variants
  • Variables für Tokens
  • Styles für Colors, Text, Effects
  • Auto-Layout für Responsive
  • Organized Layers

To Dev

  • Token Naming (CSS Custom Props)
  • Redlines für Spacing
  • State Descriptions
  • Accessibility Notes
  • Component Documentation

Bereit für Details?

Kontaktiere uns für eine kostenlose Orientierung und finde heraus, welcher Kurs für dich passt.