11 Tipps für die Webseitengestaltung
Eine gute Webseite ist wie ein Haus, in das man gerne geht: Besucher fühlen sich gleich willkommen und finden sich zurecht. Sie haben so viel Spaß bei ihrem Besuch, dass sie sogar etwas länger bleiben als gedacht und auch in Zukunft gerne wieder kommen.
Ein solches Erlebnis können wir auch auf einer Internetseite haben. Die folgenden Informationen für eine gute Webseitengestaltung zeigen, wie das geht.
1. Orientierung an der Zielgruppe
Damit sich Besucher auf einer Webseite angesprochen fühlen, sollte sich das Design an dem Geschmack und den Interessen der Zielgruppe orientieren. Während ein Blog für werdende Mütter vielleicht in hellen Farben und mit weichen Schriften gestaltet wird, ist ein Blog für Motorradfahrer eher dunkel gehalten und nutzt scharfe Linien im Layout. Bei einer Webseite für Jugendliche ist die Einbindung sozialer Medien besonders wichtig.
Für eine professionelle Webseitengestaltung ist es daher wichtig, von Anfang an die Zielgruppe, ihre Wünsche und Interessen klar zu definieren. Mockups und Wireframes sollten unbedingt mit Personen aus der Zielgruppe getestet werden.
2. Orientierung am Zweck der Webseite
Auch der Zweck einer Seite muss bei der Webseitengestaltung berücksichtigt werden. Ein Online-Magazin gibt auf der Startseite meist einen Überblick über alle Rubriken und aktuelle Themen. Ein Portfolio hingegen kommt mit sehr wenigen Informationen auf der Startseite aus. Hier kann ein einzelnes prägnantes Foto wirkungsvoll sein.
Je nachdem, ob die Seite informieren, präsentieren, oder verkaufen möchte, eignen sich kühle, oder warme Farbtöne, klare Strukturen, oder dynamische Animationen im Webdesign.
3. Single-Page oder Multi-Page
Eine einzelne scrollbare Seite, oder viele Unterseiten zum Durchklicken? Diese Frage muss zu Beginn der Webseitengestaltung geklärt werden. Handelt es sich um eine Seite, die ein Produkt oder ein Unternehmen präsentiert und die nur wenige Informationen enthält, dann ist ein Single-Page Design gut geeignet. Wenn eine Seite komplexer wird, oder verschiedene Funktionen enthält, wie etwa ein Magazin, oder ein Buchungs-Portal, so ist ein Multi-Page Design sinnvoller.
Das Single-Page Design erstreckt sich meist über die volle Breite des Bildschirms und ist für Smartphones optimiert. Es ist aufgeteilt in Header, Content-Bereich und Footer. Während der Header Raum für ein attraktives Banner, oder einen Image-Film bietet, finden sich im Footer meist Kontaktinformationen, das Impressum und Informationen zum Unternehmen, wie beispielsweise Stellenausschreibungen.
Das Multi-Page Design hat meist zusätzlich noch eine oder zwei Sidebars, die sich links oder rechts am Bildschirmrand befinden. Sidebars sind in der Webseitengestaltung ideale Platzhalter für Werbebanner, Kurzbeschreibungen von Produkten und für Social Media Icons. Grundsätzlich wird das oberste Element in einer Sidebar am besten wahrgenommen.
4. Mobile First
Der Bildschirm eines Smartphones ist die kleinste Fläche, auf der die Webseite auf jeden Fall gut aussehen muss. Die Webseitengestaltung muss deshalb von Anfang an auf mobile Endgeräte optimiert sein. Im CSS können anschließend Breakpoints hinzugefügt werden, um das Layout an andere Bildschirmgrößen anzupassen.
5. Testen in unterschiedlichen Browsern
Jedes Layout, das umgesetzt wurde, muss in den gängigen Browsern Firefox, Chrome, Safari, Edge und Internetexplorer getestet werden. Nutzertests müssen auch mit unterschiedlichen Endgeräten durchgeführt werden, etwa mit Smartphones, iPhones und Tablets. Nur so kann sichergestellt werden, dass die Seite für die große Mehrheit der Nutzer einwandfrei funktioniert. Dies gilt insbesondere für interaktive Widgets, wie Kalender oder Formulare.
6. Navigation auf der Webseite
Ein Besucher einer Webseite muss immer wissen, wo er sich gerade befindet und was passiert, wenn er eine Aktion durchführt. Es ist daher sinnvoll, möglichst gängige Namen zu verwenden, wie “Home”, “zum Warenkorb”, oder “Kontakt”. Ein Menü sollte maximal fünf bis sieben Unterpunkte enthalten, um nicht unübersichtlich zu werden. Bei komplexeren Seiten dienen Breadcrumb-Menüs, Tooltips und kleine Infotexte der Orientierung. Insbesondere bei Kaufvorgängen muss die Webseitengestaltung volle Transparenz bieten, damit sich die Nutzer sicher fühlen. Deutliche “zurück”- oder “abbrechen”-Buttons sollten immer vorhanden sein und sie werden in Dialogfeldern für gewöhnlich links platziert.
7. Barrierefreiheit
Barrierefreiheit wird in der Webseitengestaltung ein immer wichtigeres Thema. Dazu gehört ein kontrastreiches Layout, am besten eine dunkle Schrift auf hellem Grund. Klickbare Elemente, wie Links und Menü-Items sollten deutlich gekennzeichnet werden. Bei der Farbgestaltung muss beispielsweise berücksichtigt werden, dass 9 % aller Männer eine Rot-Grün-Schwäche haben. In Photoshop können die Kontraste und Farben des Webdesigns optimiert werden und Links und Buttons können durch aussagekräftige Icons ergänzt werden.
8. Call-To-Action
Eine elegante Lösung, um Besucher zu einer bestimmten Handlung zu bewegen, ist ein Call-To-Action. Meist handelt es sich um ein breites Bild mit einer kurzen und prägnanten Botschaft und einem Button. Es gibt zwei gängige Varianten in der Webseitengestaltung, um Call-To-Actions zu platzieren:
Oben im Header-Bereich – Dort erzielt ein Call-To-Action besonders hohe Aufmerksamkeit. Diese Platzierung ist sinnvoll, wenn es sich um eine allgemeine Aktion handelt, zum Beispiel um die Anmeldung zum Newsletter.
Am unteren Ende einer Seite – In diesem Fall erfährt der Nutzer bereits diverse Informationen, bevor er das Call-To-Action erreicht. Diese Variante ist zu empfehlen, wenn sich die Aktion auf ein bestimmtes Produkt bezieht, wie etwa die Buchung eines Hotelzimmers.
9. Social Media
Eine Verknüpfung mit Social Media Kanälen ist in der heutigen Webseitengestaltung unerlässlich. WordPress und Typo3 bieten zahlreiche Plugins, um die Social Media Kanäle in die Webseite einzubinden. Auch hier spielt die Platzierung eine wichtige Rolle: Für das Teilen von Artikeln in Social Media sollten die Icons entweder direkt über der Überschrift des Artikels platziert werden, oder direkt unter dem Artikel. Icons, die auf die Social Media Kanäle des Unternehmens führen, sind gut in der Sidebar aufgehoben.
Moderne Webseiten zeigen häufig einen Instagram-Feed am unteren Ende der Startseite an. Dort werden die neuesten Instagram Fotos des Unternehmens in die Webseite eingebunden.
10. SEO
In Bezug auf die Webseitengestaltung sind besonders die Themen Responsiveness und die Seitenladezeit von hoher Bedeutung für SEO. Die Webseite sollte für alle gängigen Bildschirmgrößen, insbesondere für Smartphones optimiert sein. Der Suchalgorithmus von Google bewertet Seiten, die keine Smartphone-Ansicht haben, wesentlich schlechter.
Für eine geringe Ladezeit sollte die Webseite so schlank wie möglich gehalten werden. CSS Dateien können mit Plugins minifiziert werden und verbrauchen so sehr wenig Speicherplatz. Bilder sollten nur in der Auflösung geladen werden, die für die jeweilige Anzeigegröße nötig ist. Des Weiteren sollten sprechende URLs verwendet werden und Keywords sollten am besten intern verlinkt werden.
11. Corporate Design
Zu guter Letzt sollen Besucher eine Webseite natürlich mit dem dazugehörigen Unternehmen verbinden. Ein gezielter Einsatz von Farben, Schriftarten und einem Firmen-eigenen Logo macht die Seite einzigartig und wiedererkennbar. Eventuell lohnt es sich sogar, während der Webseitengestaltung ein eigenes Icon-Set zu entwerfen.
Bilder: Canva
Der Autor: Sascha Thattil arbeitet bei YUHIRO und hilft Unternehmern und Unternehmen beim einfachen Aufbau von Programmier-Teams in Indien. YUHIRO ist ein deutsch-indisches Unternehmen welches IT Firmen, Agenturen und IT Abteilungen Softwareentwickler bereitstellt.
Schreibe einen Kommentar