Du bekommst den Entwurf für deine neue Website und spürst sofort: Irgendetwas stimmt nicht. Aber du kannst nicht sagen, was.
Genau dafür gibt es Design Prinzipien. Fünf Grundregeln, mit denen du jeden Entwurf lesen, prüfen und verbessern kannst, ohne selbst Designer zu sein.
Kurzantwort
Was sind Design-Prinzipien?
Design-Prinzipien sind die handwerklichen Grundregeln dafür, wie visuelle Elemente auf einer Seite angeordnet werden. Die fünf wichtigsten: Hierarchie und Kontrast, Weißraum, Ausrichtung, Nähe und Konsistenz.
Sie sind lernbar wie Rechtschreibregeln. Wer sie kennt, sieht in einem Entwurf nicht mehr “gefällt mir irgendwie nicht”, sondern “die Headline verliert gegen das Foto”, und kann das beheben.
📌 Für wen ist das relevant: Für alle, die eine Website beauftragen, abnehmen oder selbst bauen und wollen, dass sie professionell wirkt und Anfragen bringt.
- Jedes Prinzip lernst du an derselben Beispiel-Hero: vorher schwach, nachher stark
- Mit dem Kneif-Test prüfst du jeden Entwurf in einer Minute
- Am Ende kannst du Feedback geben, mit dem ein Designer arbeiten kann
Das lernst du in dieser Lektion
Du kannst einen Entwurf mit dem Kneif-Test in einer Minute prüfen und sagen, ob das Richtige heraussticht.
Du kannst die fünf Prinzipien an einer konkreten Seite anwenden und benennen, welches verletzt ist.
Du kannst einem Designer präzises Feedback geben, das über “gefällt mir nicht” hinausgeht.
Du kannst einen schwachen Entwurf Schritt für Schritt verbessern, ohne bei null anzufangen.
Inhalt
01 ·
Das Beispiel: eine Hero-Section, die alles gleichzeitig will
Diese Lektion arbeitet durchgehend an einem einzigen Beispiel: der Startseite der Schreinerei Brenner, einer frei erfundenen Handwerksfirma. Sie baut Möbel nach Maß, und ihre Website soll genau eines: Beratungsanfragen bringen.
Der erste Entwurf ihrer Hero-Section sieht aus wie tausende echte Handwerker-Websites. Logo, sieben Menüpunkte, eine Headline, zwei Sublines, ein Jubiläums-Siegel, drei gleich große Buttons und ein Foto, das um Aufmerksamkeit kämpft. Nichts davon ist falsch gemacht, es ist nur alles gleichzeitig wichtig.
In den nächsten fünf Sektionen wird diese Hero Prinzip für Prinzip besser. Du siehst jeden Schritt als Vorher-Nachher-Schaubild und verstehst, warum er wirkt. Am Ende steht dieselbe Hero in gut, und du kannst jeden einzelnen Handgriff auf deine eigene Seite übertragen.
Ein Rahmensatz vorweg, damit du weißt, worauf du dich stützt: Diese Prinzipien sind Handwerkskonvention, keine Naturgesetze. Es gibt zu ihnen kaum belastbare Studien, aber sie sind der geteilte Standard des Fachs, und du kannst mit ihnen jede Design-Diskussion führen.
| Prinzip | Kernregel | Was es für die Conversion tut |
|---|---|---|
| Hierarchie & Kontrast | Ein Element muss gewinnen | Der Besucher findet den nächsten Schritt |
| Weißraum & Abstände | Abstand gruppiert, Luft betont | Das Angebot ist auf einen Blick erfassbar |
| Ausrichtung & Raster | Jede Kante braucht einen Partner | Die Seite wirkt sorgfältig statt zusammengewürfelt |
| Nähe & Gruppierung | Was zusammengehört, steht zusammen | Formulare und Listen wirken kürzer |
| Wiederholung & Konsistenz | Ein Stil pro Bedeutung | Wiedererkennung schafft Vertrauen |
Wichtig für die Einordnung: Design-Prinzipien regeln die visuelle Ebene, nicht die inhaltliche. Welche Sektionen auf die Seite gehören und in welcher Reihenfolge, hast du in der Lektion zu Wireframes und Seitenstruktur geklärt. Ob die Seite bedienbar ist, behandelt die Lektion zu den Usability-Grundlagen.
Hier geht es um die Frage danach: Warum wirkt derselbe Inhalt in einem Entwurf billig und im anderen professionell? Die Antwort steckt fast immer in einem der fünf Prinzipien. Wie sich Webdesign insgesamt in prüfbare Regeln und Geschmack aufteilt, hast du in der Lektion Was ist Webdesign gesehen.
02 ·
Hierarchie und Kontrast: ein Element muss gewinnen
Die visuelle Hierarchie ist die Reihenfolge, in der das Auge die Elemente einer Seite wahrnimmt. Sie entsteht immer, ob geplant oder nicht. Die einzige Frage ist, ob das Wichtigste zuerst gesehen wird oder irgendetwas anderes.
Daraus folgt die erste Handwerksregel: Pro Sichtfeld muss genau ein Element gewinnen. In der Brenner-Hero kämpfen Headline, Siegel, Foto und drei Buttons gleichzeitig um Platz eins, und dieser Kampf endet unentschieden. Unentschieden heißt für den Besucher: Er weiß nicht, wo er anfangen soll.
Größensprünge statt Größenschleichen
Der häufigste Fehler ist nicht fehlende Größe, sondern fehlender Abstand zwischen den Größen. Eine Schriftstaffel wie 16, 18 und 20 Pixel wirkt unentschieden, weil das Auge die Stufen kaum trennen kann. Eine Staffel wie 16, 24 und 40 macht die Rangfolge auf einen Blick klar, und solche Sprünge sind bewährte Handwerksempfehlung, keine heilige Zahl.
Größe allein reicht dabei selten. Kontrast entsteht über drei Kanäle: Größe, Strichstärke und Farbe beziehungsweise Helligkeit. Kombiniere mindestens zwei davon für dein wichtigstes Element, dann muss keiner der drei übertreiben.
Nach unten hat Kontrast eine harte Grenze: Text muss lesbar bleiben. Die WCAG verlangen ein Kontrastverhältnis von mindestens 4,5:1 für normalen und 3:1 für großen Text, und das sind die einzigen normierten Zahlenwerte dieser Lektion. Was daraus rechtlich folgt, behandelt die Lektion zur Barrierefreiheit nach dem BFSG.
Schaubild: Hierarchie und Kontrast an der Brenner-Hero. Dieselben Inhalte, aber rechts hat jedes Element einen klaren Rang.
Sieh dir die beiden Fassungen genau an. Rechts wurde nichts hinzugefügt, sondern entschieden: Die Headline bekommt den Größensprung, ein Button trägt die Hauptfarbe, der zweite Weg wird zum Textlink, und das Siegel verschwindet aus dem Sichtfeld. Der Entwurf wirkt sofort ruhiger, obwohl die Kernaussage lauter geworden ist.
💡 Merke
Wenn alles wichtig ist, ist nichts wichtig. Frag bei jedem Sichtfeld: Welches eine Element soll gewinnen, und gewinnt es tatsächlich? Alles Weitere darf da sein, aber es muss sichtbar zurücktreten.
Für die Conversion heißt das: Hierarchie ist die Wegbeschreibung zum nächsten Schritt. Wenn der Termin-Button das Sichtfeld gewinnt, muss der Besucher nicht suchen, was du von ihm willst.
03 ·
Weißraum und Abstände: Luft ist ein Werkzeug
Weißraum ist kein leerer Platz, der noch gefüllt werden muss. Abstand ist das stärkste Gruppierungsmittel, das ein Layout hat: Er sagt dem Auge ohne ein einziges Wort, was zusammengehört und was nicht.
Der Brenner-Entwurf macht hier den klassischen Fehler. Zwischen Headline, Subline, Button und den Leistungs-Kacheln steht überall derselbe kleine Abstand. Damit ist alles gleich nah beieinander, also gehört für das Auge alles gleich stark zusammen, also gruppiert sich nichts.
Ein Abstandssystem aus wenigen Stufen
Die bewährte Lösung ist ein festes Abstandssystem mit wenigen, deutlich getrennten Stufen, zum Beispiel 8, 16, 24, 48 und 96 Pixel. Die konkreten Zahlen sind Handwerksempfehlung, das Prinzip dahinter ist entscheidend: wenige Stufen, klare Sprünge, keine Zwischenwerte nach Gefühl.
Dazu kommen zwei Regeln für den Einsatz. Erstens: innen kleiner als außen, der Abstand innerhalb einer Gruppe ist immer kleiner als der Abstand zur nächsten Gruppe. Zweitens: Das Wichtigste bekommt die meiste Luft, denn ein Button mit 48 Pixeln Freiraum ringsum wirkt bedeutender als derselbe Button im Gedränge.
Schaubild: Abstände an der Brenner-Hero. Rechts trennen die Abstandsstufen die Gruppen, statt alles gleichmäßig zu verteilen.
Der Effekt im Nachher ist doppelt. Headline und Subline rücken zu einer Aussage zusammen, und der Button steht mit deutlichem Freiraum als eigener Schritt da. Die Seite ist nicht leerer geworden, sie ist sortierter geworden.
💡 Praxis-Tipp
Mach heute die Abstands-Inventur auf deiner eigenen Startseite. Miss mit den Entwickler-Tools des Browsers oder einem Screenshot die vertikalen Abstände zwischen den Blöcken und schreib sie untereinander auf.
Findest du mehr als fünf verschiedene Werte, hast du kein System, sondern Gefühl. Leg eine Staffel wie 8/16/24/48/96 fest und runde jeden gemessenen Abstand auf die nächste Stufe. Das ist die Verbesserung mit dem besten Verhältnis von Aufwand zu Wirkung.
Für die Conversion heißt das: Ein Besucher, der Gruppen auf einen Blick erfasst, muss nicht lesen, um sich zu orientieren. Er versteht schneller, was du anbietest, und die Luft um den Button führt seinen Blick genau dorthin.
04 ·
Ausrichtung und Raster: jede Kante braucht einen Partner
Jedes Element auf einer Seite hat Kanten, und das Auge sucht unbewusst nach Linien, an denen diese Kanten hängen. Findet es sie, wirkt die Seite ruhig. Findet es sie nicht, wirkt die Seite unordentlich, ohne dass der Betrachter sagen könnte, warum.
Daraus folgt die Handwerksregel: Jede Kante braucht einen Partner. Nichts steht “ungefähr da”, sondern jedes Element beginnt an einer Linie, an der auch etwas anderes beginnt. Profis arbeiten dafür mit einem Raster, aber du brauchst kein Rasterwissen, um den Fehler zu sehen.
Der häufigste Anfängerfehler: zentriert plus linksbündig
Im Brenner-Entwurf ist die Headline zentriert, die Subline auch, aber etwas breiter, der Button steht linksbündig mit eigenem Einzug, und die Kacheln haben ungleiche Lücken. Ergebnis: vier verschiedene Startkanten in einem einzigen Sichtfeld. Genau dieser Zentriert-plus-linksbündig-Mischmasch ist der häufigste Ausrichtungsfehler in Laien-Entwürfen.
Die Lösung ist unspektakulär: eine Flucht pro Seite. Entscheide dich für eine dominante Ausrichtung, meist linksbündig, und zieh sie durch alle Elemente durch. Zentrierung ist nicht verboten, aber sie ist die Ausnahme für kurze, alleinstehende Elemente, nicht der Standard für alles.
Schaubild: Ausrichtung an der Brenner-Hero. Die gestrichelten Linien zeigen, an wie vielen Kanten die Elemente hängen.
Beachte, was rechts passiert ist: kein einziges Element wurde umgestaltet. Alles wurde nur an dieselbe Linie gehängt, und trotzdem wirkt die rechte Fassung deutlich professioneller. Ausrichtung ist der Teil des Handwerks, der am wenigsten kostet und am seltensten auffällt, solange er stimmt.
💡 Praxis-Tipp
Mach den Kanten-Test an deinem aktuellen Entwurf: Halte ein Blatt Papier senkrecht an den Bildschirm, entlang der linken Kante der Headline. Zähl, wie viele Elemente an dieser Linie beginnen und wie viele knapp daneben.
Knapp daneben ist der schlimmste Fall. Ein Element, das um wenige Pixel neben der Flucht liegt, wirkt wie ein Versehen. Entweder es sitzt auf der Linie, oder es weicht so deutlich ab, dass die Abweichung als Absicht lesbar ist.
Für die Conversion heißt das: Ausrichtung erzeugt Ruhe, und Ruhe liest ein Besucher als Sorgfalt. Wer einer Schreinerei Maßarbeit zutrauen soll, darf auf ihrer Website keine schiefen Kanten sehen.
05 ·
Nähe und Gruppierung: was zusammengehört, steht zusammen
Das Auge gruppiert automatisch, was nah beieinander steht. Du kannst das nicht abschalten, du kannst nur entscheiden, ob dein Layout die richtigen Zusammenhänge behauptet oder die falschen.
ℹ️ Woher das Prinzip kommt
In der Wahrnehmungspsychologie läuft diese Beobachtung unter den Gestaltgesetzen, dort als Gesetz der Nähe: Was räumlich beieinander liegt, wird als zusammengehörig wahrgenommen. Die Gestaltgesetze beschreiben noch weitere solcher Gruppierungsmuster, etwa nach Ähnlichkeit oder Geschlossenheit. Für deine Praxis reicht der Kern: Das Auge gruppiert von selbst, dein Layout entscheidet nur, ob es richtig gruppiert.
Die Anwendungsregeln sind konkret. Das Label klebt an seinem Formularfeld, die Bildunterschrift am Bild, der Preis an seinem Paket. Und eine Überschrift gehört zu dem Absatz darunter, deshalb ist der Abstand über ihr größer als der unter ihr.
Am deutlichsten zeigt sich das Prinzip am Anfrage-Formular der Schreinerei Brenner. Im Entwurf schwebt jedes Label exakt in der Mitte zwischen zwei Feldern. Der Besucher muss bei jeder Zeile raten, ob die Beschriftung zum Feld darüber oder darunter gehört.
Schaubild: Nähe am Brenner-Anfrageformular. Rechts bilden Label und Feld ein Paar, und die Paare sind klar voneinander getrennt.
Im Nachher wurde kein Pixel am Inhalt geändert, nur die Abstände wurden umverteilt. Label und Feld bilden jetzt ein enges Paar, und zwischen den Paaren steht der größere Gruppenabstand. Aus sechs schwebenden Einzelzeilen sind drei klare Einheiten geworden.
💡 Merke
Der Abstand zwischen Gruppen ist immer größer als der Abstand in Gruppen. Das ist die eine Nähe-Regel, die du prüfen kannst, ohne über Geschmack zu reden. Wo sie verletzt ist, behauptet das Layout Zusammenhänge, die es nicht gibt, oder zerreißt welche, die es gibt.
Für die Conversion heißt das: Ein sauber gruppiertes Formular wirkt kürzer, weil der Besucher drei Einheiten sieht statt sechs Zeilen. Und was kürzer wirkt, wird eher ausgefüllt.
06 ·
Wiederholung und Konsistenz: ein Stil pro Bedeutung
Wiederholung ist das Prinzip, das aus einzelnen Elementen eine Marke macht. Wenn jeder Button gleich aussieht, jede Kachel gleich gebaut ist und jede Überschrift derselben Logik folgt, erkennt der Besucher Muster, und Muster liest er als Absicht.
Die Faustregel dafür ist kurz: ein Buttonstil, zwei Schriften, eine Eckenrundung. Auch das ist Handwerksempfehlung, keine heilige Zahl, aber die Richtung stimmt immer: Jede zusätzliche Variante braucht einen Grund, denn jede Ausnahme kostet Wiedererkennung.
Der Brenner-Entwurf zeigt das Gegenteil. Drei Leistungs-Kacheln, drei Eckenrundungen, drei Buttonstile, drei verschiedene Positionen für denselben Zweck. Keiner dieser Unterschiede bedeutet etwas, und genau das ist das Problem: Der Besucher sucht nach der Bedeutung eines Unterschieds, den es nicht gibt.
Schaubild: Konsistenz an den Leistungs-Kacheln der Schreinerei Brenner. Rechts trägt jede Kachel denselben Bauplan.
Konsistenz ist der billigste Weg zu “wirkt professionell”. Sie braucht kein gestalterisches Talent, sondern nur Disziplin: einmal festlegen, dann durchhalten. Deshalb ist sie das Prinzip, mit dem Selbermacher am schnellsten sichtbar besser werden.
💡 Praxis-Tipp
Mach die Konsistenz-Inventur auf deiner Website: Zähl deine Buttonstile, deine Schriften und deine Eckenrundungen. Klick dich dafür durch drei beliebige Seiten und sammle Screenshots der Buttons nebeneinander.
Mehr als ein Primär- und ein Sekundär-Buttonstil, mehr als zwei Schriften, mehr als eine Rundung: Alles darüber streichst du auf die jeweils häufigste Variante zusammen. Diese Aufräumaktion kannst du ohne Designer durchführen und sie wirkt sofort.
Wenn du solche Festlegungen einmal getroffen hast, gehören sie dokumentiert, damit sie die nächste Unterseite überleben. Wie das aussieht, zeigt unser Beitrag zum Designsystem als Fundament einer Website.
Für die Conversion heißt das: Konsistenz baut Vertrauen auf, weil sich die Seite überall an ihre eigenen Regeln hält. Und ein Button, der immer gleich aussieht, wird ohne Nachdenken als klickbar erkannt.
07 ·
Der Kneif-Test: so prüfst du jeden Entwurf in einer Minute
Jetzt hast du fünf Prinzipien, und aus ihnen wird ein Prüfwerkzeug. Der Einstieg ist immer derselbe: Kneif die Augen zusammen, bis der Entwurf unscharf wird, oder stell den Zoom auf 25 Prozent. Was jetzt noch heraussticht, ist deine tatsächliche visuelle Hierarchie.
Dann stellst du die einzige Frage, die zählt: Ist das, was heraussticht, auch das Richtige? Bei der Schreinerei Brenner muss es der Weg zur Beratungsanfrage sein. Sticht stattdessen das Foto oder das Jubiläums-Siegel heraus, weißt du ohne jede Designkenntnis, was zu tun ist.
Danach gehst du die übrigen Prinzipien in fester Reihenfolge durch. Jede Prüfung dauert Sekunden, und jede führt auf eine konkrete Beobachtung statt auf ein Gefühl.
| Schritt | Der Handgriff | Prinzip dahinter |
|---|---|---|
| 1. Blinzeln | Augen zusammenkneifen: Was sticht heraus, und ist es das Wichtigste? | Hierarchie & Kontrast |
| 2. Zwischenräume | Nur auf die Abstände schauen: Ist der Abstand in Gruppen kleiner als zwischen Gruppen? | Weißraum, Nähe |
| 3. Kanten | Blatt Papier senkrecht anlegen: An wie vielen Linien hängen die Elemente? | Ausrichtung |
| 4. Gleiches vergleichen | Buttons, Kacheln und Überschriften nebeneinanderhalten: Sieht Gleiches gleich aus? | Wiederholung & Konsistenz |
| 5. Drei Sekunden | Jemanden, der den Entwurf nicht kennt, kurz draufschauen lassen: Was ist hängengeblieben? | Alle fünf zusammen |
So sieht die Brenner-Hero aus, wenn alle fünf Prinzipien angewendet sind. Vergleich sie mit dem Ausgangsentwurf, und geh die Prüfreihenfolge einmal an beiden Fassungen durch.
Schaubild: der Gesamtvergleich. Zwischen beiden Fassungen liegt kein neuer Inhalt, sondern die konsequente Anwendung der fünf Design-Prinzipien.
Feedback geben, ohne “gefällt mir nicht” zu sagen
Mit der Prüfreihenfolge kannst du auch das zweite Problem lösen: dem Designer sagen, was dich stört. Die Regel dafür lautet: Sprich nie über deinen Geschmack, sondern immer über die Aufgabe der Seite und das verletzte Prinzip.
| Statt (Geschmack) | Besser (Aufgabe und Prinzip) |
|---|---|
| “Zu langweilig.” | “Beim Blinzeln sticht das Foto heraus, nicht der Anfrage-Button. Der Button verliert gegen das Bild.” |
| “Wirkt unruhig.” | “Ich zähle vier Startkanten und sechs verschiedene Abstände. Können wir das auf eine Flucht und feste Stufen bringen?” |
| “Das Formular schreckt ab.” | “Die Labels schweben zwischen den Feldern. Wenn sie an ihrem Feld kleben, zerfällt das Formular in drei klare Gruppen.” |
| “Machen Sie es moderner.” | “Die drei Kacheln haben drei verschiedene Stile. Welcher ist unserer, und können die anderen beiden ihm folgen?” |
💡 Merke
Die Feedback-Formel: Beobachtung, Prinzip, Aufgabe. Was sehe ich (der Button geht unter), welches Prinzip ist verletzt (Hierarchie), welches Ziel gefährdet das (die Anfrage). Mit dieser Formel kann jeder Designer arbeiten, weil du ihm das Problem gibst und die Lösung bei ihm lässt.
ℹ️ Vorsicht bei Design-Zahlen
Im Netz kursieren präzise klingende Design-Zahlen: Farbe X steigere die Conversion um Y Prozent, Weißraum verbessere das Verständnis um Z Prozent. Solche Angaben halten einer Prüfung fast nie stand.
Gute Designer argumentieren mit Prinzipien und mit Tests an deiner eigenen Seite, nicht mit universellen Prozentwerten. Präsentiert dir jemand eine solche Zahl, frag freundlich nach der Herkunft; an der Antwort erkennst du die Qualität der Beratung.
Experten-Tipp aus der Agentur
Blinzle in jeder Design-Abnahme zuerst, bevor du irgendetwas im Detail anschaust, und frag die Runde: Was sticht heraus? Wenn die Antwort nicht der nächste Schritt des Besuchers ist, diskutier keine Farben und keine Schriften, sondern zuerst die Hierarchie. Alles andere ist Feinschliff an der falschen Stelle.
Pascal Cabitza
Geschäftsführer Ostend Digital
Zwei Grenzen des Kneif-Tests gehören dazu. Er prüft den visuellen Ersteindruck, nicht die Bedienung, dafür gibt es die Methoden aus der Lektion zur User Experience. Und ob die verbesserte Hero tatsächlich mehr Anfragen bringt, zeigt erst die Messung an der echten Seite, das Handwerkszeug dafür liefert die Lektion zur Conversion-Optimierung.
08 ·
💡 Recap
Design-Prinzipien in 30 Sekunden:
- Fünf Prinzipien entscheiden, ob ein Entwurf professionell wirkt: Hierarchie und Kontrast, Weißraum, Ausrichtung, Nähe, Konsistenz. Sie sind Handwerk und damit lernbar
- Ein Element muss gewinnen. Größensprünge wie 16/24/40 statt Größenschleichen wie 16/18/20, Kontrast über mindestens zwei Kanäle, eine Botschaft und ein Button pro Sichtfeld
- Abstand gruppiert. Wenige feste Stufen wie 8/16/24/48/96, innen kleiner als außen, und das Wichtigste bekommt die meiste Luft
- Eine Flucht pro Seite. Jede Kante braucht einen Partner, und knapp daneben wirkt schlimmer als deutlich anders
- Das Label klebt am Feld. Der Abstand zwischen Gruppen ist immer größer als der in Gruppen, dadurch wirken Formulare und Listen kürzer
- Kneif-Test plus Feedback-Formel: Blinzeln zeigt, was gewinnt. Und Kritik funktioniert als Beobachtung, Prinzip und gefährdete Aufgabe, nie als “gefällt mir nicht”
09 ·
Selbstcheck: kannst du das anwenden?
Du blinzelst auf deine Startseite, und das Erste, was heraussticht, ist das große Stimmungsfoto im Header. Ist das ein Problem?
Das hängt von der Aufgabe der Seite ab, und genau die prüft der Kneif-Test. Soll die Seite Anfragen bringen, gewinnt gerade das Foto gegen den nächsten Schritt des Besuchers, und das ist ein Hierarchie-Problem. Die Lösung liegt auf zwei Seiten: den Button über Größe, Strichstärke oder Farbe stärken oder das Foto zurücknehmen, bis der Anfrage-Weg das Sichtfeld gewinnt.
Ein Entwurf nutzt 20 Pixel für die Headline, 18 für Zwischenüberschriften, 16 für den Fließtext, dazu drei gleich große Buttons. Was diagnostizierst du?
Zweimal dasselbe Prinzip: Hierarchie und Kontrast. Die Schriftstaffel 16/18/20 ist Größenschleichen, das Auge kann die Ränge kaum trennen, ein Sprung wie 16/24/40 macht sie sichtbar. Und drei gleich große Buttons enden unentschieden, einer muss zum Primär-Button werden, die anderen treten als Sekundär-Stil oder Textlink zurück.
Dein Kontaktformular wirkt lang und unübersichtlich. Die Labels stehen mittig zwischen den Feldern, alle Abstände sind gleich. Was tust du?
Das ist ein Nähe-Problem. Jedes Label muss an sein Feld rücken, mit kleinem Binnenabstand, während der Abstand zwischen den Label-Feld-Paaren deutlich größer wird. Danach zerfällt das Formular in wenige klare Gruppen, wirkt kürzer und wird eher ausgefüllt, ohne dass ein einziges Feld gestrichen wurde.
Du findest den neuen Entwurf deiner Agentur langweilig. Wie sagst du das, damit etwas Brauchbares dabei herauskommt?
Nicht über den Geschmack, sondern mit der Feedback-Formel: Beobachtung, Prinzip, Aufgabe. Zum Beispiel: “Beim Blinzeln sticht nichts heraus, alle Elemente sind gleich laut, und der Besucher findet den Weg zur Anfrage nicht.” Damit gibst du dem Designer ein prüfbares Problem und lässt die Lösung bei ihm, statt eine Gestaltungsentscheidung zu diktieren.
Deine gewachsene Website hat drei Buttonstile, vier Schriften und mal zentrierte, mal linksbündige Sektionen. Womit fängst du an, ganz ohne Designer?
Mit den beiden Prinzipien, die nur Disziplin brauchen: Konsistenz und Ausrichtung. Erst die Konsistenz-Inventur, also jede Stil-Variante auf die häufigste reduzieren, ein Buttonstil, zwei Schriften, eine Eckenrundung. Danach eine Flucht festlegen, meist linksbündig, und alle Sektionen an diese Kante hängen.
Alle Lektionen des Webdesign- und CRO-Kurses im Überblick →
Quellen und Stand (3 Einträge)
- W3C: “Understanding WCAG 2.2”, Erfolgskriterium 1.4.3 Contrast (Minimum): Kontrastverhältnis mindestens 4,5:1 für normalen Text und 3:1 für großen Text, Stufe AA (w3.org/WAI/WCAG22/Understanding, abgerufen 16.08.2026). Das sind die einzigen normierten Zahlenwerte dieser Lektion. Quellentyp: Richtlinie, keine Interessenlage
- Alle übrigen Regeln und Zahlenwerte dieser Lektion, darunter der Fünfer-Kanon der Prinzipien, Schriftstaffeln wie 16/24/40, Abstandsstufen wie 8/16/24/48/96, die Faustregel “ein Buttonstil, zwei Schriften, eine Eckenrundung” sowie Kneif-Test und Prüfreihenfolge: verbreitete Handwerkspraxis des Webdesigns, Einordnung Ostend Digital, Stand 08/2026. Sie sind im Text bewusst als bewährte Empfehlungen formuliert, nicht als Messwerte. Die Wurzeln der Gruppierungsprinzipien liegen in den Gestaltgesetzen der Wahrnehmungspsychologie
- Das durchlaufende Beispiel “Schreinerei Brenner” ist frei erfunden und bezeichnet keine echte Firma. Alle sechs Schaubilder sind eigene Darstellungen, Ostend Digital, Stand 08/2026
Du willst eine Website, die nicht nur schön aussieht, sondern Anfragen bringt?
Wir gestalten nach genau diesen Prinzipien und begründen dir jede Entscheidung an der Aufgabe deiner Seite, vom ersten Entwurf bis zur Abnahme.
