Wireframes der Zukunft
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?
6 Reaktionen
Mitreden
Ich schwöre auf http://balsamiq.com/products/mockups
Damit lassen sich leicht “Lo-Fi” Mockups erstellen, wodurch sich verfrühte Diskussionen vermeiden lassen, wie “Der Button muss grüner werden” usw.
Der nächste Schritt ist dann meist ein HTML-Prototyp.
Unser konzeptionelles Denken muss sich mit Sicherheit weiterentwickeln. Aktuell setzen wir noch auf die guten handgemachten Skizzen als Ausgangsbasis. Danach erstellen wir dann Wireframes, vorzugsweise mit Axure. Um im Anschluss bei Bedarf schnell auch Clickdummies für den Test gegen Usecases und Usability-Tests erstellen zu können. Das reicht noch aus. Tortzdem müssen wir im Hinterkopf immer öfter auch mehrdimensional weiterdenken.
Ich denke aber mal, dass uns die guten alten Skizzen noch sehr lange erhalten bleiben. Als universelles und schnelles Tool für den Ansatz.
Ich denke die Entwurfs- und Wireframing-Phase eines Designs ist eine sehr individuelle und kreative Tätigkeit. Hier wird jeder eine unterschiedliche Herangehensweise pflegen und das ist auch gut so. So toll einige Tools auch sind, ich kann mich nicht einfach unterordnen. Das Tool muss genau in meinen Prozess passen sonst macht es mehr Arbeit als Nutzen.
Ich stimme Björn zu, dass die Skizze auf Papier das schnellste und vielseitigste Tool bleiben wird.
Nein, wie für das Wireframing im Allgemeinen haben wir kein Patentrezept. Seit wir Mockup benutzen hat sich Zeichenprozess schon sehr beschleunigt und es besteht durch die Machart wenig Gefahr, dass die Kunden das Wireframe mit einem Layout verwechseln. Wie zeichnen entweder alle Zustände einer Animation beispielhaft, wie auch schon beim Rollover auf einer Navigation und/oder benutzen Notizen im Wireframe um die Animation verbal zu beschreiben. Es sind ja nicht nur die Animationen, die in den statischen Wireframes Probleme machen. Wie skaliert die Seite bei unterschiedlich großen Browserfenstern, wie scrollen Seitenelemente zueinander, welche Bereiche sind klickbar? …
Ich bleibe auch bei der guten Skizze mit Bleistift und Papier. Das hat meiner Meinung nach immer noch Vorteile gegenüber den vorhandenen Tools:
- Skizzen sind schneller und können auch zusammen mit dem Kunden erstellt werden.
- Man schränkt sich nicht schon am Anfang des Prozesses in den Möglichkeiten ein (fehlende Elemente in Mockup-Tools etc.).
- Es kann schnell etwas an den Rand gekritzelt werden (kurze Beschreibungstexte), was bei Mockup-Tools oft so wirkt, als gehörten diese zum Wireframe.
Prototyping wird meiner Meinung erst dann interessant, wenn es sich um sehr komplexe Projekte handelt. Hier könnten allerdings Tools wie z.B. Thinkin’ Tags von Dirk Jesse eine Innovation darstellen, wenn man den Prototyp dann auch direkt zu einem Template weiterentwickeln kann.
Thinkin’ Tags: http://www.highresolution.info/weblog/entry/rapid_prototyping_live_im_browser-testpiloten_gesucht/
HTML5-Prototyping sehe ich als zu ineffizient an.
Wenn ich für ein Projekt die nötige Zeit habe, greife ich gern auf Bleistift und Papier zurück. Für Arbeitsprozesse in einem Team, wo Konzeption, Design und Programmierung aufeinander folgen, ist ein Wireframe meiner Meinung nach wesentlich effektiver.