Webdesign Checkliste

Beim Thema Webdesign besteht immer eine nicht unerhebliche Chance, dass Kunde und Agentur bereits in einer Frühphase des Online-Projektes übel aneinander geraten. Der Kunde will nicht zu weit vom bisherigen CD-Standard abweichen, dem verantwortlichen Kreativen auf Agenturseite kann das Design gar nicht genug „2.0“ sein.
Spaß beiseite: Die Wahrheit liegt meist in der Mitte: Zu hausbackene Layouts locken keinen User hinter dem Ofen hervor, andererseits hat eine zu verspielte Verleugnung der Unternehmenstradition in der Vergangenheit oft unschöne Folgen gehabt weil zum Beispiel die so wichtige Kundenbindung einfach gekappt wurde.

Aber ungeachtet ob Imageseite oder Online-Shop: ein modernes Webdesign und eine durchdachte Usability sind für den Erfolg im Internet ausschlaggebend.

Eine kurze Checkliste haben wir hier zusammen gestellt, anhand welcher Eckpunkte für einen funktionalen Internetauftritt erkennbar sind.

1) Auflösung/ Maße

Die meisten Webseiten haben eine statische Breite und sind auf eine Bildschirmauflösung von 1024 x 768 Pixel optimiert (alternativ: 800 x 600). Die Ausrichtung ist mehrheitlich zentriert. Zu berücksichtigen ist natürlich die steigende Anzahl mobiler Geräte und die damit verbundenen, kleinen Bildschirmgrößen.
Webseiten mit dynamischer Breite bieten eingeschränkte Möglichkeiten für Design-Elemente (z.B. Kopfgrafiken, die meist eine statische Größe haben).

2) Schriftarten/ Typografie

Die am meisten verwendeten Text-Schriftarten sind die Arial (Windows/ Mac) bzw. Helvetica (Mac) bzw. Verdana(Windows/ Mac) bzw. Geneva (Mac). Dazu sind weitere Schriftarten im häufigen Gebrauch: Tahoma, Trebuchet MS,Times (New Roman), Georgia, Arial Black, Courier New, Palatino.

Nur solche Schriftarten können ohne weiteres verwendet werden, die auch auf dem Rechner des Besuchers installiert sind. Die neuesten Browser, die CSS3-fähig sind (der in der Beta-Phase befindliche IE9 und die neuesten Versionen vonFirefox, Chrome, Opera und Safari) können Schriftarten anzeigen, die nicht auf dem System des Besuchers abgebildet sind. Bis zur flächenmäßigen Verbreitung dieser Browsergeneration wird es allerdings noch etwas dauern.

Für gute Textlesbarkeit sollten folgende Punkte berücksichtigt werden:
Zwischen 55 und 75 Zeichen pro Zeile
Schriften sollten eine Größe von 11 Pixel haben: „Größer ist besser als kleiner!“
Der Zeilenabstand sollte 1,5 betragen
Große Headlines dienen als Blickfänger! Diese können auch in einer anderen Schrift dargestellt werden (beispielsweise als Bild), allerdings können diese Überschriften nicht von Suchmaschinen gelesen werden.

3) Farben

Rot: Hingabe, Liebe, Ärger
Orange: Energie, Fröhlichkeit, Vitalität
Gelb: Fröhlichkeit, Hoffnung, Neid
Grün: Neuanfang, Natur, Reichtum
Lila: Kreativität, Reichtum
Schwarz: Rätselhaftigkeit, Eleganz, das Böse
Grau: Stimmungsvoll, Konservativismus, Formalität
Blau: Ruhe, Verantwortung, Trauer
Braun: Natur, Ganzheitlichkeit, Abhängigkeit
Beige: Konservativismus, Frömmigkeit, Trübe
Crème, Elfenbein: Ruhe, Eleganz, Purheit

4) Navigation

Horizontales Menü

Kommt heute am meisten vor
Ideal für eine fixe Anzahl an Menüpunkten

Vertikales Menü

Meistens im linken Bereich auf der Seite zu finden
Ideal für Menüs, die flexibel in der Menge der Navigationspunkte sind/ sein müssen

Metanavigation

Horizontale Navigation im Kopfbereich der Seite
Enthält meist Orientierungslinks wie Kontakt, Sitemap, Impressum

Footer-Menü

Menü am Seitenende
Enthält oft die erste und zweite Ebene der Sitemap
Erfahrene Besucher finden wichtige Punkte in dieser Navigation sehr schnell
Relevant für die Suchmaschinenoptimierung

5) Die Homepage

Sollte designed sein unter Berücksichtigung der „Blindheit“ der meisten Besucher für die Navigation, d.h. die wichtigsten Bereiche des Internetauftritts sollten auch ohne die Navigation zu erreichen sein. Das gilt natürlich in erster Linie für die Startseite – aber kann auch auf andere Bereiche der Seite angewendet werden.

Daher sollten auf der Startseite die wichtigsten Bereiche angeteasert werden, dazu gehören, kurze knappe Texte, aussagekräftige Bilder und klare Schaltflächen.

Weitere Elemente auf der Startseite:
Kopfgrafik (emotionaler Wiedererkennungswert)
RSS, News, Twitter (Suchmaschinenspider besuchen die Webseite regelmäßig)
Kontaktmöglichkeiten (Anfragbarkeit der Produkt und Dienstleistungen)
Direkte Links zu Produkten und Dienstleistungen

6) Produktpräsentation auf dem Internetauftritt

Separate Navigation für Produktkategorien
Verwendung von Farbcodes für Kategorien
Einsatz von Teasern
Produktsuche, Konfiguratoren
Produktbilder zur Vergrößerung, Animationen, Videos
Downloads
E-Mail-Newsletter

Autor: Interface Medien