Was ist eigentlich gutes Webdesign? Inkl. Tools und Ressourcen.

Kannst du den Unterschied zwischen einer guten und einer schlechten Website erkennen? Schönheit liegt, natürlich, immer im Auge des Betrachters, aber lass uns mal untersuchen was gutes Design technisch ausmacht.

Image for post
So erkennst du gutes Webdesign. cptPLANK.io

Gutes Webdesign bestimmt wie erfolgreich eine Website ist.

Eine gut gestaltete Website ist benutzerfreundlich und “fühlt” sich gut an. Essenzielle Funktionen sind leicht zu finden und zu benutzen.

Übersichtlichkeit ist ein wichtiges Merkmal für gutes Webdesign. Anwender möchten so schnell wie möglich an Informationen kommen. Dauert das zu lange, sind sie oft schon wieder Weg, bevor die Website ihren Zweck überhaupt erfüllen konnte.

Schließlich soll eine Website etwas repräsentieren, beispielsweise ein Projekt oder ein Produkt, eine Firma oder eine Dienstleistung. Man möchte etwas auf die bestmöglichen Art und Weise zur Schau stellen, Geld verdienen oder einen Mehrwert bieten. So ist es unumgänglich, sich tiefschürfende Gedanken zur Gestaltung und Umsetzung zu machen.

Umso professioneller und ansprechender eine Website ist, desto seriöser ist der Eindruck auf den Anwender und potenziellen Konsumenten. Schlechtes oder salopp umgesetzte Webdesign kann hingegen abschreckend wirken. Im schlimmsten Fall kann eine schlecht umgesetzte Webpräsenz das Image eines Anbieters nachhaltig schädigen. Und das möchtest du ja vermeiden, sonst würdest du diesen Artikel nicht lesen.

Image for post
Eine unübersichtliche (links) und eine auf das wesentliche reduzierte Website (rechts).

Wenn du Produkte oder Dienstleistungen anbieten möchtest, hast du vielleicht schon mal von der Konversionsrate gehört. Ein gutes Webdesign beeinflusst die Konversionsrate. Vielleicht hast du dir ein ausgefuchstes System zur Steigerung deiner Konversionsrate ausgedacht, aber wenn du die Qualität deiner Präsentation, also deiner Website, dabei vernachlässigst, führt das alles ins Leere. Deine Anwender müssen dir in erster Linie vertrauen und das Gefühl haben, dass dein Angebot eins oder mehrere ihrer Probleme lösen kann. Das erreichst du, indem du den Weg zur Problemlösung so angenehm und einfach wie möglich gestaltest.

Suchmaschinen belohnen benutzerfreundliche Webseiten mit besseren Platzierungen. Denn eine ansprechende und gut funktionierende Website lässt deine Besucher länger auf dieser verweilen. Damit steigt ihre Relevanz und Suchmaschinen platzieren relevante Webseiten weiter vorne.

Gutes Webdesign beachtet typisches Verhalten der Nutzer. So beginnen die meisten Anwender eine Website links oben anzuschauen, dann geht der Blick grade nach rechts, zurück nach links, wieder nach rechts und zum Schluss wird der linke Teil des Bildschirms von oben nach unten betrachtet.

Image for post
Visualisierung des Schemas “F” von mastermarketingla.com

Das nennt man das Schema „F“, denn so betrachten die meisten Besucher eine Website zunächst. Daher sollten die Grundelemente einer Website nach diesem Schema angeordnet werden, um den größtmöglichen Nutzen zu erzielen.

Das ist nur ein Beispiel dafür, wie tiefgreifend das Thema werden kann und erklärt auch, warum man bei den meisten Websites das Logo in der oberen linken Ecke und die Navigation im oberen Teil des Bildschirms angeordnet findet. Die Kernaussage wird dabei, in der Regel, mittig im Header angeordnet.

Nun, wie entwirft man eine gute Website?

Gutes Webdesign benötigt jede Menge technisches Fachwissen und auch eine ordentliche Portion Psychologie. Dieser Beitrag soll einige Prinzipien von guten Webdesign umreißen. Diese Designprinzipien sollen dir dabei helfen, ein Auge für gutes Webdesign zu bekommen oder dir dabei helfen bessere Websites zu erstellen.

Keep it simple

Eine überladene Website überfordert die Anwender. Wenn du zu viele Informationen auf einmal und ohne Verstand platzierst, wissen die Besucher nicht wo sie zuerst hingucken sollen, geschweige denn wo die relevanten Informationen zu finden sind. Damit ist der Hauptzweck der Website verfehlt und der potenzielle Konsument zieht in schlimmsten Fall von dannen.

