UI Prototyping Tutoriat — Teil I

Sketch & InVision

Exploratives und iteratives Arbeiten ist für uns als Designer elementar. Diese Arbeitsweise Hilft uns unsere Visionen zu festigen und Irrwege in der Umsetzung zu revidieren. Dabei nützlich sind vor allem Prototypen. Diese vereinfachten Abbildungen unserer Visionen helfen uns ebendiese Irrwege schnell zu finden um dann neue Wege einzuschlagen. Zudem sind Prototypen auch ein guter Weg Kunden, Entwicklern oder anderen Designern unsere Ideen effektiv verständlich zu machen.

Dieses schriftliche Begleitmaterial ist Teil des vierteiligen Tutoriats/Workshops zum Thema UI Prototyping. In diesem lernen wir, anhand des fiktiven Produktes „Guidr“, verschiedene Prozesse und Tools kennen um Interfaces zu gestalten und interaktiv erlebbar zu machen.

Weiter zu: UI Prototyping Tutoriat — Teil II | Pixate

Weiter zu: UI Prototyping Tutoriat — Teil III | Quartz Composer & Origami

Weiter zu: UI Prototyping Tutoriat — Teil IV | LEAP Motion & Quartz Composer & Processing

Guidr ist ein junges Startup das es sich zum Ziel gemacht hat die Welt der Städtetrips auf den Kopf zu stellen. Als Sightseeing-Network will man die hippe Zielgruppe mit Hilfe seiner stylischen App für sich gewinnen. In den Workshop übernehmen wir die Rolle eines Freelance-Designers und stellen sicher das die App genau so stylish und funktional wird wie es sich der Kunde vorstellt.

1. | Quick and Dirty — Vom Konzept bis zum Klickdummy

Befinden wir uns am Anfang unseres Designprozess helfen oft schon einfache Klickdummys um die Struktur unserer Vision zu testen und zu kommunizieren. 
Bevor wir jedoch zum testen kommen, müssen wir zunächst einmal unsere Vision formulieren und visualisieren. 
Deshalb gliedert sich das erste Tutoriat in drei Phasen. 
In einer kurzen Konzeptionsphase (1.1) brainstormen wir zu unseren Thema und skizzieren Wireframes der Idee auf Papier. 
In der zweiten Phase arbeiten wir mit Hilfe von Sketch (1.2) unsere Wireframes aus und bringen sie so in einen digitalen Form. In der dritten Phase laden wir unsere Sketch Files in InVision (1.3) und erstellen dann einen Klickdummy.

Aufgabe: 
Die ersten visuellen Ideen für Guidr stehen schon. Auf deren Basis soll nun ein einfacher Check-In und die ersten Schritte in der App erstellt werden.

1.1 | Konzeptphase

Es gibt leider keinen Goldenen Pfad im Designprozess. Unterschiedliche Anforderungen, verschiedene Komplexitäten und Stakeholderkonstellationen erfordern immer wieder neue Herangehensweisen.

Eine gute Konzeptphase ist jedoch in den meisten Fällen ein Garant für ein gutes Produkt. Sie hilft uns dabei die Bedürfnisse unserer Nutzer zu verstehen, die Bestandteile des Produkts zu definieren und mögliche Probleme auszumachen. Damit wir nicht haltlos durch die Konzeptphase straucheln, können wir uns dazu unterschiedlicher Design Methoden bemächtigen (-> Eine Anlaufstelle im deutschsprachigen Web dazu: http://www.designmethodenfinder.de/)

Bedingt durch die begrenzte Zeit die uns in diesem Workshop zur Verfügung steht und dem Fokus auf das Prototyping, nutzen wir das klassische Brainstorming zum definieren der UI-Element. Die definierten Elemente bringen wir dann in einer Wireframing Session auf Papier (-> Vorlagen für Papier Template von verschiedenen Devices findet man beispielsweise auf http://www.interfacesketch.com/). Papier ist in der Konzeptionsphase ein spannendes Medium, da es vom PC weg lockt und zum anders Denken einlädt.

1.2 | Sketch

Die verwendeten Sketch Files finden sich unter https://www.dropbox.com/s/gl5zw1wqma68mf6/Guidr_SingUp.sketch?dl=0

In der zweiten Phase unseres Designprozesses nutzen wir Sketch um unsere Wireframes zu visualisieren. Im Gegensatz zu Photoshop oder Illustrator ist Sketch ein Tool, welches genau auf die Belange von UI-Designer eingeht.

Wir können beispielsweise einfach verschiedene Screens übersichtlich in einem Fenster erstellen und bearbeiten.

Symbole erleichtern uns die Arbeit mit immer wiederkehrenden Elementen.

Die vielfältige Anzahl von Plugins lässt uns effizient arbeiten (-> Eine gute Anlaufstelle für Plugin findet sich unter http://plugin.sketchtalk.io/).

Die Exportfunktion ermöglicht uns Assets passgenau für unsere Kollegen bereitzustellen.

Weitere Vorteile von Sketch und mehrere Tutorials finden sich beispielsweise unter https://articles.sketchtricks.com/

1.3 | InVision

Dieser einfache InVision Prototyp ist hier zu sehen: https://invis.io/EK5M89MG7

In der dritten Phase erwecken wir unsere Visualisierung zum leben. Einfache Klickdummyes können wir mit Tools wie POP, Marvel, Frontify aber auch Software wie Keynote oder Powerpoint erstellen. Für diesen Workshop schauen wir uns jedoch InVision genauer an. 
InVision hat den Vorteil dass wir zusätzlich zu der Erstellung von Klickdummys, diese auch ganz einfach live testen können. Das heißt wir können schnell Feedback von unseren Kollegen, Kunden oder auch dem Nutzer bekommen.

Spannend an InVision ist zudem das es eine GitHub alternative für Designer darstellt. Wir können also einfach kollaborativ mit unseren Designerkollegen an einem Produkt arbeiten und haben zudem die Möglichkeit der Versionierung.