Startseite ▷ Wissen ▷ 6 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.

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.

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.

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.

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.

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.

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.