10 Tipps für effektives Webdesign

10 Tipps für effektives Webdesign

Webdesign ist effektiv, wenn der Leser sich direkt informiert fühlt und alles, was vom Inhalt der Seite ablenken könnte nicht als störend empfunden wird. Effektive Webseiten bestechen durch ihre Übersichtlichkeit. Der Spagat in der Agenturarbeit besteht darin Werbung zu platzieren und gleichzeitig zu informieren.

1. Einfachheit - „weniger ist mehr”.

Inhalte sollten kurz und knackig gehalten werden und beim Aufrufen der Seite am besten im Sichtfeld des Lesers erscheinen. Ein Leser, der in den ersten Sekunden nicht das vorfindet, was er gesucht hat wird seine Suche vielleicht woanders fortführen. Für vertiefende Inhalte können Links auf weiterführende Seiten oder ein Kontaktformular hilfreich sein.

2. Konsistenz

Ein Internetauftritt sollte in seinem Erscheinungsbild konsistent sein. Das betrifft die Schriftfamilien und -größe, Farben, Art der Bilder und die Gestaltung des Inhalts. 

Für die Farben eines Internetauftritts kann man eine Farbpalette zusammenstellen, die sich am vorhandenen Logo oder am Hauptbild orientieren. Auf der Webseite Adobe Color kann man sich nicht nur seine eigene Palette zusammenstellen, es werden auch viele Beispiele und aktuelle Farbtrends gezeigt.

Neben Standardschriften wie Arial und Helvetica bieten fonts.google.com oder fontsquirrel.com eine vielfältige Auswahl an Webschriften. Bei der Auswahl sollten 2 Schriftfamilien für Überschriften und Fließtext ausreichen. Besonders beim Fließtext ist eine gute Lesbarkeit wichtig.

3. Lesbarkeit

Texte fürs Internet sollten leicht verständlich sein. Internetfähige Geräte werden in unterschiedlichsten Umgebungen von Menschen mit unterschiedlichen Voraussetzungen (Alter, Bildung, Behinderung) benutzt. Trotz Ablenkung durch eine unruhige Umgebung oder schlechte Sichtverhältnisse sollte die Intention der Webseite schnell erfassbar sein. 

Texte brauchen einen angenehmen Kontrast zum Hintergrund. Mit der passenden Schriftgröße, einem kleinen Abstand zwischen den Zeilen und einer begrenzten Zeilenlänge erleichtert man schnelles Lesen von Fließtexten.

Bei Text auf kann die Lesbarkeit durch einen unruhigen Hintergrund leiden. Hier hilft es, einen zusätzlichen Hintergrund nur für die Schrift zu nutzen („Overlay“). Dieser kann auch halbtransparent sein.

4. Responsivität

Responsive Webseiten passen sich dem Ausgabegerät an. Webseiten sehen auf unterschiedlichen Ausgabegeräten nicht immer gleich aus. Wichtig ist, dass die Les- und Bedienbarkeit erhalten bleiben. CSS-Frameworks wie Zurb Foundation oder Bootstrap bieten einige Werkzeuge, um Inhalten in flexiblen Grid-Systemen zu gruppieren. Je kleiner die Auflösung, umso linearer sollte eine Seite aufgebaut sein („mobil first“). Mit zunehmender Auflösung können Inhalte mittels Grid horizontal angeordnet und gruppiert . 

5. Einfache Navigation

Die Navigation gibt einen groben Überblick über die Inhalte einer Webseite. Die Hauptnavigation („Main Nav“) findet man häufig am oberen Bildschirmrand. Im günstigsten Fall bleibt sie auch bei langen Seiten im Sichtfeld wie bei der sogenannten „Sticky Nav“. Weiterführende Inhalte können über eine zusätzliche Navigation an der Seite bereitgestellt werden („Side Nav“).

Bei Webseiten, die eine Dokumentation bereitstellen findet man meist eine Seitennavigation. Man kann durch die Seite scrollen (wie durch ein Dokument) oder über die Navigation den gewünschten Punkt wählen. Die Navigation zeigt jederzeit an welcher Stelle der Seite man sich befindet.

6. Welchen Zweck verfolgt die Webseite?

Der Hauptgrund für die Internetpräsenz sollte vorrangig behandelt werden. Hier einige Gründe für Unternehmen oder Privatpersonen eine eigene Internetseite zu unterhalten:

Als Unternehmer:

• Kontakt zum Kunden
• Präferenzbildung zur Unternehmung
• Absatzförderung
• Informationen zu Produkten
• Produkt-Support

Als Privatperson:

• Reiseblog
• Hobby
• Kontakt zu Gleichgesinnten

7. „Call to action“ (Abhängig vom Zweck der Webseite)

„Call to action“ ist ein Button oder Link, der etwas auslöst: die Anmeldung zum Newsletter, die Kontaktaufnahme, die Teilnahme am Gewinnspiel ...

Die Aufforderung zur Anmeldung oder Bestellung sollte daher prominent platziert sein, da hier potentielle Kunden angesprochen werden können.

8. Farbpalette

Eine gute Farbpalette ist wie das Branding einer Webseite. Wie schon im Punkt 2 (Konsistenz) angesprochen sollten Farben passend zum Logo oder der Hauptbilder gewählt werden. Farben und Formen einer Webseite unterstützen die transportierten Inhalte. Sie sollen durch den Webauftritt führen und helfen den Inhalt schnell zu erfassen.

Verpönt sind Farbverläufe oder zu viele zu grelle Farben. Empfohlen werden bis zu 3 Farbtöne in einer Palette mit entsprechenden Abstufungen in der Helligkeit oder Intensität. Jede Farbe sollte ihren eigenen Einsatz haben, wobei auch eine Signalfarbe zur Aufmerksamkeitssteuerung nicht fehlen muss.

9. Ladezeiten minimieren

Bilder und Videos lassen sich für die Verwendung im Web extra aufarbeiten. JavaScript- bzw. CSS-Dateien lassen sich zusammenfassen und kürzen („Konkatenation“ & „Minifizierung“).

Einen großen Geschwindigkeitsgewinn erzielt man mit der Verwendung des http2-Protokoll auf dem Webserver. Hierbei werden Server-Antworten an den Client gebündelt ausgeliefert. Auf redundante Teile im „http-Header“ wird verzichtet. Der Netzwerkverkehr wird spürbar gemindert. Webseiten können schneller ausgeliefert werden.

10. Werbung gezielt einstreuen

Werbung ist gut, wenn sie auffällt aber nicht als störend empfunden wird. Sie soll unterhalten, den potenziellen Kunden überzeugen und eine Beziehung zum Produkt aufbauen. 

Werbung kann auch als Einkommensquellen für den Seiteninhaber dienen. Durch interessante Inhalte werden Besucher auf die Seite gelockt. Der Betreiber verdient an der Werbung, solange die Besucher den Inhalt interessanter finden als die Werbeeinblendungen. Viele Werbebanner zeugen jedoch nicht von Qualität. Auf derartigen Seiten befinden sich häufig besonders viele unglaubliche Nachrichten.

Fazit

Eine Webseite effektiv für den Besucher zu gestalten ist Aufgabe vieler Seiten:

Der Auftraggeber muss sich über den Zweck und die Besucher seiner Seite im Klaren sein und erste Inhalte zusteuern können. Marketing-Strategen und Web-Designer erarbeiten für den vorgeschlagenen Inhalt eine übersichtliche Struktur. Die Designer steuern Semantik-unterstützende Elemente, Schriftarten, Abstände und Farben - also Design und Layout - dazu. Die Webentwickler verantworten die technische Umsetzung des responsiven Webauftritts.