Effektives Webdesign wird von den Nutzern der Website bewertet und nicht von den Betreibern. Es gibt viele Faktoren, die eine Rolle in der Usability einer Webseite spielen und hierbei geht es nicht nur darum, wie gut eine Seite aussieht, sondern auch wie die Funktionalität integriert wird.
Design is not just what it looks like and feels like. Design is how it works.
Steve Jobs
Webseiten, die nicht in ein zeitgemäßes Webdesign passen, tendieren dazu, bei Google Analytics schlechte Ergebnisse zu erzielen. Damit sind hohe Absprungraten, geringe "time-on-site" und wenige Seitenaufrufe pro Besucher gemeint. Also, was macht gutes Webdesign aus? Im folgenden Artikel wollen wir auf 10 wichtige Prinzipien des Webdesigns eingehen, die Ihre Seite ästhetisch, leicht zu benutzen, effektiv und attraktiv für Ihre Nutzer macht
Übersicht
- Der Zweck der Webseite
- Kommunikation
- Farben
- Bilder
- Schriftarten
- Navigation
- Grid Webdesign
- Invertiertes L Layout
- Responsive Webdesign
- Ladezeiten
1. Der Zweck der Webseite
Gutes Webdesign orientiert sich immer an den Bedürfnissen der Nutzer. Sind Ihre Webkunden an Information, Unerhaltung, Interaktion oder Transaktion mit ihrem Unternehmen interessiert? Jede Seite ihrer Webpräsenz sollte einen sinnvollen Zweck erfüllen und einem entsprechenden Bedarf nachkommen.
2. Kommunikation
Der Internet-Besucher will im Normalfall so schnell wie möglich die Information finden, nach der er sucht. Deshalb ist es wichtig, klar zu kommunizieren und Ihre Informationen so zu präsentieren, dass sie einfach zu lesen und zu verarbeiten sind.
Einige sinnvolle Techniken, die Sie in Ihr Webdesign einarbeiten können, sind:
- Informationen mit Überschriften zu kategorisieren
- Aufzählungslisten zu verwenden, statt lange verworrene Sätze
- Grafiken verwenden (eine Grafik kann oft mehr erklären als 1000 Worte)
3. Farben
Eine gut durchdachte Farbpalette kann viel dazu beitragen, die Nutzererfahrung zu verbessern. Komplimentärfarben erzeugen Balance und Harmonie. Wenn Sie Farben in Kontrast mit Schrift und Hintergrund benutzen, ist der Text angenehmer zu lesen. Knallbunte Farben erzeugen Emotionen und sollten nur sparsam und bedacht verwendet werden, also zum Beispiel bei Buttons oder bei Interaktion. Außerdem können Abstände und Flächen Ihrer Seite ein modernes und nicht überladenes Aussehen verleihen.
4. Bilder
Wie bereits im Abschnitt Kommunikation erwähnt, kann ein Bild mehr erklären als 1000 Worte. Wenn Sie das richtige Bild für Ihr Webdesign verwenden, kann dies helfen Ihre Marke zu positionieren und ihr Zielpublikum zu erreichen. Falls Sie keine hochqualitativen, professionellen Bilder zur Hand haben, sollten Sie Stock-Fotos oder Hilfe bei der Fotografie in Betracht ziehen. Des Weiteren ist anzuraten, Diagramme, Videos und Grafiken zu verwenden, da diese viel effektiver in der Kommunikation sein können, als der bestausformulierteste Text.
5. Schriftarten
Generell sind Sans-Serif Schriftarten, wie zum Beispiel Arial oder Verdana, angenehmer für das Auge und am Monitor besser zu lesen (Für den Print-Bereich werden gerne Serif-Schriften verwendet). Die ideale Schriftgröße, um online Texte zu lesen, ist 16px. Außerdem sollten maximal 3 Schriftarten verwendet werden (eine in das Webdesign passende Schriftart für Überschriften oder Menüpunkte beispielsweise).
Beispiel:
Dies ist eine Sans-Serif Schrift.
Dies ist eine Serif Schrift.
6. Navigation
Bei der Navigation geht es darum, dass die Besucher möglichst wenige Klicks benötigen, um an das gewünschte Ziel zu kommen.
Einige Möglichkeiten im Webdesign für eine effektive Navigation sind:
- Breadcrumbs ("Brotkrümel": Zeigt den aktuellen Pfad in der Webseite an)
- eine logische Hierarchie bzw. Kategorisierung
- klickbare Buttons
- die "3-Klick-Regel" einhalten, d.h. User können mit 3 Klicks auf alle Webseitenbereiche gelangen
7. Grid Webdesign
Wenn Sie Elemente zufällig auf Ihrer Seite platzieren, kann schnell die Übersicht verloren gehen. Grid basierte Layouts arrangieren die Inhalte in Abschnitte, Spalten und Boxen, die ausgerichtet sind und in Balance wirken. Dies wiederum führt zu einem ausgewogenem Webdesign.
8. Invertiertes L Layout
Dieses Design-Prinzip wird im Englischen auch manchmal als "F-Pattern Design" bezeichnet. Eye-Tracking Studien haben ergeben, dass Leute am PC-Bildschirm in einem "F"-Schema lesen und absuchen. Das Erste, was betrachtet wird, ist die obere linke Ecke des Bildschirms. Die rechte Seite des Bildschirms wird selten bzw. als letztes betrachtet. Statt dem User ein Webdesign aufzuzwingen, kommt eine effektiv gestaltete Webseite dem Nutzer entgegen, richtet sich nach seinem natürlichen Lesefluss und die Information wird nach Wichtigkeit sortiert (von oben nach unten, von links nach rechts).
9. Responsive Webdesign
Es ist mittlerweile zum Standard geworden, dass Webseiten nicht nur auf dem Desktop-PC betrachtet werden, sondern auch durch verschiedene Endgeräte mit unterschiedlichen Bildschirmgrößen, wie z.B. Tablets und Mobiltelefone. Deshalb ist es wichtig, dass Ihre Seite auch "mobile friendly" ist, also optimiert auf Mobilgeräte. Falls Ihre Webseite nicht für Handys optimiert ist, können Sie eine spezielle Seite für eine mobile Ansicht erstellen oder im Optimalfall eine Full Responsive Seite verwenden (das Design passt sich an das jeweilige Gerät automatisch an).
10. Ladezeiten
Keiner mag Webseiten, die ewig zum Laden brauchen oder sogar erst ein Ladesymbol aufzeigen. Wichtige Dinge, die es zu beachten gilt, sind Bildoptimierung (Größe und Skalierung), Kombinieren und Verkleinern von HTML, CSS und Javascript und das Verwenden von Cache.