Die Sketch-Revolution f├╝r UX-Designer kommt in Europa an!

Die Sketch-Revolution f├╝r UX-Designer kommt in Europa an!

Bei Sketch denke ich 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 Mac-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 sowie deren Bestandteile werden in unterschiedlichen Dateiformaten exportiert.

Plugins

Rund um Sketch werden Plugins entwickelt. Dazu gibt es eine eigene Seite, 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.

Weitere Infos zum Auto Layout:

YouTube

Mit dem Laden des Videos akzeptieren Sie die Datenschutzerkl├Ąrung von YouTube.
Mehr erfahren

Video laden

PGlmcmFtZSB3aWR0aD0iNjAwIiBoZWlnaHQ9IjkwMCIgc3JjPSJodHRwczovL3d3dy55b3V0dWJlLW5vY29va2llLmNvbS9lbWJlZC92MzkzTGdyaVdDcz8iIGZyYW1lYm9yZGVyPSIwIiBhbGxvd2Z1bGxzY3JlZW49InRydWUiIGFsbG93PSJhdXRvcGxheTsgZnVsbHNjcmVlbiIgdGl0bGU9IiI+PC9pZnJhbWU+

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.

Weitere Infos kannst du hier im Video finden:

YouTube

Mit dem Laden des Videos akzeptieren Sie die Datenschutzerkl├Ąrung von YouTube.
Mehr erfahren

Video laden

PGlmcmFtZSB3aWR0aD0iNjAwIiBoZWlnaHQ9IjkwMCIgc3JjPSJodHRwczovL3d3dy55b3V0dWJlLW5vY29va2llLmNvbS9lbWJlZC8zZmNJcDVPWHRWRT8iIGZyYW1lYm9yZGVyPSIwIiBhbGxvd2Z1bGxzY3JlZW49InRydWUiIGFsbG93PSJhdXRvcGxheTsgZnVsbHNjcmVlbiIgdGl0bGU9IiI+PC9pZnJhbWU+

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. 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-Gruppe und die Community w├Ąchst auch in Europa. In Deutschland hat das erste Meetup in Frankfurt 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

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/

Diesen Artikel bei XING lesen