Ausgefallene Menüführungen sollten daher unbedingt vermieden werden. Wir Menschen lieben Konsistenz und haben keine Lust auf jeder Website die Navigation neu zu erlernen.

Ein klares, bewährtes und aufs wesentliche reduziertes Design lenkt die Aufmerksamkeit des Besuchers auf die Bereiche, die relevant für ihn sind. Eine gut gestaltete Website lässt sich intuitiv und einfach bedienen. Informationen können schnell gefunden werden.

Whitespace

Whitespace, oder auch Weißraum, ist der Teil einer Seite, der buchstäblich leer ist. Im Webdesign ist es der Raum zwischen Grafiken, Spalten, Bildern, Text, Rändern und anderen Elementen. Es ist der Bereich, der unangetastet bleibt, um die Dinge zu glätten und eine Seite in etwas Elegantes zu verwandeln. Es ist auch der leere Raum, der uns daran erinnert, dass einfachere Designs schön sind und dass kein mit Text und grafischen Elementen gefülltes Layout nötig ist, um eine klare und direkte Botschaft zu vermitteln.

Konsistenz

Wie grade schon angerissen, ist Konsistenz unheimlich wichtig für gutes Webdesign. Es hilft den Benutzern der Website sich zurecht zu finden. Konsistenz hilft auch sich zu erinnern. Beispielsweise gibt es da eine bekannte Getränkemarke, die die Optik des Weihnachtsmannes geprägt hat. Jedes Kind kann von weiter Ferne erkennen, dass es sich auf einer beliebigen Werbefläche um die besagte Marke handelt.

Jede einzelne Seite sollte aufeinander abgestimmte Designelemente haben, die Schrift, ihre Größen, Abstände, Formen, Schaltflächen, Farben etc. sollten immer die gleichen sein oder sich sinnvoll in das Design einfügen. Du solltest dir schon vor der Erstellung einer Website Gedanken dazu machen. (Und vergiss nicht: Die Seite muss responsive sein, d.h. auf jedem Gerät und jeder Auflösung muss die Website angezeigt (und benutzt!) werden können.)

Typographie und Lesbarkeit

Du solltest Schriftarten wählen, die zueinander passen und leicht zu lesen sind. Moderne, serifenlose, Schriftarten können vornehmlich für Fließtexte verwendet werden. Vergiss dabei nicht, dass nicht jeder PC die gleichen Schriftarten installiert hat, die du gerne verwendet würdest. Du musst dafür sorgen das die von dir gewählten Schriftarten angezeigt werden können. Bedenke dabei, dass nicht alle Schriftarten gratis verwendet werden dürfen. Es könnte sein, dass du deine Wunschschriftart erst kaufen musst, um sie bedenkenlos zu verwenden.

Auf folgenden Webseiten findest du eine Reihe von frei verfügbaren Schriftarten, beachte aber den Datenschutz, denn nichts ist wirklich gratis. Je nachdem wie du die Schriften in deine Webseite einbindest, könnten Daten deiner Nutzer ungewollt an die Anbieter übertragen werden:

Relevante Inhalte anbieten

Texte sollen den Besuchern gewünschte Informationen liefern. Suchmaschinen sind sehr mit Textdaten vertraut und machen Texte so zu einem integralen Bestandteil der Suchmaschinenoptimierung. Das Internet ist schnelllebig, einfach alles mit Text voll zu klatschen ist auch nicht Sinn der Sache. Google sucht regelmäßig nach neuen Trends, welche Inhalte für die Nutzer relevant sind.

Sei also immer auf dem neusten Stand, inwiefern Texte, Videos oder andere Inhalte deine Suchmaschinenplatzierungen beeinflussen können.

Kompatibilität mit mobilen Geräten

Smartphone, Tablets, Phablets, Konsolen usw. gibt es in sämtlichen Ausführungen, Größen und Qualitäten. Du möchtest sicherstellen, dass deine Website auf allen Geräten so gut wie möglich angezeigt wird. Eine Website, die nicht responsive ist, sorgt dafür, dass Nutzer abgeschreckt werden. Ein Großteil der Anwender surft mittlerweile auf mobilen Geräten, also ist es unumgänglich eine Website responsive zu gestalten.

Für die technische Umsetzung gibt es unterschiedliche Ansätze und Meinungen.

Farbpalette und Bildsprache

