Die Kunst der Wireframes! Probleme und Lösungsvorschläge!

  • von Lennart Prange

thumb Eigentlich wollte ich diesen Beitrag nicht veröffentlichen und den Entwurf verschimmeln lassen. Da momentan aber einige Beiträge über Wireframes im Umlauf sind, muss ich doch noch mal meine Meinung dazu schreiben.

Ich schreibe hin und wieder mal was. Das solltet ihr wissen. Für fast jeden Blogbeitrag erstelle ich eine Outline. Das ist ein lockeres Gerüst des Beitrages, welches mir die einzelnen Abschnitte vorgibt. Nach diesen Outlines schreibe ich dann meine Beiträge. Das ist eine sehr effektive Sache, weil ich beim Schreiben bereits eine vernünftige Grundlage habe. Mit den Outlines bestimme ich praktisch die Informationsstruktur des Beitrages.

Was Outlines für meine Blogbeiträge sind sollten Wireframes für meine Designs sein. Blöd, dass sie meine Erwartungen nicht erfüllen.

Kommentare und Retweets (natürlich auch Social Bookmarks 😉 und Backlinks und alles, was es sonst noch so an positiven Dingen gibt) würden mich sehr freuen. Viel Spaß mit dem Beitrag.

Klassische Wireframes und ihre Probleme

Wireframes sind dazu da, das Design voraus zu planen und die Position der einzelnen Elemente festzulegen. Das folgende Beispiele zeigt, wie viele Wireframes aussehen, obwohl normalerweise noch mehr Text enthalten ist. Überschriften usw. habe ich weggelassen.

classic

Wireframes sind keine lockere Outline sondern eine Skizze der Website

Wireframes sind häufig sehr detailreich. Sie sind keine lockere Outline, die noch viel Platz für Kreativität lässt. Vielmehr fällen Wireframes meistens bereits Entscheidungen über die Gestaltung und das Layout der Website. Das sind Entscheidungen, die meine Kreativität während der Gestaltungsphase extrem einschränken. Diese Gestaltungsvorgaben und Layoutvorgaben sind meiner Meinung nach nicht der Sinn dieses Planungsabschnittes. Für mich geht es darum, die Informationen zu gliedern und zu gewichten. Ich will ein wenig ausprobieren können und die Positionen der Elemente nach belieben verschieben, damit ich sehen kann, wie sie am besten zusammenpassen. Dabei will ich aber meistens nicht festlegen, wo und wie Bilder eingesetzt werden, wo eine Liste hinkommt und wo eventuell ein interessantes grafisches Element ist.

Wireframes sind zeitintensiv

Diese ganzen Sachen, die ich nicht haben will, kosten extrem viel Zeit. Klar, jetzt habe ich die Vorgaben und kann vielleicht später schneller arbeiten, aber wenn ich mehrere Entwürfe machen will, muss ich für jeden Entwurf ein neuen Wireframe erstellen. Das raubt Zeit und es gibt bessere Lösungen.

Mögliche Lösungen

Die Lösung liegt jetzt nahe. Die Wireframes sind zu detailreich, also vereinfacht man sie. Das kann man zum Beispiel so machen wie “From the Couch“. Sie haben das Prinzip der Wireframes mehr als vereinfacht und sortieren einfach nur noch die einzelnen Elemente mit der Hilfe von Zahlen. Das ist meiner Meinung nach eine recht gute Variante. Allerdings kann die Anordnung der einzelnen Elemente und ihre Proportionen nicht geplant werden. Als wirkliche Vorlage und Grundlage für das spätere Design ist das Ganze deshalb etwas unbrauchbar. Man kann die Methode sehr gut für Prewireframes, also ein Wireframe vor dem eigentlichen Wireframe, verwenden, um die Anordnung der Elemente festzulegen. Dieser Schritt ist für mich aber etwas zu nervig.

Eine zweite Möglichkeit ist das “Grey Box Model”. Man erstellt für jedes Element eine graue Box und sortiert diese dann nach Belieben.

BOXES

Flexibilität im Vergleich

Vergleicht man nun die Flexibilität der beiden verschiedenen Sorten von Wireframes, zeigt mir das Ergebnis, dass mir klassische Wireframes im Gegensatz zum Grey Box Model kaum Freiraum lassen. Arbeite ich mit den normale Wireframes habe ich jetzt extrem fixe Gestaltungsvorgaben. Während der Gestaltungsphase habe ich keine andere Möglichkeit, als diese in die Tat umzusetzen. Klar, ein wenig Raum für Kreativität besteht noch. Ich könnte zum Beispiel verschiedene Farben benutzen.

Die wenigen Möglichkeiten sind aber nichts im Vergleich zu den Freiheiten, die mir das Grey Box Model lässt. Überlegt mal, wie viele verschiedene Gestaltungsmöglichkeiten ich noch habe, wenn man sich die Boxen anschaut. Ich habe nur den Aufbau der Elemente bestimmt und könnte dem Kunden nur basierend auf den Boxen mehrere Entwürfe vorlegen.

Fazit

Da ich mir bei den Boxen keine Gedanken bezüglich der Gestaltung mache, bin ich um einiges schneller. Das ist Zeit, die man später gut gebrauchen kann. Außerdem konzentriere ich mich nur auf eine Sache: die Organisation des Inhalts. Da man immer effektiver ist, wenn man nur eine Sache tut, kann man hier von einem weiteren Vorteil sprechen.

Letztlich muss jeder für sich entscheiden, mit welcher Methode er am besten klar kommt. Ein Versuch sind die Boxen aber wert, falls ihr noch nicht damit arbeitet. Eigentlich sind Wireframes ja auch nur dafür gedacht, Inhalte zu organisieren und in Beziehung zueinander zustellen. Gestaltungsvorgaben sollten durch sie eigentlich nicht gemacht werden.

