7 Webdesign-Regeln für jede Art von Seite

Das Schreiben von Artikeln und Blogbeiträgen verlangt Kreativität und Energie. Dieser sorgfältig erstellte Inhalt sollte auf deiner Website möglichst ansprechend dargestellt werden. Wichtig ist auch, dass Besucher sich auf deiner Website intuitiv und einfach zurechtfinden.

Die folgenden grundlegenden Regeln für das Webdesign helfen dir dafür zu sorgen, dass deine Website die Bedürfnisse deiner Besucher erfüllt. Du musst dafür weder ein Designer sein noch dich mit Webdesign besonders gut auskennen. Und das Beste daran ist: Diese Grundprinzipien funktionieren auf Websites aus jeder Branche.

Ganz gleich, ob du an deiner ersten oder 40. Website arbeitest: Mit diesen sieben Designregeln verbesserst du das Benutzererlebnis deiner Website und sorgst für einen attraktiven optischen Auftritt.

1. Ausgewogenheit

Ausgewogenheit verleiht einer Website etwas Angenehmes. Damit ist eine gewisse Symmetrie auf einer Seite gemeint. Es gibt zwei Arten von Ausgewogenheit:

• Symmetrie, wobei jede „Hälfte“ den gleichen Raum einnimmt. Das folgende Bild zeigt Themes, bei denen die linke und die rechte Hälfte der Seite fast identisch aussehen.

• Asymmetrie mit deutlichen Unterschieden zwischen beiden Hälften, die sich dennoch in einem gewissen Gleichgewicht befinden. In dem unteren Bild befindet sich rechts ein großes Foto, das „schwerer“ wiegt als der Text auf der linken Seite. Insgesamt ist das Design trotzdem ausgewogen.

2. Freier Platz

Freier Platz ist genau das, wonach es klingt: Hier ist nichts platziert.

Überfrachte deine Besucher nicht mit Inhalten, damit sie sich ganz auf das Wesentliche konzentrieren können. Das fördert auch das Verständnis.

Zudem lenkt es die Aufmerksamkeit der Besucher auf die wichtigsten Elemente deiner Seite. Auch wird dem Auge so eine Pause gegönnt, ohne dass zu viele Informationen auf einmal auf den Besucher einströmen.

3. Raster

Die meisten Websites basieren auf einem Raster. Kurz gesagt unterteilt das Raster eine Seite in Spalten und Zeilen. Raster dienen zur visuellen Ausrichtung aller Inhalte auf deiner Website und sorgen für ein sauberes, ausgewogenes Layout.

Die meisten Themes bei WordPress.com basieren auf einem Raster. Ein gutes Beispiel für die Verwendung von Rastern, freiem Platz und Ausgewogenheit ist Rebalance.

Auch die Vorlagen für Seiten deines Themes helfen dir beim Gestalten eines ausgewogenen Designs.

4. Farbe

Die Farben, die du auf deiner Website verwendest, können bestimmte Emotionen erzeugen – d. h. viele Menschen empfinden bei gewissen Farben etwas Bestimmtes. Der Kontrast zwischen mehreren Farben kann die Lesbarkeit verbessern und die Aufmerksamkeit auf bestimmte Elemente lenken. Das ist z. B. eine gute Idee für einen Button in einer kontrastierenden Farbe, damit er sich besser von den restlichen Seitenelementen abhebt.

Die Auswahl von zueinander passenden Farben kann schwierig sein. Deshalb bieten die Tarife WordPress.com Premium und Business eine integrierte Farbpalette.

Die Farben deines Themes kannst du im Customizer auf dem Tab Farben anpassen.

5. Grafiken

Viele Menschen begreifen Inhalte auf visuelle Art leichter. Deshalb solltest du Bilder verwenden, die deinen Inhalt unterstützen. Auch profitiert davon die Gestaltung deiner Website.

Bei der Verwendung von Bildern und Grafiken gibt es jedoch zwei wichtige Dinge zu beachten. Erstens: Verwende nicht zu viele Bilder „über der Falz“ – also im oberen Bereich deiner Website. Diesen Teil der Website sehen deine Besucher zuerst, bevor sie nach unten scrollen, um weitere Inhalte zu sehen. Zweitens: Optimiere deine Bilder, damit deine Website durch das Laden großer Bilder nicht zu langsam wird.

6. Typografie

Als Typografie wird die Gestaltung von Text auf deiner Website bezeichnet – also die Schriftarten und die Schriftgrößen. Die Typografie hat entscheidenden Einfluss auf die Lesbarkeit und das Verständnis eines Inhalts. Was macht eine gute Typografie aus?

• Der Text sollte nicht zu klein oder zu groß sein. Für den Fließtext (den normalen Text) ist eine Schriftgröße von 16 px optimal. 12 px ist die absolut kleinste Größe, die man noch auf einem Mobilgerät lesen kann (jedenfalls Google zufolge).
• Verwende gut lesbare Schriften: Alle Themes bei WordPress.com verwenden ausgewählte Schriften, die den Spagat zwischen Design und Lesbarkeit hervorragend meistern.

Die Schriften deiner Website bei WordPress.com kannst du auch im Customizer auf dem Tab Schriften einstellen.

7. Einheitlichkeit

Einheitlichkeit bedeutet, dass du Besuchern ein stimmiges Erlebnis bietest, indem du auf deiner Website überall den gleichen Stil oder die gleiche Designästhetik verwendest.

Im Allgemeinen ist die Einheitlichkeit bei Themes von WordPress.com schon gegeben. Darüber hinaus solltest du möglichst immer den gleichen Überschriftenstil und die gleichen Farben auf deinen Seiten verwenden – am besten für alle Inhalte.