Anfang 2017 haben wir den Beschluss gefasst, auf Sketch umzusteigen. Seither hatte ich die Gelegenheit, zwei gro\u00dfe Projekte damit umzusetzen. Das Programm ist intuitiv zu bedienen, dadurch f\u00e4llt gleich zu Beginn der Einstieg sehr leicht. Dennoch dauert es eine Weile, bis sich ein pers\u00f6nlicher Workflow eingependelt hat und man die Kniffe kennt, die einem das Designer-Leben erleichtern.<\/p>\n

Von Photoshop zu Sketch<\/h2>\n

Sketch ist ein sehr schlankes Programm. Dadurch ist es m\u00f6glich, das gesamte Design einer Website in einer Datei zu speichern (bei Photoshop f\u00fchrte das ja oft zu endlosen langen Lade- und Speicherzeiten). Die App l\u00e4sst sich aber auch um ein Vielfaches erweitern, da es unz\u00e4hlige Plugins und kompatible 3rd-Party-Programme gibt, z.B. f\u00fcr 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\u00e4nzlich. Adobe bietet als Alternative die App Adobe Experience Design. Diese ist zwar vielversprechend, hinkt aber Sketch noch hinterher.<\/p>\n

Gliederung der Inhalte<\/h2>\n

Sketch spielt in einer ganz anderen Liga. Da die App f\u00fcr UI- und Web-Design optimiert ist, bietet sie ganz neue M\u00f6glichkeiten, zum Beispiel bei der Gliederung der Inhalte.<\/p>\n

Pages<\/h2>\n

Zur Gliederung f\u00fcr die Unterseiten verwende ich Pages \u2013 also es gibt bei mir eine Page f\u00fcr die Landingpage, eine f\u00fcr die News\u00fcbersicht, eine f\u00fcr die Artikeldetailseite usw.<\/p>\n

Artboards<\/h2>\n

Um wiederum verschiedene Auspr\u00e4gungen von den Unterseiten anzuzeigen, sind Artboards sehr praktisch. So kann ich z.B. bei der Page \u201cKontaktseite\u201d jeweils ein Artboard erstellen f\u00fcr das Kontakt-Formular<\/p>\n

