Die Kunst, einen groben Wireframe zu erstellen

Eigentlich kann ein Blogbeitrag über Informationsarchitektur auch mal nicht schaden, wenn ich schon in der Liste “IA-Blogs” von Stefan Freimark auftauche. Vielen Dank übrigens, ich fühle mich geehrt! 🙂

Also … letztens sagte ich zu meinem Kollegen, dass ich mal einen groben Wireframe für eine der Seiten erstellen würde, damit wir uns über den generellen Aufbau abstimmen können.

Kleiner Exkurs: Ein Wireframe ist eine Skizze von einer einzelnen Seite einer Website, wie wir (Informationsarchitekten oder auch Konzepter) sie in Programmen wie Visio, Axure oder webbasierten Wireframe-Tools wie Pidoco erstellen. Diese Skizzen dienen uns in der Konzept-Phase für die Abstimmung mit dem Kunden und letztendlich wird auf Basis von Wireframes das Design und die Programmierung erstellt. So ein Wireframe enthält alle Elemente wie Navigation, Inhalte und Funktionalitäten einer Seite, allerdings nur sehr rudimentär dargestellt. Hübsch werden die Dinger erst, wenn ein Designer dran war. 😉

So, nun hatte ich also angekündigt, einen groben Wireframe zu erstellen. Was dabei rauskam, sah so ähnlich aus wie das hier:

wireframe57.jpg

Was man da sieht, hat zwar jetzt keinerlei inhaltlichen Sinn, da ich zur Demonstration schnell mal einen Wireframe aus alten Modulen zusammen geklickt und entfremdet habe. Kann ja nix Echtes aus einem Projekt zeigen. 😉 Was man aber dennoch deutlich erkennen kann … das Ding war alles andere als grob … es war bis ins Detail ausdefiniert. Zwar nicht funktional beschrieben, aber dennoch sehr feinteilig.

Mein Kollege war daraufhin so nett, mich auszulachen. 😉 “Grob ist das aber nicht, du hast ja noch nicht mal einen Platzhalter für die Produkte verwendet, sondern sogar echte Daten von der Website kopiert und eingefügt!” meinte er. 😉

Bin ich nicht in der Lage, mit Visio einen groben Wireframe zu erstellen? Das hab ich mich einmal mehr gefragt … anscheinend wirklich nicht. 😉 Ich verfalle wohl viel zu schnell in die Ausarbeitung von Details, die für nen schnellen Überblick erstmal gar nicht wichtig sind.

Allerdings habe ich vor kurzem angefangen, Wireframes mit der Hand anzuscribbeln. Hab ich früher nie gemacht, aber nach ein paar Vorträgen über Paper-Prototyping beim Barcamp in Berlin und bei der Web2.0Expo hab ichs dann doch mal ausprobiert.

Also, Visio verleitet zum spielen (mich zumindest). Will ich mal einen schnellen Überblick über mehrere Seiten haben, vor allem wenn sie stark voneinander abhängen, bzw. man sich überlegen muss, welches Modul auf welcher Seite am meisten Sinn macht, dann ist das Skizzieren auf Papier echt von Vorteil.

Für nen komplexen Wireframe kann man im ersten Entwurf schon mal nen ganzen Tag brauchen. Und wenn man dann weitere Wireframes erstellt, und neue Ideen für weitere Module bekommt, kann man das Ding grad nochmal neu zusammen puzzeln.

Geht man aber hin und malt das Ding auf Papier, dann lässt man all die Feinheiten weg, die so viel Zeit kosten. Und man kann ein Modul auch nicht stundenlang von links nach rechts schieben, von hochkant auf quer umarbeiten, von hellgrau nach dunkelgrau einfärben oder was einem sonst noch so einfällt. Man wird auch nicht von Seitenrastern oder vom Bildschirmformat eingeengt. 😉 Wichtig ist erstmal, dass alle notwendigen Module vorhanden sind. Alles weitere kann man dann später am Rechner machen. Und selbst wenn sich beispielsweise ein Modul doch für eine andere Seite besser eignet, kann man es auch immer noch ausschneiden und woanders aufkleben. Und diese Skizzen reichen völlig aus, um mit Anderen das Prinzip durchzusprechen, das man sich augedacht hat.

So sehen sie aus, meine handsigniertengemalten Wireframes:

wireframe-scribbles_kl.jpg

Warum hab ich das nicht schon früher so gemacht?

