Seit langem gehören Prototyping Tools zu unseres Alltag in der Entwicklung von Websiten. Mit Prototypen kann man relativ einfach verschiedene Animationen oder Übergänge veranschaulichen. Lange gab es keine gut funktionierende Lösung, um einen Prototypen zu erstellen. Oft war es sehr lästig ein Design in Bewegung zu versetzen. Abhilfe schaffte After Effects oder eine Animation direkt innerhalb Photoshops. Doch nach und nach wurde die Lücke erkannt und mittlerweile sprießen Prototyping Tools aus allen Löchern. Aber warum? Welchen Vorteil bringen uns eigentlich Prototyping Tools?
Was sind Prototyping Tools
Für Prototyping gibt es verschiedene Anwendungsbereiche. Man kann einen rohen Prototypen erstellen, um eine Funktion zu testen, um der Entwicklung zu zeigen, wie man sich die Funktionsweise vorstellt oder um dem Kunden zu zeigen, wie das Endergebnis aussehen könnte.
Es gibt mittlerweile eine ganze Reihe von Tools, mit denen man diese Ziele erreichen kann. Viele funktionieren relativ ähnlich. Die Hauptfunktionsweise hier ist es, Designs aneinander zu reihen und bei Klick auf einen Button zum nächsten Design zu springen. Dabei kann man dann verschiedene Übergänge einbinden, um einen bestimmten Effekt zu visualisieren.
Framer JS
Wir entschlossen uns für das Tool FramerJS um einen Prototypen zu entwerfen. Es ist zwar um einiges komplexer als die alternativen Produkte, hat allerdings dadurch auch einen größeren Funktionsumfang. Um FramerJS zu bedienen, muss man Coffeescript schreiben. Man sollte also etwas Kenntnis in Javascript bzw. Coffeescript mitbringen. Hat man diese “Hürde” gemeistert, kann man allerdings weitaus komplexere Prototypen erstellen als mit Flinto, Marvel und Co.
Durch den Einsatz von Coffeescript kann man verschiedene Aufgaben automatisieren und Bewegungsabläufe direkt beeinflussen. Per CSS und HTML lassen sich Strukturen nachbauen und mit dem Bild/Video Modul kann man entsprechend Medien einfach platzieren.
Einen großen Vorteil bietet die direkte Anbindung an Photoshop bzw. Sketch. Dort gespeicherte Projekte lassen sich in FramerJS importieren und man kann Ebenen, Elemente, Grafiken und Symbole direkt ansprechen und unabhängig vom Gesamtbild nutzen.
FramerJS bedienen
Eine neue Ebene zu erstellen benötigt genau zwei Zeilen Code.
# Create a layer
layerA = new Layer
x: 0, y: 0, width: 100, height: 100Man kann dieser Ebene nun einen zweiten Zustand geben, zB. die Breite auf 200 erweitern.
layerA.states.add
grow: { width: 200 }Und nun noch ein Event, das auf Click lauscht. Klickt man nun layerA an, wird der nächste Zustand gewählt, in unserem Fall wird layerA breiter.
layerA.on Events.Click, ->
layerA.states.next()Super simpel, so sieht das ganze dann aus:
Im Grunde baut man so den kompletten Prototypen auf. Man erstellt eine Arbeitsfläche, legt den Hintergrund fest, legt die Ebenen darauf ab, verteilt Zustände und Events, die ausgeführt werden, sobald man das möchte. So lassen sich schnell komplexe Applikationen bauen, aber auch einfache kleine Übergänge, um um dem Team oder dem Kunden zu zeigen, wie man sich etwas vorstellt.
Anwendungsbeispiele
Wir verwendeten FramerJS Prototypen nun schon mehrfach vor großen Projekten und auch bei Pitches kamen schon solche zum Einsatz. Dabei spielten die Prototypen ganz unterschiedliche Rollen. Mal als Mobile, mal als Desktop-Ansicht einer Website.
In einem Fall erstellten wir eine komplexe Webapplikation, die von Anfang an direkt unter Aufsicht des Kunden gebaut wurde. Dabei wurden abgenommene Designs direkt durch FramerJS animiert, um zu sehen, ob ob die angedachte User Journey so funktioniert, wie es sich der Kunde und das Team vorgestellt haben.
In einem anderen Fall testeten wir intern verschiedene Parallax Effekte, um ein Gespür dafür zu bekommen, ob es Sinn macht, besagten Effekt einzusetzen und wenn ja, wie genau das aussehen kann.
Ein fertiger Prototyp erhält von FramerJS eine URL, die man direkt mit dem Team oder dem Kunden teilen kann. Im Browser kann man dann den fertigen Prototyp bedienen. Als Alternative bedienen wir die Prototypen hier vor Ort und filmen den Bildschirm dabei ab. Aus dem fertigen Videomaterial schneiden wir eine angepasste Version und senden diese dem Kunden zu. Das kann hilfreich für komplexe Handlungsstränge sein, die man zeigen möchte.
Hier noch ein Beispiel, welches aus 11 Ebenen und vier Event Handlern besteht. Dabei wurde das FramerJS HTML/CSS Modul genutzt, sowie Bilder und verschiedene Zustände. Bei Hover über die Tabs wird der Content darüber ausgetauscht, bei Klick auf den Button erscheint der gewünschte Inhalt groß über der gesamten Seite.
Auf framerjs.com kann man eine kostenlose Testversion laden und mit Hilfe der Beispiele und der Dokumentation sich ein Bild vom Umfang des Tools machen.
