UX-Design

Digitales Produkt-Design mit Sketch

: Von der Idee zum Design. Vom Design zum Produkt. Wie Sketch uns beim UX-Design optimal unterstützt.

Sketch

Vor einiger Zeit haben wir uns im UX-Team nach einer kurzen Testphase dafür entschieden, Sketch als primäres Design-Tool einzusetzen. Hier teilen wir unsere Erfahrungen, geben einen Überblick über das, was sich verändert hat und welche Vorteile sich für uns ergeben haben.

Skalierbare Designs

Der Ein- bzw. Umstieg auf Sketch fiel relativ leicht. Das Tool vereinfacht die Arbeitsweise für einzelne Designer und fördert die Teamarbeit. Die Fokussierung auf das Design für Web und Apps zeigt sich schon beim Anlegen eines neuen Dokumentes. Sketch arbeitet mit so genannten Artboards und bietet Vorlagen für alle gängigen Geräte und Bildschirmgrößen (Smartphones, Tablets, Smart Watches, etc.).

Wenn wir ein Design entwickeln, erstellen wir für die wichtigsten Views initial jeweils Artboards für eine Smartphone-, eine Tablet- und eine Desktop-Auflösung. Bei einer Website könnte das z. B. die Startseite, eine Dachseite oder eine Detailseite sein. Diese Arbeitsweise hilft uns dabei, ein Design von vornherein responsive zu denken und sicher zu stellen, dass es auf allen Plattformen funktioniert. So ergeben sich schon im Designprozess automatisch Fragen wie z. B. „Skaliert das Interface auch auf mobilen Geräten?“ oder „Wie verhält sich diese UI-Komponente auf einem Touch-Interface?“. In Sketch können Artboards und Elemente so erstellt werden, dass sie bei Größenänderung responsive skalieren.

Workflow und Team Collaboration

Sketch hat eine sehr aktive Community und es gibt eine Vielzahl an Plugins, die uns erstens helfen, schneller zu sein, und zweitens uns darin unterstützen, für Entwickler optimierte Designs auszuliefern. So können bei der Umsetzung des Designs alle relevanten Spezifikationen wie z. B. Abmessungen, Farben, Typografie usw. einfach ausgelesen bzw. sogar das Markup direkt herauskopiert werden. Dieser Workflow ermöglicht eine nachhaltige Verwendung des Prototypen, denn anders als bei sonstigen Prototyping-Tools, können wir hier darauf aufsetzen und ihn für das endgültige Produkt weiterverwenden. Außerdem erspart uns das das aufwändige Erstellen von Styleguides, die zudem ohnehin schnell überholt sind und Pflegeaufwand erzeugen. Auf Wunsch lassen sich trotzdem relativ einfach Styleguides exportieren, um Gestaltungsrichtlinien zu dokumentieren. Es können global Farben definiert und in einem Dokument ersetzt werden. Durch das Arbeiten mit Symbolen ist es zudem deutlich einfacher, Dokumente aktuell zu halten, weil die Elemente nur einmal zentral bearbeitet werden müssen und in allen Instanzen aktualisiert werden.

Teamwork mit Sketch

Für uns ist der Transfer und Austausch im Team sehr wichtig. Nach unserer Erfahrung ist dies eine wesentliche Grundlage für Kreativität und Innovation. Sketch ist vektorbasiert, dadurch sind die Dateien klein und können einfach geteilt werden. Es ist sehr unkompliziert, ein Sketch-Dokument, welches schnell aus einer Vielzahl an Artboards besteht, die beispielsweise ein App-Konzept zeigen, als PDF zu exportieren und dann per Mail zu versenden. Zur schnellen Überprüfung hilft das Mirror-Plugin, um das Design auf einem echten Endgerät wie z. B. einem iPhone zu testen. Designs und Prototypen können in der Sketch Cloud zugänglich gemacht werden, um sie im Team zu iterieren oder um sie Stakeholdern im Projekt zu präsentieren.

Bei uns hat sich ein Workflow bewährt, in dem wir pro Kunde oder Projekt eine Sketch-Masterdatei erstellen, die wir über GitHub als Versionsverwaltungssystem zur Verfügung stellen. Sketch Libraries bieten den gleichen Vorteil: Alle Assets liegen zentral vor und bleiben aktuell. Jeder Designer kann sofort ins Projekt einsteigen und sich auf die wesentlichen Merkmale der User Experience konzentrieren, statt unnötig Zeit damit zu verbringen, Grafiken und UI-Elemente zu zeichnen.

Fazit

Als wir die Entscheidung trafen, umzusteigen, war das Lizenzmodell von Adobe auch ein wichtiges Kriterium. Eine Sketch-Lizenz kostet aktuell 99 $ pro Jahr. Das ist im Vergleich zu Adobe deutlich günstiger. Tools wie Sketch helfen uns nicht nur, Screens zu konzipieren, sondern sie unterstützen uns darin, Nutzererlebnisse zu gestalten. Darin sehen wir unsere Aufgabe. Hier gibt es noch viel Potenzial, die Bereiche Prototyping und Animation sind z. B. bislang nur ansatzweise vorhanden, werden aber sicher in nächster Zeit noch stärker ausgebaut werden.

Einer der wichtigsten Faktoren für positive Benutzererlebnisse ist Performance. Das gilt natürlich auch für die Tools, mit denen man UX-Designs konzipiert und entwickelt. Oberflächen sollten schlank, schnell und übersichtlich sein. Mit Sketch gelingt uns das hervorragend.

In der Branche tut sich erfreulicherweise sehr viel. Es lohnt sich, die Entwicklungen zu verfolgen, da sie die Art und Weise beeinflussen, wie digitale Produkte entwickelt werden.

Weitere Tools

Mehr zum Thema

Mike Ramahi

User Experience Designer