Kein Handwerk ohne Werkzeuge – Teil 2 Wireframing

Posted on Jul 31, 2013 in Werkzeug, Wireframe
Kein Handwerk ohne Werkzeuge – Teil 2 Wireframing

Die ersten Scribbles sind gemacht und abgenickt – jetzt ist es Zeit mit dem Wireframes anzufangen. Auch hier gibt es unzählige Programme und dazu noch Kniffe und Tools, die einem Konzeptioner das Leben erleichtern.
Ich werde die Programme aufzählen, mit denen ich arbeite oder welche ich getestet habe und teile dies ein in:

Fix und schnell ein paar Wireframes
– Wireframe.cc
– Balsamiq
– meine Scribble-Tools aus meinem vorigen Review

und

Wireframing für Fortgeschrittene mit ganz viel Tüddelkram
– HotGloo
– OmniGraffle
– Powerpoint/Keynote
– Axure

 

Fix und schnell ein paar Wireframes

Manche Texter oder Screen-Designer machen selbst immer mal gerne einen Wireframe, um sich Arbeit zu ersparen und schnell eine Idee zu transportieren. Hierfür kann man natürlich auch meine aufgezählten Scribble-Tools nutzen oder zu

Wireframe.cc
wireframecc-1024x417

Simpler als dieses Programm ist nur ein Blatt Papier. Wireframe.cc lässt alles Geschnörkele weg und legt Wert auf klare, nackte Menüführung. Es konzentriert sich auf das Wesentliche: die Struktur. So wird man nicht so schnell von schönen Styleoptionen, Schriftarten und Gedöns davon getragen. Das ist vor allem praktisch, wenn es einfach nur eine schnellschönrichtige Struktur sein soll. Zudem gibt es euch die Möglichkeit direkt Ideen auf „mobile umzumodeln“. Um alles zu teilen, verschickt ihr einfach die URL. Fertig.

+ klar und einfach
+ Mobile als Option
+ Mac und PC
+ umsonst
– man stößt recht schnell an die Grenzen

Das Programm/die Seite ist kostenlos. Natürlich gibt es eine Premium-Version die Multipages, Verlinkungen, PDF/PNG-Export und anderes möglich macht.

 

Balsamiq 

balsamiq1

Diese Adobe-Air-Applikation ist für mich irgendwie nicht Fisch und nicht Fleisch. Balsamiq bietet eine größere Bandbreite an Scribble-Bibliotheken an, jedoch stört mich nach wie vor der „Comic Sans“-Look der Scribbles. Es soll wohl so aussehen wie Zeichnen, aber für mich schauen Balsamiq-Mockups wie Kinder-Kritzel-Wireframes aus. Auch bei Axure kann man die Strichstärke in „gezeichneter“ verändern, aber das macht es dort nicht albern. Aber für schnelle Scribbles ist es dennoch total ok und es gibt einem eine große Auswahl an Möglichkeiten direkt an die Hand.

+ gutsortierte Library
+ Mac + PC
– ComicSans Anmutung
Balsamiq kostet 79$ und es gibt eine 30-Tage-Testversion zum Reinschnuppern. Ist die Version abgelaufen, kann man mit dem Programm weiter scribbeln, aber nicht mehr abspeichern.

 

Wireframing für Fortgeschrittene mit ganz viel Tüddelkram

HotGloo

editor-screenshot-32

Als Hamburger Projekt und recht junges Unternehmen natürlich auch in meiner Auflistung, ist HotGloo das ultimative „Mockup-Tool“. Für mich auch ein spannender Hybrid aus „Basicwireframing auf dem Weg zur Professionalität“.
HotGloo bietet dem User deutlich mehr Möglichkeiten zu basteln und auch *aha* Interaktionen einzubauen. Nicht so weit, wie es Axure treibt, aber auf jeden Fall spannend.
Es ist sehr intuitiv in der Menüführung, man arbeitet direkt online im Browser (flash basierte Applikation, somit Byebye Tablet) und kann so viele Seiten und Unterseiten anlegen und verlinken, wie man mag. Was man da baut sieht echt professionell aus und geht sehr schnell von der Hand.

