Bei jedem Webprojekt (und sei es noch so „klein“) verwenden wir als Basis in der Konzeptionsphase verschiedene Skizzen, bzw. sogenannte Wireframes. Dabei handelt es sich um die Darstellung von Funktionen und Layout der zukünftigen Webseite. Das Wireframe ist eine Grundlage für die Ausarbeitung der nachfolgenden Screendesigns und dient hauptsächlich zum Abschätzen für die Machbarkeit, Navigationsstruktur, Usability, User Experience und besonders auch dem Storybook der Webseite.
Storybook ist das Stichwort für HTML5 und CSS3. Wie man an unserer neuen Webseite erkennen kann, sind die Entwürfe nicht nur 2Dimensional, sondern hier steckt auch ein richtiges Storykonzept dahinter. „Wenn man hier klickt, bewegt sich der Ball nach links und man scrollt um eine halbe Bildschirmbreite nach unten..“ Somit stecken wir in einer richtigen Timeline, wo klassische Wireframes nicht mehr ausreichen, denn hier kann man lediglich die statischen Screendesigns gut darstellen.
Wir haben bisher gerne auf handgezeichnete Scribbles gesetzt, bzw. ich verwende gerne OmniGraffle für die Entwürfe. Da jetzt aber mit HTML5 und CSS3 auch Bewegung ins Spiel kommt werden zusätzlich neue Formen und Tools benötigt, um in der Planungsphase möglichst viele Eckpunkte abstecken zu können und dem Screendesigner eine Vorstellung des Ganzen vorlegen zu bieten. Bei Responsive Webdesign ist es noch etwas diffiziler, da hier verschiedene Verhaltensweisen bei unterschiedlichen Auflösungen beachtet werden müssen.
HTML-Prototyping
Um hier etwas genauer arbeiten zu können, bzw. die Animationen darzustellen, wird immer mehr über HTML-Prototyping gesprochen. HTML5 bietet hier gute Möglichkeiten, denn es gibt als Basis die Strukturelemente (header, nan, section, article, aside und footer) mit denen man ein gutes Grid erstellen kann. Mit Outlines und Positionierung ist eine schnelle Webseitengrundlage gebastelt. Näheres gibt es in diesem Artikel (webdesigner depot). Der große Nachteil ist, man muss HTML beherrschen und es benötigt wesentlich mehr Zeit. Das kreative Brainstorming-Element fehlt hier auch sehr. Ebenso fehlen mir hier besonders die Elemente User Experience, das Look & Feel. Ich würde es eher für Applikationen oder Mobile Websites verwenden. Dennoch ist HTML Prototyping sicher einen Blick in die Zukunft wert.
Wireframes mit Keynote
Eine unserer Präsentationsgeheimwaffen eignet sich auch super für Designentwürfe. Liegt einmal das Handscribble vor, müssen die Animationen beschrieben werden. Keynote eignet sich da besonders dazu, denn hier können aufklappende Navigationen oder bewegende Elemente einfach erstellt werden. In Keynote können Bewegungspfade gezeichnet werden und aber auch die Geschwindigkeit der Animation justiert werden. Besonders gute Erfahrung haben wir gemacht, 3-4 verschiedenen Entwurfsfarben zu verwenden, die eine bestimmte Emotion oder Handlungsweise darstellen. Auf die Handzeichnung verzichten wir in diesem Fall trotzdem nicht, aber der Screendesigner bekommt eine gute Vorstellung von dem Storybook und den Handlungsmöglichkeiten.
Neue Tools
Eine neue und 3. Variante sind Wireframe-Tools, die um Verhaltensweisen und Animationen erweitert werden. Ein bisschen erfüllt das schon Lumzy, hier können auch sensitive Hilfetexte bei Mouse-Over im Entwurf angelegt werden, das war es aber auch schon. Animationen oder eine Timeline fehlt hier leider. Somit fehlen hier noch gute Tools, vielleicht nehmen wir uns dem Thema an, das würde uns sehr interessieren.
Was meint ihr, wie geht es weiter mit Wireframes, benützt ihr spezielle Tools oder setzt ihr weiterhin auf 2D-Scribbles?
