Wireframing-Tools – so viel will ich doch gar nicht …

Wireframes. Machen wir alle. Irgendwie. Immer mal wieder. Vornehmlich sind sie natürlich das alltägliche Werkzeug von UX’lern. Aber auch viele andere, an Softwareentwicklung beteiligte Personen nutzen sie. Gerne als kurze Skizze auf Papier, um im Gespräch einen Sachverhalt zu erläutern. Oder in irgendeiner Form schnell und rough digital erstellt und anschließend per Mail oder Skype verschickt, um z.B. den Kunden während eines Telefonats ein Problem besser verständlich machen zu können. Oder mit etwas mehr Muße erstellt (und damit auch über den Gesprächskontext hinaus noch verständlich) und benutzbar, um im Termin mit dem Kunden über die detaillierte Umsetzung eines Features zu sprechen. Oder, oder, oder …

Was ich mir wünsche

Wenn man Wireframes produzieren möchte, die langfristig verständlich und wertvoll sind, braucht man dafür meist ein geeignetes, digitales Tool, mit dem man sie nicht nur erstellen, sondern auch nachträglich editieren und exportieren kann. Nur so lässt es sich mit den produzierten Wireframes kontinuierlich arbeiten und man kann sie als Kommunikationsmittel nutzen. 

Kostenpflichtige Tools

Balsamiq_Mockups_Web_Demo

Die wohl bekannteste Wireframe-Software – Balsamiq – kann das. Kostet aber auch. Nicht sehr viel, es gibt auch monatliche Miet-Modelle, eine Onlineversion, usw. Mit Balsamiq bekommt man Wireframes, die optisch genau so aussehen, wie es der Kunde erwartet. Gescribbelt. Wireframig.

Lucidchart_Web_Demo

Mit Lucidchart gibt es eine Alternative zu Balsamiq. Ebenfalls kostenpflichtig. Aber gerade die zur Verfügung stehenden Mobile-Elemente sind reichhaltiger als bei Balsamiq, und auch sonst steht Lucidchart Balsamiq in nicht viel nach. Nur sehen Lucidchart-Wireframes leider sehr geradlinig und nicht so schön gescribbelt aus, wie die mit Balsamiq erstellten. Des weiteren ist Lucidchart kein reines Wireframing-Tool. Man kann damit auch UML-Diagramme, Serverarchitekturen und was weiß ich nicht alles skizzieren. Benötigt man also nicht nur ein Tool um Wireframes zu erstellen, sondern auch um eine Vielfalt anderer Strukturskizzen anzufertigen, kann sich eine Lucidchart-Lizenz durchaus lohnen.

Aber es muss doch ein kostenloses Tool geben, mit dem man eben mal schnell etwas skizzieren, darüber sprechen und es modifizieren kann?!

Webydo

Kürzlich bin ich über Webydo gestolpert. Eigentlich ist Webydo ein (bisher?) kostenfreies Tool, mit dem Designer ihre Ideen online über ein GUI zu einer interaktiven Website zusammenbauen können. Webydo produziert auf Basis des Designs dann den entsprechenden HTML-Code und der Designer erhält einen funktionsfähigen Klickdummy.

Mir kam allerdings direkt die Idee, Webydo als Wireframing-Tool zu „missbrauchen“. Das erste Herumspielen hat sich ziemlich gut angefühlt, die angelegten Seiten (man muss sich zuvor anmelden) lassen sich speichern und nachträglich editieren. Sobald man eine mit Webydo erstellte Seite „published“ ist sie über einen definierten URL online verfügbar und kann mit Kollegen/Kunden/whomever geshared werden. Es ist sogar möglich, einen Passwortschutz einzurichten, so dass wirklich nur ein ausgewählter Kreis auf die Seite Zugriff erhält.

Webydo_Mobile

Neben der „normalen“ Desktop-Ansicht der Seite/des Wireframes kann die mobile Variante (beta) für Inhalte bearbeitet/festgelegt werden. Hier ist wie ich finde die geänderte Anordnung der Werkzeuge wirklich gut gelöst. Eine Tablet-Variante ist bereits vorgesehen, aber noch nicht verfügbar. Das produzierte HTML kann man aber, so weit ich gesehen habe, leider nicht direkt bearbeiten … Und vermutlich sehen die mit Webydo produzierten Seiten sehr schnell nach „fertiger“ Website/Gestaltung aus, was die Kommunikation sehr schnell von der konzeptionellen Ebene weg auf eine gestalterische führen kann. Und das möchte man im Wireframing-Kontext aber ja genau vermeiden.

Und etwas ganz anderes?

