Home / Tipps & Tricks /

Tipps für die perfekte Website

Webdesign ist eine komplizierte Design-Disziplin, bei der es lange dauern kann, sie zu meistern. Denn es geht nicht nur darum, was auf einer Seite platziert wird, sondern wie es hinzugefügt wird. Eine Regel besagt, dass gutes Design ästhetisch, klar und emotional sein muss, um den zugrunde liegenden Inhalten Ausdruck geben zu können.

Die schriftliche und bildliche Gestaltung soll – unabhängig vom Medium und von der Art einer Publikation - exakt die Botschaft transportieren, die man an eine bestimmte Zielgruppe vermitteln möchte, getreu dem Motto: „Design follows function.“ Dabei gilt es, auch komplexe Inhalte und Informationen grafisch so umzusetzen, dass sie leicht verständlich und schnell erfassbar sind.

Einer der häufigsten Anfängerfehler ist ein unordentlicher Bildschirm. Viele Anfänger haben eine Liste mit den Dingen, die sie auf ihrer Website wollen und werfen gleich alles auf den Startbildschirm.

Im Grunde verwässert jedes Element, das hinzugefügt wird, alle anderen. Wer zu viele ablenkende Elemente hat, weiß ein Nutzer nicht, wohin er schauen soll, und es bietet sich kein zusammenhängendes Erlebnis mehr. Wenn im Gegenzug nur die notwendigen Elemente hinzugefügt werden, sind sie wirksamer, da sie sich die Aufmerksamkeit nicht teilen müssen. Mehr Leerraum bedeutet weniger Unordnung und das ist das, was wirklich zählt bei einem minimalistischen, sauberen Webdesign.

Aufräumen

Damit ein Webdesign wirkungsvoll ist, muss es gestrafft werden. Es muss einen klaren Weg oder Wege für den Nutzer geben, denen er folgt. Es gibt viele verschiedene Möglichkeiten, dies zu erreichen, aber der erste Schritt besteht immer darin, Raum für Elemente mit hoher Priorität zu schaffen, indem man diejenigen mit weniger Priorität entfernt.

Also sind Designs zunächst auf die essentiellen Dinge zu überprüfen. Wenn ein Element nichts zum Gesamtergebnis beiträgt oder es verbessert, sollte es entfernt werden. Wenn es überlebensfähig ist, kann es auch zu einer Unterseite verschoben werden. Pullout-Menüs (Dropdowns) sind ein guter Weg, Unordnung zu reduzieren. Wenn möglich, sollte versucht werden, diese versteckten Menüs auf wenige Punkte zu beschränken.

Nicht zu empfehlen sind Sidebars. Neue Besucher werden sie wahrscheinlich kaum beachten oder benutzen. Außerdem, wenn nicht alle Optionen ins Haupt-Navigationsmenü passen, muss die Navigationsstruktur sowieso vereinfacht werden. Ebenso sind Slider nicht empfehlenswert. Die Bewegungen und neuen Bilder in einem Slider lenken ab und sie schwächen die Kontrolle darüber, was ein Nutzer sieht.

Leerräume

Und wie soll der ganze frei gewordene Raum gefüllt sein, nachdem aufgeräumt wurde? Vorschlag: mit nichts zu füllen? Negativraum (oder Weißraum) ist der Kunst-Fachbegriff für Bereiche in einem Bild, die keine Aufmerksamkeit erregen. In der Regel sind diese leer oder weiß, wie ein wolkenloser Himmel oder eine farblose Wand. Obwohl eigentlich langweilig, kann der Negativraum das Hauptthema komplementieren und verbessern, wenn er genutzt wird, um die Lesbarkeit zu verbessern und dafür zu sorgen, dass man das Bild besser „aufnehmen“ kann.

Einfachheit ist im Zweifel immer besser. Es lenkt beinahe sofort Aufmerksamkeit auf das, was für den Nutzer wichtig ist. Außerdem ist das Einfache attraktiv. Wichtige Elemente also am besten mit Negativraum umschließen. Je mehr Negativraum sich um etwas befindet, desto mehr Aufmerksamkeit erhält es. Wenn es viel Negativraum gibt, können andere ästhetische Elemente wie Farbe oder Typografie die Lücke optisch ausfüllen.

Nicht das falsche Element hervorheben: Wenn ein Ziel beispielsweise Conversion ist, kann die E-Mail-Adresse oder ein Call-to-Action-Button mit Negativraum umschlossen werden, aber nicht das Logo oder ein Angebot.

Vorsicht auch mit Hintergründen. Der Definition nach sollten sie größtenteils unbemerkt bleiben. Wenn ein Hintergrund nicht genügend Negativraum hat, wird er von den Hauptelementen ablenken.

