04.02.2013 Aufrufe

Webdesign - Webseiten planen, gestalten - Free-Hack Library

Webdesign - Webseiten planen, gestalten - Free-Hack Library

Webdesign - Webseiten planen, gestalten - Free-Hack Library

MEHR ANZEIGEN
WENIGER ANZEIGEN

Sie wollen auch ein ePaper? Erhöhen Sie die Reichweite Ihrer Titel.

YUMPU macht aus Druck-PDFs automatisch weboptimierte ePaper, die Google liebt.

Storyboard und Dokumentation<br />

Während der Styleguide (vgl. Prototyping: Styleguide, S. 251)<br />

bereits vor bzw. in der Arbeitsphase des Prototyping entsteht, wird<br />

ein endgültiges Storyboard erst nach der Freigabe des Prototypen<br />

zusammengestellt. Das Storyboard (der Begriff entstammt der<br />

Filmbranche) ist ein visuelles Drehbuch, in dem alle Schlüsselszenen<br />

eines filmischen Ablaufs vorgegeben werden.<br />

Auch im <strong>Webdesign</strong> spricht man von einem Storyboard, in dem für<br />

jede einzelne Seite einer Website alle gewünschten Informationsinhalte<br />

und deren Ausführungsform festgelegt werden. Übertragen<br />

auf eine interaktive Anwendung bedeutet es, jede einzelne Aktion<br />

vorzu<strong>planen</strong> und drehbuchartig alle Inhaltselemente (Dateiname,<br />

Ort), deren Aussehen und Verhalten aufzulisten.<br />

Oft ist es empfehlenswert, in einem Grafikprogramm ein Storyboard-<br />

Formblatt mit einem Screenshot Ihres Photoshop-Layouts mit<br />

Navigationselementen und Hilfslinien zu erstellen. Dieses Blatt<br />

können Sie nach Belieben ausdrucken und in Scribble-Technik mit<br />

Ihren Ideen versehen. Das ist z. B. bei einem freien Layoutraster<br />

sinnvoll, bei dem man auf jeder Seite die Standpositionen von Text<br />

und Bild variiert (Abb. 8.3a).<br />

Das Formblatt benötigt zudem einige selbstverständliche Projektangaben<br />

(Projektname, Auftraggeber etc.). Die relevanten<br />

Texte und Bilder sollten als Ausdruck dazu geordnet werden. Hier<br />

WEBSTORYBOARD Krieger<br />

Strukturebene<br />

Seitentitel<br />

Hintergrundbild<br />

Bildheadline<br />

Bodytext<br />

Grafik/Fotos<br />

Subnavigation<br />

Textlinks<br />

XIOXXIO IXOIIOXXXXIOOI<br />

Originalmaterial Bildgröße<br />

Linkziel Zustand 1 Zustand 2<br />

Linkziel<br />

DateiFinal Ausgeführt<br />

WEBSITEINHALTE hammer.runge<br />

Strukturebene<br />

Seitentitel<br />

keywords<br />

description<br />

NavigationAktiv<br />

ASSETDESIGN 8<br />

Abb. 8.3a, b: Storyboard-Formblatt für Standangaben<br />

im Layout (links) und einfache Datenliste<br />

(Originale: hammer.runge)<br />

INHALTE<br />

Teaserbilder Motiv Bildformat Alttext Bildbearbeitung<br />

Headline<br />

Bodytext<br />

Textlinks Linkziel<br />

Produktbild Motiv Bildformat Alttext Bildbearbeitung<br />

Besonderheiten<br />

261

Hurra! Ihre Datei wurde hochgeladen und ist bereit für die Veröffentlichung.

Erfolgreich gespeichert!

Leider ist etwas schief gelaufen!