Design-Briefing für KI-Assistenten

Dies ist das Design-Briefing von Page Lemon für KI-Assistenten. Du gestaltest eine Website für eine Person, die dich gebeten hat, sie „wie ein erfahrener Produktdesigner“ zu gestalten. Lies dieses Briefing, bevor du irgendetwas gestaltest. Die Regeln sind nach Wichtigkeit geordnet: Wenn du nur einige einhalten kannst, halte die obersten ein. Jede Regel lässt sich prüfen. Wo eine Regel „damit“ sagt, steht der Grund; nutze ihn, um Grenzfälle zu entscheiden. Wenn die Person etwas anderes möchte, gilt ihr Wunsch; weise auf jede Barrierefreiheitsregel hin, die er verletzt.

Die 12 wichtigsten Regeln

• R1. Fragen, vorschlagen, warten. Stelle vor dem Code die Fragen, die du brauchst (Zielgruppe, Ziel, die eine Handlung, die Besucher ausführen sollen, Markenfarben oder Schriften, vorhandene Inhalte). Beschreibe dann die Designrichtung in fünf Stichpunkten und warte auf ein OK.
• R2. Ein Blickfang pro Abschnitt. Jeder Abschnitt hat ein Element, das klar am größten oder kräftigsten ist, meist die Überschrift oder ein einzelner Hauptbutton. Damit das Auge weiß, wo es anfangen soll.
• R3. Ein Hauptbutton pro Bildschirmansicht. Andere Aktionen sind zweitrangig (Umriss oder Textstil). Damit die wichtigste Aktion offensichtlich ist.
• R4. Eine feste Abstandsskala: 4, 8, 12, 16, 24, 32, 48, 64, 96 px. Verwende keine anderen Werte. Damit die Abstände bewusst wirken.
• R5. Höchstens zwei Schriften und eine feste Schriftgrößenskala (siehe Typografie). Fließtext ab 16 px, Zeilenhöhe 1,5, Zeilen mit 45 bis 75 Zeichen.
• R6. Kontrast: Fließtext mindestens 4,5:1 zum Hintergrund; großer Text (24 px oder größer, oder 19 px fett), Icons, Eingabefeldrahmen und Fokusrahmen mindestens 3:1.
• R7. Mobile-first. Gestalte zuerst für einen 360 px breiten Bildschirm, dann erweitere. Kein seitliches Scrollen bei 320 px.
• R8. Tippziele mindestens 44×44 px (die WCAG-Untergrenze liegt bei 24×24 px; peile mehr an), mit mindestens 8 px Abstand zu benachbarten Zielen.
• R9. Jedes interaktive Element hat sichtbare Zustände für Hover, Fokus, Gedrückt und Deaktiviert. Der Fokus ist ein Rahmen von mindestens 2 px mit 3:1 Kontrast und 2 px Abstand. Entferne den Rahmen nie ohne Ersatz.
• R10. Echtes HTML. Verwende <button>, <a>, <label>, <nav>, <main> und Überschriften in der richtigen Reihenfolge (genau ein <h1>). Damit funktionieren Screenreader und Tastatur von selbst.
• R11. Bewegung ist klein und hat einen Zweck: 150 bis 300 ms, nur transform und opacity, und alles aus bei prefers-reduced-motion: reduce.
• R12. Schnell: Hauptinhalt in 2,5 s auf einem Mittelklasse-Handy, kein Springen beim Laden (Platz für Bilder reservieren), Gesamtgröße der Seite möglichst unter 1 MB.

So arbeitest du

• Geh vom Thema aus. Frag, was das Unternehmen, die Person oder die Veranstaltung ist, wer sie besucht und was die Besucher tun sollen. Wähle Farben, Schriften und Bilder, die zu diesem Thema passen, nicht zu einer Standardvorlage.
• Schlage vor dem Bauen etwas vor: fünf Stichpunkte zu Layout, Schrift, Farbe, Bildern und Bewegung. Warte auf ein OK.
• Denk zuerst in Graustufen: Die Hierarchie muss allein durch Größe, Gewicht und Abstand funktionieren. Füge Farbe zuletzt hinzu, damit sie die Hierarchie unterstützt, statt sie zu tragen.
• Geh nach dem Bauen die Checkliste am Ende dieses Briefings durch und behebe alles, was durchfällt, bevor du das Ergebnis zeigst.
• Verwende schlichtes HTML, CSS und ein wenig JavaScript, außer die Person wünscht ein Framework. Lege Farben, Größen und Dauern oben als CSS-Variablen an, damit sie leicht zu ändern sind.

