6 wichtige Designregeln für den Aufbau einer Website

Von Gianna-Fischer | 4 Aug 23

Startseite Wissen6 wichtige Designregeln für den Aufbau einer Website

Designregeln für die Website

Erfahre mehr über 6 Designgrundregeln für eine professionelle, ästhetische und strukturierte Website.

6 Designregeln für den Aufbau einer Website

Tipp 1 – lass genügend Platz

Lass Platz zwischen einzelnen Textelementen und gib ihnen Raum. Damit wird eine verbesserte Lesbarkeit erzielt und einzelne Texte kommen besser zur Geltung.

Du lässt deinem Design und Inhalt keinen Platz, um zu wirken und sich zu entfalten.

 Trenne verschiedene Textelemente voneinander und schaffe Raum für die einzelnen Elemente.

lass genügend Platz - Grafik

Tipp 2 – erstelle eine Hirarchie

Gib deinen Texten eine Hierarchie vor. Eine klare Hierarchie und Zuordnung sowie unterschiedliche Textgrössen machen deinen Text interessanter und leichter lesbar.

Deine definierten Regeln sollten sich über die gesamte Website nicht ändern.

Du hast keine Hierarchie, Struktur und Zuordnung in deinen Texten.

✅ Arbeite mit einer klaren Hierarchie und definiere eine Headline, Sublinie, Zwischenüberschrift, Fliesstext und Button. Verwende hierfür verschiedene Schriftgrössen und Dicken.

erstelle eine Hirarchie - Grafik

Tipp 3 – nicht zu viele Schriftarten

Verwende nicht zu viele Schriftarten. Arbeite lieber mit unterschiedlichen Schriftstärken und -Grössen.

Stelle sicher, dass die verschiedenen Schriftarten sich gut ergänzen und stelle eine Hierarchie unter ihnen fest.

Du verwendest zu viele Schriftarten und hast dadurch keine richtige Struktur. Es macht das Design unübersichtlich, wirkt chaotisch und nicht sehr ansprechend.

Lege dich auf 1 – max. 3 Schriftarten fest. Verwende lieber unterschiedliche Schriftgrössen und -Stärken. Das schafft Struktur und bringt Ruhe in dein Design.

nicht zu viele Schriftarten - Grafik

Tipp 4 – wähle eine gut leserliche Schriftgrösse

Wähle ein passende und genug grosse Schriftgrösse, die gut leserlich ist. Überprüfe die Lesbarkeit dann auf diversen Gerätetypen und Gerätegrössen.

❌Du verwendest eine zu kleine Schriftgrösse. Dies ist schwer leserlich und ermüdet die Augen schnell, was dazu führen kann, dass der Leser*in nicht mehr weiterlesen möchte.

Verwende lieber eine etwas grössere Schriftart, welche gut lesbar ist, sowohl auf dem Smartphone als auch am Desktop.

wähle eine gut leserliche Schriftgrösse - Grafik

Tipp 5 – geeignete Zeilenlänge & genügend Absätze

Verwende eine geeignete Zeilenlänge für deinen Text und lasse deinen Text nicht über die volle Inhaltsbreite (Bildschirmbreite) gehen.

Mache zudem genügend Absätze, damit die Texte leichter lesbar sind und sich die Leser*innen gut im Text zurechtfinden.

❌ Dein Text geht über die volle Inhaltsbreite (Bildschirmbreite) und hat keine oder kaum Absätze und ist somit schwer leserlich.

✅ Verringere die Zeilenbreite deines Textes so weit, bis dieser einfach und ohne viel Anstrengung gelesen werden kann. Und vergiss nicht fleissig Absätze in deinen Text einzubauen (ca. alle 4–7 Zeilen einen Absatz). Absätze kannst du auch mit Zwischenüberschriften gliedern, für eine bessere Übersicht. Das lädt den Leser*in direkt viel mehr zum Lesen des Textes ein.

geeignete Zeilenlänge und genügend Absätze - Grafik

Tipp 6 – achte auf genügend Kontrast

Achte auf genügend Kontrast. Den maximalen Kontrast wird mit schwarzem Text auf weissem Hintergrund erzielt. Texte sind so leicht leserlich.

Du hast wenig Kontrast zwischen Textfarbe und Hintergrundfarbe, wodurch die Texte schwer leserlich sind.

Wähle Farben mit genügend Kontrast. Dies ist besonders bei Fliesstexten wichtig, damit diese einfach zu lesen sind. Guten Kontrast hast du zum Beispiel mit schwarz und weiss oder auch mit dunkelblau und weiss etc.

achte auf genügend Kontrast - Grafik

Weitere Artikel, welche dich interessieren könnten:

WordPress-Website bearbeiten mit dem Divi-Builder

WordPress-Website bearbeiten mit dem Divi-Builder

6 Designregeln für den Aufbau einer Website

Designregeln für den Aufbau einer Website

Was ist ein Call-to-Action?

Website, Webseite vs. Homepage

Was ist der Unterschied zwischen Website, Homepage & Webseite?

Warum jedes Unternehmen eine Website haben sollte

Warum eine Website wichtig ist & warum jedes Unternehmen eine haben sollte