10 Webdesign Tipps für kreative & effektive Gestaltung deiner Webseite
Lesezeit 10 Min | 
Autor Niklas Menten
Ein gutes Webdesign ist unerlässlich für den Traffic und das Ranking deiner Webseite. Je besser deine Seite auf die verschiedenen Signale und Anforderungen von Nutzern und den Suchmaschinen optimiert ist, desto wahrscheinlicher ist es, dass sie in den ersten Ergebnissen einer Suche auftaucht. In diesem Beitrag erklären wir dir anhand von 10 effektiven Webdesign Tipps ganz einfach, was du verbessern kannst und damit schon bald sichtbare Ergebnisse erzielen wirst.
Inhalt
Was macht ein gutes Webdesign aus?
Bevor wir mit den Tipps für Webdesign starten, stell dir die Frage: Woran erkennst du gutes Webdesign?
Ganz simpel: Wenn deine Website einfach zu bedienen ist. Die am besten rankenden Webseiten der Suchergebnisse haben oft gemeinsam, dass ein Nutzer schnell und mit wenigen Klicks bekommt, wonach er sucht. Die Seite präsentiert in diesem Fall meist den wichtigen Inhalt innerhalb von wenigen Blicken, was es dem Nutzer sehr einfach macht, seine Intention sofort zu erfüllen. Außerdem werden verschiedene Elemente hervorgehoben oder strategisch klug platziert, um gewisse Interaktionen herbeizurufen, aber dazu später mehr.
Außerdem sollte sie ästhetisch ansprechend sein. Als Webdesign Tipps bieten die Grundprinzipien und Elemente des Grafikdesigns hierfür eine erste gute Basis. Viele hochwertige und erfolgreiche Websites konzentrieren sich stark auf die Einfachheit, sodass du besonders zu Beginn davon profitierst, deinen Inhalt so simpel wie möglich zu präsentieren.
1. KISS – Keep it short and simple
Erweiterte Conversions für das Web sind äußerst relevant für Werbetreibende, die Verkäufe und Ereignisse auf ihrer Website erfassen möchten. Diese fortschrittliche Funktion verbessert die Messung von Online-Conversions erheblich und ermöglicht es dir, präzise Einblicke in das Verhalten deiner Nutzer zu gewinnen.
Dank erweiterter Conversions für das Web kannst du selbst erhobene Daten von Nutzern, die von deiner Website stammen, auf eine sichere Art und Weise nutzen. Wenn ein Nutzer eine Conversion ausführt, werden diese Daten verschlüsselt als Hash-Werte an Google gesendet. Dabei handelt es sich um Informationen wie
Gutes Beispiel
Schlechtes Beispiel
2. Tipps für Einheitlichkeit in deinem Webdesign
Die Website sollte einen roten Faden verfolgen, ein sogenanntes „Corporate Design“. Dabei sind folgende Punkte zu beachten:
So erreichst du, dass deine Seite einen eigenen Stil entwickelt und du diesem auch treu bleibst. Im Auge des Betrachters sorgt das für einen angenehmen Lesefluss, Trust in deine Marke und – bestenfalls – häufiges Wiederkehren.
3. Lesbarkeit
Ein unerlässlicher Webdesign Tipp ist zweifellos die Lesbarkeit des Inhalts. Sobald dein roter Faden für die Webseite gegeben ist, spielt das eine besonders große Rolle und sollte unbedingt eine hohe Priorität für dich haben.
Hier ist wichtig zu beachten, dass die Schriftarten gut auf Bildschirmen zu lesen sind. Das erreichst du, indem du erst einmal einen guten Kontrast von Text und Hintergrund herstellst. Als einfaches Beispiel: weißer Hintergrund und schwarzer Text. Aber auch wenn du Texte auf Bildern darstellen willst, bietet sich ein kontrastreicher Overlay (eine transparente Farbfläche über dem Bild, um den Kontrast zwischen Text und Hintergrund zu erhöhen) an. Um die Lesbarkeit deiner Texte noch mehr zu optimieren, kannst du folgende Webdesign Tipps anwenden:
die Zeichen pro Zeile auf maximal 80 beschränken
die Schriftgröße anpassen, zum Beispiel die Überschriften auf Größe 12 und den Fließtext auf 11
ausreichend Platz zwischen den einzelnen Wörtern schaffen
Zeilenhöhe verändern oder gegebenenfalls anpassen
Wenn du deine Texte noch in Absätze gliederst, ist das schon ein optimales Ergebnis. Hier findest du ein positives Beispiel für die gelungene Umsetzung der oben benannten Webdesign Tipps:
In unserem Beispiel kann man die Anwendung unserer Webdesign Tipps erkennen. Der Seitenbetreiber beschränkt sich strikt auf 2 Schriftarten, 3 Größen für den jeweiligen Inhalt und eine einfache Farbpalette von 3 Farben. Mit diesen Designelementen wird die Gestaltung der gesamten Webseite durchgehend geprägt und es verleiht ihr dadurch einen wiedererkennbaren Stil, was die Brand nachhaltig prägt und eine zu starke Reizung des Nutzers vermeidet.
Quelle: travelwisconsin.com
Keine wichtigen News mehr verpassen
Dank aktuellen Infos der Konkurrenz voraus: Abonniere noch heute unseren kostenlosen Fachexpertenblog und bleib immer up to date
4. Responsive Design
Einer der wichtigsten Punkte im Webdesign ist das Responsive Design. Das bedeutet, dass deine Website sich automatisch an verschiedene Bildschirmgrößen anpasst. Dadurch stellst du sicher, dass deine Website sowohl auf einem Desktop PC, Tablet als auch Smartphone gut dargestellt wird. Es gibt immer noch sehr viele Websites, die nicht für die mobile Darstellung von Smartphones optimiert wurden. Wenn du dein Website Projekt starten willst, solltest du den Ansatz „mobile-first“ verfolgen. Das bedeutet, dass du dir erst Gedanken dazu machst, wie deine Website auf dem Smartphone aussehen würde. Da viele Informationen mittlerweile über das Smartphone abgerufen werden, ist dieser Webdesign Tipp der beste Ansatz.
Hier wieder ein positives und negatives Beispiel für responsives Design:
Quellen: https://www.etask.de/, http://www.sc08.de/
Desktop-Seite:
Mobile-Seite:
Desktop-Seite:
Mobile-Seite:
In diesen beiden Direktvergleichen sehen wir ein positives Beispiel von eTask auf der linken und ein negatives des SC08 auf der rechten Seite. Links ist ein responsives Design für Mobilversionen erkennbar, sodass man auch mit dem Smartphone problemlos die Seite navigieren kann. Rechts sehen wir, dass die Webseite kein Responsive Design besitzt und in derselben Auflösung ausgespielt wird, wie auf dem Desktop. Es gibt einen Verweis auf eine mobile Seite, jedoch kann dieser unter Umständen beim Laden des Seitenaufbaus übersehen werden, weshalb hierbei die Anwendung des Webdesign Tipps für „Mobile First“ greifen würde.
5. Webdesign Tipps für eine einfache Navigation
Eine einfache und strukturierte Navigation ist das A und O. Für eine Navigation gibt es verschiedene Darstellungsarten. Bei einer einfachen Top Bar Navigation kannst du dir die 7 ± 2 Strukturierung (eine psychologische Struktur, um Informationen greifbar darzustellen, da Menschen ungefähr 7 ± 2 Informationseinheiten in ihrem Gedächtnis lagern können) zu Herzen nehmen. Sprich, füge 7 Elemente ein und ergänze oder entferne bis zu 2, um die ideale Anzahl an Informationen für den Benutzer zu präsentieren. Darunter können sich auch immer noch Dropdowns befinden, für weitere Seiten, die unter den einzelnen Themen gegliedert sind.
Als Tipp für dein Webdesign empfehlen wir dir, das Layout deiner Webseite vorher zu skizzieren, um einen Überblick über deine Struktur zu bekommen.
Die Navigationsarten können auch verschieden animiert werden, also durch Flyouts, Off-Canvas, Full-Width-Navigation, Tab-Navigation, Collapsable-Menü und viele mehr.
Eine gute Struktur zu erstellen erfordert Zeit und eine Menge Planung, weshalb es sich deutlich empfiehlt, andere Webseiten als Inspiration zu nutzen. Ein positives Live-Beispiel siehst du hier, dass viele der oben genannten Elemente der Webdesign Tipps umsetzt.
Quelle: zalando.de
Die Struktur einer Navigation sollte zudem das Schema eines Baumes haben. Wie das aussehen kann, siehst du hier:
Du möchtest noch mehr Conversions erzielen oder die Benutzerfreundlichkeit deiner Webseite erhöhen? Dann nutze jetzt den kostenlosen Usability- & Conversion Check von njoy. Wir überprüfen deine Webseite auf Optimierungsmöglichkeiten und geben dir eine ausführliche Analyse, welche Maßnahmen zu einer Verbesserung beitragen.
6. Einen Zweck erfüllen
Deine Website soll auch neben dem roten Faden ein bestimmtes Ziel verfolgen. Sei es der Verkauf in deinem Onlineshop, über Themen zu informieren, sich auf einer Plattform anzumelden (zum Beispiel wie bei Facebook) oder mit seinen Leistungen, die man anbietet, Kontaktanfragen zu bekommen.
Als Webdesign Tipps hierzu schlagen wir vor, dass du dir deine Struktur, die du im vorherigen Punkt erstellt hast, genaustens ansiehst und überprüfst, ob sie folgende Kriterien erfüllt:
Wird dem Nutzer klargemacht, um welchen Typ von Seite es sich hierbei handelt (transaktional, navigational oder informationell)?
Erlangt der Nutzer einen nachvollziehbaren Bezug zu deinen Informationen oder deinem Produkt / deiner Dienstleistung?
Siehst du Momente, in denen du dem User behilflich sein kannst, ein Ziel zu erreichen oder es zu beschleunigen?
Falls diese Punkte zutreffen, kannst du mit verschiedenen Elementen dazu ansetzen, den Nutzer zu „konvertieren“. Je besser sich dein Webseitenbesucher von deinem Inhalt bestätigt fühlt, umso wahrscheinlicher ist es, dass du ihn oder sie dazu bewegen kannst, einen Kauf zu tätigen, sich bei deiner Plattform anzumelden oder Ähnliches. Auch sollte es dem User einfach gemacht werden, Kontakt zu dir oder deinem Unternehmen aufnehmen zu können, was sich idealerweise mit einem Kontaktformular gegen Ende der Webseite anbietet. Der nächste Punkt unserer Webdesign Tipps geht näher auf diesen Aspekt ein.
7. Call-to-Action und Downloads
Es ist essenziell, eine klare Call-to-Action zu haben. Kurz erklärt: Ein Call-to-Action ist eine Handlungsaufforderung, um Nutzer gezielt zu einer Aktion aufzufordern. Auf Websites werden CTAs häufig als Button dargestellt, aber auch einfache Textlinks können es sein. Ein Beispiel für ein CTA Wording wäre „Jetzt für Newsletter anmelden”. Call-to-Actions können verschieden genutzt werden und auch häufiger als nur einmal auf einer Website auftauchen. Wichtig hierbei zu beachten – formuliere sie so aktiv wie möglich. Sobald sich der Nutzer aufgefordert fühlt, einer Handlung nachzugehen, ist die Conversion von diesem deutlich wahrscheinlicher.
Quelle: reppa.de
Das Newssegment der Seite von Reppa zeigt gute CTAs im Einsatz mit dem Inhalt der Seite
Ein wichtiger Hinweis hierzu: Der CTA sollte immer mit der Handlung übereinstimmen. Oftmals versuchen Webseiten die Aufforderungen kreativ oder individuell zu gestalten, um Aufmerksamkeit zu erhaschen, verwirren aber damit den Nutzer ungemein, was zu einem Rückgang der Conversion führen kann. Deshalb als Webdesign Tipp, wenn du zu einer Handlung aufrufst, mache eindeutig klar, worum es sich dabei handelt.
Du möchtest deine CTA-Buttons, Wording oder Navigationsstruktur von Fachleuten auswerten lassen? Dann nutze den kostenlosen SEO-Check von njoy und sorge dafür, dass deine Seite nutzerfreundlich und übersichtlich gestaltet ist, um noch mehr Potenzial herauszuholen!
Jetzt kostenlosen SEO Check sichern!
Einfach Ansprechpartner und URL hier einsenden
8. Tipps zur Farbpalette deines Webdesigns
Die Farbauswahl sollte gut überlegt sein. Für eine Website sind hellere Farben von Vorteil, da diese mehr Vertrauen erwecken. Meistens gehen die Farben oder auch das Corporate Design vom Logo aus. Achte am besten darauf, dass das Farbschema gut miteinander harmoniert und zu den Bildern passt. Die Bilder sollen aber in keinem Fall durch das Farbschema untergehen und genügend Kontrast aufweisen, damit der Text auch leserlich bleibt.
Als Primärfarbe kann man beispielsweise unter anderem ein mittleres Blau wählen und als Sekundärfarbe ein etwas helleres Blau oder auch eine ganz andere Farbe. Oftmals ist es ratsam, von einer Farbe verschiedene Abstufungen oder Schattierungen zu wählen, verschiedene Sättigungsstufen und verschiedene Harmonien auszutesten. Das Design kann auch in der Komplementärfarbe gut wirken, also die Farbe, die genau gegenüber vom Farbkreis liegt, und somit ein Negativ der Website erzeugen. Wir bei njoy benutzen verschiedene Tools, um mit den einzelnen Farben zu experimentieren. Als Tipp für dein Webdesign bietet sich besonders das kostenlose Adobe Color an.
Solange die Farben miteinander harmonieren und nicht untergehen, bist du schon mal gut dabei. Modernes Design erfreut sich aber heutzutage größerer Beliebtheit, als verschiedene Farb- und Lichteffekte von damaligen Webseiten oder Medien. Deshalb, falls es nicht deiner Corporate Identity oder dem jeweiligen Produkt entspricht, solltest du Leuchtfarben und andere altbackene Elemente möglichst vermeiden.
Hier erneut 2 Beispiele für je ein gutes und ein schlechtes Webdesign:
Quelle: Mobisys.com
Quelle: Lingscars.com
Bei der linken Beispielseite von Mobisys haben wir einen minimalistischen Look mit schlichtem Farbdesign, was die Intention des Nutzers mit wenigen Elementen erfüllt und als Brand-Farbgebung bestens geeignet ist. Auf der rechten Seite von Lingscars finden wir viele verschiedene Elemente mit unterschiedlichen Farben, die oftmals keine Harmonie miteinander erzeugen und generell eher willkürlich gewählt wirken. Dass diese Homepage sich eher humorvoll gibt, wird es mit hoher Wahrscheinlichkeit ein USP für den Betreiber sein und vermutlich Nutzer ansprechen, die gerade wegen dieser überdrehten Gestaltung Lingcars besuchen. Für die Anwendung unserer Webdesign Tipps und die Bewerbung eines seriösen Auftretens ist dies allerdings eher negativ.
9. Ladezeit
Die Ladezeit ist eines der wichtigsten Themen für die Erstellung einer Website, insbesondere wenn es die mobile Nutzung betrifft, die oftmals ignoriert wird. Stell dir vor, du bist unterwegs und du willst einem Freund oder einer Freundin ein Video zeigen, aber es lädt einfach nicht. Das Problem kennt fast jeder und ist ziemlich nervig.
So ist es auch mit deiner Website. Wenn deine Website nicht innerhalb weniger Sekunden vollständig geladen und abrufbar ist, springen die Besucher ab und suchen sich eine vergleichbare Seite bei der Konkurrenz. Verschiedene Schätzungen gehen hier von bis zu 3 Sekunden aus, die der Nutzer bereit ist, auf den Webseitenaufbau zu warten. Um zu vermeiden, dass deine Besucher frühzeitig die Seite verlassen, bieten wir dir auch hier wertvolle Webdesign Tipps.
Es gibt verschiedene Lösungen, um deine Ladezeit zu verbessern und zu optimieren. Stelle zum Beispiel Bilder in der tatsächlich gebrauchten Größe zur Verfügung. Hier ist es ratsam, das Bild so hochzuladen, wie es auch später angezeigt werden soll. Zusätzlich hast du auch die Möglichkeit dein Bild zu komprimieren, ohne größere Verluste in Kauf zu nehmen, sodass es immer noch schön anschaulich bleibt.
Auch das Bildformat spielt eine Rolle für die Speichergröße des Bildes. Ein Richtwert für eine Bildgröße gibt es nicht, allerdings bieten wir auch hier Tipps für dein Webdesign. Achte darauf, dass kleinere Bilder nicht mehr als 100 Kb groß sind. Das gilt natürlich nicht nur für Bilder, sondern auch für andere Medien, wie Videos, Audios oder PDFs. Wenn du diese Medien komprimierst, wirkt sich das positiv auf deine gesamte Ladezeit der Website aus.
Zusätzlich um deine Ladezeit zu optimieren, kannst du deine Medien auf ein CDN Server („Content Delivery Network“, also eine externe Webseite, die deinen Inhalt für dich hostet) laden und ein Caching-Tool (Werkzeug zum Speichern von Daten und Einstellungen) verwenden. Damit kannst du dafür sorgen, dass der Nutzer bei dem Besuch deiner Webseite weniger von seiner Bandbreite aufbrauchen muss, um auf deine Inhalte zuzugreifen.
Wenn du deine Seite bezüglich der Ladezeit einmal prüfen und Optimierung möchtest, eignet sich insbesondere das Google Tool „Page Speed Insights“ bei dem die Ladegeschwindigkeit sowie das Verhalten einer Seite für die Mobile- und Desktop-Ansicht ausgewertet wird und je nach Ergebnissen konkrete Verbesserungsvorschläge gegeben werden.
10. Minimalistische Werbung
Natürlich kannst du Geld verdienen, indem du Werbung auf deiner Website zulässt und schaltest, was auch nicht verkehrt ist. Allerdings sollte es nicht die Überhand gewinnen. Werbung kann auch oft unseriös wirken und den Besucher verschrecken, weiter deine Website zu besuchen. Wenn es minimalistisch und elegant gelöst wird und du dabei unseren Tipps für Webdesign folgst, ist es in den meisten Fällen kein Problem.
Hierbei ist eine Best Practice, Werbebanner so einzubauen, dass sie durch ihren Aufbau während des Ladens den Content nicht beeinflussen. Für viele Nutzer ist es ein Grund, die Seite zu verlassen, wenn die Werbung den Lesefluss stört oder den Text durch seinen späten Aufbau mehrfach verschiebt. Sorge deshalb dafür, dass die Einbettung responsiv ist und als Störfaktor vermieden wird, um sowohl vom Traffic als auch den potenziellen Einnahmen der Banner profitieren zu können.
Erneut zeigen wir hier ein gutes und ein schlechtes Beispiel der Webdesign Tipps für Werbeplatzierung:
Quellen: gamestar.de, onegreenplanet.org
Desktop-Seite:
Mobile-Seite:
Desktop-Seite:
Mobile-Seite:
In diesem Vergleich stehen auf den ersten Blick zwei relativ identische Webseiten von der Platzierung ihrer Werbeinhalte gegenüber. Sowohl Gamestar als auch Onegreenplanet platzieren ihren Fließtext zentriert und bauen die Banner herum ein. Allerdings gibt es hierbei einen wichtigen Unterschied: Bei der rechten Webseite bauen sich die Werbelemente am unteren Rand über dem Seiteninhalt auf und können dabei als Störfaktor während des Lesens wahrgenommen werden.
Bei den Mobile-Versionen der beiden wird ein größerer Unterschied klar und hierbei orientiert sich die Seite von Gamestar deutlich mehr an den Webdesign Tipps zur Gestaltung ihres Contents. Die Aufmerksamkeit des Nutzers wird wenig von dem eigentlichen Inhalt abgelenkt, da Werbung lediglich in den Fließtext der Seite integriert ist und deshalb schnell und unauffällig überflogen werden kann.
Die rechte Webseite hingegen baut ihre Werbebanner über dem eigentlichen Content auf, was den Nutzer davon abhält, sich mit dem Inhalt der Seite zu beschäftigen und unter Umständen zu ungewollten Klicks und schlimmstenfalls zu einer Weiterleitung und einem Absprung führen kann. Deshalb gilt es bei der Planung von Werbeinhalten zur Finanzierung der eigenen Webseite gut darauf zu achten, wie diese den Inhalt beeinflussen.
Fazit zu den 10 Tipps für dein Webdesign
Zusammengefasst sind unsere 10 Tipps ein guter Richtwert für ein effektives Webdesign. Behalte die Punkte im Hinterkopf, wenn du dein nächstes Website-Projekt starten willst. Schau auch gerne in unseren Blogbeiträgen zu Produktfotografie oder Content Curation nach, um deine Website noch mehr zu boosten.
Die Aufgabe eine Website effektiv für den Besucher zu gestalten liegt bei dem Webdesigner und dem Auftraggeber. Der Auftraggeber sollte sich im besten Fall über den Zweck und die Zielgruppe seiner Seite im Klaren sein und erste Inhalte liefern können für eine übersichtliche Struktur. Du als Designer steuerst die Semantik unterstützenden Elemente, Schriftarten, Abstände und Farben – also Design und Layout dazu, die für ein abgerundetes und perfektes Endprodukt sorgen.
Njoy ist deine Webdesign-Agentur und unterstützt dich bei der Erstellung deines Designs über den gesamten Prozess hinweg. Buche noch heute deine individuelle Unterstützung durch unser Team von Fachexperten, um den Erfolg deiner Webseite zu steigern!
Mach jetzt den ersten Schritt
Nutze unser Kontaktformular
…oder kontaktiere uns direkt!
Deine Ansprechpartnerin
Wir sind für dich da
Montag – Freitag
von 9:00 bis 18:00 Uhr
Anschrift
Hohenstaufenring 62
50674 Köln