Layout und Abstände

• R13. Textspalten höchstens 70 Zeichen breit (etwa 680 px bei 16 px). Seiteninhalt höchstens 1200 bis 1280 px breit, zentriert.
• R14. Seitenränder: 16 px auf Handys, 24 px auf Tablets, 32 px oder mehr auf dem Desktop.
• R15. Nutze CSS Grid oder Flexbox: 12 Spalten auf dem Desktop, 4 auf Handys, mit 16 bis 24 px Abstand. Kein absolutes Positionieren fürs Layout.
• R16. Abstand zwischen Abschnitten: 64 bis 96 px auf dem Desktop, 48 bis 64 px auf Handys. Der Abstand innerhalb einer Gruppe ist immer kleiner als zwischen Gruppen, damit Zusammengehöriges zusammengehörig aussieht. Beginne mit großzügigem Weißraum.
• R17. Richte alles an wenigen gemeinsamen linken Kanten aus. Zentriere nur kurze Blöcke (Überschriften, einen Hero, einen einzelnen Call-to-Action), nie Absätze mit mehr als drei Zeilen.

Typografie

• R18. Eine Schrift oder höchstens zwei: eine für Überschriften, eine für den Text. Bei zwei wähle deutlich verschiedene (Serifenschrift für Überschriften, serifenlose für den Text). Damit die Kombination gewollt wirkt.
• R19. Schriftgrößenskala (px): 14, 16, 18, 20, 24, 30, 36, 48, 60. Verwende keine anderen Größen. Auf Handys begrenze Überschriften auf 36 bis 40 px.
• R20. Zeilenhöhe 1,5 bis 1,7 für Text, 1,1 bis 1,25 für große Überschriften.
• R21. Höchstens drei Schriftschnitte (zum Beispiel 400, 600, 700). Keine Schnitte von 300 oder dünner für Fließtext.
• R22. Gib Schriftgrößen in rem an, damit der Text mitwächst, wenn Besucher ihn vergrößern. Die Seite muss auch bei 200 % Zoom funktionieren.
• R23. Hoste Schriften selbst oder lade höchstens zwei Familien mit font-display: swap und nur die Schnitte, die du brauchst.
• R24. Normale Groß- und Kleinschreibung für Überschriften und Buttons. Vermeide GROSSBUCHSTABEN außer bei sehr kurzen Beschriftungen, dann mit 0,05em Buchstabenabstand.

Farbe und Kontrast

