Können Sie den Unterschied zwischen einer guten und einer schlechten Website erkennen? Schönheit liegt natürlich immer im Auge des Betrachters, aber lassen Sie uns untersuchen, was gutes Design technisch ausmacht.
Gutes Webdesign entscheidet darüber, wie erfolgreich eine Website ist.
Eine gut gestaltete Website ist benutzerfreundlich und "fühlt" sich gut an. Wichtige Funktionen sind leicht zu finden und zu nutzen.
Klarheit ist ein wichtiges Merkmal eines guten Webdesigns. Benutzer möchten Informationen so schnell wie möglich erhalten. Wenn dies zu lange dauert, sind sie oft schon wieder weg, bevor die Website überhaupt ihren Zweck erfüllen konnte.
Schließlich soll eine Website etwas repräsentieren, zum Beispiel ein Projekt oder ein Produkt, ein Unternehmen oder eine Dienstleistung. Sie wollen etwas bestmöglich präsentieren, Geld verdienen oder einen Mehrwert bieten. Es ist also unumgänglich, sich über das Design und die Umsetzung Gedanken zu machen.
Je professioneller und ansprechender eine Website ist, desto seriöser wirkt sie auf den Benutzer und potenziellen Kunden. Schlechtes oder beiläufig umgesetztes Webdesign kann dagegen abschreckend wirken. Im schlimmsten Fall kann ein schlecht umgesetzter Webauftritt das Image eines Anbieters dauerhaft schädigen. Und genau das wollen Sie vermeiden, sonst würden Sie diesen Artikel nicht lesen.
Wenn Sie Produkte oder Dienstleistungen anbieten, haben Sie vielleicht schon von der Konversionsrate gehört. Ein gutes Webdesign beeinflusst die Konversionsrate. Sie haben sich vielleicht ein cleveres System ausgedacht, um Ihre Konversionsrate zu erhöhen, aber wenn Sie die Qualität Ihrer Präsentation, d.h. Ihrer Website, vernachlässigen, wird das alles nichts nützen. In erster Linie müssen Ihre Nutzer Ihnen vertrauen und das Gefühl haben, dass Ihr Angebot eines oder mehrere ihrer Probleme lösen kann. Dies können Sie erreichen, indem Sie den Weg zur Lösung des Problems so angenehm und einfach wie möglich gestalten.
Suchmaschinen belohnen benutzerfreundliche Websites mit besseren Rankings. Eine ansprechende und gut funktionierende Website veranlasst Ihre Besucher, länger auf ihr zu verweilen. Das erhöht ihre Relevanz und Suchmaschinen platzieren relevante Websites weiter vorne.
Gutes Webdesign berücksichtigt das typische Benutzerverhalten. Beispielsweise beginnen die meisten Benutzer den Blick auf eine Website von oben links, schauen dann direkt nach rechts, zurück nach links, zurück nach rechts und betrachten schließlich den linken Teil des Bildschirms von oben nach unten.
Das Schema "F" wird so genannt, weil die meisten Besucher eine Website zunächst auf diese Weise betrachten. Daher sollten die grundlegenden Elemente einer Website nach diesem Schema angeordnet sein, um den größten Nutzen zu erzielen.
Dies ist nur ein Beispiel dafür, wie tiefgreifend das Thema werden kann, und erklärt auch, warum Sie auf den meisten Websites das Logo in der oberen linken Ecke und die Navigation im oberen Teil des Bildschirms finden. Die Kernbotschaft wird dabei in der Regel in der Mitte der Kopfzeile platziert.
Nun, wie gestaltet man eine gute Website?
Gutes Webdesign erfordert viel technisches Know-how und auch eine gute Portion Psychologie. In diesem Beitrag stellen wir Ihnen einige Grundsätze für gutes Webdesign vor. Diese Designprinzipien sollten Ihnen helfen, ein Auge für gutes Webdesign zu bekommen oder bessere Websites zu erstellen.
Halten Sie es einfach
Eine unübersichtliche Website überfordert die Benutzer. Wenn Sie zu viele Informationen auf einmal und unübersichtlich platzieren, wissen die Besucher nicht, wo sie zuerst suchen sollen, geschweige denn, wo sie die relevanten Informationen finden. Dadurch wird der Hauptzweck der Website verfehlt und im schlimmsten Fall wandert der potenzielle Kunde ab.
Eine ausgefallene Menüführung sollte daher um jeden Preis vermieden werden. Wir Menschen lieben Konsistenz und haben keine Lust, die Navigation auf jeder Website neu zu lernen.
Ein klares, bewährtes Design, das auf das Wesentliche reduziert ist, lenkt die Aufmerksamkeit des Besuchers auf die Bereiche, die für ihn relevant sind. Eine gut gestaltete Website ist intuitiv und einfach zu bedienen. Informationen können schnell gefunden werden.
Whitespace
Whitespace, oder 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 unberührt bleibt, um die Seite zu glätten und sie in etwas Elegantes zu verwandeln. Es ist auch der leere Raum, der uns daran erinnert, dass einfachere Designs schön sind und dass ein Layout voller Text und grafischer Elemente nicht notwendig ist, um eine klare und direkte Botschaft zu vermitteln.
Konsistenz
Wie bereits erwähnt, ist Konsistenz unglaublich wichtig für gutes Webdesign. Sie hilft den Benutzern der Website, sich zurechtzufinden. Konsistenz hilft auch, sich zu erinnern. Es gibt zum Beispiel eine bekannte Getränkemarke, die das Aussehen des Weihnachtsmanns geprägt hat. Jedes Kind kann schon von weitem erkennen, dass es sich um die besagte Marke auf einer beliebigen Werbefläche handelt.
Jede einzelne Seite sollte über abgestimmte Designelemente verfügen, die Schriftart, ihre Größen, Abstände, Formen, Schaltflächen, Farben usw. sollten immer gleich sein oder sich sinnvoll in das Design einfügen. Daran sollten Sie schon denken, bevor Sie eine Website erstellen. (Und vergessen Sie nicht: die Website muss responsive sein, d.h. sie muss auf jedem Gerät und jeder Auflösung sichtbar (und nutzbar!) sein.)
Typografie und Lesbarkeit
Sie sollten Schriftarten wählen, die zueinander passen und leicht zu lesen sind. Moderne, serifenlose Schriftarten können vor allem für den Fließtext verwendet werden. Denken Sie daran, dass nicht auf jedem PC die gleichen Schriftarten installiert sind, die Sie verwenden möchten. Sie müssen sich vergewissern, dass die von Ihnen gewählten Schriftarten auch angezeigt werden können. Denken Sie daran, dass nicht alle Schriftarten kostenlos verwendet werden können. Möglicherweise müssen Sie die Schriftart, die Sie verwenden möchten, kaufen, bevor Sie sie bedenkenlos nutzen können.
Auf den folgenden Websites finden Sie eine Reihe von kostenlosen Schriftarten, aber achten Sie auf den Datenschutz, denn nichts ist wirklich kostenlos. Je nachdem, wie Sie die Schriftarten in Ihre Website einbinden, könnten die Daten Ihrer Nutzer ungewollt an die Anbieter übertragen werden:
- Freebiesbug
- Fonts-Arena
- Befonts
- Font Squirrel
- Fontjoy
- Type Scale
Relevante Inhalte bereitstellen
Texte sollten den Besuchern die gewünschten Informationen liefern. Suchmaschinen sind mit Textdaten sehr vertraut, so dass Text ein wesentlicher Bestandteil der Suchmaschinenoptimierung ist. Das Internet ist schnelllebig, einfach alles mit Text zuzukleistern, ist auch nicht zielführend. Google ist regelmäßig auf der Suche nach neuen Trends, welche Inhalte für die Nutzer relevant sind.
Seien Sie also immer auf dem Laufenden, wie sich Text, Videos oder andere Inhalte auf Ihr Suchmaschinenranking auswirken können.
Kompatibilität mit mobilen Geräten
Smartphones, Tablets, Phablets, Konsolen usw. gibt es in allen Designs, Größen und Qualitäten. Sie möchten sicherstellen, dass Ihre Website auf allen Geräten so gut wie möglich angezeigt wird. Eine Website, die nicht responsive ist, sorgt dafür, dass die Nutzer abgeschreckt werden. Ein Großteil der Nutzer surft heute auf mobilen Geräten, daher 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 haben Sie bemerkt, dass in verschiedenen Branchen unterschiedliche Farben vorherrschen. Blau wird häufig in Finanzinstituten und Versicherungsunternehmen verwendet, weil viele Menschen Blau mit Kompetenz, Loyalität, Sicherheit und Ruhe assoziieren. Einige Farben werden eher selten verwendet. Zum Beispiel die Farbe Rot. Rot steht für Liebe, aber auch für Wut und Aggressivität. Machen Sie sich also bewusst, was Sie mit Ihrer Website erreichen wollen und wie der Benutzer den Inhalt wahrnehmen soll. Farben können den Gemütszustand und die Aufmerksamkeit des Benutzers erheblich beeinflussen.
Eine gute Farbkombination schafft eine angenehme Atmosphäre und entspannt die Augen. Sie lenkt den Besucher auf die Bereiche, die Sie hervorheben möchten.
Nicht zu vergessen: Der Kontrast! Wichtige Elemente und Texte sollten sich vom Hintergrund abheben. Komplementäre Farben und Helligkeitsunterschiede können dabei helfen.
Beachten Sie die Konsistenz. Wenn die Website für ein (oder Ihr) Unternehmen erstellt werden soll, sollte sie die Farben und das Image, d.h. die Corporate Identity, widerspiegeln.
Die folgenden Tools können Ihnen helfen, die für Sie perfekten Farbkombinationen herauszufinden:
Geschwindigkeit
Wir alle haben keine Zeit. Wir sind es gewohnt, Informationen sofort und schnell zu erhalten. Es versteht sich also von selbst, dass eine gute Website ohne Verzögerung laden muss. Suchmaschinen wie Google belohnen schnelle Websites.
Sorgen Sie dafür, dass der Code Ihrer Website auf das Wesentliche reduziert ist. Halten Sie die JavaScript- und CSS-Dateien so klein wie möglich. Auch hier gilt: weniger ist mehr. Versuchen Sie, nicht zu viel "Zeug" zu Ihrer Website hinzuzufügen, wenn es nicht wirklich notwendig ist.
Einfache Navigation
Besucher schätzen eine einfache und bewährte Navigation. Eine gute Website hat eine logische und effektive Seitenhierarchie und hebt anklickbare Schaltflächen oder Texte besonders hervor.
Sie sollten sich an die "Drei-Klick-Regel" halten, die besagt, dass Besucher mit nicht mehr als drei Klicks zu den gewünschten Informationen gelangen können sollten.
Kommunikation
Eine gute Website sollte in der Lage sein, Informationen effizient an die Benutzer weiterzugeben. Je besser die Kommunikation ist, desto wahrscheinlicher ist es, dass die Besucher mehr Zeit auf der Website verbringen. Gute Kommunikation bedeutet hier die Verwendung von Überschriften sowie eine klare Gliederung von Text und Design. Die Textblöcke sollten nicht zu lang sein und sinnvolle Absätze haben. Verwenden Sie Bilder, um den Inhalt visuell zu verdeutlichen. Zusammengefasst bedeutet Kommunikation hier, dass der Inhalt gut und logisch strukturiert ist.
Denken Sie an die Designregel "Form folgt Funktion". Jedes Element sollte eine Funktion haben, nicht ablenkend sein und einen Sinn ergeben.
404-Seite
Das Ziel einer 404-Seite ist es, einen Besucher auf der Website zu halten, auch wenn er auf eine Seite gelangt, die nicht existiert.
Eine 404-Seite kann, wenn sie kreativ und zweckmäßig gestaltet ist, den Besucher nicht nur halten, sondern ihn auch dazu bringen, länger auf der Website zu bleiben und sich anzusehen, was sonst noch auf der Website passiert. Einige Dinge sollten Sie beachten: Zuallererst sollte die Website werbefrei sein. Der Benutzer sollte wissen, dass er die Seite irrtümlich erreicht hat, aber die Art und Weise, wie dies kommuniziert wird, kann die Persönlichkeit des gesamten Webauftritts widerspiegeln. Sie sollte den Besucher auf eine andere Seite oder die Startseite weiterleiten, aus statischem HTML bestehen und keine komplexen Skripts enthalten, und schließlich sollte sie so schnell wie möglich laden.
Julien Lieske Senior Interface-Designer und Frontend-Entwickler mit Full-Stack-Ambitionen.