Neben diesen ganzen „klassischen“ Drag’n’Drop-Wireframing-Tools hatte ich mir schon mal einen Wireframing-Webfont gewünscht. So wie Font-Awesome, nur mit Wireframing-Elementen eben. Diesbezüglich habe ich aber leider nichts Brauchbares gefunden :( Wenn ich ganz ehrlich bin, macht ein Wireframing-Font auch nur bedingt Sinn, da die „Buchstaben“ eines Fonts ja ein festes Seitenverhältnis haben, was für Wireframing nicht wirklich funktioniert. Aber wünschen darf man sich ja mal was …

Kurz

Ich habe mein Laien-Wireframing-Tool der Wahl noch nicht gefunden. Bei allen mir bekannten Alternativen muss ich Abstriche machen. Sei es, weil die Tools kostenpflichtig sind (bei nur gelegentlicher Nutzung lohnt sich der Erwerb einer Lizenz nicht wirklich), weil das Ergebnis nicht „wireframig“ genug aussieht, weil mir das Zusammenklicken zu lange dauert, … Deshalb die Frage: Welche Tools nutzt Ihr – abgesehen vom Platzhirsch Balsamiq? Ich freue mich darauf neue, gerne auch zweckentfremdete Tools kennen zu lernen!

(Die Beispiel-Wireframes zeigen übrigens (sehr grob) ein potentielles neues Startseitenelement für unser Kicker-Tracking-Tool fußi, das im Rahmen mehrerer MayDays entstanden ist und gerade ein neues Frontend bekommt.)

Update I

prototyper

Danke Steffen! Ich habe die kostenfreie Version von Prototyper installiert und mein kleines Beispiel damit nachgebaut. Fühlt sich gut an, man findet sich direkt zurecht und die „Widget“-Sets (= zur Verfügung stehende Elemente) lassen auf den ersten Blick nichts vermissen. Allerdings auch sehr geradlinig…

axure

Das von Manfred empfohlene, kostenpflichtige Axure war mir bereits bekannt. Ich hatte es in meine Liste nicht aufgenommen, da Axure über einen großen Funktionsumfang verfügt, den ich für das schnelle Erstellen kleiner Wireframes eigentlich nicht benötige.
Wie Prototyper und alle anderen hier vorgestellten Tools – neben Balsamiq – liefert Axure sehr geradlinige, akkurate Ergebnisse. Mit fehlt auch hier die „wireframige“, gescribbelte Anmutung.

Update II

ninjamock

Das von ARFR empfohlene NinjaMock könnte in  etwa das sein, was ich suche: ein kostenfreies online-Tool, mit dem man gescribblete Wireframes erstellen, speichern, exportieren, sharen und sogar gemeinsam kommentieren kann. Das fußi-Beispiel war schnell zusammengeklickt und die GUI fühlt sich gut und intuitiv an.
Wenn die nächsten Wireframes anstehen werde ich NinjaMock definitiv ausprobieren! Ich bin gespannt wie ich zurecht kommen werde, wenn anspruchsvollere Elemente/Features dargestellt werden müssen…

Für neue Blogupdates anmelden:


12 Gedanken zu “Wireframing-Tools – so viel will ich doch gar nicht …

    • Danke! Ich kann nicht genau sagen warum, aber irgendwie ist mir Axure nicht so sympatisch. Was genau schätzt Du daran so?
      Außerdem kann es sehr viel – für meine Wireframing-Bedürfnisse sogar zu viel.
      Ich habe es trotzdem mit in den Post aufgenommen, um das Ergebnis mit den anderen Tools vergleichen zu können…

  1. Hallo Katrin,

    soweit ich weiss ist Axure in Punkto Interaktivität führend. Habe zwar einige Tools wie bspw. Balsamiq installiert und kurz getestet – um dann aber schnell wieder zu Axure zu wechseln. Ich benutze das seit ca. 2010 in mehreren Projekten. Die genauen UseCases lassen sich dem Fachbereich ganz gut darstellen. Für die ist die Klickreihenfolge oft entscheidend – und da kommt der Case-Editor ins Spiel. Es gibt ausserdem ne Menge Widget Libraries. Die neuen Repeater sind ausserdem auch ne gute Sache.

    Hier noch ein paar Links:
    Repeater: http://www.axure.com/learn/repeater
    Case-Editor: http://www.axure.com/learn/basic/interactions
    Widgets: http://www.axure.com/community/widget-libraries

    VG Manfred

    • Hallo Manfred,

      vielen Dank für die Erläuterung und die Links! Sollte ich einmal ein Tool benötigen, um Wireframes mit Fokus auf Klickpfaden zu erstellen, werden ich mir Axure sicher noch einmal genauer anschauen.

Schreibe einen Kommentar

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