Digitales Produkt-Design mit Sketch

Screenshots von Beispielwebseiten, die mit Sketch entworfen wurden

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.

Mike Ramahi

Mike Ramahi

Scroll to Top