Prototyping Tools im Test

Prototyping Tools sind nützliche Helfer bei der Entwicklung digitaler Produkte. Bevor die erste Zeile Code geschrieben wird, werden mit Hilfe von Tests an Prototypen Usability Probleme erkannt. Es gibt allerdings ein recht großes Angebot an Prototyping Tools. Hier ein kleiner Einblick in den Tool-Dschungel:

Adobe XD

Abobe hat mal wieder etwas auf seine Produktpalette gepackt: Adobe XD.

Dabei hat Adobe eigentlich schon einige Tools, die auch zum Prototypen geeignet sind auf den Markt geworfen: Dreamweaver, Muse, Edge, selbst mit InDesign war es ja theoretisch schon vor Jahren möglich responsive Protoypen zu erstellen. Aber nun gibt es Adobe XD, was ich mir auch angesehen habe. XD kommt sehr übersichtlich daher und unterscheidet zwischen zwei als Reiter gekennzeichneten Arbeitsbereichen, nämlich Design und Prototyp. Und wie die Namen schon verraten, ist der erste Bereich zum Gestalten von Screens und der zweite Bereich bringt die Interaktivität auf die Seite. Und so ist wirklich ruckzuck ein Klickdummy erstellt.

Was mich wirklich verwundert (denn Adobe kann es ja): Es ist bisher nicht möglich responsive Prototypen zu erstellen.

Die Prototypen können zwar exportiert und im Browser angesehen werden, aber Breakpoints zu erstellen ist nicht möglich. In XD werden die jeweiligen Devicegrößen einzeln erstellt. Für responsive Webprojekte umständlich.

XD kommt mit einer sehr klaren, aufgräumten und minimalistischen Oberfläche daher.

Der Ex- und Import innerhalb der Programme der Adobe CC ist wie gewohnt einfach (kopieren und einfügen zwischen den Programmen funktioniert reibungslos). Das Verlinken der einzelnen Prototyp Seiten ist auch supereasy. Sehr erwähnenswert ist auch die Duplizierfunktion. Es lassen sich mit Leichtigkeit Raster erstellen und verschieben. Inhaltselemente können mit Leichtigkeit als Liste erstellt und einheitlich geändert werden. Symbole gibt es auch und die CC Bibliothek ist anwendbar, d. h. seine in Illustrator erstellten Elemente, Schriftspezifikationen, Farben, etc. einfach importieren. UI Kits werden auch mitgeliefert. Leider nur sehr eingeschränkt möglich sind Animationen. Diese sind nur durch Switchen der einzelnen Zeichenflächen oder durch Einfügen animierter Grafiken möglich.

Fazit:
Wer Adobe Kunde ist und schnell einen Prototyp auf einer Größe ohne Animationen erstellen will ist bei XD gut aufgehoben. Wer eh die Adobe CC im Abo hat, hat es inklusive. Ohne Adobe CC Abo kann das Tool auch einzeln für 11,89 € im Monat abonniert werden, bringt dann aber Meinung nach nicht so viel, da XD auf das Zusammenspiel mit den Programmen der Adobe CC abgestimmt ist.

Axure

Axure ist eine standalone Software für Mac und PC. Axure ist vermutlich das bekannteste Prototyping Tool auf dem Markt. Mit Axure liefert große Bilbliotheken mit vorgefertigten Buttons, Dropdowns und jede Menge weitere UI Elemente. Eine ordentliche Textbearbeitung und vektorbasierte Grafikbearbeitung, mit vielen aus den üblichen Programmen gewohnten Funktionen, lassen bei der Erstellung von Prototypen kaum einen Wunsch offen. Mit Hilfe von Dynamic Panels können Objekte erstellt werden, die sich auch im Prototyp per drag & drop bewegt werden können.

Alle Elemente lassen sich gruppieren, ausrichten und sperren. Zu jedem Element können Notizen gemacht werden und Master anlegen. Der Arbeitsbereich lässt sich in mehrere Pages aufteilen, die dann auch untereinander verlinkbar sind.

Den einzelnen Pages können Größen zugordnet werden und so das jeweilige Display simulieren. Somit können auch im Prototyp Breakpoints dargestellt werden. Animationen wie Hovereffekte, Slider oder echtes Scrollen (sogar Parallax) sind möglich.

Teamarbeit unterstützt Axure auch. Beim Export und der Bearbeitung von Objekten steht Axure nicht so gut da wie Sketch.

