Prototyping spielt im Produktdesignprozess eine immer wichtigere Rolle und ist mittlerweile ein wesentlicher Bestandteil des Workflows moderner UI- und UX-Designer. Das hat die Welt der Prototyping-Tools in der letzten Zeit stark verändert. Durch das Angebot immer neuer Werkzeugen ist es ein wenig unübersichtlich geworden. Die Community der Designer und Entwickler diskutiert immer noch, ob wir einen Sättigungspunkt erreicht haben. Ich persönlich denke, dass die große Auswahl kein Problem sein sollte. Es gibt nicht das eine Tool, das für alle passt, oder?
Wählen Sie einfach die Lösung, die Ihnen den Arbeitsablauf erleichtert und die sich für Sie im Gebrauch für das jeweilige Projekt am besten anfühlt. Einige (einschließlich mir selbst) haben eine Vorliebe für Desktop-basierte Tools, andere bevorzugen Cloud-basierte Plattformen, die immer mehr an Popularität gewinnen. Sie müssen sich während der gesamten Dauer eines Projekts auch nicht an ein bestimmtes Tool binden. Ich und viele andere Designer nutzen im täglichen Arbeitsablauf eine Kombination von Tools. Und Sie können das auch.
Im Folgenden werde ich einige Prototyping-Tools vorstellen, die ich regelmäßig benutze und mit denen ich mich intensiv beschäftigt habe, sowie solche, die mir bei der Suche nach einem geeigneten, unterstützenden Tool für ein Projekt positiv aufgefallen sind.
Flinto
Mit Flinto, das für Mac verfügbar ist, können Sie kleine Interaktionen und Animationen bis hin zu komplexen Abläufe für Apps erstellen, und diese auf unterschiedlichen Screen-Formaten testen. Es gibt ein Plugin für das Digital Design-Toolkit Sketch. Zudem bietet Flinto sogar ähnliche Funktionen wie Sketch. So können Sie Ihre Entwürfe einfach exportieren. Fantastisch! Flinto verfügt sogar über einige Möglichkeiten zur Gestennavigation. Es ist, als wären beide Tools aus dem gleichen Guss, und das ist immer ein Bonus.
Flinto ist ein sehr intuitives Tool, das sich auch von Anfänger kinderleicht bedienen lässt, wenn Sie sich einmal daran gewöhnt haben, dass die Menüs, Tools und Optionen auf ein Minimum beschränkt sind. Aber das reicht vollkommen, um beeindruckende Prototypen erstellen zu können, ohne dass Sie mit einem „Feature-Overloads“ konfrontiert werden, was meist zu einer unerwünschten Ablenkung führt.
Die Hauptvorteile von Flinto sind vor allem etwas für Designer, die sich mit „Transitions“ und „Behavior“ beschäftigen. Wenn Sie zu denjenigen Kreativen gehören, die eine Abneigung gegen Timelines und Kodierung haben, werden Sie von den tollen Funktionen von Flinto begeistert sein. Flinto ist ein sehr mächtiges Tool, und die genaue Kontrolle, die Sie über jede Ebene haben, ermöglicht es Ihnen, einige sehr komplexe Übergänge und Animationen zu erstellen, die dann in Ihrem gesamten Projekt weiterverwendet werden können.
Weitere Informationen zu Flinto
Principle
Principle hat viele Gemeinsamkeiten mit Flinto. Die erste und offensichtlichste Gemeinsamkeit ist: auch Principle hat ähnliche Funktionalitäten wie Sketch – mehr noch als Flinto. Das ist für mich immer ein Plus. Es ermöglicht den Austausch mit Sketch und erleichtert Ihnen die Arbeit mit diesem Tool.
Principle ist eines der wenigen Prototyping-Tools, die sich mehr auf die „Timeline-Route“ zum Erstellen von Übergängen und Interaktionen zwischen Ihren Sketch Ansichten konzentriert haben. Einige Leute mögen diese Art zu arbeiten, andere bevorzugen einen eher visuellen Ansatz, wie zum Beispiel den „Transition Designer“ von Flinto oder den „Auto-Code-Ansatz“ wie z.B. von Framer. So oder so: von den „Timeline“-fokussierten Tools, die ich getestet habe, ist Principle das intuitivste.
Mit Principle können Sie sehr einfach Abläufe für Multi-Screen-Apps erstellen oder sich speziell auf Mikro-Interaktionen konzentrieren. Für beides ist es sehr gut geeignet. Im Vergleich zu den anderen hier vorgestellten Tools, ist die Benutzeroberfläche etwas weniger intuitiv, umso überzeugender sind dafür die Möglichkeiten, die Ihnen Principle bietet.
Weitere Informationen zu Principle
Framer
Framer ist ein wenig anders, als die bereits vorgestellten Tools. Der Hauptgrund dafür ist, dass Sie sich (bis zu einem gewissen Punkt) mit Code beschäftigen müssen, um gute Ergebnisse zu erzielen. Aber selbst wenn Sie nur als Designer tätig sind, sollten Sie jetzt nicht gleich abwinken, denn Framer ist selbst für Einsteiger ein einfach zu handhabendes Prototyping-Tool.
Mit Framer können Sie auch als Designer mühelos Objekte erstellen und manipulieren, während sie gleichzeitig die Möglichkeiten und Flexibilität behalten, die Ihnen das manuelle Coden bieten kann. Mit Framer lassen sich detaillierteste Interaktionen für Designs simulieren, die Sie zum Beispiel in Sketch erstellt haben. Die nahezu grenzenlosen Interaktionen, die Sie mit Framer erzeugen können, ist nur durch Ihre eigne Phantasie begrenzt. Framer ist damit einige Nummern komplexer, als die linear aufgebauten Prototyping-Tools. Mit den neuesten Features, wie zum Beispiel „Auto-Code“, wurde der Einstieg und die Arbeit mit Framer nochmals deutlich vereinfacht.
Weitere Informationen zu Framer
Origami-Studio
Das Team von Facebook Design hat sich noch einmal ans Zeichenbrett gesetzt und mit Origami Studio nochmals eine neue, verbesserte Kategorie von Prototyping-Tools entwickelt. Es ist ein ganz anderes Kaliber als die anderen Werkzeuge, die Sie in dieser Übersicht finden. Einige Leute werden dieses Tool gleich lieben, andere wiederum wird möglicherweise die Patch-basierte Methode zur Erstellung von Interaktionen und Animationen verwirren.
Mein erster Eindruck nach ein paar Tests mit diesem Tool war, dass es vielleicht etwas zu fremd war, sodass wir nicht gleich bei der ersten Tasse Kaffee zueinander fanden, aber ich gab dem Tool ein paar Chancen mehr und fing an, es immer mehr zu lieben. In seinen Möglichkeiten ist dieses Tool extrem leistungsfähig, und für mich steht es ganz oben, wenn es darum geht, ein Tool zu finden, mit dem Sie echte „Hi-Fidelity“-Prototypen erstellen können.
In seiner jetzigen Form ist die Kompatibilität zu Sketch teilweise noch verbesserungsfähig, beispielsweise sehen Importe nicht immer optimal aus, wenn sie auf die Application angewendet werden. Bedenken Sie jedoch, dass derzeit lediglich ein sehr kleines Team daran arbeitet. Im Laufe der Zeit werden diese kleinen Probleme sicherlich noch korrigiert werden.
Hey, dieses Tool ist kostenlos! Es gibt also keine Entschuldigung, es nicht einmal zu testen.
Weitere Informationen zu Origami-Studio
Marvel
Marvel ist ein Tool, an dem ich eine ganze Weile herumgeschnüffelt habe, bevor ich es endlich ausprobiert habe.
Ich hatte viele Male über die üblichen Kanäle davon gehört und mir unzählige Male die Webseite und Promo-Videos angesehen. Die Seite ist einfach so großartig, ich kann mir nicht helfen.
Die Sache, die mich erstmals zu Marvel brachte, war kein Kundenprojekt oder die Zusammenarbeit mit einem Entwickler. Nein, es war etwas ganz Anderes. Ich arbeitete an einer Tutorial-Serie für Medium Corporation, als ich nach einer einfachen und anfängerfreundlichen Lösung suchte, um meine Beispiele in meine kurze Tutorial-Serie zu drücken, und Marvel war da, um mich mit offenen Armen zu begrüßen.
Es ist zwar nicht das „Feature-reichste“ Tools, das es auf dem Markt gibt, aber bei allen Funktionen, die es bietet, ist es sehr gut. Es ist wahrscheinlich auch nicht eines der einfachsten Tools in dieser Übersicht – insbesondere, wenn man als Einsteiger starten möchte. Wie bei Atomic (auf das ich gleich zu sprechen komme), haben Sie die Möglichkeit, Ansichten direkt in Marvel zu erstellen. Dafür nutzt es den einfachen, aber intuitiven Editor namens Canvas.
Weitere Informationen zu Marvel
Atomic
Atomic ist ein weiteres Prototyping-Tool, das rein browserbasiert ist. Aber von den „Cloud-basierten“ Tools, die ich gerne benutze, ist Atomic das ausgereifteste und es fühlt sich von Anfang an sehr professionell an. Mit Atomic können Sie nicht nur Prototypen erstellen, sondern Ihre Applikationen auch mit so etwas Einfachem wie dem History-Slider gestalten, der Ihnen erlaubt, problemlos zu Iterationen eines Projekts zurückzugehen (denken Sie an Undo).
Die Benutzeroberfläche ist sehr übersichtlich und es macht richtig Spaß, damit zu arbeiten. Es erinnert an Sketch im „Dark Modus“. Was, wie ich bereits erwähnt habe, den Übergang vom Design zum Prototyping immer fließender macht.
Atomic ist auch ein sehr kollaboratives Tool, das es Ihnen ermöglicht, mit dem Rest Ihres Teams gemeinsam am selben Projekt zu arbeiten, und Konstruktionsdateien problemlos zu teilen. Dies ist ein unschätzbar nützliches Feature, wenn Sie an Prototypen für Ihre App arbeiten.
Weitere Informationen zu Atomic
Fazit zu den besten Prototyping-Tools
Wenn Sie sich entscheiden müssen, welches Prototyping-Tool Sie verwenden sollen, suchen Sie sich einfach etwas, das zu Ihrem Workflow passt, und probieren Sie es aus. Je nach Projekt können Sie auch zwischen verschiedenen Prototyping-Tools wechseln. Jedes Tool hat seine Vor- und Nachteile, und wie ich bereits am Anfang des Artikels erwähnt habe, denken Sie immer daran: Es gibt nicht das eine Tool, das wirklichen allen Anforderungen abdeckt.
Bildnachweis: Fotolia, Lizenz: Host Europe
Aus dem Englischen: Wolf-Dieter Fiege
Darüber hinaus erstellt er Lernmaterialien, die von unzähligen UI / UX-Designern weltweit verwendet werden: von Studenten über Design-Agenturen bis hin zu Marken wie Amazon, Disney und Vogue.
- Die 6 besten Prototyping-Tools für UI- und UX- Designer - 8. Dezember 2017