Beim Webdesign geht es nicht nur darum, was auf einer Seite hinzugefügt wird, sondern wie es hinzugefügt wird. Dabei ist die Möglichkeit der visuellen Hierarchie zu nutzen: Sie bezieht sich darauf, Elemente wie Größe oder Platzierung zu verwenden, um zu beeinflussen, was ein Nutzer zuerst, als zweites oder zuletzt sieht. Ein großer, dicker Titel oben auf einer Website und winzige, z.B. rechtliche Informationen am Ende sind ein Beispiel dafür, die visuelle Hierarchie zu nutzen, um bestimmte Elemente anderen vorzuziehen. Beim Call-to-Action-Button reicht es nicht, dass er einfach nur da ist. Erfahrene Designer platzieren ihn bewusst und geben ihm kräftige Farben, um hervorzustechen und suggestiven Text.

Erfahrungsgemäß lesen die meisten Nutzer beim ersten Besuch nicht gleich jedes Wort, sondern “überfliegen” zunächst oberflächlich die Seite. Konkurrierende Elemente und zu viel Aufmerksamkeit erregende Taktiken verschrecken.

Fotografie

Auch wenn es optional ist: Wer sich dazu entscheidet, echte Fotos zu verwenden, sollte es richtig machen. Effektive, bedeutungsvolle Fotografie kann zielführend sein. Man kann mit ihr Kontrast erzeugen, Aufmerksamkeit erregen oder sogar den Blick auf den nächsten Abschnitt lenken. Im Webdesign Fotografie zu verwenden, folgt derselben Richtlinie wie für gute Fotografie im Allgemeinen.

Typografie

Auch wenn die gewählten Worte bereits extrem einflussreich sein mögen, kann deren Wirksamkeit abermals erhöht werden, indem ihnen der richtige Look verpasst wird. Typografie umfasst alle visuellen Teile von Text, besonders die Schriftarten, aber auch andere Elemente wie Größe, Textfarbe, Stil (kursiv, fett etc.) und die Laufweite zwischen Buchstaben, Wörtern und Linien. All diese Elemente haben Einfluss auf die visuelle Hierarchie. Kräftige Typografie in Kombination mit einem minimalistischen Dreh wäre optimal. Bei aller Schriftarten-Vielfalt sollten nur die geprüften „websicheren Schriftarten“ benutzt werden, die auf den meisten Geräten und Bildschirmen angezeigt werden können. Extravagante, aufmerksamkeitserregende Schriftarten können gut für Titel oder alleinstehende Wörter funktionieren, aber lenken zu sehr ab, wenn man sie exzessiv benutzt. Am besten die selbe Typografie für alles verwenden.

Die richtige Schriftart und -größe sind beide dem Lesen förderlich, ohne dass man sich anstrengen oder mehrmals lesen muss. Obwohl die Lesbarkeit hauptsächlich von der Typografie abhängt, muss auch Komposition und Struktur bedacht werden und wie der Text mit anderen Elementen interagiert. Wie gut die Textfarbe mit dem Hintergrund harmoniert, hat großen Einfluss auf die Lesbarkeit. Extravagante Schriftarten funktionieren gut, um Header und Überschriften sichtbarer zu machen. Für den Fließtext ist es am besten, bei einer simplen Schriftart zu bleiben, die gut für die Augen ist. Große Textblöcke schüchtern Leser ein. Es ist am besten, sie mithilfe proaktiver Seitenformatierung oder erzwungenen Absatzumbrüchen aufzuteilen.

Navigation

Das Rückgrat der Website ist die Navigation. Sie ist nach ihren Nutzern ausgerichtet, muss sich intuitiv anfühlen und darauf ausgelegt sein, dass sie zur Denkweise der Zielgruppe passt. Je weniger ein Nutzer über sie nachdenken muss, umso besser. Damit ein Besucher sich nicht zu sehr mit dem Navigieren befassen muss, möglichst bei den Gepflogenheiten bleiben, welche er bereits versteht: Navigationsmenü im Top Header, Logo mit Link zur Homepage, Suchleiste mit Lupensymbol etc.

Mobil-Version

Heutzutage ist es wichtig, dass die Website auf einem Mobilgerät funktioniert. Eine Mobilversion sollte schon direkt zu Beginn oberste Priorität haben. Das bedeutet nicht, dass eine Desktop-Version vernachlässigt werden kann. Aufgrund des begrenzten Platzes auf mobilen Bildschirmen kann hier nur mit den wesentlichen Dingen gearbeitet werden. Es ist leichter, erst die mobile Version anzugehen und dann die Desktop-Version, statt erst die Desktop-Version zu designen und dann Elemente zu entfernen.