Fazit:
Wer sich Axure für 29 € im Monat leisten will oder kann, der hat mit diesem Tool so ziemlich alles in einem. Die Oberfläche von Axure wirkt für mich allerdings etwas überladen.

Keynote 7

Keynote ist eigentlich eine Präsentationssoftware von Apple, lässt sich aber auch wunderbar als Prototyping Tool verwenden. Eine recht schnelle, intuitive Einarbeitung ist mit Keynote möglich.

Für die grafische Bearbeitung sind die nötigsten Funktionen vorhanden. Es gibt Masken und Gruppen und z. B. abgerundete Ecken oder Schatten sind schnell und präzise gemacht.

Nach einigen Verständnisproblemem ließen sich umfangreiche Animationen erstellen und damit Slider, parallax oder andere Effekte abbilden.

Diverse Vorlagen für Animationsabläufe sind in Keynote enthalten. Wer ein Grid haben will, muss sich eins mit Hilfslinien oder Rechtecken zusammenbasteln. Scrollbar sind die Dummies nicht – da hilft nur eine animierte Simulation. Auch hier ist in einer Datei nur eine Screengröße einstellbar. Wer für mehrere Screengrößen produzieren muss, der kommt um das Anlegen von mehreren Arbeitsdateien nicht herum. Dokumentenmaße lassen sich nur in pt, % oder inch angeben, dass keine Pixelangaben möglich sind, ist wohl Apples Retina Displays zu verdanken.

Teamarbeit ist bei Keynote über die iCloud möglich. Es gibt eine Bibliothek mit fertigen Symbolen. Wer mehr (z. B. UI Kits) will, findet in den Tiefen des www sicherlich einiges. Mit Keynote haben Mac Nutzer gleich ein Prototyping Tool gratis mitgeliefert.

Fazit:
Wer sowieso einen Mac hat, der kann quasi gratis mit Keynote gute Prototypen erstellen.
Soll es ein umfangreicheres Projekt werden – etwas Zeit für einen Vergleich mit anderen Tools nehmen.

Proto.io

Proto.io kommt übersichtlich daher und ist ein webbasiertes Prototyping Tool. Animationen sind schnell erstellt. Wer einmal mit der Zeitleiste in Flash gearbeitet hat, dem fällt es leicht Bewegung in das Design zu bringen.

Es steht eine breite Palette an UI Kits zur Verfügung (iOs, Material Design, Win 8 und sogar eine kleine (beta) Auswahl an VR Simulationen).

Die Oberfläche ist minimalistisch, übersichtlich und selbsterklärend gestaltet. Alle Funktionen erschließen sich spätestens nach kurzem ausprobieren von selbst. Ein Schatten oder eine Rundung geht flott von der Hand und so ist in Kürze ist ein interaktiver Prototyp erstellt und exportiert.

Die Arbeiten können in verschiedenen Formaten wie HTML, pdf oder png exportiert werden. Gewohnte Shortcuts wie alt + drag klappen (fast) immer und Teamsharing ist ebenso möglich. Auch Variablen können angelegt werden und somit ist eine umfangreicherere Simulation (z. B. eines antwortenden Chatbots) möglich. Für die Zusammenarbeit mit Photoshop und Sketch gibt es addons. Die Erstellung von verschiedenen Devicegrößen ist für den mobile Bereich super gelöst. Selbst die importierten Objekte passen sich der jeweiligen Auflösung an.

Fazit:
Was mich persönlich etwas gestört hat, ist die Tatsache, dass pro Projekt nur eine Screengröße angelegt werden kann, was den Designprozess bei responsiven oder adaptiven Designs sehr umständlich machen. Aber dafür scheint Proto.io auch nicht ausgelegt zu sein. Alles in allem ein sehr angenehmes Arbeiten und vor allem für mobile Apps hervorragend geeignet. Für monatlich 24$ kann ein User fünf aktive Projekte bearbeiten.

Sketch

