Die dreißig Muster

Stark gesättigte Farbmischungen können eine ungeklärte Palette verdecken. Gib jeder Farbe eine Aufgabe.

Alternativen: One solid base and one accent, decided on purpose, Tonal wash: a single hue, lightness shifted at most ~15%, Grain or paper texture instead of a colour blend

Eine leichte Tönung definiert die Oberfläche und ihr Verhältnis zu Karten und Text.

Alternativen: Off-white with a hue cast (warm, cool, green, grey) chosen to fit the brand, In dark mode, a coloured near-black rather than #000

Wenn jede Funktion eine andere Farbe hat, verliert Farbe ihre Bedeutung. Reserviere Akzente für klare Rollen.

Alternativen: One dominant hue, one accent, neutrals doing the rest, Analogous scheme, or monochrome plus a single complement

Eine ohne Markenbezug wiederholte Palette lässt unterschiedliche Produkte austauschbar wirken.

Alternativen: A brand hue chosen from the subject's own world (materials, place, era), Warm or tinted neutrals instead of pure black

Elektrische Farben auf Schwarz können den Inhalt dominieren. Passe die Sättigung an die Aufgabe jeder Farbe an.

Alternativen: Desaturate: pull chroma down and let value contrast carry hierarchy, Derive the accent from the brand, not from the colour picker

Mehrere sehr helle Farbtöne brauchen einen dunklen Anker für Hierarchie und Kontrast.

Alternativen: A palette with a full value range and one saturated anchor

Typografie prägt die Stimme einer Seite. Wähle eine zum Inhalt passende Familie, statt die Voreinstellung zu übernehmen.

Alternativen: Archivo (wide display) + Newsreader (text) + JetBrains Mono, Bricolage Grotesque (display) + Public Sans (text), Fraunces (display) + Hanken Grotesk (text), Schibsted Grotesk (display) + Source Serif 4 (text), Big Shoulders (display) + IBM Plex Sans (text) + IBM Plex Mono, Always pair a display face with a text face; never one family for everything

Dreimal Symbol, Titel und Text kann dem Produktinhalt eine unpassende Vorlage aufzwingen.

Alternativen: Alternating one- and two-column rows that follow the content, A single detailed feature with real screenshots, then a compact list for the rest, A comparison table when the features are genuinely comparable

Hintergrundwechsel ohne inhaltlichen Grund erzeugen einen mechanischen Rhythmus.

Alternativen: Change background only at a genuine change of subject, Use spacing and type rhythm to separate sections

Ein Raster verschieden großer Karten kann fehlende Inhaltsprioritäten verdecken.

Alternativen: Editorial layout: one lead element, supporting rows beneath, A modular grid whose spans follow content priority, not decoration, A table when the content is actually tabular

Die Tarifstruktur sollte den tatsächlichen Verkauf und die Entscheidungen der Kundschaft abbilden.

Alternativen: One clear price with a usage note, or two plans, A calculator when price depends on usage

Eine abgerundete Beschriftung über dem Titel sollte eine konkrete, überprüfbare Neuigkeit vermitteln.

Alternativen: Lead with the headline; put news in a dated note or the changelog, An eyebrow line in condensed caps that says what the page is, not that it is new

Wähle Symbole nach Strichstärke, Form und Passung zum Produkt. Ungeprüfte Voreinstellungen lassen unterschiedliche Oberflächen gleich aussehen.

Alternativen: Phosphor (pick one weight), Tabler Icons, Radix Icons, Iconoir, Match stroke weight to the typeface weight; use one set only

Emojis unterscheiden sich je nach Plattform und wirken wie Chat-Kommunikation. Definiere ein konsistentes visuelles System.

Alternativen: One SVG icon set, or no icon at all, Numerals or short labels when the marker carries information

Ein generischer Stern deutet KI an, erklärt aber keine Funktion. Beschreibe die konkrete Aktion.

Alternativen: Name the capability plainly and use a concrete icon, or none

Große Schatten auf jeder Karte täuschen eine Tiefe vor, die das Layout möglicherweise nicht braucht.

Alternativen: Hairline borders and tonal surface steps, One reserved elevation for things that actually float (menus, dialogs)

Ein durchscheinendes Panel braucht einen Hintergrund, der die Unschärfe begründet. Auf flachen Flächen kann der Effekt unnötig sein.

Alternativen: Opaque, matte surfaces with a real layering order, If translucency is deliberate (a brand choice), keep it to one component and mark it intentional

Derselbe Radius an Schaltflächen, Karten und Feldern schwächt die Hierarchie. Ein Radius kann die Rolle ausdrücken.

Alternativen: A radius scale by role: sharp for containers, small for controls, pill only for chips, Zero radius as a deliberate choice for editorial or technical products

Unscharfe Kreise hinter einer Kopfzeile können eine visuelle Entscheidung durch Dekoration ersetzen.

Alternativen: Real imagery of the subject, Negative space and one geometric accent, Texture (grain, paper, halftone) over blur

Eine wiederholte Punkttextur kann Stimmung ohne Bezug zum Inhalt erzeugen.

Alternativen: A brand-specific graphic device, or none, Fine grain at low opacity if a texture is needed

Animierte Ladeblöcke können scheinbare Wartezeit zu Inhalten hinzufügen, die serverseitig sichtbar sein könnten.

Alternativen: Render on the server; stream only what is genuinely slow, Meaningful progress or a plain loading line

Ein bewegter Pfeil beim Darüberfahren fügt Bewegung hinzu, die eine klare Beschriftung unnötig machen kann.

Alternativen: A static affordance with a clear label

Wenn sich alle Elemente beim Darüberfahren anheben, kennzeichnet Bewegung keine Interaktion mehr.

Alternativen: Motion only on elements that do something; colour or underline change is enough, Honour prefers-reduced-motion

Viele Gedankenstriche sind für sich allein ein schwaches redaktionelles Signal. Prüfe die Klarheit jedes Satzes.

Alternativen: Full stops, commas, shorter sentences

Eine ungestellte Behauptung zu verneinen fügt Text ohne Information hinzu. Beschreibe direkt, was das Produkt bietet.

Alternativen: Direct, specific claims with a number or an example

Ein Häkchen bedeutet Einschluss. Nutze es, wenn Lesende enthaltene Leistungen unterscheiden müssen.

Alternativen: Plain or numbered lists; prose when the items are arguments, Reserve ticks for comparison tables

Erfundene Zitate und nicht überprüfbare Namen sind ein kritischer Vertrauensfehler.

Alternativen: Real, attributed quotes with a link, or none, Case studies with numbers you can defend

Seiten, die Daten erfassen, müssen deren Verarbeitung und die Nutzungsbedingungen erklären. Fehlende Informationen sind ein kritischer Fehler.

Alternativen: Real privacy and terms pages written for this product, linked in the footer

Ein falsches Terminal ist Dekoration. Zeige echten Code oder eine Produktvorführung, wenn dies hilfreich ist.

Alternativen: Real screenshots or an embedded live demo, Plain syntax-highlighted code without fake chrome

Eine Produktseite sollte das echte Produkt zeigen. Abstrakte Formen belegen seine Funktion nicht.

Alternativen: A live embed or sandbox, Real screenshots, annotated, A short screen recording