Wireframes mit Sketch

Neues Werkzeug für Konzepter

Konzeption-Interaction-Design-mit-Sketch

Kaum eine Berufsgruppe ist so flexibel und genügsam was Arbeitsmaterial angeht wie ein Konzepter, Informationsarchitekt oder Interaction Designer (im Folgenden werden alle einfach Konzepter genannt).

Stift und Zettel sind völlig ausreichend und fast immer vorhanden. Falls es mal kein Whiteboard oder Blatt Papier gibt, hat man Konzepter und Konzepterinnen auch schon auf Servietten, Bierdeckel oder in den Sand zeichnen gesehen.

Es gibt natürlich auch spezielle Software für Konzepter. Axure, Balsamiq, Proto.io oder UXPin sind Beispiele für altbekannte und wirklich sehr brauchbare Lösungen. Nun sind Konzepter aber von Natur aus unglaublich neugierig. Und weil offenbar die gesamte Design-Szene zu Sketch gewechselt ist und völlig am durchdrehen ist wie toll alles sei, sind Konzepter hellhörig geworden.

Konzipieren mit Sketch

Sketch ist, wie jeder weiß, ein Vektorgrafikprogramm für den Mac. Es ist relativ leicht zu erlernen, nicht super teuer (95 Euro plus MwSt.) und hat eine sehr aktive Community. Diese Sketchgemeinschaft postet auf beispielsweise sketchappsources.com stets neue Vorlagen, Plugins und freie oder kostenpflichtige Sketch-Dienste. Dort finden sich auch die hier vorgestellten Helferlein (die aktuell alle kostenlos sind).

Mit dem User Flow Diagram Template lassen sich in Sketch recht einfach Flussdiagramme erstellen. Es gibt natürlich viel bessere Programme dafür, aber wenn man sich eine Übersicht über einen gewissen Ablauf in Sketch erstellen will, geht es damit halbwegs gut. Im Prinzip erhält man ein Template mit unterschiedlichen Flow-Elementen. Da bedient man sich draus, wenn man per Copy and Paste seinen eigenen Flow baut.

Sketch-Konzeption

Ich habe in Sketch eine Seite namens Flow erstellt und dort den grundsätzlichen Ablauf dieses Beispielprojektes dargestellt.

Weil man in Sketch Text, Kästchen und Kreise sehr einfach erstellen kann, ist es natürlich kein Problem Wireframes zu bauen. Es gibt fast unzählige Templates und UI Bibliotheken. Ich nutze manchmal das Basic Wireframe Kit um das eine oder andere völlig generische Element in mein Wireframe zu kopieren (Buttons, Checkboxen, Textfelder und so weiter). Ebenfalls griffbereit habe ich das Basement iOS Wireframe Kit Sample und das Google Adwords Sketch Resource Template (eigentlich nur, um schnell die Maße verschiedener Google Banner nachzuschauen).

Das Basement iOS Wireframe Kit hört sich sehr nach iPhone und Co an, ich nutze es aber für alle Wireframes. Es enthält paar Dinge die ich nicht benötige, aber was ich mag sind die Handgesten-Icons und Pfeile für Anmerkungen. Zu sehen hier im Bild unten rechts.

Konzipieren mit Sketch

Ich lege in Sketch eine Seite namens Wireframes an und baue dort die Wireframes auf. Im Bild zu sehen ist ein Beispiel für ein Long-Press Icon und ein Konzept-Kommentar.

Jetzt kommt ein Plugin zum Einsatz: das kostenlose User Flows Plugin von @abynim. Mit User Flows lassen sich Interaktionen visualisieren ohne auf jeden einzelnen Button klicken zu müssen. Man sieht quasi aus der Vogelperspektive, wie alles zusammenhängt. Das sieht dann so aus:

Konzept-und-Interaction-Design-mit-Sketch

Pfeile zeigen im Konzept welche Klicks Nutzer wo hin führen. Farbe und Dicke der Pfeile lässt sich ändern.

User Flows kann auch eine neue Seite erstellen (hier _Flows genannt) in der nur der Ablauf im Interaktionskonzept zu sehen ist. Alle sonstigen Elemente werden ausgeblendet (wie z. B. die Konzept-Kommentare).

Konzeption-Sketch-User-Flows

Von User Flows erstellte Übersichten.

Das ist wirklich nur eine grobe Übersicht. Sketch bietet viele, viele Werkzeuge und es ist nicht ganz einfach da den Überblick zu behalten. Die hier vorgestellten kostenlosen Dienste sind aber ein guter Start für alle Neugierigen die mal was Neues ausprobieren wollen.

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