Die Sketch-Revolution für UX-Designer kommt in Europa an

Bei Sketch denkt man unweigerlich an Skizzen oder an einen lustigen Gag. Bei Sketchup hieß es noch in den 80er Jahren: „Sketchup, Rad ab, Hut ab, Bart ab, Kopf ab, Knopf ab, Sketchup!“ Wenn es um Konzeption, UX Design und Frontend geht, war lange Zeit das Rad und der Knopf ab, auch wenn der Rest immer einen guten Eindruck gemacht hat. Damit ist jetzt Schluss, denn jetzt beginnt die Leichtigkeit des Seins.

Was ist Sketch

Sketch ist ein zierliches Programm für UX Designer. Okay, das Icon ist ein Diamant. Kein Understatement. Warum auch? Sketch beschleunigt das Arbeiten, hat ausschließlich Funktionen, die ich im digitalen Bereich benötige, und vereinfacht im Projekt die Kommunikation für alle Beteiligten. Ich spare mir gefühlte 10.000 Klicks am Tag, indem keine Funktionen umständlich zu bedienen sind. Sketch führt schnell Berechnungen aus und geht nicht bei ein paar Dutzend Artboards (Zeichenflächen) in die Knie. Es fühlt sich an, als würde ich beim Gestalten schweben und nicht mit einer Schaufel in der Erde rumwühlen. 🙂 Mit Sketch lassen sich auch Illustration gestalten, und alle Artboards werden in unterschiedlichen Dateiformaten exportiert.

Plugins

Rund um Sketch werden Plugins entwickelt. Dazu gibt es eine eigene Seite (Link: https://www.sketchapp.com/extensions/plugins/), auf der nach geeigneten Plugins gestöbert werden kann. Mit „User Flow“ wird der konzeptionelle Zusammenhang von Artboards dargestellt. Mit dem Plugin „Craft“ werden in der Cloud gemeinsam verwendete Elemente verwaltet und aktualisiert. „Auto-Layout“ passt alle Elemente z.B. von iPhone7 auf iPad7 durch die Größenveränderung des Artboards automatisch an. Wie genau sich die Elemente verhalten, lässt sich vorher einstellen. Es gibt noch Dutzende weiterer Plugins, die sich ganz einfach installieren lassen.

Atomic Design

Atomic Design ist eine Methode, um Design-Systeme zu erstellen und in einem Pattern Lab zu verwalten. Das Pattern Lab wird in der Regel von Frontend-Entwicklern erstellt und verwaltet. NEU! Mit Sketch lässt sich die Struktur des Atomic Designs mit Symbolen bereits in der Konzeptionsphase aufbauen. Ein Beispiel, mit dem die Vorgehensweise verdeutlicht wird:

Es werden drei Farben (Atome) als einzelne Symbole erstellt, deren Artboards die gleiche Größe haben. Ein weiteres Symbol ist ein Molekül und besteht aus einer dieser Farben und einem Text, der ebenfalls ein Symbol ist. Wenn das Molekül verwendet wird, befinden sich rechts zwei Pop-Up-Menüs, die sog. „Overrides“. Mit den “Overrides” kann der Text und die Farbe geändert bzw. überschrieben werden. Werden mehrere dieser Moleküle verwendet, können dadurch jeweils unterschiedliche Farben und Texte verwendet werden. Die Verschachtelung mit Organismen, Vorlagen und Seiten verläuft identisch.

Workflow und Zusatzprogramme

Ich kann in Sketch bereits am Anfang meines Projekts mit der Erstellung von Rapid Prototyps und Wireframes beginnen. Nach der Konzeptionsphase geht es mit der Ausarbeitung des Designs in Sketch weiter. Programme wie Invision und Flinto helfen später bei der Ausarbeitung. Mit Invision tausche ich mich im Team und mit dem Kunden aus. Mit Flinto können Animationen und interaktive Prototypen erstellt werden.

Alle Designer sind mit dem Plugin „Craft“ via Cloud immer auf dem aktuellsten Stand. Ändern sich Icons oder Farben, findet eine Aktualisierung statt. Die neue Darstellung wird in allen Dateien bzw. auf allen Artboards ausgerollt. Vorbei ist die Zeit, wo unterschiedliche H1-Darstellungen verwendet werden oder zehn Hexadezimalwerte von einer Farbe im Umlauf sind. In Zeplin werden die Artboards und der Styleguide verwaltet. Frontend-Entwickler können Farben, Typo, Icons und CSS exportieren und in das Pattern Lab überführen. Die Zuordnung in Sketch gibt einen Überblick über die verschachtelten Elemente (Moleküle, Organismen, Vorlagen und Seiten). Abweichungen müssen dokumentiert und fundiert sein.

Was ist zu tun?

Was wir machen ist klar: Sketch, Sketch, Sketch und zielgerichtet die Adobe-Programme einsetzen. Durch Verbesserung der Workflows eine einheitliche Sprache bilden, die uns vom Anfang bis zum Ende des Projekts begleitet. Die gesparte Zeit wird in kreatives Denken investiert, da, wo die Zeit hingehört. 🙂

Bei Facebook gibt es eine Sketch-Grupp (Link: https://www.facebook.com/groups/sketchformac/) und die Community wächst auch in Europa. In Deutschland hat das erste Meetup in Frankfurt (Link: https://www.meetup.com/de-DE/SketchApp/) stattgefunden.

Hier noch ein paar Daten von Avocado aus dem “2016 Web Design Trend Report”. Die Daten hat Avocado aus ihrem Cloud-Angebot entnommen.

2016: 41% Photoshop designs vs. 59% Sketch designs
Sketch designs are revised and edited 4.5 times before coding. Photoshop designs change only 2 times before code implementation
Roboto (Webfont) appeared in 24% of Sketch designs and 19% of PS designs
2016: white color appeared in 56% of Sketch and 24% of PSD designs
In 2015, 20% of Sketch files contained gradient fill. In 2016 it’s 10%
87% of all PS shapes had rounded corner radius (in 2015 it was 92%). 84% of all Sketch shapes had rounded corner radius (same like the year before)

Quelle: Avocado: 2016 Web Design Trend Report (Link: https://avocode.com/design-report-2016/)

Links

Design-Systeme:
Atomic Design: http://bradfrost.com/blog/post/atomic-web-design/
Pattern Lab: http://patternlab.io/

Programme:
Sketch: https://www.sketchapp.com/
Invisio: https://www.invisionapp.com/sketch-prototyping
Flinto: https://www.flinto.com/
Zeplin: https://zeplin.io/

Plugins:
User Flow: https://abynim.github.io/UserFlows/
Craft: https://labs.invisionapp.com/craft
Auto Layout: https://animaapp.github.io/Auto-Layout/