Die ersten Scribbles sind gemacht und abgenickt (Tipps für coole Scribble-Tools findet ihr hier) – jetzt ist es Zeit mit dem Wireframes anzufangen.
Auch hier gibt es natürlich 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
– UX Pin
– Balsamiq

=> Wireframing für Fortgeschrittene mit ganz viel Tüddelkram
– HotGloo
– OmniGraffle
– Powerpoint/Keynote
– Sketch (+ InVision)
– 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.

UX-Pin

UX-Pin Programm wird genauso wie Balsamiq direkt im Webbrowser genutzt und ist auch super einfach aufgebaut.
Der Umfang der Funktionalitäten hat mich echt überrascht, da es unfassbar vielseitig ist. Und mit einem Preis von ab 19$ pro Monat oder einmalig 98 $ ist es auch nicht das teuerste Programm.
Ich finde es ein bisschen unpraktisch das Programm im Webbrowser nutzen zu müssen, da man offline dann wohl nicht darin arbeiten kann. Und ich denke, für einen fortgeschrittenen Konzeptioner wird man mit UX-Pin irgendwann doch an seine Grenzen stoßen. Also bei dem richtig aufwändigen Nerd-Konzept-UX-Stuff. Aber ansonsten ist es ein super solides Programm und eine gute Wahl! Die Test-Version kann man 7-14 Tage umsonst ausprobieren.

+ schlicht und intuitiv
+ Photoshop-Designs Uploads + Sync mit Sketch (siehe weiter unten)
+ Clickdummies können interaktiv animiert werden
+ Responsive Prototyping
+ Clickdummy kann kommentiert werden
+ Libraries können aufgebaut werden und man kann zahlreiche Libraries nutzen
+ Support durch umfangreiche Community

– nur im Webbrowser nutzbar
– kann keine aufwändigen Interationen + Animationen abbilden

 

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 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  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 13$ – 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 immer versucht mich mit dem Programm zu beschäftigen, um diese Faszination zu verstehen. Aber irgendwie habe ich 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
– 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 müssen (hier ist ein Text, hier ist ein Button, blablabla = schrecklich!), 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 der letzten Stunden zerschossen oder nicht gesichert hat, dass ich sie einfach nicht mehr ertrage. Powerpoint ist aus der Hölle. Punkt.
Ich habe natürlich schon immer 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. Es ist machbar aber spaßig ist für mich was anderes.

Keynote dagegen ist was ganz anderes: 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.

+ umsonst für alle Apple-User!
+ 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
+ kann als PPT und PDF exportiert werden
– nicht interaktiv/animierend nutzbar (bis auf die Animationseffekte in Keynote)
– nur für Mac

Libraries:
Envato
Keynotopia
Colorlib

Sketch

Das neueste Trend-Programm welches sehr gehyped wird ist Sketch.

Es ist ein Prototyping-Design-Programm exklusiv für Apple, welches unendliche Möglichkeiten anbieten. Klingt ja schon mal super! Es ist gibt sehr viele Wireframes und Prototypes zum downloaden für Sketch und es wird aktuell in vielen Agenturen und Startups für das digitale Design genutzt. Häh –  Design? Jupp.. das war der Punkt an dem mich dieses Programm leider auch verloren hat. Tatsächlich ist es optimal dafür, mit unterschiedlichsten Tools und Features zu designen.
Und mich als Prototyper und Wireframer überfordern diese Design-Funktionen, wenn ich ehrlich bin. Es ist für mich einfach nicht praktisch wenn ein Programm eigentlich für ein anderes Gewerk optimiert wurde. Dann kann es auf Dauer nicht das beste Prototyping-Tool sein, da es von mir dann zum Prototyping genutzt wird aber es wurde nicht dafür gemacht.
Aber ich will es null schlecht reden – es ist wirklich sehr intelligent aufgebaut und hat riesiges Potential!
Ihr könnt euch als Free-Trail runterladen und für 99$ kaufen.

+ sehr vielseitiges Programm
+ intuitiv zu bedienen
+ es gibt unzählige Libraries und Tutorials zum herunterladen

– für mich ist es ein Design-Tool
– es ist nur für den Mac erhältlich
– es können keine Animationen eingefügt werden

Einschub: InVision

InVision ist als solches kein Prototyping-Programm aber es ist dennoch aus der Welt des digitalen Designs nicht mehr wegzudenken. Mit InVision könnt ihr jedes Scribble, Wireframe oder eben auch fertiges Design animieren und verlinken. Und verschicken könnt ihr euren Prototypen dann natürlich auch problemlos.

Gerade mit Sketch und Photoshop ist es super einfach zu nutzen (es gibt extra Plugins) und ihr bekommt auch top Tutorials präsentiert, die den Einstieg in die Welt der Animationen total einfach machen. Ihr könnt im Team darauf arbeiten, Project-Management nebenbei nutzen, kommentieren.. wirklich ein cooles Tool!

Den ersten Prototypen könnt ihr noch für lau bauen, dann startet ihr mit monatlich 13$ aufwärts um mehr Projekte an den Start zu bekommen. Ich finde es etwas schade, dass es keinen „einmal bezahlen, für immer nutzen“-Preis gibt, aber klar, die wollen eben ihr Geld damit verdienen. 😉

 

Axure *

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

Zudem habe ich in den letzten Jahren einige Fortbildungen bei Eparo hier in Hamburg gemacht. Die kann ich euch echt empfehlen!

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 auf einer PC-Oberfläche zu arbeiten.. so großartig fand ich es schon damals. Und seitdem hat sich unfassbar verbessert. Das Team arbeitet ständig an echt coolen Updates und es lohnt sich wirklich auch als Feedback neue Funktionen anzuregen und vorzuschlagen! Axure ist eines der wenigen Programme, welches sich in den Jahren unglaublich verbessert hat!

Ihr könnt Axure in der Pro-Version pro Monat für 29$ oder einmalig für 495 $ kaufen. Natürlich gibt es auch Enterprise- und Team-Preise.
Ihr könnt Axure 30 Tage für lau testen! Da kann man tatsächlich sehr gut schauen ob dieses Programm etwas für einen ist und dann doch ein bisschen zu nerdy unterwegs ist.
Meine Meinung ist – ihr habt es ja wohl schon mitbekommen: wer wirklich mit Konzeption einen guten Schritt weiterkommen will, ganze Projekte scribbeln, hochwertig wireframen und durchdenken und dabei niemals eingeschränkt werden will, wird mit diesem Programm glücklich.

Habe ich noch irgendwas vergessen? Übersehen? Gibt es ein neues, heißes Tool? Ich freue mich auf euer Feedback.

Leave a Reply