Prototyping mit proto.io

Clickdummies und Wireframes

proto.io Arbeitsbereich (image: proto.io) proto.io Arbeitsbereich (image: proto.io)

Proto.io ist ja nicht mehr ganz so neu. Im Juli 2011 ging dieser Prototyping Webservice live. Mittlerweile hat sich proto.io ganz schön entwickelt.

Ganz neu ist, dass proto.io eine Plattform namens proto.io spaces eingeführt hat. Dort können Nutzer ihre kleinen Prototype Meisterwerke hochladen, präsentieren und gegenseitig kommentieren.

Proto.io zeichnet sich meiner Meinung nach durch folgende Features besonders aus:

  1. Animation
  2. Draggables (ziehbare Objekte)

Natürlich gibt es zusätzlich viele weitere Nettigkeiten, wie z. B. Kommentarfunktion, Variablen, eine UI Bibliothek, Vorschau-Apps für iOS und Android und so weiter. Aber gerade bei diesen kleinen Animation zeigt proto.io nach seine Stärke. Ein Beispiel. Wie hätte man das sonst gemacht? After Effects? Flash? Vielleicht nicht unbedingt mit Axure oder Photoshop.

Animationen mit proto.io

In proto.io gibt es zwei grundsätzliche Möglichkeiten jedes Objekt zu animieren. Via Interactions oder mit sogenannten States. Bei States werden manuell verschiedene Zustände definiert (oder gezeichnet) zwischen denen proto.io die Animation berechnet. Natürlich lassen sich viele verschiedene Eigenschaften einstellen. Das Ganze ist tatsächlich sehr einfach und funktioniert wirklich gut. Wer schon mal mit Flash oder Premiere oder sowas Erfahrung gesammelt hat, wird sich noch schneller einfinden.

Draggables mit proto.io

Heutzutage bieten einige Prototyping Tools Drag & Drop Funktionalität. Proto.io zeichnet sich dadurch aus, dass es zusätzlich zu einem sehr einfachen Zieh-Mechanismus noch diverse kleine Einstellungsmöglichkeiten und Zusatzfeatures anbietet. Das lässt Kreativen viele Optionen offen und ermöglicht den vielfältigen Einsatz im Projektalltag.

Viele weitere Beispiele, Demo Projekte und Videos findet man in der proto.io Academy. Dort findet man auch einige einstündige Webinars, wie zum Beispiel You can do *that* in Proto.io?—welches wirklich sehr sehenswert ist.

Im proto.io Blog werden einzelne Funktionen berühmter Apps nachgebaut und dann gezeigt, wie der Prototyp erstellt worden ist. Ebenfalls eine schöne Idee. Hier ist ein Beispiel einer Instagram Interaktion.

In this tutorial, we’re looking at Instagram’s UI and specifically focusing on a pull-to-refresh action along with how the header reacts to the position of the feed. Again, we’re using variables, and a different approach to scrolling content in order to synch animations.

Proto.io kostet in der billigsten Variante $24/Monat (1 Nutzer, 5 aktive Projekte) und in der teuersten Version $160/Monat (10 Nutzer, 30 aktive Projekte). Es gibt eine kostenlose 15 Tage Testversion, eine kostenlose aber sehr beschränkte Option und noch ein paar andere Möglichkeiten auf Anfrage.

About Jan (501 Articles)
Informationsarchitekt und Konferenz-Veranstalter (IA Konferenz, die Konzepter-Konferenz: http://iakonferenz.org, MOBX Mobile UX Konferenz: http://mobxcon.com), Podcaster und Twitter Addict. Geboren in Prag, sesshaft in Berlin.

Leave a comment

Your email address will not be published.


*


css.php