Da viele mit mehreren Entwürfen arbeiten, werden Boxen um einiges lukrativer. Auf der Grundlage der grauen Boxen kann man nämlich total verschiedene Entwürfe erstellen. Auch wenn die Organisation des Inhalts bei jedem gleich ist, kann sich die Gestaltung doch deutlich unterscheiden.

12 Kommentare

  1. tobi
    19. Juni 2009 um 16:38 Uhr

    guter Beitrag

    ich würde auf jeden Fall das “grey box model” vorziehen, weil es bei dieser Variante das Design klar vom Layout trennt… es kommt einfach immer darauf an, von welchem Punkt der Kunde ansetzt… grundsätzlich sollte man dem Kunde immer einen Layout-Entwurf vor dem Design-Entwurf vorlegen 😉

  2. Björn
    19. Juni 2009 um 18:25 Uhr

    Die Outline von Artikeln als Vergleich finde ich ganz gut. Aber auch die ist meistens nicht starr und wird verschoben. Ähnlich dem Grey Box Model. Eine Abwandlung davon haben wir auch schon mal benutzt und gute Erfahrungen damit gesammelt.

    Es gab als Zwischenschritt sogar einen HTML/CSS-Prototypen mit verschiedenen Unterseiten, abgeleitet aus dem Boxenmodell. Das im Rahmen eines Intranetprojekts, wo die Dinge oft sehr komplex sind.

    Es gibt aber noch viele Varianten mehr bis hin zu Wireflows. Gute Artikel zum Thema liefert z.B. das Wireframes Magazine: http://wireframes.linowski.ca/

    • Lennart Prange
      19. Juni 2009 um 18:28 Uhr

      Danke für den Link. Interessant. Natürlich sind meine Outlines variabel und mehr eine Hilfe als ein starres Gerüst.

  3. Anne-Kathrin
    19. Juni 2009 um 19:00 Uhr

    Schau dich mal ein bisschen um, was es an Software gibt. Ich steh Wireframes auch etwas kritisch gegenüber, weil ich nicht sicher bin, in wie weit Kunden damit überhaupt was anfangen können. Es gibt aber ja durchaus die Möglichkeit, den Wireframe (als funktionales Konzept) schon etwas mehr mit “Leben” und Interaktion zu füllen- eben mit einer passenden Software. Und dann sieht es evtl. mit dem Mehrwert wieder anders aus.
    Etwas widersprechen möchte ich dir bezüglich der “lockeren Outline” – wobei ich nicht recht weiß, was du damit meinst. Ich stelle nur fest: die Definition “Wireframe” ist eigentlich recht großzügig ausgelegt. Bei Flickr beispielsweise gibt es viele (warum auch immer) und schaut man sich die so an, dann ist das gelegentlich nicht mehr und nicht weniger als eine Skizze.
    Wireframe also für mich: definier es wie du willst und in welchem Rahmen du es brauchst 😉 ???

    In jedem Projekt wird es irgendwann also eine wie auch immer geartete Form von Wireframe geben. Die Frage ist, wie viel Zeit man investieren sollte, um per Hand, per Graphikprogramm oder per Wireframing Tool daran zu basteln. Eine klare Kosten- Nutzen Rechnung, meines Erachtens und damit auch projektabhängig.

  4. nastorseriessix
    20. Juni 2009 um 00:08 Uhr

    Hm ich würde eher mit dem “grauen Box” Modell arbeiten und zusätzlich noch mit verschiedenen Vorlagemasken arbeiten, einfach um noch mehr Flexibilität zu haben.

  5. robertfork
    20. Juni 2009 um 08:14 Uhr

    hab mich damit jetzt zwar noch nicht so beschäftigt, aber ich finde wireframes eigentlich nicht schlecht. Das GrayBox Model sieht zwar auch gut aus, aber das größte Problem beim Design kann manchmal sein, dass man zu viel Freiraum hat. Deswegen fände ich ein Wireframe, dass natürlich dann gut durchdacht etc. sein muss, schon nicht schlecht. Ich habe meine Vorgabe und bin wesentlich schneller damit fertig die umzusetzen, wenn ich während der Erstellung des Designs bzw. Codings noch die Freiheit habe zu sagen “hm, vielleicht doch eher da hin, oder doch da? nein vielleicht auch da!” das kann manchmal extrem viel zeit schlucken

  6. Patrick Offczorz
    20. Juni 2009 um 13:25 Uhr

    Hallöle 🙂

    also ich nutze nach wie vor Papier und Bleistift für das grobe Layout. Danach geht das ganze ins Screendesign zu Photoshop und wird verfeinert. Danach kommen die Details…..

    Klar dauert das ein wenig. aber man erstellt ja nicht jeden Tag eine Webseite für einen Kunden.

  7. Tobias
    2. Juli 2009 um 12:17 Uhr

    Den Namen “Grey Box Model” kannte ich so nicht und hab ich auch nicht bei Google so gefunden. Greybox war da eher was anderes. Und Box-Model, naja ist halt CSS.

    • Lennart Prange
      2. Juli 2009 um 13:39 Uhr

      Dann versuch es mal mit grey box method

  8. Tobias
    2. Juli 2009 um 19:14 Uhr

    Ah ja. So macht es mehr Sinn. Methode. Das Model ist ja vorgegeben.

  9. Webdesign Saarland
    4. Juli 2009 um 16:47 Uhr

    Wireframes sind das absolute must-have zu Beginn eines Projektes. Eine idealere Schnittstelle zwischen Designer, Programmierer und Kunde fällt mir nicht ein.

    Deshalb würde ich das auch jedem an Herz legen.

Trackbacks/Pingbacks