Protoyping Tools in 2018

Als Designer von Welt schlägt man sich ja ständig mit neuen Tools herum. Schließlich ist man nur ein guter Designer, wenn man jeden Tag mindestens 30 Minuten investiert um herauszufinden, ob eines der Programme, die man so nutzt, nicht vielleicht durch ein anderes ersetzt werden kann. Irgendwie muss man sich ja beschäftigen.

Wir haben also den Luxus und auch das Problem, dass es unendlich viele Tools gibt, die am Ende die gleichen Aufgaben lösen wollen. Ein relativ frischer Bereich dafür ist der des Erstellens von Prototypen. Wenn man als Designer, besonders für Apps, nur statische PNGs abliefert, reicht das zwar meistens, aber das Gesamtkonstrukt der App und detailliertere Animationen und Transitions erfordern dann doch Prototypen in verschiedenen Ausarbeitungsstufen.

Das hier soll eine Liste der Tool sein, die für mich in Frage kommen und eine Bewertung ihrer Eigenschaften auf dem Feld der Prototypenerstellung. Hochgradig subjektiv, aber vielleicht ja für einige hilfreich.

Sketch

Sketch kann jetzt auch Prototypen. Too little too late, sagen einige. Ich auch. Man kann Elemente auf Artboards mit anderen Artboards verlinken und aus den Standard-Transitions auswählen. Das war’s. Man kann keine Elemente als fixiert festlegen, womit Nav- und Tabbars in iOS Apps schon mal nicht abgebildet werden können, wenn der Content eines Screens länger ist als die Screenhöhe (was… fast immer der Fall ist.)

Nett, dass sie damit anfangen, allerdings müssen sie sich wirklich beeilen und an der Stelle etwas ranklotzen. Aktuell ist es nicht gut genug für den tatsächlichen Einsatz in Projekten.

InVision

InVision begleitet mich schon seit Jahren. Seit Jahren fügen sie auch immer mehr Features hinzu. Viele davon brauchte ich noch nie, ganz viele andere fallen mir gerade sicher gar nicht mehr ein. Aktuell nutze ich InVision für meine Full-App Prototypen. Jedes Projekt bekommt einen Prototypen, der die gesamte App abbildet. Ich verbinde mein Sketch Dokument also mit einem InVision Prototypen und alles was in Sketch passiert, wird in InVision benutzbar gemacht. Das ist teilweise etwas grob, aber die Basics (scrollender Content, fixierte Elemente, default Transitions, Overlays) funktionieren gut und zuverlässig.

Das beste an diesen Prototypen: Man kann sowohl Leute zum Projekt einladen und mit ihnen am Projekt arbeiten, als auch einfach einen Link mit jemandem teilen, der dann den Prototypen in seinem Browser, oder auf seinem Smartphone ansehen kann. Diese können auch passwortgeschützt sein, was für einige Kunden wichtig ist.

Leider wurde es im letzten Jahr nicht besser. Offenbar arbeiten sie gerade an einer riesengroßen neuen Version dieses Teils ihres Angebots, aber gefühlt stagniert einfach alles und wurde mit der Zeit eher langsamer als schneller. Ich bin aktuell durchaus gewillt mich nach Alternativen umzuschauen.

InVision arbeitet auch gerade an Studio, ihrer Alternative zu Sketch, die sowohl Prototyping perfekt abbilden soll, als auch den restlichen Designprozess. Man merkt ganz gut, dass sie versuchen die Anlaufstelle für wortwörtlich jede einzelne Aufgabe im Designprozess zu werden. Mein Gefühl ist, dass sie sich dabei vielleicht ein wenig übernommen haben. Zumindest fühlt sich alles gerade eher halbgar an. Studio ist noch in der Alpha und daher work in progress, aber aktuell absolut keine in Frage kommende Alternative zu irgendwas.

Marvel

Marvel (nicht die Filmfirma) und InVision haben einiges gemeinsam. Marvel fühlte sich aber immer wie das kleine Geschwisterkind an. Immer leicht weniger Features und weniger professionell. (funktionieren so Kinder? Was weiß ich.) Mittlerweile haben sie aber gut nachgezogen und sind das Tool, was ich mir gerade genauer ansehe um potentiell meine Full-App-Prototypes mit Basic-Transitions dort zu erstellen. Sollte möglich sein, die Features sind da, die Performance scheint etwas besser als die vom übersättigten InVision zu sein.

Hoffentlich bleibt es bei diese Performance auch. In meinen Tests sah ich, dass sie offenbar auch an einer In-Browser-Design-Solution arbeiten, was mir Sorgen bereitet. Vielleicht müsst ihr nicht alles können, Freunde. Bleibt bei euren Leisten!

Adobe XD

Adobes neues Designtool hat noch keine Hilfslinien, aber immerhin schon ein Prototype-Feature. Das ist ein bisschen weiter als das von Sketch (es beherrscht schon Overlays), aber… wenn wir ehrlich sind… nutzt jemand XD? Ich werde sicher nicht zu XD wechseln um Prototypen zu machen. Next.

Framer

