Veröffentlicht am 30. Januar 2018 von Robert Klank

Effizienter Arbeiten mit Sketch – Emojis haben doch einen Sinn

Nachdem Adobe sein Programm Fireworks ohne Nachfolger hat sterben lassen, füllte vor einigen Jahren Sketch diese Lücke. Seitdem ist das Tool fester Bestandteil unseres Designprozesses. Hier sind wir ständig auf der Suche nach Workflow-Optimierungen. So beschleunigen die „Nested Symbols“ die Arbeit mit komplexen Interfaces – vorausgesetzt, es findet eine sinnvolle Benennung der Symbole und Layer statt. Dafür nutzen wir bei UCDplus folgendes Regelwerk:

Benennung von Symbolen

Symbole in unseren Sketch Dateien werden grundsätzlich englisch in singular und klein geschrieben. Wenn Worttrennungen notwendig sind, dann erfolgen diese durch einen Unterstrich. Des Weiteren orientieren wir uns bei vielen Elementen am atomic design Konzept. Das heißt, dass Designelemente in einzelne Komponenten zerlegt werden: Die Gruppe Atom beinhaltet Basiselemente für zusammengesetzte Moleküle, welche wiederum zu komplexeren Organismen formiert werden können. Ziel ist es dabei, neben der Wiederverwertbarkeit der Elemente auch die Arbeit mit Libraries zu erleichtern.

Einordnung durch Namensvergabe

In Sketch können Symbole bei der Benennung mithilfe des Schrägstrichs in logischen Gruppen angelegt werden. Hierbei sollten Gruppen gewählt werden, die häufig gebraucht werden. So müssen Icons und Farben nicht zwingend als Atome eingeordnet werden, sondern können auch eigenständig stehen.

Eine weitere Festlegung ist die Schreibweise der Ordner: Durch die Benennung in Versalien, gruppiert Sketch automatisch die Ordner, und heftet sie oben an. So lassen sich diese schnell und einfach hierarchisieren.

Layer durch Emojis schneller finden

Galt das Benennen der Ebenen in Photoshop noch als lästig, können die Layer in Sketch eine große Hilfe sein. Diese werden in die Instanzen der Symbole weitervererbt und bilden den Kern der Nested Symbols. Ein durchdachter Aufbau hilft, schnell das erforderliche Element oder Label auszutauschen. Emojis etablieren sich zunehmend als Element für Benennungen, weil ihre Bildhaftigkeit schneller einen Eindruck des Inhalts vermittelt. Wir haben folgende Namenskonventionen für Layer entwickelt:

  • ✏txt
  • 🌀icn (icon)
  • 🎨clr (color)
  • 🔬atom
  • 🚦state
  • 📱mobil
  • 🖥desktop
  • ✅btn (button)

Die Liste ist natürlich projektabhängig erweiterbar. Sie hilft uns, dateiübergreifend und über größere Zeiträume, den Überblick über Designelemente zu behalten. Außerdem können die Atome durch Kombinationen der Namen besser unterschieden werden (siehe Bild).

Pro Tipp: Das Sketch Plugin Rename It hilft beim schnellen einsortieren. Layer, Artboards und Symbole können in einer Stapelverarbeitung an einheitliche Definitionen angepasst werden – und Funktionen wie automatisches Großschreiben helfen beim nachträglichen Aufräumen.

Nachhaltiges Arbeiten

Definierte Schreibweisen erfordern wie alle neuen Prozesse zu Beginn immer eine Menge Disziplin und Aufwand. Mittel- und Langfristig profitieren davon aber alle Beteiligten. Projekte können dank eines identischen Aufbaus einfacher an Kollegen übergeben werden, und neue Mitarbeiter finden sich deutlich schneller zurecht. Auch profitiert man selber von einer einheitlichen Benennung, wenn zum Beispiel das Projekt lange unbearbeitet auf dem Server geschlummert hat und nach einigen Wochen wieder weiterbearbeitet werden soll. Zudem gehen auch sekundäre Aufgaben, wie der Datenexport, deutlich schneller von der Hand.

Was sind Eure besten Hints für einen guten Sketch-Workflow? Ab in die Kommentare damit.

 

Unsere Sketch-Reihe:

1. Teil: Effizienter Arbeiten mit Sketch – Emojis haben doch einen Sinn
2. Teil: Kollaboratives Arbeiten mit Sketch – Libraries optimal nutzen
3. Teil: Mit verschachtelten Symbolen zum Sketch Experten
4. Teil: Button-Hack – Erscheint am 20. Februar 2018
5. Teil: Nützliche Sketch Plug-Ins – Update (in Arbeit)

Schon etwas älter, unser Artikel zu Sketch-Plug-Ins: http://www.interaction-design.de/2016/02/23/sketch-plugins/