\n
• vor dem Ausf\u00fcllen (leeres Formular)<\/li>\n
• w\u00e4hrend des Ausf\u00fcllens (Darstellung der Inline Errors)<\/li>\n
• nach dem Ausf\u00fcllen (Erfolgsmessage)<\/li>\n<\/ul>\n

  Dasselbe gilt f\u00fcr die Darstellung verschiedener responsiver Optionen. So k\u00f6nnen z.B. Artboards f\u00fcr Desktop, Tablet und Mobile mit von Sketch vorgeschlagenen Ma\u00dfen erstellt werden.<\/p>\n

  Symbole<\/h2>\n

  Das n\u00e4chste tolle built-in Feature sind die Symbole. Sie funktionieren \u00e4hnlich wie Smart-Objects in Photoshop, doch sie bieten noch ganz andere M\u00f6glichkeiten. Wenn man beispielsweise mehrere Icon-Symbole in derselben Gr\u00f6\u00dfe 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\u00f6nnen die Symbole gruppiert werden, indem man sie \u201cbutton\/hover\u201d, \u201cbutton\/focus\u201d und \u201cbutton\/active\u201d nennt. Das tr\u00e4gt sowohl zur \u00dcbersichtlichkeit als auch zur schnelleren Auffindbarkeit bei.<\/p>\n

  Textstyles<\/h2>\n

  \u00c4hnlich wie in anderen Programmen funktionieren auch die Textstyles in Sketch. F\u00fcr eine \u00fcbersichtliche Darstellung habe ich die einzelnen Styles durchnummeriert. F\u00fcr die Trennung von Semantik und Optik kann schon in Sketch der Grundstein gelegt werden. Unsere \u00dcberschriften tragen die Namen Heading XXL bis Heading S. Nennt man sie beispielsweise Heading1, so kann das irref\u00fchrend sein, weil damit das h1-Element gemeint sein k\u00f6nnte. Meistens stimmen die optischen und semantischen \u00dcberschriften zwar \u00fcberein, aber sie m\u00fcssen auch oft extra gesetzt werden, beispielsweise wenn bei einer Blog\u00fcbersichtsseite nach der gro\u00dfen \u00dcberschrift (h1) kleinere Blogtitel folgen.<\/p>\n

  Erstellung von Layouts<\/h2>\n

  Beim Webdesign ist es essentiell, dass sich der Designer an einem Grid orientiert. F\u00fcr dieses Grid wird eine Gesamtbreite festgelegt und man teilt es in eine bestimmte Anzahl von Spalten (meist zw\u00f6lf). Zudem wird eine Spaltenbreite definiert und daraus ergibt sich auch die Breite des Spaltenzwischenraums. Durch die Definition eines Grids wird gew\u00e4hrleistet, dass das Design gut umsetzbar ist. Das Erstellen eines solchen Grids ist oft m\u00fchsam, 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 \u201cLayout Settings\u201d, wo bequem die gew\u00fcnschten Werte f\u00fcr das jeweilige Artboard eingetragen werden k\u00f6nnen und das \u201cGrid\u201d bzw. \u201cLayout\u201d, wie es in Sketch hei\u00dft, automatisch angezeigt wird.<\/p>\n

  Responsive Design mit Resizing<\/h2>\n

  Egal ob man den Mobile First Ansatz verwendet, oder klassisch von Desktop auf Mobil runterbricht, Sketch bietet f\u00fcr beide Varianten ein tolles Tool an. Die Option \u201cResizing\u201d erm\u00f6glicht es, das Verhalten von Objekten zu definieren. Der Designer kann also festlegen, an welchen Ecken ein Objekt fixiert ist und ob die Gr\u00f6\u00dfe des Objekts beim Resizing gleich gro\u00df bleibt oder prozentuell mitw\u00e4chst bzw. -schrumpft. Eine genaue Erkl\u00e4rung wie dieses Tool funktioniert findet ihr in Jon Moores Artikel\u00a0Sketch 44 Resizing: How does it work???<\/a>.<\/p>\n

  Exportieren von Komponenten<\/h2>\n

  F\u00fcr den Export bietet Sketch eine sehr innovatives System. Jedes Element kann rechts unten \u00fcber die Schaltfl\u00e4che \u201cMake Exportable\u201d zu den exportierbaren Komponenten hinzugef\u00fcgt werden. Dann kann ausgew\u00e4hlt werden, in welcher Aufl\u00f6sung das Element gespeichert werden soll. Spezielle Auswahlm\u00f6glichkeiten z.B. f\u00fcr Retina Anzeigen, Pr\u00e4fix\/Suffix und Dateiformate machen das Exportieren so einfach wie noch nie. Im Anschluss k\u00f6nnen alle exportierbaren Komponenten mit einem Klick in dem ausgew\u00e4hlten Format gespeichert werden.<\/p>\n

  Shortcuts<\/h2>\n

  An dieser Stelle alle Sketch Shortcuts anzuf\u00fchren ist ein Ding der Unm\u00f6glichkeit und w\u00fcrde den Rahmen dieses Blogartikels sprengen. So mancher Shortcut stellt eine enorme Zeitersparnis dar, wie beispielsweise die Verwendung der Alt-Taste zum Anzeigen von Abst\u00e4nden zwischen Elementen. Wer sich genauer \u00fcber Shortcuts informieren will, dem empfehle ich folgende\u00a0Lekt\u00fcre von designcode.io<\/a>.<\/p>\n

  Plugins<\/h2>\n

  Ebenso wie bei den Shortcuts gibt es auch bei den Plugins so unendliche viele, dass ich sie hier nicht alle anf\u00fchren kann. Dennoch m\u00f6chte ich ein paar an dieser Stelle vorstellen, die mir gute Hilfestellungen leisten.<\/p>\n

  \n
  • Ganz oben auf der Liste steht\u00a0Craft<\/a>\u00a0von Invision. Das Plugin hat viele Funktionen, ich n\u00fctze sie haupts\u00e4chlich f\u00fcr Dummy Content. Es k\u00f6nnen Bilder z.B. von Unsplash oder aus einem bestimmten Ordner zuf\u00e4llig eingef\u00fcgt werden. Aber auch Namen, Adressen, Telefonnummern k\u00f6nnen automatisch hinzugef\u00fcgt werden.<\/li>\n
  • Auch sehr praktisch ist das Plugin\u00a0Clipboard Fill<\/a>, das es erm\u00f6glicht, ein Bild in eine bestimmte Form einzuf\u00fcgen. Da Sketch dieses Feature nicht nativ anbietet, ist dieses Plugin von gro\u00dfem Vorteil.<\/li>\n
  • Das Plugin\u00a0Magic Mirror<\/a>\u00a0erm\u00f6glicht perspektivische Transformationen mit einem Klick darzustellen. So k\u00f6nnen z.B. Screens schnell in Shapes (z.B. einen IPhone-Screen) eingef\u00fcgt werden.<\/li>\n<\/ul>\n

    Prototyping<\/h2>\n

    Da das Web nun einmal nicht statisch, sondern agil ist, sind Prototyping Tools unerl\u00e4sslich im Designprozess. Sketch allein erm\u00f6glicht kein Prototyping, allerdings gibt es viele kompatible Programme:<\/p>\n

    \n
    • Zeplin:<\/a><\/strong>\u00a0Zeigt Farben, Assets und Schriften an und es k\u00f6nnen Guidelines erstellt werden. Zudem gibt es eine Kommentarfunktion f\u00fcr Besprechungen mit Developern. Au\u00dferdem kann Source Code (ios\/android) exportiert werden.<\/li>\n
    • Invision App:<\/a><\/strong>\u00a0Hier handelt es sich um ein Online Prototyping Tool, das f\u00fcr ein Projekt kostenlos ist. F\u00fcr mehrere Projekte gibt es verschiedene Pricing-Modelle. Mit der Invision App lassen sich Click-Dummies erstellen und sie hat ebenfalls eine Kommentarfunktion.<\/li>\n
    • Flinto:<\/a><\/strong>\u00a0Ist ein Prototyping Tool, mit dem Scrolling, Transitions und Microinteractions animiert werden k\u00f6nnen.<\/li>\n
    • Principle:<\/a><\/strong>\u00a0Ist ebenfalls f\u00fcr Animationen geeignet.<\/li>\n
    • Marvel:<\/a><\/strong>\u00a0Bietet alles von Design \u00fcber Prototyping bis hin zu Collaborations.<\/li>\n<\/ul>\n

      Fazit<\/h2>\n

      Ich liebe Sketch! Und w\u00fcrde es jedem ans Herz legen, es selbst zu testen.<\/p>\n","protected":false},"excerpt":{"rendered":"

      Anfang 2017 haben wir den Beschluss gefasst, auf Sketch umzusteigen. Seither hatte ich die Gelegenheit, zwei gro\u00dfe Projekte damit umzusetzen. Das Programm ist intuitiv zu bedienen, dadurch f\u00e4llt gleich zu Beginn der Einstieg sehr leicht. Dennoch dauert es eine Weile, bis sich ein pers\u00f6nlicher Workflow eingependelt hat und man die Kniffe kennt, die einem das […]<\/p>\n","protected":false},"author":24,"featured_media":1202,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[74,84,90],"tags":[187],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.zensations.at\/wp-json\/wp\/v2\/posts\/1201"}],"collection":[{"href":"https:\/\/www.zensations.at\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.zensations.at\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.zensations.at\/wp-json\/wp\/v2\/users\/24"}],"replies":[{"embeddable":true,"href":"https:\/\/www.zensations.at\/wp-json\/wp\/v2\/comments?post=1201"}],"version-history":[{"count":1,"href":"https:\/\/www.zensations.at\/wp-json\/wp\/v2\/posts\/1201\/revisions"}],"predecessor-version":[{"id":1203,"href":"https:\/\/www.zensations.at\/wp-json\/wp\/v2\/posts\/1201\/revisions\/1203"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.zensations.at\/wp-json\/wp\/v2\/media\/1202"}],"wp:attachment":[{"href":"https:\/\/www.zensations.at\/wp-json\/wp\/v2\/media?parent=1201"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.zensations.at\/wp-json\/wp\/v2\/categories?post=1201"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.zensations.at\/wp-json\/wp\/v2\/tags?post=1201"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}