Erste Erfahrungen mit Sketch

Anfang 2017 haben wir den Beschluss gefasst, auf Sketch umzusteigen. Seither hatte ich die Gelegenheit, zwei große Projekte damit umzusetzen. Das Programm ist intuitiv zu bedienen, dadurch fällt gleich zu Beginn der Einstieg sehr leicht. Dennoch dauert es eine Weile, bis sich ein persönlicher Workflow eingependelt hat und man die Kniffe kennt, die einem das Designer-Leben erleichtern.

Von Photoshop zu Sketch

Sketch ist ein sehr schlankes Programm. Dadurch ist es möglich, das gesamte Design einer Website in einer Datei zu speichern (bei Photoshop führte das ja oft zu endlosen langen Lade- und Speicherzeiten). Die App lässt sich aber auch um ein Vielfaches erweitern, da es unzählige Plugins und kompatible 3rd-Party-Programme gibt, z.B. für Prototyping. Wer versucht, Sketch mit Photoshop, Illustrator oder InDesign zu vergleichen, der kommt schnell an seine Grenzen. Es handelt sich zwar wie bei Illustrator um ein Vektor-Programm, aber es ist weniger auf Illustration, sondern wirklich auf UI- und Web-Design ausgelegt. Daher ersetzt es keines dieser Programme gänzlich. Adobe bietet als Alternative die App Adobe Experience Design. Diese ist zwar vielversprechend, hinkt aber Sketch noch hinterher.

Gliederung der Inhalte

Sketch spielt in einer ganz anderen Liga. Da die App für UI- und Web-Design optimiert ist, bietet sie ganz neue Möglichkeiten, zum Beispiel bei der Gliederung der Inhalte.

Pages

Zur Gliederung für die Unterseiten verwende ich Pages – also es gibt bei mir eine Page für die Landingpage, eine für die Newsübersicht, eine für die Artikeldetailseite usw.

Artboards

Um wiederum verschiedene Ausprägungen von den Unterseiten anzuzeigen, sind Artboards sehr praktisch. So kann ich z.B. bei der Page “Kontaktseite” jeweils ein Artboard erstellen für das Kontakt-Formular

  • vor dem Ausfüllen (leeres Formular)
  • während des Ausfüllens (Darstellung der Inline Errors)
  • nach dem Ausfüllen (Erfolgsmessage)

Dasselbe gilt für die Darstellung verschiedener responsiver Optionen. So können z.B. Artboards für Desktop, Tablet und Mobile mit von Sketch vorgeschlagenen Maßen erstellt werden.

Symbole

Das nächste tolle built-in Feature sind die Symbole. Sie funktionieren ähnlich wie Smart-Objects in Photoshop, doch sie bieten noch ganz andere Möglichkeiten. Wenn man beispielsweise mehrere Icon-Symbole in derselben Größe erstellt, kann man sie im Design per Dropdown auswechseln. Das funktioniert sogar, wenn man Symbole verschachtelt. Sehr praktisch sind in diesem Zusammenhang auch Namenskonventionen. Wenn ein Button beispielsweise einen hover, focus und active State aufweist, so können die Symbole gruppiert werden, indem man sie “button/hover”, “button/focus” und “button/active” nennt. Das trägt sowohl zur Übersichtlichkeit als auch zur schnelleren Auffindbarkeit bei.

Textstyles

Ähnlich wie in anderen Programmen funktionieren auch die Textstyles in Sketch. Für eine übersichtliche Darstellung habe ich die einzelnen Styles durchnummeriert. Für die Trennung von Semantik und Optik kann schon in Sketch der Grundstein gelegt werden. Unsere Überschriften tragen die Namen Heading XXL bis Heading S. Nennt man sie beispielsweise Heading1, so kann das irreführend sein, weil damit das h1-Element gemeint sein könnte. Meistens stimmen die optischen und semantischen Überschriften zwar überein, aber sie müssen auch oft extra gesetzt werden, beispielsweise wenn bei einer Blogübersichtsseite nach der großen Überschrift (h1) kleinere Blogtitel folgen.

Erstellung von Layouts