+ die Libraries sind sehr umfangreich und decken vieles ab
+ selbst gebastelte Master können abgespeichert werden
+ Mac + PC
+ die Seiten können direkt „responsiv“ angelegt werden
+  die Master lassen sich mit der Community teilen und man kann auf diese natürlich auch zugreifen
– Diese Master-Auswahl ist aktuell nur leider noch sehr klein
– auf Dauer ganz schön teuer: selbst die 14 $-Version ist nach 2 Jahren Nutzung teurer als Axure
– flash-basiert

Zusätzlich konzentriert es sich ganz stark auf den „Im Team gemeinsam entwickeln“-Gedanken und bietet zwei Ansichten: Edit und Review, welche man auch an Test-Probanden und Kunden schicken kann.
Es kostet 14$ – 54 $ monatlich, je nach Teamgröße und Nutzungsaufwand.

OmniGraffle

Editing-exported-Wirify-wireframe-in-OmniGraffle

Ich weiß, dass manche Konzeptioner total auf OmniGraffle stehen, daher habe ich mich immer wieder mit dem Programm versucht zu beschäftigen, um diese Faszination zu verstehen. Aber irgendwie habe ich für mich nie so richtig den Zugang zu dem Programm gefunden. Es wirkt auf mich immer noch sehr behäbig, kompliziert und klumpig in der Handhabe. Ich nutze es gerne für Sitemaps und Mindmaps, aber fürs Scribblen ist es nichts meins.
OmniGraffle gibt es nur für den Mac 99,99 $ Standard, 199,99 $ Professional, es gibt auch eine iPad Version, die natürlich extra kostet und es gibt zahlreiche Libraries bei graffletopia, die natürlich auch alle extra kosten.

+ nutzbar für Mac Rechner und iPad
+ große Auswahl an Libraries
+ bietet unendliche Möglichkeiten zu konfigurieren und gestalten
– bietet unendliche Möglichkeiten zu konfigurieren und gestalten, was auch ganz schön nervt
– Oberfläche ist für mich wenig intuitiv
– ganz schön teuer
– nicht verlinkbar
– nur für Mac
– keine Möglichkeit der Interaktion oder Animation
– kann nur als Dokument und nicht als URL o.ä. verschickt werden

Powerpoint/Keynote

Bildschirmfoto 2013-07-31 um 11.48.48

Meine ersten Feinkonzepte habe ich in Word-Dokumenten ausformulieren (hier ist ein Text, hier ist ein Button, blablabla = schrecklich!) müssen, was mich sehr traumatisiert hat. Zudem habe ich schon immer eine Abneigung gegen Microsoft-Programme gehegt, da mir so unzählige Male ein ungesichertes Projekt um die Ohren geflogen ist und mir somit meine Arbeit zerschossen oder nicht gesichert hat, dass ich sie einfach nicht mehr ertrage. Powerpoint ist aus der Hölle. Punkt.
Ich habe früher mal in Powerpoint gescribbelt, da vorige Dokumente darin angelegt waren und ich sonst alles hätte neu in Axure bauen müssen… rückblickend waren das sehr dunkle Arbeitswochen mit wenig innerem Sonnenschein, also an alle MAC-ianer: greift bitte lieber zu Keynote!

