Attraktives Webdesign

Beim Webdesign geht es nicht nur um eine ansprechende Optik. Die Information muss übersichtlich und klar strukturiert vermittelt werden. Das Webdesign muss auf unterschiedlichen Geräten und für unterschiedliche Personen gut funktionieren, eine schnelle Ladezeit ermöglichen und obendrein noch die Ziele des Unternehmens unterstützen. Ganz schön viel, was es hier zu bedenken gibt. Mit diesem Artikel möchten wir Ihnen einige Tipps für ein ideales Webdesign an die Hand geben.

Post Author: Clemens Graf

Verfasst von: Clemens Graf

Lesezeit: ca. 12 min

Grafikerin erstellt Webdesign (Wireframe)

Mobile First

Frau mit Smaprtphone

Seit einigen Jahren schon wird das Thema „mobile first“ bereits gepredigt. Gemeint ist, dass man nicht wie früher zuerst für den Desktop gestaltet und davon die mobile Version ableitet, sondern dass man den mobilen Nutzer und seine Bedürfnisse in den Vordergrund stellt. Das kann so weit gehen, dass man mit dem Webdesign der mobilen Version startet und erst danach die Desktop Ansicht entwickelt. In vielen Branchen überwiegt die mobile Nutzung bereits deutlich . Ob das auch bei Ihrer Website so ist, können Sie leicht mit Webanalyse Tools wie Google Analytics herausfinden. Auch wenn bei Ihnen (noch) die Desktop Nutzung überwiegt, so sollten Sie die mobilen Nutzer auf keinen Fall vernachlässigen.

Hier die wichtigsten Tipps zur mobilen Optimierung des Webdesigns:

  • Achten Sie darauf, dass die einzelnen klickbaren Elemente nicht zu klein und zu nah zusammen sind, da sie sonst mit dem Finger schwer erwischt werden können. Bedenken Sie dabei auch, dass die Größe und Breite der Finger von Mensch zu Mensch recht unterschiedlich sein können.
  • Eine gute Mindestgröße für klickbare Elemente auf Mobilgeräten sollte 1x1cm groß sein, mit genügend Abstand zu anderen Elementen.
  • Für Tablet User sind Elemente an den Seiten und am unteren Ende des Bildschirms am einfachsten zu erreichen.
  • Überlegen Sie, mit welchen Geräten und in welchen Situationen User Ihre Website verwenden werden. Sind es eher Smartphones? Tablets? Einhändig oder beidhändig?
  • Achten Sie darauf, welche Elemente und Informationen „above the fold“ zu sehen sind. Der Begriff „above the fold“ bedeutet wortwörtlich übersetzt „über der Falz“ und kommt aus der Zeitungssprache. Hier wurden Zeitschriften oft in der Hälfte gefalten – was über der Falz stand (Schlagzeile, Bild etc.) war sehr wichtig, um das Interesse beim Leser zu wecken. Bei Websites wird damit der Bereich bezeichnet, der für den Nutzer auf den ersten Blick sichtbar ist, ohne dass er scrollen muss. Speziell auf mobilen Geräten und auch Laptops ist dieser Bereich oft deutlich kleiner, als auf größeren Desktop Bildschirmen.

Flow

Rücken Sie die wichtigsten Elemente wie z. B. Ihre Call to Actions in die Blickrichtung der User. Eine Website wird meist in einer S Blickführung gescannt. Der User Startet oben links beim Logo, scannt nach rechts und geht dann zurück nach links. Aus diesem Grund ist die Mitte vom Header ein zentraler Punkt, an dem man starke Messages oder Call to Actions platzieren sollte.

Ein User sollte Ihre Website idealerweise ohne Navigation verwenden können. Jede Seite sollte im Inhalt selbst Verlinkungen zu den weiterführenden oder verwandten Inhaltsseiten haben, sodass eine Navigation über den Kontext selbst möglich ist.
Vermeiden Sie Inhaltsseiten die in einer Sackgasse enden. Sie verursachen Verwirrung und führen zu zusätzlichem Aufwand für den User.

Laden Sie sich unser kostenloses Ebook herunter

„In 11 Schritten zum attraktivem Webdesign, das funktioniert“

  • Was muss man bei benutzerfreundlichem und strukturiertem Webdesign beachten?
  • Welche Schritte beinhaltet funktionierendes Webdesign?
  • Wie kann man Informationen übersichtlich & strukturiert darstellen?
Download
Ebook Cover - Webdesign

Scrolling

User sind es durchaus gewohnt, auf Websites vertikal zu scrollen, sofern sie erkennen, dass es zusätzliche, relevante Infos weiter unten auf der Inhaltsseite gibt. Sorgen Sie also durch Pfeile, Bilder etc. dafür, dass dies für den User deutlich erkennbar ist.