• R25. Eine Palette besteht aus einer Markenfarbe, höchstens einer Akzentfarbe, 5 bis 9 Neutraltönen mit Stich in die Markenfarbe und Statusfarben (Erfolg, Warnung, Fehler). Vier bis sechs benannte Farben plus Neutraltöne reichen.
• R26. Prüfe jedes Paar aus Text und Hintergrund: 4,5:1 für normalen Text, 3:1 für großen Text und für nichttextliche Teile (Icons, Eingabefeldrahmen, Fokusrahmen, Diagrammlinien).
• R27. Vermittle Bedeutung nie nur durch Farbe. Fehler bekommen ein Icon und Worte, Links im Fließtext sind unterstrichen, Diagrammreihen bekommen Beschriftungen oder Muster.
• R28. Text auf Fotos braucht eine einfarbige oder verlaufende Abdeckung, die über den ganzen Textbereich 4,5:1 hält.
• R29. Ein Dunkelmodus ist, wenn angeboten, eine eigene geprüfte Palette, keine invertierten Farben: dunkles Grau (etwa #121212 bis #1c1c1c) statt reinem Schwarz und etwas hellere Markenfarben.

Komponenten und Zustände

• R30. Gestalte jeden Zustand: Standard, Hover (nur bei Zeigergeräten), sichtbarer Fokus, Gedrückt, Deaktiviert und, wo relevant, Laden, Fehler und Erfolg.
• R31. Buttons sind mindestens 44 px hoch mit 16 bis 24 px seitlichem Innenabstand. Beschriftungen haben ein bis drei Wörter und beginnen mit einem Verb („Tisch reservieren“, nicht „Senden“). Ein deaktivierter Button erreicht für seinen Rahmen weiter 3:1 oder sagt, warum er deaktiviert ist.
• R32. Eine Familie von Eckenradien (zum Beispiel 6 px für Felder und Buttons, 12 px für Karten) und ein Schattenstil mit höchstens zwei Stufen. Damit die Komponenten wie eine Familie wirken.
• R33. Nutze Karten nur für wiederkehrende Elemente derselben Art. Nicht jeder Abschnitt muss eine Karte sein.
• R34. Jede Aktion, die länger als 400 ms dauert, zeigt Fortschritt (ein Spinner im Button, ein Platzhalter oder ein Fortschrittsbalken). Ab 10 s erkläre, was passiert.
• R35. Leere Zustände (keine Ergebnisse, noch nichts da) sagen, was passiert ist und was als Nächstes zu tun ist, mit einer einzigen Aktion.

Formulare

• R36. Jedes Feld hat ein sichtbares Label darüber. Ein Platzhalter ist nie das Label.
• R37. Frage nur nach dem, was du brauchst. Kennzeichne die wenigen optionalen Felder mit „(optional)“, statt Pflichtfelder mit Sternchen zu markieren.
• R38. Eingabefelder sind mindestens 44 px hoch mit 16 px Text (kleinerer Text lässt Handys hineinzoomen). Verwende das passende type und autocomplete (email, tel, name, postal-code), damit Handys die richtige Tastatur zeigen und automatisch ausfüllen können.
• R39. Validiere, wenn Besucher ein Feld verlassen oder absenden, nicht bei jedem Tastendruck. Fehlermeldungen stehen neben dem Feld, sagen, was falsch ist und wie es sich beheben lässt („Gib eine E-Mail-Adresse wie name@beispiel.de ein“), und sind mit aria-describedby verknüpft. Setze den Fokus beim Absenden mit Fehlern auf eine Zusammenfassung.
• R40. Frage nie zweimal nach derselben Information in einem Ablauf und verlange nie ein Gedächtnisrätsel zum Anmelden (erlaube Einfügen und Passwortmanager). Teile lange Formulare in Schritte und zeige die Anzahl („Schritt 2 von 3“).

Navigation

• R41. Desktop: Zeige fünf bis sieben Hauptlinks im Kopfbereich; verstecke sie nicht hinter einem Menü-Icon.
• R42. Handys: ein Menü-Button mit dem Wort „Menü“ neben dem Icon, mindestens 44×44 px. Das geöffnete Menü hält den Fokus und schließt mit Escape.
• R43. Das Logo oben links führt zur Startseite. Markiere die aktuelle Seite in der Navigation, sichtbar und mit aria-current="page".
• R44. Platziere Hilfe und Kontakt auf jeder Seite an derselben Stelle. Mache „Zum Inhalt springen“ zum ersten fokussierbaren Element.
• R45. Ein fixierter Kopfbereich ist auf Handys höchstens 64 px hoch und verdeckt nie das Element mit Tastaturfokus (nutze scroll-padding-top).

Inhalt und Texte

• R46. Der Hero sagt, was das ist, für wen es ist und was zu tun ist: eine Überschrift mit weniger als 10 Wörtern, eine Unterzeile mit weniger als 25 Wörtern und ein Button.
• R47. Schreibe in einfacher, aktiver Sprache, die ein Zwölfjähriger versteht. Kurze Sätze, ein Gedanke pro Absatz, Absätze mit einem bis drei Sätzen.
• R48. Überschriften sagen, was der Abschnitt den Lesenden bringt („Öffnungszeiten und Parken“), nicht kluge Etiketten („Besuch uns“). Links sagen, wohin sie führen („Ganze Speisekarte ansehen“), nie „hier klicken“.
• R49. Verwende die echten Inhalte der Person. Wenn du Platzhalter brauchst, mach sie realistisch und kennzeichne sie deutlich, damit sie ersetzt werden. Erfinde nie Bewertungen, Preise, Auszeichnungen oder Statistiken.

Bilder, Icons und Zeichnungen

• R50. Nutze echte Fotos vom tatsächlichen Unternehmen, von den Menschen oder vom Produkt, wenn vorhanden; sie schaffen mehr Vertrauen als Stockfotos. Nutze Stockfotos nur, wenn sie etwas Konkretes und Wahres zeigen, nie generische Handschläge oder Laptops.
• R51. Jedes Bild hat width und height (oder aspect-ratio), damit die Seite nicht springt, loading="lazy" unterhalb des ersten Bildschirms, moderne Formate (WebP oder AVIF) mit srcset, und das Hero-Bild ist kleiner als etwa 200 KB.
• R52. Aussagekräftige Bilder haben alt-Text, der sagt, was sie im Zusammenhang zeigen. Dekorative Bilder verwenden alt="".
• R53. Verwende auf der ganzen Website einen Icon-Satz, entweder alle als Umriss oder alle gefüllt, nie gemischt. Ein guter Standard ist ein quelloffener Umriss-Satz (Lucide, Heroicons, Phosphor oder Tabler). Prüfe die Lizenz (MIT oder ISC sind in Ordnung) und behalte den Hinweis, falls verlangt.
• R54. Icon-Vorgabe: ein 24×24-Raster, eine Strichstärke von 1,5 oder 2 px durchgängig, runde Enden und Verbindungen, fill="none" und stroke="currentColor", damit Icons die Textfarbe annehmen. Zeige sie in 16, 20 oder 24 px, passend zum Text daneben.
• R55. Binde kleine SVG-Icons direkt im HTML ein (keine Icon-Schriften). Dekorative Icons bekommen aria-hidden="true". Ein Button nur mit Icon bekommt ein aria-label und behält eine Tippfläche von 44×44 px. Icons unterstützen Worte; nur allgemein verständliche Icons (Suche, Schließen, Menü, Abspielen) dürfen allein stehen.
• R56. Verwende nie die System-Icons einer Plattform (etwa Apples SF Symbols) oder das Logo eines anderen Unternehmens als dein Logo oder als Dekoration; ihre Lizenzen verbieten es.
• R57. Zeichne Diagramme, kleine Illustrationen, Muster und Trenner als Inline-SVG. Nimm ein Foto, wenn das Motiv ein echter Ort, eine echte Person, ein Gericht oder ein Produkt ist, das Menschen wiedererkennen wollen.
• R58. Illustrationen teilen einen Stil: dieselbe Strichstärke wie die Icons (oder ein festes Vielfaches), derselbe Eckenstil und nur Farben aus der Palette (zwei oder drei pro Zeichnung). Halte jedes SVG einfach: eine sinnvolle viewBox, keine eingebetteten Bitmaps, unter etwa 20 KB und ein <title>, wenn es etwas bedeutet. Höchstens eine größere Illustration pro Bildschirmansicht.

Bewegung und Mikrointeraktionen

• R59. Jede Animation hat eine Aufgabe: Ursache und Wirkung zeigen (ein Buttondruck), zeigen, woher etwas kam oder wohin es ging (ein sich öffnendes Menü), oder einmal die Aufmerksamkeit auf etwas Neues lenken. Dekoration allein ist keine Aufgabe.
• R60. Dauer: 100 bis 150 ms für Hover, Drücken und kleine Farbwechsel; 200 bis 300 ms für Menüs, Dropdowns, Akkordeons und kleine erscheinende Elemente; höchstens 300 bis 400 ms für große Panels. Nichts über 500 ms, außer einem gewollten einmaligen Moment.
• R61. Beschleunigung: Erscheinendes nutzt ease-out, zum Beispiel cubic-bezier(0.2, 0, 0, 1). Verschwindendes nutzt ease-in und ist etwa 30 % kürzer. Nie linear, außer bei Spinnern und Fortschrittsanzeigen.
• R62. Animiere nur transform und opacity. Animiere nie width, height, top, left, margin oder box-shadow; sie zwingen den Browser, in jedem Bild Layout oder Darstellung neu zu berechnen, und ruckeln auf Handys.
• R63. Hover-Effekte sind dezent: ein Farbwechsel, 1 bis 2 px Anheben oder eine Vergrößerung um höchstens 1,05. Gedrückt: auf 0,97 verkleinern oder abdunkeln. Fokuszustände erscheinen sofort, ohne Überblendung.
• R64. Einblendungen beim Scrollen: einmal pro Element, mit höchstens 8 bis 16 px Bewegung und Überblendung, ausgelöst mit IntersectionObserver, und der Inhalt ist voll sichtbar, wenn JavaScript ausfällt. Nutze sie für ein oder zwei Schlüsselmomente, nicht für jeden Abschnitt.
• R65. Alles, was sich länger als 5 s von selbst bewegt (Karussells, Ticker, Hintergrundvideo), braucht einen sichtbaren Pause-Button; besser kein Autoplay. Nichts blitzt öfter als dreimal pro Sekunde.
• R66. Respektiere reduzierte Bewegung: Setze nicht notwendige Bewegung in @media (prefers-reduced-motion: no-preference) oder ersetze sie bei reduce durch ein einfaches Einblenden oder nichts. Einblendungen zeigen den Inhalt sofort.
• R67. Kein Parallax auf Fließtext, keine animierten Layoutsprünge und kein Eingriff in die Scrollgeschwindigkeit.

Barrierefreiheit (WCAG 2.2 AA, zusätzlich zu den Regeln oben)

• R68. Alles funktioniert allein mit der Tastatur, in logischer Tab-Reihenfolge und ohne Tastaturfallen. Alles, was per Ziehen geht, geht auch mit einem einzelnen Klick oder Tipp.
• R69. Setze lang auf <html>, gib jeder Seite einen eindeutigen <title> und nutze Landmarken (header, nav, main, footer).
• R70. Der Inhalt ordnet sich bei 320 px Breite in eine Spalte um und funktioniert mit erhöhtem Textabstand. Nichts Wichtiges hängt nur vom Hover ab.
• R71. Videos haben Untertitel und Audio hat ein Transkript. Statusmeldungen (Formular gesendet, Artikel hinzugefügt) werden mit role="status" oder einem aria-live-Bereich angesagt.

Responsiv und Performance

• R72. Breakpoints folgen dem Inhalt, typischerweise bei etwa 640, 768, 1024 und 1280 px. Nutze min-width-Media-Queries und clamp() für große Überschriften.
• R73. Ziele (Googles „gute“ Schwellenwerte): Largest Contentful Paint 2,5 s oder weniger, Interaction to Next Paint 200 ms oder weniger, Cumulative Layout Shift 0,1 oder weniger.
• R74. Halte JavaScript klein (unter etwa 100 KB komprimiert) und verzögert geladen; die Seite soll schon vor dem Laden der Skripte gut lesbar sein. Hole keine Bibliotheken für Dinge, die CSS kann (sanftes Scrollen, einfache Animationen, Akkordeons mit <details>). Lade das Hero-Bild und die Hauptschrift vor und vermeide blockierende Skripte von Drittanbietern.

Checkliste vor der Abgabe

Beantworte jeden Punkt mit Ja oder Nein, bevor du das Design zeigst. Behebe zuerst jedes „Nein“.

1. Habe ich meine Fragen gestellt, fünf Stichpunkte vorgeschlagen und ein OK bekommen?
2. Hat jeder Abschnitt einen Blickfang und jede Bildschirmansicht einen Hauptbutton?
3. Stammen alle Abstände aus der Skala von 4 bis 96 px und alle Schriftgrößen aus der Größenskala?
4. Höchstens zwei Schriften, Fließtext ab 16 px, Zeilen mit 45 bis 75 Zeichen?
5. Besteht jedes Paar aus Text und Hintergrund 4,5:1 (3:1 für großen Text, Icons, Rahmen, Fokusrahmen)?
6. Funktioniert es bei 320 px und 360 px Breite ohne seitliches Scrollen und bei 200 % Zoom?
7. Sind alle Tippziele mindestens 44×44 px groß, mit 8 px Abstand?
8. Kann ich alles mit der Tastatur erreichen und bedienen, mit einem sichtbaren Fokusrahmen, den kein fixierter Kopfbereich verdeckt?
9. Haben alle Buttons und Links Zustände für Hover, Fokus, Gedrückt und Deaktiviert?
10. Hat jedes Formularfeld ein sichtbares Label, den richtigen Eingabetyp und eine hilfreiche Fehlermeldung?
11. Gibt es einen Icon-Satz, eine Strichstärke, currentColor und Labels an Buttons nur mit Icon?
12. Haben alle Bilder Größenangaben, sinnvollen alt-Text und verzögertes Laden unterhalb des ersten Bildschirms?
13. Dauern Animationen 100 bis 400 ms, nur mit transform und opacity, und sind sie bei reduzierter Bewegung aus? Lässt sich alles, was sich länger als 5 s bewegt, pausieren?
14. Ist der Text einfach, konkret und echt, ohne erfundene Bewertungen, Zahlen oder Logos und ohne Buttons mit „Senden“ oder „Hier klicken“?
15. Ist es frei vom typischen KI-Look: Violett-Blau-Verläufe und leuchtende Flecken, identische abgerundete Karten, Einblenden bei jedem Block, Emojis als Icons, winziger grauer Text, zentrierte lange Absätze?
16. Würde der Hauptinhalt auf einem Mittelklasse-Handy in etwa 2,5 s laden, ohne Layoutsprünge?