Farben vermitteln Gefühle. Vielleicht ist dir schon mal aufgefallen, dass in unterschiedlichen Branchen unterschiedliche Farben vorherrschen. Blau sieht man häufig bei Finanzinstituten und Versicherungen, denn blau verbinden viele Menschen mit Kompetenz, Loyalität, Sicherheit und Ruhe. Einige Farben werden eher selten verwendet. Beispielsweise die Farbe Rot. Rot steht für Liebe, aber auch für Ärger und Aggressivität. Also sei dir Bewusst was du mit deiner Website bezwecken möchtest und wie der Nutzer die Inhalte wahrnehmen soll. Farben können hier maßgeblich die Gemütszustände und Aufmerksamkeit der Anwender beeinflussen.

Eine gute Farbkombination sorgt für eine angenehme Atmosphäre und entspannt die Augen. Sie lenkt den Besucher auf die Abschnitte, die du hervorherben möchtest.

Nicht zu vergessen: Der Kontrast! Wichtige Elemente und Texte sollten sich vom jeweiligen Hintergrund abheben. Komplementärfarben und Helligkeitsunterschiede können dabei helfen.

Beachte die Konsistenz. Wenn die Website für ein (oder dein) Unternehmen erstellt werden soll, sollte sie die Farben und das Image, also die Corporate Identity, wiedergeben.

Folgende Tools können dir helfen, die perfekten Farbkombinationen für dich herauszufinden:

Geschwindigkeit

Wir haben alle keine Zeit. Wir sind es gewohnt Informationen sofort und schnell zu bekommen. Also ist es selbstverständlich, dass eine gute Website unverzüglich geladen werden muss. Suchmaschinen wie Google belohnen schnelle Webseiten.

Sorge dafür, dass der Code deiner Website aufs wesentliche reduziert ist. Halte die JavaScript und CSS Dateien so klein wie möglich. Auch hier gilt wieder; weniger ist mehr. Versuch nicht zu viel „Gedöns“ auf deine Website einzubinden, wenn es nicht wirklich nötig ist.

Einfache Navigation

Besucher schätzen eine einfache und bewährte Navigation. Eine gute Website hat eine logische und effektive Seitenhierarchie und hebt klickbare Schaltflächen oder Text auf besonderer Art und Weise hervor.

Du solltest die „Drei-Klick-Regel“ befolgen, die besagt, das Besucher in maximal drei Klicks die gewünschten Informationen erhalten müssen.

Kommunikation

Eine gute Website sollte in der Lage sein, Informationen an die Anwender effizient zu kommunizieren. Je besser die Kommunikation, umso wahrscheinlicher ist es, dass die Besucher mehr Zeit auf dieser Website verbringen. Gute Kommunikation bedeutet hier, sowohl die Verwendung von Überschriften, als auch einer klaren Gliederung von Text und Design. Textblöcke sollten nicht zu lang sein und sinnvolle Absätze haben. Benutze Bilder, um Inhalte visuell zu verdeutlichen. Zusammengefasst bedeutet Kommunikation hier, dass die Inhalte gut und logisch strukturiert sind.

Image for post
Das Wichtigste auf einen Blick

Behalte dabei die Designregel „form follows function“ (Funktion bestimmt die Form) im Auge. Jedes Element sollte eine Funktion haben, nicht ablenken und sinnvoll sein.

404-Seite

Ziel einer 404-Seite ist es, einen Besucher auf der Website zu halten, selbst wenn er auf eine Seite trifft, die nicht existiert.

404 Seite aeosys.de
Beispiel für eine außergewöhnliche 404 Seite von Aeosys.de

Eine 404-Seite kann, wenn sie kreativ und zielgerichtet gestaltet wird, den Besucher nicht nur halten, sondern ihn auch dazu bringen, sich länger auf der Website aufzuhalten und nachzusehen, was sich sonst noch um die Website herum abspielt. Einige Dinge, die du beachten solltest: Die Seite sollte in erster Linie werbefrei sein. Der Benutzer sollte wissen, dass er die Seite irrtümlich erreicht hat, aber die Art und Weise, wie es kommuniziert wird, kann die Persönlichkeit der gesamtem Webpräsenz widerspiegeln. Sie sollte den Besucher auf eine andere Seite oder die Startseite leiten, statisches HTML sein und keine komplexen Skripte enthalten und letztendlich sollte sie so schnell wie möglich geladen werden.

Schlusswort

Ich hoffe, dir hat der Artikel gefallen. Bitte zögere nicht, deine Gedanken zu teilen, indem du die Kommentarfunktion nutzt.

Julien Lieske - Webentwickler
Julien Lieske
Webentwickler