Mithilfe unserer Tipps und Regeln könnt Ihr eine ausgezeichnete Webseite gestalten, deren Absprungrate niedrig und Konversionsrate hoch ist. Nicht selten sieht man Webseiten, die visuell überladen wirken oder ästhetisch überhaupt nichts hermachen. Wer eine Webseite gestaltet, kann sich schnell in grafischen Irrgärten verlieren. Dies ist häufig schlecht für die Performance der Webseite, sorgt aber vor allen Dingen für Unübersichtlichkeit. Erkennt der Nutzer die Hauptintention der Webseite nicht oder findet er sich nicht auf der Seite zurecht, springt er schlimmstenfalls wieder ab. Dadurch erzielt Ihr leider keine Leads und die Absprungrate steigt. Beides wirkt sich negativ auf das Ranking aus.
Doch durch unsere Tipps und Tricks könnt Ihr das Risiko verringern und lernt, worauf es bei einem ansprechenden und zielführenden Webdesign ankommt. Wir verraten Euch vorweg: Ästhetik ist nicht das einzige Gewürz des Geheimrezepts.
Der Begriff „Webdesign“
Mit dem Begriff Webdesign bezeichnet man alle Strategien zur Gestaltung einer Webseite. Dabei unterscheidet man den Bereich Webdesign von der Webentwicklung, welche sich hauptsächlich auf technische Aspekte fokussiert. Gutes Webdesign konzentriert sich auf die Bedürfnisse der Nutzer:innen und sorgt dafür, dass sie sich aufgrund einer guten User-Experience lange auf der Webseite aufhalten. Eine niedrige Bounce Rate und eine hohe Conversion Rate (siehe auch Conversion) sind meist Hinweise auf ein gutes Webdesign und ansprechendes Angebot. Um eine hohe Konversionsrate zu erzielen, ist eine gute Usability, eine zielführende, unkomplizierte Customer Journey und eine positive Customer Experience hilfreich und notwendig.
Was macht eine ansprechende Webseite aus?
Bei einem gelungenen Webdesign ist es wichtig, dass der Nutzer stets im Mittelpunkt steht. Das bedeutet, dass er in wenigen Sekunden erkennen sollte, worum es auf der Webseite geht und wie er sich auf ihr zurechtfinden kann (z.B. Menü, Kategorien, Suchfunktion). Um den Augen des Nutzers die Sucharbeit zu erleichtern, ist ein klares und übersichtliches Design unbedingt notwendig. Hierfür können visuelle Hierarchien, Einfachheit und eine gewisse Einheitlichkeit sinnvoll sein.
Jedoch spielen bei einer ausgezeichneten Webseite weitere Faktoren eine wichtige Rolle, um den Nutzer zu überzeugen. Beispielsweise sind die bereits erwähnte einfache Navigation und Zugänglichkeit zur Webseite bedeutend. In den nächsten Abschnitten nennen wir Euch einige Regeln, die Ihr beim Neugestalten Eurer Webseite beachten solltet.
Der User steht im Fokus
Wer eine Webseite gestaltet, sollte stets die Bedürfnisse seiner Zielgruppe vor Augen behalten. Denn die User-Experience hängt von den Vorstellungen und Zielen der Nutzer:innen ab. Jemand, der Autoteile sucht, hat möglicherweise eine andere Vorstellung davon, wie die Webseite auszusehen hat als ein Nutzer, der ein Blumengesteck sucht. Versetzt Euch daher stets in Eure Zielgruppe und fragt Euch, was diese von Euch erwartet.
Dabei ist es auch wichtig, den Fokus nicht nur auf eine gelungene Ästhetik zu legen, sondern auch die Ladezeit, das barrierefreie Surfen und eine gute Navigation im Blick zu behalten. Dennoch zeigten Studien, dass für die User-Experience der erste Eindruck zu 94 % auf das Design bezogen ist. Selbst wenn man es oft genug gehört hat: Der Mehrwert ist für die Nutzer besonders wichtig, um eine erfolgreiche Webseite zu betreiben. Trotzdem sollte man seine User nicht mit zu viel Input überfordern.
Sollen Eure Kunden etwas kaufen, dann ist auch der Faktor Emotionalität entscheidend. Denn Kaufentscheidungen werden aufgrund von Emotionen getroffen. Produkttexte und Bilder dürfen gerne Emotionen übertragen und ein Bedürfnis (z.B. der Wunsch nach Sicherheit, Image) befriedigen. Versucht Eure Kunden mit Texten und Bildern zu erreichen. Nichtsdestotrotz solltet Ihr Tests durchführen, Feedback einholen und anhand dieser Erkenntnisse, die Webseite anpassen.
7 Regeln für ein ansprechendes Webdesign
In unserem Alltag sind wir einer Vielzahl an Reizen ausgesetzt und werden stündlich mit Kauf- und Informationsangeboten überschüttet. Wer eine Webseite besucht, möchte nicht lange suchen, worum es geht. Sich visuell zurechtzufinden, ist daher wichtig, um das Interesse an der Webseite aufrechtzuerhalten. Einfachheit, Einheitlichkeit, eine gute visuelle Hierarchie und eine unkomplizierte Navigation und barrierefreie Zugänglichkeit sind daher wichtige Faktoren für ein gutes Webdesign.
1. Regel: Einfachheit – Simplicity is key
Bereits Leonardo Da Vinci sagte einst: „Simplicity is the ultimate sophistication“. Damit wollte er betonen, dass einfache Dinge leichter zu verstehen und umzusetzen sind. Denn Einfachheit bedeutet nicht, dass es an Substanz mangelt, sondern es ist eine Übung, die komplexe Realität eines Angebots in eine einfachere Form zu überführen. Diesen Grundsatz können wir auch auf ein gelungenes Webdesign bei der Gestaltung Eurer Webseite nutzen. Die Benutzerfreundlichkeit solltet Ihr daher immer im Blick behalten: Die Besucher kommen auf Eure Webseite, um Produkte zu kaufen oder Informationen zu erhalten. Unnötige Elemente und Funktionen erschweren es ihnen, auf dem besten und schnellsten Weg zu ihrem Ziel zu gelangen.
Beispiele für ein einfaches Webdesign:
- Farben: Schlichte, angenehme Farben. Dabei sollte man auf die klassischen RGB-Farben, die sehr aggressiv wirken, verzichten. Weiche Farbabstufungen, die für das Auge angenehm und gut aufeinander abgestimmt sind, sollten bevorzugt werden. Experten empfehlen meist nicht mehr als 5 Farben zu nutzen. Die Textfarbe soll mit dem Hintergrund harmonisieren, da sie Einfluss auf die Lesbarkeit hat. Erzeugt Farbhierarchien und nutzt jeweils eine einzelne Farbe für das Hauptelement (primär), die Highlights (sekundär) und andere, weniger wichtige Elemente (Hintergrund). Sobald Ihr eine Farbpalette festgelegt habt, bleibt bei dieser.
- Schriften: Verwendet Web-Fonts und bleibt bei geprüften, websicheren Schriftarten. Dabei sollte die Schriftart möglichst einfach, klar und gut lesbar sein. Hier spielt auch die richtige Farbwahl eine entscheidende Rolle für die Lesbarkeit. Links oder wichtige Inhalte dürfen sich gerne durch eine eigene Farbe oder Fettschrift abheben. Doch hier sollte man sich auch einschränken. Gemäß Empfehlungen sollte man nicht mehr als 3 Schriftarten und maximal 3 verschiedene Schriftgrößen nutzen.
- Grafiken: Grafiken sind nur dann sinnvoll, wenn sie den Inhalt besser erläutern oder ein Produkt darstellen. Überflüssige Grafiken sollte man vermeiden.
Beispiel-Webseite für „Einfachheit“
Die folgende Seite von My Muesli ist ein gutes Beispiel für ein einfaches Webdesign. Hier kann man ohne Umwege gleich die Produkte kaufen oder den Müsli-Mixer für eigene Kreationen anklicken. Bereits auf der Startseite können die Nutzer je nach Vorlieben wählen. Das Webdesign ist dabei ansprechend, aber doch minimalistisch einfach gehalten. Das Wesentliche ist schnell erkennbar, sodass der Nutzer gleich mit wenigen Klicks und mithilfe von Kategorien, das richtige Produkt auswählen kann. Auch die Sale-Angebote sind sofort erkennbar.
Abb. 1: Beispiel für ein einfaches Webdesign. Quelle: mymuesli.com
2. Regel: Visuelle Hierarchien
Auch visuelle Hierarchien helfen dabei, eine Seite einfacher zu gestalten. In diesem Fall geht es um die Anordnung und Organisation der verschiedenen Elemente der Webseite. Eine Hierarchie sorgt dafür, dass der User eine gewisse Aktion durchführt, ohne auf Umwege zu geleiten. Strukturiert Eure Webseite und passt die einzelnen Elemente richtig an, z.B. die Position, die Farben, die Größe, Texte, Schriften und Grafiken. Mithilfe einer visuellen Hierarchie können die Nutzer:innen auf bestimmte Elemente aufmerksam gemacht werden.
Beispiel-Webseite für „Visuelle Hierarchien“
Auf der Netflix-Webseite sieht man anhand eines Satzes bzw. Slogans sofort, worum es geht. Der Fokus liegt klar auf der Anmeldung zu einem Streaming-Abonnement. Der Blick wandert sofort auf den Call-to-Action (CTA), den roten Button „Loslegen“, der den User zur Anmeldung animiert. Dabei setzt die Webseite auf zwei dominante Farben (Rot und Schwarz), die dem Nutzer in Erinnerung bleiben. Das gesamte Design ist minimalistisch gehalten und auf das Wesentliche (Slogan und CTA-Button) fokussiert.
Abb. 2: Beispiel für eine gute visuelle Hierarchie. Quelle: Netflix.
3. Regel: Einfache Navigation
Die Navigation sollte einfach und intuitiv sein, damit die Besucher ihr Ziel schnell erreichen. Eine Customer Journey ist nicht zufriedenstellend, wenn der User lange nach den gewünschten Informationen oder Produkten suchen muss. Einige hilfreiche Webdesign-Tipps können wir Euch für eine einfache Navigation geben:
- Eine einfache Struktur der Hauptnavigation, z.B. am oberen Rand.
- In der Fußzeile sollte sich ebenfalls eine Navigation befinden.
- Verwendung von Breadcrumbs auf jeder Seite außer der Startseite.
- Eine Suchfunktion am oberen Rand der Seite.
- Nicht zu viele Navigationsoptionen einbauen.
- Links mit einem guten Anchor Text in den Content
- Beschränkt die Pullout-Menüs (Drop-downs, Fold-outs etc.).
Beispiel-Webseite für „einfache Navigation“
Die Zalando-Webseite hat eine einfache und eindeutige Navigation mit einer Hauptnavigation (Damen, Herren, Kinder) und einer Navigation nach Kategorien (Bekleidung, Schuhe). Dabei fällt auf, dass die Hauptnavigation nochmals als Call-to-Actions (CTA) mit Buttons in der Mitte der Seite auftaucht.
Abb. 3: Beispiel für eine sinnvolle Navigation. Quelle: Zalando.
4. Regel: Einheitlichkeit
Bei einer guten Navigation ist auch die Einheitlichkeit wichtig, die sich auf der gesamten Webseite bei allen Elementen wiederfindet. Vor allem die Seiten sollen durchweg ein einheitliches Bild geben, z.B. Hintergründe, Farben, Schriften und Texte. Die Einheitlichkeit hat eine positive Wirkung auf die Benutzerfreundlichkeit (Usability) und User-Experience. Nichtsdestotrotz sollten nicht alle Seiten gleich aussehen, denn es kann durchaus sinnvoll sein, für verschiedene Seitentypen ein Layout zu wählen. Beispielsweise sollte die Landingpage ein anderes Layout haben als die Produkt- oder Informationsseiten. Die gleichen Seitentypen sollte jedoch einheitlich sein, damit die Nutzer:innen sofort erkennen können, auf welcher Seite sie sich befinden.
Beispiel-Webseite für „Einheitlichkeit“
Auf der Uber-Webseite haben alle Hilfeseiten das gleiche Layout erhalten, um dem User beim Zurechtfinden behilflich zu sein. Durch den Wiedererkennungswert wissen die Nutzer:innen sofort, dass sie auf einer Hilfeseite sind. Dies behält Uber für alle Bereiche des Supports bei und unterteilt die jeweiligen Problemfelder (z.B. Fahrgäste, Fahren und Liefern, Uber Eats, Fright, E-Bikes) nochmals in einzelne Themen. Die gewünschten Problemkategorien kann man nochmals in einem Menü anwählen.
Abb. 4: Webdesign-Tipps für ein gutes Webdesign im Bereich „Einheitlichkeit“. Quelle: Uber.
5. Regel: Zugänglichkeit
Ein weiterer Tipp, den wir Euch geben möchten, bezieht sich auf die Zugänglichkeit der Webseite. Dafür sollte Eure Webseite mit verschiedenen Geräten (z.B. Betriebssystemen und Browsern) kompatibel sein. Eine besser zugängliche Webseite sorgt für eine gute User-Experience. Da immer mehr User mit mobilen Endgeräten nach Produkten und Informationen suchen (siehe Mobile First), sollte die Webseite vor allem für die mobile Nutzung programmiert sein.
In diesem Zusammenhang ist ein Responsive Design wichtig, damit die mobile Webseite auf verschiedenen Endgeräten optimal dargestellt wird. Dabei werden die Inhalte automatisch im richtigen Format und der Größe des Geräts angezeigt.
Ferner können ALT-Texte für Bilder die Webseite zugänglicher machen, da diese Texte als Bildbeschreibung wichtig für einen barrierefreien Zugang für Blinde oder sehbeeinträchtigte Menschen sind. Sie sind eine wichtige Komponente für die Usability. Zudem erläutern sie, was auf dem Bild zu sehen ist, wenn dieses nicht angezeigt werden kann.
Beispiel-Webseite für „Zugänglichkeit“
Die Zugänglichkeit einer Webseite kann von verschiedenen Faktoren bestimmt werden. Die Seite von Aktion-Mensch bietet die Inhalte beispielsweise in leichter Sprache an. Aber auch die ALT-Texte der Bilder, ein Responsive Design und die Kompatibilität mit verschiedenen Browsern sorgen für eine bessere Zugänglichkeit.
Abb. 5: Beispiel für eine Webseite mit verbesserter Zugänglichkeit. Quelle: Aktion Mensch
6. Regel: Konventionen einhalten
Folgt bei Eurem ästhetischen Design den gängigen Konventionen des Webdesign.
- Hauptnavigation im linken oder rechten oberen Bereich der Webseite mit maximal 3 Unterebenen.
- Ein Logo, das sich oben rechts oder links oder in der Mitte befindet und durch Anklicken auf die Startseite führt.
- Links, welche die Farbe oder Aussehen verändern, wenn man den Mauszeiger über ihn bewegt.
- Verwendung des Warenkorbs im oberen Bereich der Shop-Webseite.
Beispiel-Webseite für „Konventionen einhalten“
Schaut man sich die Webseite von Adidas genauer an, sieht man, das auch hier die klassischen Konventionen des Webdesigns angewendet werden. Der Warenkorb in der rechten oberen Ecke sowie das anklickbare Logo, das zurück auf die Startseite führt, gehören zu den klassischen Gestaltungsprinzipien.
Abb. 6: Webseite als Beispiel für die Anwendung von Webdesign-Konventionen. Quelle: Adidas.
7. Regel: Weißraum für weniger Unordnung
Mit mehr Weißraum könnt Ihr für weniger Unordnung auf Eurer Webseite sorgen. Dieser sorgt für ein minimalistisches, aber sauberes Webdesign. Nutzt den Weißraum (auch Negativraum), um das Hauptthema zu komplementieren und zu verbessern. Mithilfe des Weißraums wird die Lesbarkeit optimiert und das Bild in den Fokus gerückt. Hierfür umschließt man die wichtigsten Elemente mit Negativraum. Je mehr Weißraum sich um etwas befindet, umso mehr Aufmerksamkeit bekommt es.
Beispiel-Webseite für mehr Weißraum
Die folgende Webseite von Hello Fresh ist ein gutes Beispiel für Website-Gestaltung mit mehr Weißraum, mithilfe dessen spezifische Elemente in den Fokus gerückt werden. Hier sieht man, wie die Call-to-Action gut sichtbar in der Mitte der Seite ist und die einzelnen Kochboxen mit Text und Bild angepriesen werden. Durch die weiße Fläche um die Abbildungen sowie den Beschreibungstext richtet der Betrachter seine Aufmerksamkeit gleich auf das Wesentliche.
Abb. 7: Weißraum für mehr Ordnung im Webdesign. Quelle: Hello Fresh
FAQ – Häufigste Fragen
Was ist gutes Webdesign?
Gutes Webdesign richtet sich nach den Bedürfnissen des Nutzers und sorgt dafür, dass viele Leads erzielt werden. Der User erkennt in wenigen Sekunden, worum es auf der Webseite geht, wo er die gewünschten Produkte oder Informationen erhält und wie er schnellstmöglich zu seinem Ziel kommt. Eine intelligente und einfache Navigation (z.B. Menü, Kategorien, Suchfunktion) sorgt für eine zufriedenstellende Customer Journey und User-Experience und leitet den Besucher ohne Umwege und Frustration zum Ziel.
Was ist besonders wichtig bei der Gestaltung einer Webseite?
Bei der Gestaltung einer guten Webseite solltet Ihr stets den Nutzer im Blick behalten, denn er steht im Fokus. Erleichtert ihm die Navigation, um ihn reibungslos und frustrationsfrei zu seinem Ziel zu leiten. Seine Bedürfnisse und Wünsche sollten bei der Gestaltung einer guten Webseite im Mittelpunkt stehen. Ein klares, übersichtliches Design, eine einfache Navigation, Einheitlichkeit, visuelle Hierarchien sowie ein vertrauter Aufbau (Menü, Warenkorb, Suchfunktion) helfen dem User, sich schneller zurechtzufinden. In diesem Zusammenhang solltet Ihr z.B. auch Menschen mit einem eingeschränkten Sehvermögen berücksichtigen, um ein barrierefreies Surfen zu ermöglichen.
Welche Aspekte sollte ich bei der Website-Gestaltung unbedingt beachten?
Die wichtigsten Aspekte bei der Gestaltung einer Webseite sind der Faktor Einfachheit und Übersichtlichkeit. Denn in einer schnelllebigen Zeit haben wir nicht die Geduld, uns mühsam auf einer Webseite zurechtzufinden. Unübersichtliche, komplizierte und überladene Webseiten verzeichnen daher eine hohe Absprungrate.
Was sind die 7 wichtigsten Webdesign-Tipps?
Unsere 7 wichtigsten Webdesign-Tipps für eine gelungene, benutzerfreundliche Webseite sind: (1) Einfachheit, (2) Einheitlichkeit, (3) eine einfache Navigation, (4) visuelle Hierarchien verwenden, (5) Webdesign-Konventionen einhalten, (6) Weißraum für mehr Übersichtlichkeit nutzen und (7) für eine gute Zugänglichkeit sorgen.
Welche Rolle spielt der Weißraum (Negativraum) beim Webdesign?
Der Weißraum (auch Negativraum), sollte keinesfalls unterschätzt werden. Hierbei handelt es sich um Weißflächen, die spezifische Elemente (z.B. Buttons, Bilder und Texte) umschließen. Dadurch wird das Bild, der Text oder der Button durch die Entstehung eines gewissen Kontrasts mehr in den Fokus gerückt. Der User sieht den Call-to-Action (CTA) sofort und gelangt schneller zu seinem Ziel.
Quellen & weiterführende Informationen
- 99designs weist darauf hin, dass Bereiche wie Farbenlehre, Typografie, Komposition und Mobilfähigkeit sehr tiefgründig sind. Meist können nur professionelle Designer die Nuancen dieser Bereiche wirklich abschätzen.
- fuer-gruender.de betont, dass das Webdesign eine entscheidende Rolle für den Erfolg einer Webseite spielt. Für ein gelungenes Webdesign gibt es wichtige Punkte zu beachten: Benutzerfreundlichkeit, Individualisierung und visuelle Hierarchie.
- Hubspot ist der Meinung, dass Webdesign ein effizientes Werkzeug auf dem Weg zu besseren Conversion Rates ist. Die Zielgruppe soll spüren, dass individuelle Bedürfnisse und Wünsche verstanden und beachtet werden.
- Wix sagt: „Im Website Design gibt es eine Vielzahl von Stilen und Richtungen, die man einschlagen kann, wenn man eine eigene Webseite erstellt – von klassisch bis minimalistisch über verspielt und lebendig bis hin zu elegant und modern. Egal, welchen Stil man wählt, er sollte zum Branding des Unternehmens passen.