Sketch ist ein beliebtes standalone Design Toolkit für den Mac. Mit Hilfe von Artboards können im Screendesign verschiedenste Devicegrößen simuliert und das Design angepasst werden. Sketch ist übersichtlich gestaltet. Im Gegensatz zu manch anderem Prototyping Tool gibt es viele Gestaltungswerkzeuge wie z. B. das Maskieren von Objekten, Schattenwurf in alle Richtungen und Einstellungen und Rundungen sind schnell erstellt. Die Ausrichtung klappt auch gut mit einer automatischen Abstandsanzeige. Bei gleichen Abständen rastet das Objekt ein. Mit der Benutzung von Symbolen, lassen sich globale Änderungen schnell vornehmen. Auch das Teilen von Arbeiten ist über den Sketch Mirror möglich. Die Artboards können in Grids und Layouts unterteilt werden und können pro Artboard geändert werden, was sich positiv z. B. bei Bootstrap Mockups auswirkt. Sketch bietet eine schnelle und umfangreiche Exportfunktion, die es ermöglich mit einem Klick mehrere Dateiformate in verschiedensten Auflösungen zu generieren. Auch CSS lässt sich exportieren. Wer jetzt schnell mal eben mit Sketch startet und einen klickbaren Prototypen oder eine Animation erstellen will, wird enttäuscht werden, denn das kann Sketch von Hause aus nicht. Also auf die Suche nach dem richtigen Plugin begeben. Diese gibt es massenhaft: Marvel, Flinto oder in Zusammenarbeit mit Invison (wobei Invision selber gerade an einem Screen Design Tool arbeitet).

Fazit:
Sketch ist ein schön zu bedienendes Tool das dem Gestalter kaum Wünsche offen lässt. Die Suche nach neuen Plugins sollte einen nicht abschrecken.

Sketch hat aber eine große Community und somit ist man Tipps und Tricks bestens versorgt. Der Preis liegt bei 99 $ im Jahr.

Weld.io

Weld.io ist ein browserbasiertes Prototypingtool. Laut Aussage ein Tool für responsives Design und auf den ersten Blick scheint es zu halten, was es verspricht.

Die Benutzeroberfläche ist minimalistisch gestaltet. Recht schnell lässt sich ein Design erstellen, diesem mehrere Breakpoints zuweisen und, siehe da, schon in der Vorschau brechen die Elemente auch halbwegs ansehlich um.

Ein bisschen nachgeholfen und die Elemente auf den jeweiligen Ansichten nach meinen Vorstellungen positioniert, macht das Tool was es verspricht.

Animationen können auch hinzugefügt werden, wobei sich mir die Verknüpfung zwischen Auslöser und dem animierten Objekt nicht gleich erschlossen hat.

Im weiteren Verlauf sind mir so einige Mankos aufgefallen, die mir schnell die Lust an dem Tool verhagelt habe, wie z. B., dass ich keine Gruppe erstellen konnte und auch eine Zoomfunktion habe ich vergeblich gesucht.

Das führte dazu, dass ich ein über die Arbeitsfläche verschobenes Objekt nicht mehr zu fassen bekommen habe. In dem Zuge traten noch ein paar Bugs oder Bedienfehler auf (der komplette Inhalt war plötzlich kopiert etc.), die sich auch nicht mehr rückgängig machen ließen.

Fazit:
Weld.io ist ein gutes Tool für responsives Design. Die Idee ist super, die Umsetzung lässt noch einigen Spielraum für neue Features und debugging.

Der Preis von mindestens 749 € pro Monat scheint mir doch eher ein schlechter Scherz zu sein. Ich habe nichts gefunden, was diesen Preis rechtfertigt (vielleicht habe ich ja was übersehen). Hätte ich früher auf den Preis geschaut, hätte ich das Tool niemals getestet.

Schlusswort

Durch die Kurztests konnte ich für mich etwas Licht in den Prototyping-Tool-Dschungel bringen. Ein perfektes Tool gibt es meiner Meinung nach nicht. Manchmal ist weniger mehr, manchmal braucht es doch mehr Ausstattung. Ansonsten möchte ich gerne einen Anstoß geben auch mal ein paar Prototyping Tools miteinander zu vergleichen. Vielleicht findet der eine oder andere ja ein ergänzendes Tool zu seinem gewohnten oder es regt womöglich zum Wechseln an? Letztendlich kommt es auf das zu gestaltende Produkt, die benötigten Werkzeuge und den zeitlichen Faktor für die Entscheidung des richtigen Tools an.

In diesem Sinne: viel Spaß beim Prototypen!

Unten findest du eine tabellarische Zusammenfassung meines Testprotokolls: Prototyping Tools Test

Schreibe einen Kommentar