Denn: ich bin selbst erstaunt gewesen, aber für einige meiner letzten freien Projekte habe ich der Einfachheit und des Seelenfriedens des Kunden wegen in Keynote gescribbelt und war echt begeistert.
Natürlich ist es nicht mit Axure vergleichbar, aber es gibt so viele gute Library-Quellen (nicht so teuer wie bei OmniGraffle!), dass es nach kurzem Reingefuchse wirklich gut funktioniert hat. Natürlich ist hier auch nix interaktiv oder so, aber es sieht gut aus und es ist natürlich sehr praktisch direkt in die Präsentation reinzuscribbeln.. alles kommt in einen guten Fluß und die Agentur kann hinterher problemlos Änderungen vornehmen.
Zudem ist Keynote eine gute Möglichkeit in einem Workshop mit dem Kunden zusammen „schnell mal“ zu scribblen. Ja, klingt grausam, hilft aber manchmal sehr und erspart Zeit und Diskussionen hinterher.

Ach und Thema Mobile: mit dem Zusatz „MockApp“ ist dies auch ganz einfach.

+ ideal für erste Ideenansätze mit Präse-Blabla drumherum
+ intelligent-intuitives Apple-Programm mit vielen guten Features
+ einfach zu präsentieren und zu verschicken (html, pdf, quicktime etc.)
+ viele Libraries, die nicht zu teuer sind
+ gute, klare Funktionen
– nicht interaktiv/animierend nutzbar (bis auf die Animationseffekte in Keynote)
– nur für Mac

Libraries:
Keynote Kung-Fu
Keynotopia
MockApp

Axure *

axureonmac2

Es läuft alles darauf hinaus und ich mache auch keinen Hehl daraus: Axure ist mein Leib-und-Magenspeisen-Lieblingsprogramm!
Ich könnte jetzt seitenweise darüber schreiben, wieso ich dieses Programm so toll finde, aber ich versuche es kurz zu machen:
+ intelligente Userführung und einfache Werkzeugnutzung
+ alle Elemente können verbunden, interaktiv genutzt und animiert werden
+ selbstgebaute Masters können problemlos wieder genutzt und importiert werden
+ Libraries können selbst angelegt und geteilt werden
+ es gibt eine Vielzahl von Libraries, die teilweise kostenlos, teilweise für kleines Geld verfügbar sind und das Leben unfassbar einfacher machen. Mehr findet ihr hier
+ variable Möglichkeiten das Dokument zu konfigurieren in „gescribbelter Anmutung“, Schriftart etc.
+ Projekt kann bis in die fisseligste Feinkonzeption ausgearbeitet werden
+ Dabei kann man es auch komplett technisch auskommentieren (das macht die Programmierung so glücklich!) und diese zusätzlich als Spezifikationsdokument generieren
+ Natürlich macht Axure auch fantastische Clickdummies
+ hier findet ihr Top-Tutorials
+ und per ax-share könnt ihr eure prototypen/clickdummies online hochladen, teilen und natürlich auch auf Smartphone und Tablet demonstrieren
+ dies macht komplettes Scribbling für Mobile möglich
– man muss sich ein bisschen in das Programm reinfuchsen… ein bisschen nerdige Leidenschaft mitbringen – dann liebt man es!

Alles weitere lernt ihr aus diesem Buch hier

Als ich mit der Online-Konzeption richtig durchgestartet bin, gab es Axure nur für den PC. Da habe ich mir ganz leidenschaftlich schön noch Parallels auf den Mac gezogen um in dem Programm zu arbeiten.. so großartig finde ich es. Und seitdem hat sich noch eine Menge verbessert. Jetzt gibt es Axure natürlich für Mac und PC.
Es kostet in der Grundversion 289$ und Pro 589$ und glaubt mir, es ist sein Geld wirklich wert.
Natürlich gibt es die Möglichkeit es erstmal zu testen… aber wer wirklich mit Konzeption einen guten Schritt weiterkommen will oder ganze Projekte scribbeln und durchdenken will, wird mit diesem Programm glücklich.

Habe ich noch irgendwas vergessen? Übersehen? Ich freue mich auf euer Feedback.

1 Comment

  1. mprove
    6. September 2014

    cf. Interaktionsdesign mit Wireframes http://mprove.de/script/13/fbi/wireframes.html

    Reply

Leave a Reply