Framer ist mein Weißer Wal. Alle paar Monate wache ich auf und denke “Jetzt lerne ich endlich Framer! Wie schwer kann das schon sein?!”. Dann kaufe ich einen Kurs, oder ein Buch, oder einen Trank von einer alten Frau im Wald und hoffe, dass es klappt. Fünf Stunden später, umringt von meinen eigenen, von mir herausgerissenen Haaren, gebe ich auf und erkenne an, dass ich einfach nichts lernen werde, was sehr codelastig ist.

Framer ist eigentlich das perfekte Tool. Mittlerweile kann man Screens in Framer Design bauen und es dann in Framer Code zu einem Prototypen zusammensetzen, der entweder ganz grob nur Screen zu Screen animiert, oder richtig verrückte Sachen macht. ALLES ist möglich. Wirklich alles. Am Ende ist es Java Script und dementsprechend mächtig. Mittlerweile beherrsche ich auch die Basics und ich LIEBE, dass man diese komplexen Prototypen mit detaillierten Transitions einfach durch einen Link mit anderen teilen kann. Allerdings bin ich zu langsam, zu unsicher und es ist mir zu gefährlich. Ich habe nicht das Gefühl schnell und zuverlässig zu einem Ergebnis kommen zu können, das ausreichend ist. Dafür müsste ich noch viele, viele, viele weitere Stunden ins Lernen von Framer investieren.

Wenn ihr gut mit Code könnt: Das hier ist das Einhorn das alles kann. Man muss nur auch können.

Figma

Figma ist, wie Sketch und Adobe XD, in erster Linie ein Design-Tool, das aber auch Prototype-Features hat. Diese sind ähnlich umfangreich wie die von Sketch und XD, dementsprechend an dieser Stelle nicht die Rede wert.

After Effects

Besonders für komplexere Animationen und Micro-Transitions greifen Leute noch immer zu After Effects. Habe ich auch, damals, allerdings fühlte sich das immer wie mit Kanonen auf Spatzen schießen an. After Effects kann sowohl eine fotorealistische riesige Krake ein Schiff zerschmettern lassen, als auch ein Overlay mit einem lustigen Bounce-Effect aufploppen lassen. Ein gutes Zeichen dafür, dass das Tool nicht wirklich für den Job gedacht ist.

Mal davon abgesehen, dass das Ergebnis immer nur ein Film ist, nie interaktiv und tatsächlich benutzbar.

Flinto

Um es kurz zu machen: Flinto ist meine Lösung für alles, was komplexer ist als was InVision und Marvel abbilden können. Für 90 % meiner Anwendungsfälle reichen mir Prototypen auf InVision-Niveau, für alles andere nutze ich jetzt Flinto.

Es brauchte ein paar Versuche und Projekte, bis ich mit dem Interface und den Logiken von Flinto klar kam, aber mittlerweile habe ich das Gefühl so ziemlich alles nötige in Flinto abbilden zu können. Theoretisch wäre es sogar leicht möglich Full-App-Prototypen mit Flinto zu bauen, aber das größte Manko an dem Programm ist auch der primäre Grund das nicht zu tun: Man kann Prototypen nicht wirklich gut teilen. Entweder als .flinto Datei, die erfordert, dass jemand das Programm auf seinem Mac installiert hat, oder als abgefilmter Prototyp. Sehr, sehr ärgerlich.

Abgesehen davon, gab es bisher nichts, was ich in einer App bauen wollte, das ich in Flinto nicht prototypen konnte. Elemente, die nach einer bestimmten Zeit erst reinfliegen und dann lustig bouncen, ein Header, der sich beim Scrollen verändert, you name it. Für ein aktuelles Projekt wollte ich einen Video-Player bauen, der zuerst ein Full-Screen-Vorschaubild anzeigt, das einen dicken Play-Button und die Videobeschreibung auf sich hat. Nach Tap auf den Button fährt die Beschreibung aus dem Bild und das Video startet. Konnte ich abbilden, sogar mit Video, das tatsächlich startet. Was will man mehr.

Grundlegende Design Features erlauben es auch spontan mal einen groben Screen direkt in Flinto zu bauen. Das ist gut und für mich ausreichend.

Principle

Principle und Flinto werden immer in einem Atemzug genannt. Auch Principle gab ich mehrere Chancen, aber es hat nie geklickt. Ich verstehe das Interface nicht, irgendwie fühlt sich sich auch merkwürdig billig an und ich habe mich nie wirklich in die Software einarbeiten können. Viele schwören darauf, vielleicht ist es für dich genau das richtige, aber für mich hat es nicht funktioniert. Was nicht heißen soll, dass die Software schlecht ist, ich verstehe sie nur nicht.


Es gibt sicher noch 30 Tools, die in dieser Liste stehen könnten. Die kenne ich aber entweder nicht, oder fand sie nicht relevant genug um sie aufzuführen. Sollte es aber irgendeinen Geheimtipp geben, den ich übersah, lasst es mich wissen!

Für Kritik, Getrolle und Lob bin ich auf Twitter erreichbar. Für Benachrichtigungen bei neuen Beiträgen, kann man mir ebenfalls dort folgen. 👋