Wireframing-Tools: Balsamiq vs. Axure

Wireframing-Tools: Balsamiq und Axure im Vergleich

Wireframing ist ein entscheidender Schritt in Web-Design und -Entwicklung. Prototypen helfen, mögliche Probleme im Laufe des Prozesses frühzeitig und genau zu bestimmen und können von unschätzbarem Wert sein, um sich und vor allem seinem Kunden die visuelle Darstellung der Inhalte, der Hierarchie und des Layouts vor Augen zu führen, bevor die Umsetzung beginnt.

Neben dem Freehand-Wireframing existiert eine Vielzahl von kostenlosen und kostenpflichtigen Wireframing-Tools zum schnellen Konstruieren von Prototypen/Klickdummies. Balsamiq und Axure sind sehr bekannte Wireframing-Tools. Deshalb möchte ich diese beiden genauer unter die Lupe nehmen und für euch vergleichen.

Balsamiq

Balsamiq Mockups ermöglicht Designern ebenso wie Entwicklern das schnelle und grobe Entwerfen von Websites und Apps für Mobile- und Desktop-Versionen. Es ist eine sehr simple und kostengünstige Lösung, wenn es um Wireframing geht. Das Arbeiten mit Balsamiq geht, ähnlich wie das Skizzieren mit einem Bleistift, mit hoher Geschwindigkeit von der Hand mit dem Vorteil des digitalen Mediums: Gesetzte Elemente verlustfrei zu vergrößern und sie zu verschieben ohne neu beginnen zu müssen.

Balsamiq verfügt über eine große vorinstallierte Bibliothek an Komponenten, welche die üblichen Interface-Elemente aus Web- und Softwareumgebungen repräsentieren. Per Drag & Drop werden diese Komponenten auf der Arbeitsfläche abgelegt, wo sie intuitiv eingerichtet und angepasst werden können.

Der Zeitaufwand für das Erlernen dieses Programms ist minimal und die umfassende UI-Bibliothek beinhaltet alle gängigen Web-Elemente wie  Accordion, Breadcrumb, Button, Checkbox und viele mehr.

Features:

  • Simple Wireframes
  • Klickbare Prototypen
  • UI-Komponenten und Icons
  • PNG- und PDF-Export
  • Quick Add” für höhere Geschwindigkeit
  • Drag & Drop” für Einfachheit

Beispielbilder:

Axure

Axure RP ist ein sehr viel umfassenderes Wireframing-Tool als die meisten anderen es sind. Dementsprechend auch preislich weiter oben angesiedelt. Genau wie auch Balsamiq nutzt es eine einfache Drag-and-Drop-Oberfläche und hat eine Bibliothek vordefinierter Widgets, die alle Standard-Web-Elemente abdeckt. Den großen Unterschied schafft Axure jedoch mit den Dynamic Panels, Masters und der Fähigkeit mit unterschiedlichen Viewports zu arbeiten.

Dynamic Panels ist ein Werkzeug, welches es erlaubt, jedem Teil der Seite mehrere Status zuzuweisen. Die verschiedenen Status lassen sich nach Anlegen anhand von Javascript-ähnlichen Konditionen wie OnClick oder OnLoad aktivieren.

Mit den Masters können wiederkehrende Seitenelemente mit einem einzigen Klick erstellt werden und anschließend auf jeder Seite des Projekts verwendet werden. Ändert ihr den angelegten Master, werden alle Seiten, auf denen dieser verwendet wurde, automatisch aktualisiert.

Auch Axure verfügt über eine grundlegende UI-Bibliothek. Sollte euch diese nicht ausreichen, findet ihr im Widget-Menü den Weg zu weiteren, von der Community erstellten Bibliotheken und könnt auch sehr einfach eigeneBibliotheken anlegen.

Zuletzt werden euch mehrere Möglichkeiten zur Veröffentlichung des Projekts geboten. Der Export einer HTML Struktur inklusive aller Farben, Formen und Funktionen generiert einen voll funktionsfähigen, klickbaren Prototypen. Die Dateien lassen sich entweder auslagern oder verschlüsselt im Internet veröffentlichen. Außerdem könnt ihr eine vollständige und bebilderte Dokumentation des Projekts generieren lassen.

Features:

  • Voll funktionsfähige Klickdummies
  • Dynamix Panels für interaktive Seitenelemente
  • Masters für wiederkehrende Seitenelemente
  • Widget libraries (vorinstalliert, online und eigene)
  • Veröffentlichung der Prototypen
  • Teamfunktionen (in der Pro-Version)

Beispielbilder:

Fazit

Der Grundgedanke hinter Balsamiq Mockups ist, die Wireframes, trotz der digitalen Möglichkeiten, möglichst grob und undetailliert zu belassen und nur mit den wichtigsten Elementen zu arbeiten, um vom Kunden so viel Feedback wie möglich zu bekommen. Axure hingegen erlaubt das Hinzufügen von Funktionalität und bietet sehr viele Möglichkeiten, Elemente zu stylen. Die Wireframes werden demnach zu Prototypen, die dem Endprodukt sehr ähneln. Wollt ihr jedoch diesen skizzenartigen Stil nutzen, lässt sich dieser auch in Axure mit wenigen Klicks erstellen.

Steht ihr also vor einer Entscheidung zwischen diesen beiden Tools, so solltet ihr euch die Frage stellen, ob ihr ausschließlich skizzenartige Wireframes generieren oder auch Funktionalitäten und diverse Styles verwenden möchtet. Ist letzteres nicht erwünscht, ist Balsamiq Mockups definitiv die richtige und kostengünstigere Wahl, andernfalls sollte die Wahl auf Axure RP fallen.

Hier bei Mittwald finden beide Tools ihre Verwendung. Balsamiq ist aufgrund seiner Simplizität bei unseren Entwicklern sehr beliebt, wohingegen bei uns Gestaltern Axure deutlich größeren Anklang findet.

Lest passend zum Thema auch „Interaktionstools im Vergleich: Invision, Proto.io, Justinmind und Moqups“.

 

Habt ihr schon mal mit den Tools gearbeitet? Welches ist euer Favorit?

Kommentare

  1. Felix Böhme am

    Hallo James David Wiebe,
    ich bin selbst Kunde bei Mittwald und habe diesen Beitrag gelesen. Vielen Dank dafür erstmal! Nun überlege ich, statt des bislang genutzten Balsamiq zukünftig ggf. Axure einzusetzen. Gerade die Master-Funktion empfinde ich als sehr zeitsparend. Von den javascript-ähnlichen Fkt. mal ganz abgesehen. ABER: wo bekomme ich denn eine ausführliche – am besten DEUTSCHE – Anleitung zu diesem Programm? Im Internet werde ich nicht wirklich fündig. Vielen Dank für eine Antwort.
    Mit freundlichem Gruß
    Felix Böhme

    Antworten
    1. Sahli Ramdani am

      Hallo Felix,

      Axure gibt es ausschliesslich auf Englisch. Es gibt ein Unternehmen in Hamburg http://www.eparo.de die von Axure lizensiert sind und die jetzt angefangen haben deutsche Tutorials zu erstellen. Ausserdem bietet eparo auch Schulungen an. Mit Axure lassen sich im Prototyp alle Funktionen abbilden die z.B. eine echte mobile App beinhaltet. Hier mal ein Video das zeigt was im Berich Webdesign möglich ist:

      https://www.youtube.com/watch?v=8oUvhx80jqg

      Go for Axure! Das ist meine Empfehlung.

      Antworten

Kommentar hinzufügen