Umso länger eine Inhaltsseite ist, umso weniger wahrscheinlich ist es, dass ein User bis zum Ende scrollt. Machen Sie Inhaltsseiten also nicht länger als unbedingt nötig und sorgen Sie dafür, dass die wichtigsten Inhalte und Elemente zuerst erscheinen.

Lange Seiten haben im Vergleich zu vielen kurzen Seiten den Vorteil, dass das Scrollen wesentlich schneller geht, als das Klicken und Laden von neuen Seiten.

Farbe

Verwenden Sie eine Farbe für Ihre Call to Actions (Buttons etc.) auf Ihrer Website und verwenden Sie diese im besten Fall für nichts Anderes. Dadurch ist es für den User klar erkennbar, was klickbar ist und sie stechen deutlich vom Rest hervor.

Warme, helle Farben treten in den Vordergrund, während kalte, dunkle Farben im Hintergrund bleiben.

Achten Sie auf ausreichend Kontrast. Speziell beim Text sollten Sie sicherstellen, dass Sie einen ausreichend hohen Kontrast haben. Bedenken Sie auch hier, dass der Kontrast auf unterschiedlichen Geräten und Bildschirmen unterschiedlich stark ausfallen kann.

Ladezeit

Stellen Sie sicher, dass der User sein primäres Ziel schnell und einfach erreichen kann. Dies betrifft sowohl die Ladezeit, als auch den Klickpfad.
Noch wichtiger als die tatsächliche Ladezeit der Website ist die gefühlte Ladezeit für den User, auch wenn das nur eine Frage der Wahrnehmung ist. So könnte sich z. B. eine Website, die über 10 Sekunden zum Laden des gesamten Inhalts benötigt, dennoch schnell anfühlen, wenn der User die ersten Texte gleich lesen kann und weitere Elemente Stück für Stück nachgeladen werden.

Durch das Anzeigen von sogenannten „Skeletons“ kann man die gefühlte Ladezeit ebenfalls deutlich verringern. Gemeint sind simple, geometrische Formen und Blöcke, die den Inhalt darstellen, der geladen wird, bis dieser erscheint. Sie kennen dies sicherlich von diversen Apps und Websites wie z. B. Facebook, Linked-In etc.

Der Website Text sollte vor den Bildern laden, damit der User bereits mit dem Lesen starten kann. Über ein sogenanntes „lazy loading“ können Elemente nach und nach geladen werden, während der User die Seite hinunterscrollt.

Navigation

Hand hält Kompass

Auch wenn es wie ein Trend erscheinen mag – Hamburger Menüs auf Desktop sind weniger sprechend, auffällig und vertraut im Vergleich zur klassischen Navigation. Daher sollte die Hamburger Navigation für mobile Geräte vorbehalten bleiben.

Achten Sie darauf, dass Sie nicht zu viele Menüpunkte auf der obersten Ebene haben. Als grobe Daumenregel gilt: Verwenden Sie nicht mehr als 6-8 Hauptmenüpunkte. Falls Sie bei den Menüpunkten einsparen müssen, versuchen Sie thematisch verwandte Menüpunkte zu gruppieren. Ebenso können Sie meistens einen Menüpunkt wie „Home“ einsparen, wenn der Klick auf das Logo ebenfalls zur Startseite zurückführt. Weniger wichtige Menüpunkte können auch in eine sekundäre Navigation wie z. B. im Footer etc. ausgelagert werden.

Stellen Sie auch sicher, dass Ihre Dropdown Menüs nicht unnötig verschachtelt sind. Idealerweise kommen Sie mit 2-3 Ebenen aus. Testen Sie Ihr Dropdown Menü auch ausgiebig auf verschiedenen Geräten und Browsern. Es gibt nichts Nervigeres, als ein Dropdown Menü, das ständig zuklappt, während man versucht, einen bestimmten Menüpunkt zu erwischen.

Verwenden Sie ein sogenanntes „Sticky Menü“, vor allem, wenn Sie längere Inhaltsseiten haben. Beim Sticky Menü „klebt“ die Navigation beim runterscrollen am oberen Bildschirmrand fest und ist für den User somit immer erreichbar, egal an welcher Stelle er auf der Website ist.

Links

Stellen Sie sicher, dass Links durch einen farblichen Kontrast und/oder eine Unterstreichung klar zu erkennen sind. Links sollten wie Links aussehen.
Bauen Sie nützliche interne Links und Querverweise in Ihre Inhalte ein. Links helfen dem User sowie auch den Suchmaschinen, schnell Ihre Website zu erfassen und relevante Inhalte zu finden.

Verwenden Sie eine andere Farbe für Links die bereits besucht wurden, um es dem User zu erleichtern, sich zu orientieren.

Buttons

Hand bedient Computermaus

Auch Buttons müssen als solche erkennbar sein und klickbar aussehen. Achten Sie wie schon erwähnt darauf, dass die Buttons groß genug sind und genügend Platz haben, um auch geklickt zu werden (mit Maus und Finger).

