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. WordPress › Fehler

    Es gab einen kritischen Fehler auf deiner Website.

    Erfahre mehr über die Problembehandlung in WordPress.