Principle

Seit ein paar Wochen gibt es eine neue Prototyping App für den Mac. Principle ist nicht das erste Tool zum erstellen von interaktiven Prototypen, aber es macht einen guten ersten Eindruck. Doch was ist mit Principle alles möglich und stimmt der erste gute Eindruck?Principle

Wer schon ein mal mit Sketch gearbeitet hat, wird sich mit Principle sofort vertraut fühlen. Die Benutzeroberfläche ähnelt Sketch nämlich stark. Wobei heutzutage viele Mac Apps so aussehen.😉

Jeder Prototyp startet natürlich mit einem leeren Artboard. Die Zeichenflächen lassen sich in ihrer Größe Frei einstellen. Zur Auswahl stehen aber auch einige Presets wie die aktuellen Apple Device Größen.
Nun kann es auch schon losgehen mit dem erstellen der Prototypen. Für das direkte starten mit einem Prototyp liefert Principle sogar schon ein Rechteck- und Text-Tool mit. So lassen sich schnell und vereinfachte Interfaces erstellen. Wie es sich für ein modernes Programm gehört arbeitet Principle mit Ebenen, die für jedes Artboard gruppiert werden. Mehrere Objekte lassen sich ebenfalls in Gruppen zusammenfassen.

Natürlich arbeitet Principle auch mit Bitmap Grafiken. Durch einfaches Drag’n Drop von PNG oder JPEG Bildern fügt man diese z.B. von Photoshop oder Sketch hinzu. Wer Retina Grafiken importiert kann über das Scale Attribut auch die gewünschten Elemente einfach vergrößern oder verkleinern.

Principle

Das Hauptaugenmerk von Principle liegt aber natürlich nicht im Zeichnen von Formen, sondern im erstellen interaktiver Klick-Prototypen!
Jedem Element, egal ob Bild, Rechteck, Text oder Gruppe lassen sich zu verschiedenen Event-Typen (z.B. Klicken oder Scrollen), Übergänge zu anderen Zeichenflächen hinzufügen. Wird nun das Event ausgeführt animiert die Vorschau zu der jeweiligen Zeichenfläche.

PrincipleIm normal Fall werden beide Zeichenflächen überblendet. Benennt man aber z.B. ein Rechteck auf beiden Zeichenflächen gleich ,variiert aber Größe, Position und Farbe, animiert Principle den Übergang in einer schicken Animation (siehe ganz unten).

Artboard Animation

Die automatischen Animationen zwischen den Zeichenflächen sind in Zeit und Verlaufskurve anpassbar. Klickt man auf einen Animations-Pfeil zwischen zwei Artboards zeigt Principle eine Zeitleiste auf der alle Objekte angezeigt werden, die automatisch Animiert werden. Nun lassen sich für jedes animiertes Objekt Attribut sowohl die Zeit als auch die Animations-Kurve anpassen.

Animations Kurven

Drivers – die neue Art der Keyframeanimationen

Drivers

Für jedes Element bzw. jede Gruppe sind verschiedene Optionen verfügbar. So kann man für jede Achse (vertikal & hotizontal) gesondert auswählen ob das Element Fix, Drag, Scroll, Page Scrolling aktiviert ist. Mit diesem Prinzip lassen sich die verschiedensten interaktiven Elemente bauen. Vom klassischen Scroll View bis hin zum „Drag to remove“ (wie man es von Twitter, Facebook und co. kennt)

Element Attribute

Das interessante ist, dass Principle dafür keine klassische Animations-Timeline nutzt. Principle führt die sogenannten Drivers ein, mit denen man die Drag, Scroll und Page Scroll Aktionen anpasst. Vom Grundprinzip funktionieren die Drivers ähnlich wie bei einer Video-Timeline. Für verschiedene Attribute lassen sich mehrere Keyframes hinzufügen. Die Veränderungen der Attribute zwischen den Keyframes animiert das Programm automatisch. Nur ist der Unterschied hier, dass die Keyframes nicht einer Zeit, sondern einer Position zugeordnet werden. So platziert man die Keyframes auf einem X bzw. Y Positionswert, welche durch Drag, Scroll oder Page Scroll verändert werden. Dieses neue Prinzip ermöglicht interessante neue Animationen, die vom Nutzer selber gesteuert werden.

Drivers

Mirror und Preview

Principle bietet am Mac bereits eine Live Vorschau (siehe erster Screenshot rechts am Fenster Rand). In dieser Vorschau, kann man zu jedem Zeitpunkt seine neue Interaktion testen ohne dabei einen Reload oder ähnliches machen zu müssen. Möchte man seinen Prototyp jemand anderem zeigen gibt es zwei Möglichkeiten dafür. Variante eins ist, man nimmt direkt in dem Vorschaufenster seinen Klick-Ablauf auf und exportiert diesen als MOV oder GIF.
Alternativ dazu gibt es für iOS die kostenlose Mirror App. Entweder man schließt sein iDevice via USB an den Mac oder sendet über eine anderen Service (z.B. Mail oder Dropbox) das Projekt auf das Device. Perfekt um den Prototyp offline zu testen und auch an dritte zu senden.

Video Export Test

Fazit

Alles in allem ist Principle eine tolle neue App zum erstellen von interaktiven Prototypen. Ich konnte schnell lernen wie die Prinzipien zum animieren funktionieren. Dabei hat mir im übrigen auch die Tutorial Seite von Principle geholfen, auf der man verschiedene Tutorials zu den Grundfunktionen finden kann.
Die App ist noch neu auf dem Markt, bietet aber schon jetzt bessere Funktionen an, als so manch anderes teueres Programm!

Der Entwickler betonte per Mail auch noch mal, dass Principle sich momentan sehr schnell entwickelt. Feedback wird gerne entgegen genommen und eingebaut. Außerdem gibt es Updates ca. aller 2 Wochen.

Wer also Prototypen für iPhone, iPad oder Watch erstellen möchte ist hier perfekt bedient. Die knapp 100$ sind es auf jeden fall wert. Für diejenigen die Principle einmal ausprobieren möchten gibt es auch eine kostenlose Trial Version. Probiert es aus!

PREIS:
99$ (Umrechnungskurs wird beim Kauf berechnet)

ENTWICKLER:
Daniel Hooper

SYSTEMVORAUSSETZUNGEN:
OS X 10.9 oder neuer

STORE LINK

Schreibe einen Kommentar

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s