Beim Webdesign ist es essentiell, dass sich der Designer an einem Grid orientiert. Für dieses Grid wird eine Gesamtbreite festgelegt und man teilt es in eine bestimmte Anzahl von Spalten (meist zwölf). Zudem wird eine Spaltenbreite definiert und daraus ergibt sich auch die Breite des Spaltenzwischenraums. Durch die Definition eines Grids wird gewährleistet, dass das Design gut umsetzbar ist. Das Erstellen eines solchen Grids ist oft mühsam, egal ob es von einem CSS-Framework wie Bootstrap oder Foundation vorgegeben wird, oder ob es in Absprache mit dem Development manuell berechnet oder mit Hilfe von Online-Kalkulatoren erstellt wird. Sketch bietet daher die Option “Layout Settings”, wo bequem die gewünschten Werte für das jeweilige Artboard eingetragen werden können und das “Grid” bzw. “Layout”, wie es in Sketch heißt, automatisch angezeigt wird.

Responsive Design mit Resizing

Egal ob man den Mobile First Ansatz verwendet, oder klassisch von Desktop auf Mobil runterbricht, Sketch bietet für beide Varianten ein tolles Tool an. Die Option “Resizing” ermöglicht es, das Verhalten von Objekten zu definieren. Der Designer kann also festlegen, an welchen Ecken ein Objekt fixiert ist und ob die Größe des Objekts beim Resizing gleich groß bleibt oder prozentuell mitwächst bzw. -schrumpft. Eine genaue Erklärung wie dieses Tool funktioniert findet ihr in Jon Moores Artikel Sketch 44 Resizing: How does it work???.

Exportieren von Komponenten

Für den Export bietet Sketch eine sehr innovatives System. Jedes Element kann rechts unten über die Schaltfläche “Make Exportable” zu den exportierbaren Komponenten hinzugefügt werden. Dann kann ausgewählt werden, in welcher Auflösung das Element gespeichert werden soll. Spezielle Auswahlmöglichkeiten z.B. für Retina Anzeigen, Präfix/Suffix und Dateiformate machen das Exportieren so einfach wie noch nie. Im Anschluss können alle exportierbaren Komponenten mit einem Klick in dem ausgewählten Format gespeichert werden.

Shortcuts

An dieser Stelle alle Sketch Shortcuts anzuführen ist ein Ding der Unmöglichkeit und würde den Rahmen dieses Blogartikels sprengen. So mancher Shortcut stellt eine enorme Zeitersparnis dar, wie beispielsweise die Verwendung der Alt-Taste zum Anzeigen von Abständen zwischen Elementen. Wer sich genauer über Shortcuts informieren will, dem empfehle ich folgende Lektüre von designcode.io.

Plugins

Ebenso wie bei den Shortcuts gibt es auch bei den Plugins so unendliche viele, dass ich sie hier nicht alle anführen kann. Dennoch möchte ich ein paar an dieser Stelle vorstellen, die mir gute Hilfestellungen leisten.

  • Ganz oben auf der Liste steht Craft von Invision. Das Plugin hat viele Funktionen, ich nütze sie hauptsächlich für Dummy Content. Es können Bilder z.B. von Unsplash oder aus einem bestimmten Ordner zufällig eingefügt werden. Aber auch Namen, Adressen, Telefonnummern können automatisch hinzugefügt werden.
  • Auch sehr praktisch ist das Plugin Clipboard Fill, das es ermöglicht, ein Bild in eine bestimmte Form einzufügen. Da Sketch dieses Feature nicht nativ anbietet, ist dieses Plugin von großem Vorteil.
  • Das Plugin Magic Mirror ermöglicht perspektivische Transformationen mit einem Klick darzustellen. So können z.B. Screens schnell in Shapes (z.B. einen IPhone-Screen) eingefügt werden.

Prototyping

Da das Web nun einmal nicht statisch, sondern agil ist, sind Prototyping Tools unerlässlich im Designprozess. Sketch allein ermöglicht kein Prototyping, allerdings gibt es viele kompatible Programme:

  • Zeplin: Zeigt Farben, Assets und Schriften an und es können Guidelines erstellt werden. Zudem gibt es eine Kommentarfunktion für Besprechungen mit Developern. Außerdem kann Source Code (ios/android) exportiert werden.
  • Invision App: Hier handelt es sich um ein Online Prototyping Tool, das für ein Projekt kostenlos ist. Für mehrere Projekte gibt es verschiedene Pricing-Modelle. Mit der Invision App lassen sich Click-Dummies erstellen und sie hat ebenfalls eine Kommentarfunktion.
  • Flinto: Ist ein Prototyping Tool, mit dem Scrolling, Transitions und Microinteractions animiert werden können.
  • Principle: Ist ebenfalls für Animationen geeignet.
  • Marvel: Bietet alles von Design über Prototyping bis hin zu Collaborations.

Fazit

Ich liebe Sketch! Und würde es jedem ans Herz legen, es selbst zu testen.