Die wichtigsten Aktionen und Call to Actions auf Websites sollten als große Buttons dargestellt werden, die leicht erreichbar und klickbar sind.

Durchgängige Hintergrundfarben, Konturen und handlungsorientierte Aussagen signalisieren einem User, dass ein Element klickbar ist.

Slideshows

Für viele Jahre sind Sie nun schon fixer Bestandteil fast jeder Website – die Rede ist von Slideshows. Die Sinnhaftigkeit bzw. der Mehrwert ist jedoch oft minimal oder überhaupt nicht gegeben. Slideshows erhöhen nicht nur die Ladezeit einer Website, sondern werden in den meisten Fällen vom User auch gar nicht genutzt. Die meisten Websites kommen ohne Slideshows aus. Setzen Sie diese also nur ein, wenn es einen tatsächlichen Mehrwert für den User hat.
Wenn Sie eine Slideshow einsetzen, müssen Sie sicherstellen, dass Sie vom User auch navigiert werden kann. Die klassischen kleinen Punkte am unteren Ende der Slideshow sind für die Navigation auf Mobilgeräten nicht geeignet. Nutzen Sie daher die Navigation mit Pfeilen nach links und rechts. Stellen Sie auch hier sicher, dass diese groß genug für die Bedienung mit dem Finger sind.
Eine Slideshow, die automatisch durchwechselt, sollte auf manuelle Navigation umstellen, sobald der User das erste Mal damit interagiert hat. Ansonsten kann es für ihn schwer sein, die Slideshow zu verwenden oder einen Slide, der ihn interessiert, lange genug zu betrachten.

Inhalte

Die wichtigste Information der Website sollte visuell auch am meisten hervorstechen.

User beginnen Texte oben links zu lesen und scannen die ersten 2-3 Wörter der Absätze sowie die Zwischenüberschriften. Stellen Sie also sicher, dass wichtige Wörter und Aussagen gleich am Anfang der jeweiligen Absätze sowie in den Zwischenüberschriften zu finden sind.

Nutzen Sie aussagekräftige Zwischenüberschriften, welche bereits die wichtigsten Aussagen vermitteln und beim User Interesse wecken.

Stellen Sie sicher, dass die wichtigste Information auch möglichst weit oben auf der jeweiligen Inhaltsseite zu finden ist. Bedenken Sie, dass die Wahrscheinlichkeit, dass der User bis zu der Information scrollt umso geringer ist, je weiter unten auf der Seite sie sich befindet.

Heben Sie die wichtigsten Informationen durch Farbe, Formatierung oder Schrift vom Rest hervor.

Achten Sie darauf, Ihre Zielgruppe nicht mit kompliziertem Fachjargon zu verwirren. Nutzen Sie stattdessen Wörter, die Ihre Zielgruppe auch verstehen wird.

Schriftgröße und Lesbarkeit

Frau liest Buch

Die meisten User beginnen damit, die Inhalte zu scannen und lesen sie erst später. Verwenden Sie also Bilder, um die Texte aufzulockern, sowie aussagekräftige Zwischenüberschriften und gute Textformatierungen, um ihnen beim Scannen die wichtigsten Infos zu vermitteln.

Lesbarkeit ist nicht nur, ob man etwas lesen kann – es ist auch, ob man es lesen möchte. Vermeiden Sie also endlose Textwürste, lange Sätze und Absätze.

Verwenden Sie erweiterten Zeilenabstand, um die Lesbarkeit zu verbessern und den Text aufzulockern. Als gute Daumenregel empfiehlt sich ca. Schriftgröße + 30% als Zeilenabstand, je nach Schriftart und Design kann dies jedoch auch mehr sein.

Fazit: Das Obige sind einige der wichtigsten Tipps, um die Usability Ihrer Website zu verbessern. Wie Sie sehen, ist Webdesign eine Disziplin, die Verständnis in verschiedensten Fachgebieten wie Typografie, Technik, Texten und Layout verlangt, um optimale Ergebnisse zu erzielen.

Benötigen Sie Hilfe bei der Umsetzung Ihres Webdesigns? Kontaktieren Sie uns, wir beraten Sie gerne!

Mit unserem E-Mail Newsletter schicken wir Ihnen kostenlos nützliche Artikel & Infos rund um das Thema Werbung & Marketing.
Felder mit * sind verpflichtend. Mit dem Absenden stimmen Sie den Datenschutzbestimmungen zu.
Dieses Feld dient zur Validierung und sollte nicht verändert werden.

Veröffentlicht am 1. Januar 2020

, aktualisiert am 14. November 2023

Vorstellung: Clemens Graf

Clemens Graf

Clemens Graf ist Gründer & CEO der Werbeagentur inconcepts marketing Gmbh. Seit vielen Jahren ist er ebenfalls intensiv im Bereich online Marketing und Brand Building unterwegs und berät mit seinem Know-How sowohl nationale als auch internationale Unternehmen, um die Potenziale der digitalen Medien vollständig zu nutzen.

Nach oben