15 Antworten auf „Die Kunst, einen groben Wireframe zu erstellen“

  1. Ich fechte auch immer einen inneren Kampf mit mir aus, wie ich so einen Wireframe am besten skizziere. Manchmal nehme ich Papier, dann wieder eine digitale Variante. Oft führt das eine auch zum anderen.

    Was ich auch schon ausprobiert habe, ist Wireframes in Powerpoint zu skizzieren. Fand ich gar nicht so schlecht. Man wird nicht so zum ins Detail gehen verleitet, wie du es z.B. bei Visio beschrieben hast. Und doch kann man schneller mal was ändern und mehr rum experimentieren. Auch kann man bei ajaxmäßigen Ansichtenwechseln und auch bei Verlinkungen zu weiterführenden Seiten, schneller aufzeigen, wie man sich was gedacht hat.

    Ein weiteres Problem tritt auf, wenn so ein Wireframe auf die Grafiker trifft. Einige, vor allem die etwas unerfahrenen, verfangen sich dann schon sehr in der Struktur des Wireframes. Andere lehnen so ein Wireframe als zu sehr in der eigenen Kreativität einschränkend ab. Da musste ich – als Kompromiss – schon auf eine Art Mindmap-Darstellung ausweichen. Funktionierte auch irgendwie …

    Man hat es schon nicht schwer 😉

  2. ohcool
    was ist die basis für ein solch detailliertes Wireframe?
    ich meine damit.. eine bestehende fertige Website, die nun verändert/verbessert/gerelauncht werden soll?
    oder ein pflichtenheft in textform?

  3. Haha, das mit den zu genauen Wireframes ist ja auch so ein bisschen Berufskrankheit. Wir tun uns halt schwer, Details auszublenden, wir alten Korinthenkacker.
    Ich arbeite hier allerdings auch häufig mit Stift und Papier für den ersten Entwurf. Auch gerne mal beim Kunden, um dessen Vorstellung von der Webseite zu erfassen, bevor man loslegt.

  4. @zellmi grad das ajax-gedöns bringt mich auch regelmäßig zur verzweiflung. das passt einfach nicht in die schönen wireframes rein … mittlerweile mach ich in dem fall so ne mischung aus process-flow und wireframe. hier die jungs nennen das dann sogar wireflow 😉 http://www.uxmatters.com/MT/archives/000251.php

    @kai als grundlage dient in der regel ein basiskonzept, und das kann man unterschiedlich ausgestalten. ich mach meist ne mischung aus textlicher beschreibung der site-bereiche und einer feature-liste. in der feature-list sind schon mal alle funktionalitäten genannt, die die website beinhalten soll. und mit dem wireframe zeigt man dann, wie die funktion auf der website dann aussieht bzw. über mehrere seiten (oder auch modul-zustände) abläuft.

  5. Wenn man seine Skizzen auch noch in einem hübschen Buch sammelt (ich sag nur “Moleskine”) macht das ganze doppelt Spaß.

    Ich hab viele Jahre Ideen für Flash Spiele anskizziert und gesammelt, als ich noch in Flash entwickelt habe. Heute ist das Buch wie ein geheimer Schatz für mich – voller unverwirklichter Ideen und Träume 🙂 …

  6. Ich verwende für den ersten Entwurf meist auch immer Papier. Danach geht es dann aber immer digital weiter, weil man da dann doch einfach mal Sachen kopieren und verschieben kann. Bei meinen digitalen Wireframes sind dann aber noch ganz viele Anmerkungen dran, da diese dann ausschließlich so von den Entwicklern verwendet werden.

  7. Mit Stift und Papier ist es doch auch viel sinnlicher 😉
    Gute Ideen brauchen (erstmal) keine Hard- und Software.

  8. Hallo Pauline,
    ich bin durch Zufall mal wieder auf Deinem Blog gelandet und habe mich prompt verloren… mein Arbeitgeber wird es Dir danken 😉
    Aber hier… ein guter Beitrag!
    Und Du wirst lachen. Paper prototyping, paper ideen- scribbles, paper- user flows und paper- conceptual models bilden momentan meine hauptsächliche Beschäftigung. Zu Beginn eines Projektes sind so Dinge m.E. unbedingt notwendig – quick and dirty eben. Und auch in Präsentationen machen sich solche Dinge (eingescannt oder mit der Digicam fotografiert) sehr gut. Dann haben beteiligte weniger Hemmungen frei über die Inhalte etc. zu diskutieren, da ja alles noch so… unfertig ist!

    Gruß, Stephan

  9. hey stephan 🙂 schön von dir zu hören! im prinzip waren deine scribbles bei der help-section (du erinnerst dich;) auch sowas wie ein anreiz für mich, mal öfters zum stift zu greifen! 🙂

  10. Papier ist gut. Balsamiq Mockups für Wireframes ist besser. Probier mal. Für echte Blogger auch kostenlos zu kriegen.

  11. Hab vor kurzem nen Artikel in der T3N zum Thema gelesen. Da wurden unter anderem Alternativen zu Axure vorgestellt.

    Wirklich spannend fand ich ebenfalls Balsamiq (http://www.balsamiq.com/); damit lassen sich Wireframes und Oberflächen sehr schnell und einfach basteln. Die Lösung ist auf Flash-Basis und bedarf daher keiner Installation.

    Eine Übersicht weiterer Lösungen gibt es hier:
    http://www.adaptivepath.com/blog/2009/09/16/rapid-prototyping-tools-revisited/

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert