Kapitel 6 Die visuelle Gestaltung

6.1 Layoutvorlagen
6.2 Designentwurf


Der häufig meistgeschätzte Bereich der Webseitenplanung, ist die visuelle Gestaltung, das grafische Design Ihrer Seite.
Die Hauptaufgabe der visuellen Gestaltung wird oft darin gesehen, einen Widererkennungswert für die Webseite zu erschaffen mit dem sie sich optisch aus der Masse gleichförmiger Kontrahenten abhebt. Gelungene Beispiele dafür finden sich z.B. auf www.mostinspired.com. Wichtig ist es mit visuellen Merkmalen, die Orientierung der User auf der Seite zu gewährleisten. Visuelle Gestaltungsmerkmale zeigen dem Leser, wo auf der Seite er sich befindet, was er bereits gesehen hat und wie er zu anderen Seitenbereichen gelangt. Wenn man vom „Look and feel“ einer Webseite spricht, so meint man genau das: eine gelungene Kombination von visueller Orientierungshilfe und zeitgemäßen, ansprechendem Design im Einklang mit den inhaltlichen Aussagen.

Die Aufgabe in diesem Kapitel ist es, die erarbeitete Seitenstruktur in ein visuelles Design einzubetten. Dafür gibt es eine Reihe von nützlichen Methoden, z.B. ein Raster als Layout-Vorlage für die Anordnung der Seitenelemente zu schaffen und mit Entwurfszeichnungen sich dem  „Look and feel“ zu nähern, um so ein Vorführmodell als Vorstufe eines webbasierten Prototyps zu präsentieren.

Layoutvorlagen
Mit Hilfe von Layoutvorlagen können Sie Entwürfe Ihrer Webseite visuell darstellen. Beginnen Sie damit für wichtige Inhaltsblöcke eine prominente, zentrale Platzierung vorzusehen. Reservieren Sie Platz für die globale und lokale Navigation und für eventuelle zusätzliche Navigationsfunktionen z.B. im Kopf- und Fußbereich der Seite. Das Unternehmenslogo hat einen festen Platz auf jeder Seite, meist oben links, vergessen Sie nicht Platz frei zu halten für eventuelle Banner- oder andere Formen von Werbung.

Hier ist ein Beispiel einer Layoutvorlage.

grid-layout

Beginnen Sie damit anhand Ihrer Strukturvorgaben verschiedene Entwürfe der möglichen Seitentypen zu erstellen. Denken Sie daran, dass der sog. Headerbereich mit dem Logo, daneben Platz für ggf. Bannerwerbung, der Footer mit weiteren statischen Informationen sowie die Navigation auf jeder Seite an dergleichen Stelle platziert sind. Ist keine lokale Navigation anhand der Inhaltsvorgaben für eine Sektion vorgesehen, lassen Sie den Platz frei. Verwirren Sie den user nicht durch experimentelle Versuchsanordnungen unter dem Deckmantel der künstlerischen Freiheit.

Designentwurf
Legen Sie zunächst die elementaren Bestandteile der Seite fest und fügen Sie dann Grafiken, hinzu. Photoshop, Fireworks und andere Grafikprogramme bieten komfortable Werkzeuge und Einstellungsmöglichkeiten für Grafiken in Webseiten, mit diesen Programmen können Sie leicht unterschiedliche, ansprechende Designentwürfe ausprobieren, die dann nach Absprache mit dem Kunden, als Vorlage Ihres Webseiten-Prototypen dienen.

Glückwunsch, Sie haben nun alle notwendigen Schritte unternommen, die Informations-Architektur Ihrer Webseite festzulegen. Sie haben alle Bausteine erarbeitet um einen Prototypen zu erstellen, darüber hinaus haben Sie eine transparente Dokumentation, die Sie für Ihr weiteres Vorgehen als Arbeitsgrundlage verwenden.

Design Dokument Plan A
Sie fügen nun das letzte Kapitel „Die visuelle Gestaltung “ Ihrem Dokument hinzu. Die Layoutvorlagen der Seitenstruktur und Ihre Designvorschläge sind einsehbar, wenn möglich haben Sie bereits „snapshots“ eines lokal konstruierten Prototypen.

Design Dokument Plan A

1. Die Ziele der Webseite:

1.1 Liste mit Rangfolge der Hauptziele, ggf. Kategorisierung der Unterziele,
1.2 kurze Zusammenfassung, Vereinbarung.

2. Die Leser der Webseite:

2.1 Zielgruppendefinition kurze Zusammenfassung,
2.2 Rangfolge d. Hauptzielgruppen
2.3 Szenarios

3. Konkurrenzanalyse

3.1  Analyse - Tabelle
3.2 Zusammenfassung(Resumee)

4. Der Inhalt der Webseite

4.1 Inhalte und Funktionen

5. Die Struktur der Webseite

5.1 Metaphern
5.2 Die Struktur
5.3
Die Navigation

6.Die visuelle Gestaltung

6.1 Layoutvorlagen
6.2 Designentwurf

Anhang A: Konkurrenzanalyse: Liste der URL, Screenshots, Notizen.
Anhang B: Strukturliste, Organigram der Seitenstruktur
Anhang C: Vorlagen für das Design