Wireframes mit der freien Software Denim erstellen

„Früher“ war die Erstellung einer Webseite oder eines Software-Frontends sehr einfach gestrickt. Man fragte den Kunden nach den Farben, malte ein bisschen in Photoshop rum, erhielt ein feines Klicki-Bunti und der Kunde war (meistens) zufrieden. Nun, die Zeiten ändern sich! Klicki-Bunti ist eigentlich schon lange vorbei und der neue King ist die Usability.

Dabei handelt man sich einigermaßen schwerwiegende Probleme ein, die zum Beispiel damit anfangen, ob eine Navigation links, rechts oben oder unten sein soll. Kunden können da ebenso innovativ sein, wie die Nutzer des späteren Erzeugnisses. Hinzu kommt dann noch die Klick-Strategie, also die Navigation innerhalb der Seite. Bei dieser können direkt mehrere Ziele verfolgt werden, zum Beispiel das, möglichst schnell zum Ziel zu führen, aber es kann auch ein Ziel sein, einen Besucher möglichst lange auf der Seite zu halten.

Wireframe von Buzzriders (c) http://www.buzzriders.com/

Wie man sieht, ist das alles nicht so einfach, und vor allem: es sind derart grundlegende Entscheidungen, das sie durchaus das Potenzial besitzen ein Design überflüssig zu machen, oder eine bereits getätigte Umsetzung in einem CMS ad absurdum zu führen.

Aus diesem Grund sollte man VOR der Kreativarbeit / der Umsetzung ein vernünftiges Konzept in den Händen halten. Und um ganz sicher zu sein direkt noch ein sogenanntes Wireframe (Mock-up) erstellen. Hierbei wird unterschieden zwischen einem statischen Wireframe und dynamischen. Das statische Wireframe bildet die Elemente einer einzelnen Seite ab (zum Beispiel wo die Navigation sitzt), dynamische Wireframes beinhalten eine beliebige Anzahl statischer Wireframes, die miteinander verknüpft sind, um die Verlinkung innerhalb der Seite darzustellen. Dynamische Wireframes werden oft um eine Sitemap, ein Navigationsbaum oder ein Flussdiagramm ergänzt, um den gesamten Seitenaufbau zu veranschaulichen.

Und nun kommen wir zum eigentlichen Problem: der Erstellung eines Wireframes! In der Regel benutzt man hier: Papier, Bleistift und Radiergummi. Das ist weder schön, noch schnell. Also muss eine entsprechende Software her. Viele benutzen hier Visio, was sich zumindest für mich anhört, wie mit Kanonen auf Spatzen zu schießen. Natürlich gibt es inzwischen auch die eine oder andere kommerzielle Software zur Erstellung von Wireframes.

Ich bin die Tage allerdings auf eine sehr schöne Open Source Lösung gestolpert! Denim erstellt dynamische Wireframes und emuliert dabei das Blatt Papier nebst Bleistift und Radiergummi. Lustigerweise kann man sich seine Wireframes direkt als HTML ausgeben lassen. Hat man einen dynamischen Wireframe erstellt, sorgt die Software direkt für eine automatische Verlinkung! Auch nett ist die direkte Unterstützung eines Tablet PC – ein echter Mehrwert!

Screenshot von Denim
Screenshot von Denim

Für zukünftige Versionen sind Components angekündigt, also wiederverwendbare Elemente für die Wireframes und vor allem Conditionals. Mit diesen können Wireframes erstellt werden, deren Inhalt sich aufgrund des Verhaltens eines Besuchers ändern. Eine sehr schöne Sache, wie ich finde, und vor allem wesentlich netter als Papier & Bleistift!

Wer sich etwas mehr mit diesem Thema beschäftigen will, findet beim Smashing Mag einen exzellenten Artikel mit 35 entsprechenden Ressourcen.

Schreibe einen Kommentar

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