Sketch Tutorials, Tipps und Links

Sketch ist ein modernes Interface-Design- und UX-Tool. Nicht selten löst es schon im Lernprozess echte Begeisterungsstürme aus. Es gibt viele kleine Details, die das kluge Zeichenprogramm nicht gleich auf den ersten Blick preisgibt. Erst beim Bearbeiten komplexerer Screendesign-Projekte zeigt sich Sketch von der allerbesten Seite.

 

Deshalb sind beim Erlernen oft viele „Ahhhs“ und „Ohhhs“ zu hören. Der Diamant als Sketch-Logo ist keineswegs übertrieben: Es ist mit großem Abstand das absolute Juwel der UX-Design-Apps. Seit der Sketch-App steht der Logo-Diamant im Web als Ikone für Highend-Webdesign. Das Programm läuft selbst an älteren Macs superweich solange man keine riesengroßen Bitmapgrafiken importiert. Die Hürden der Sketch App liegen weniger beim Erlernen selbst, sondern erfordern neben dem Mac einen radikalen Schnitt zur alten Adobe-Welt. Es ist quasi unmöglich auch nur kleine Teile daraus mitzunehmen, da die Migrationsmöglichkeiten äußerst begrenzt sind.

PDF, EPS, SVG – Feierabend. Sketch und Photoshop sind völlig inkompatibel. Adobe war der alte Dinosaurier, aber wir widmen uns jetzt echten UX-Herausforderungen. Hier gibt es nicht zu beschönigen, sondern nur einen klaren Schnitt zu tun. Im Kopf. Disruptiv ist dafür der ausnahmsweise wirklich passende Begriff. Mit Sketch geht das zuckerhonigsüß, wenn man sich wirklich ein paar Tage darauf einlasst. Erfahrene Designer-Innen erkennen: Mit Sketch ist eine viel bessere Zeichenwelt im Screen- UX- App- und Webdesign möglich. Ich kann nur jeden dazu ermutigen das intelligente Vektor-Zeichenprogramm einfach mal ausprobieren!

 

Sketch läuft auch auf einem günstigen Mac Mini

Nicht der Mac war bei mir das Problem, sondern Adobe. Nachdem Adobe Fireworks ersatzlos abgesägt hat und jedem die sündhaft teure Cloud aufzwängt, habe ich mir als ehemaliger Hardcore-Windows-User einfach einen schnellen Core I7-Mac-Mini mit SSD und 16GB-Ram gekauft. Zusammen mit einem hochaufgelösten 27 Zoll-Monitor ergibt sich daraus ein performanter 3K-Webdesign-Mac, der nicht viel teurer als ein PC ist. Zusätzlich laufen darauf die Affinity Photo- und Designer-Programme butterweich. Alle drei Design-Programme gibt es zusammen einmalig schon für ca. 200,- EUR! Damit ist man als Webdesigner schon sehr gut ausgerüstet. Affinity Designer arbeitet übrigens über die Zwischenablage Hand in Hand mit Sketch zusammen. So kann man z.B. in Affinity Designer ein komplexes Vektor-Objekt erstellen und dies einfach über Copy und Paste in Sketch als voll editierbarer Vektor weiter bearbeiten. Komplexe PDFs lassen sich über Affinity erheblich einfacher öffnen als direkt in Sketch. Affinity schlägt auf diesem Weg übrigens auch eine kleine Brücke zu Photoshop, fast alle PSDs lassen sich damit öffnen, wenn auch nicht immer ganz perfekt.

 

Wie kann man ein professionelles Team für Sketch begeistern?

Oft ist zunächst ein strategisches Vorgehen ist nötig, um die Sketch-App in einem Design- und Entwicklerteam neu zu etablieren. In professionellen Agenturlandschaften ist das nicht immer einfach, da man mit anderen Teams fest zusammen kooperieren muss und Adobe im Web-Bereich durch die Familie Fireworks / Photoshop / Flash / Dreamweaver / Muse lange Zeit als unantastbarer Industriestandard galt. Hier ein kleines 40 MB Progrämmchen als neuen Standard für digitales Interface-Design zu setzen, erscheint vielen Entscheidern zunächst mehr als gewagt. Bis man es selbst testet und nach einer Woche merkt, wieviel Zeit und Mühen es im Designprozess und bei der Produktion einspart. Unsere Entwickler waren ebenfalls sofort begeistert. Das Exportieren von Objekten ist kinderleicht, Sketch generiert direkt CSS-Angaben für Objekte, alle Funktionen sind strikt für digitales Publizieren optimiert. Was im Web nicht funktioniert gibt es auch nicht in Sketch. Das macht das Programm so extrem übersichtlich.

 

Das Sketch Interface

Sketch Interface

Das Sketch-Interface ist wunderschön aufgeräumt. Die vielfältigen Tools entdeckt man erst beim Anpassen der Werkzeugleiste.

Wer sich mit Webdesign, App-Entwicklung, Prototyping und UX-Gestaltung beschäftigt, wird schnell feststellen, dass Sketch im Alltag eine echte Waffe für digitale Gestaltung ist. Insbesondere für die Entwicklung von fluiden „Mobile-, Apps- und Responsive Webdesigns“. Es bleibt mit Sketch einfach mehr Zeit für den echten Designprozess. Die Entwickler von Bohemian Coding haben hier wirklich ein sehr zielgerichtetes Programm realisiert, statt einer eierlegenden Wollmilchsau wie z.B. dem Dinosaurier Photoshop, der ursprünglich für nichts anderes als die Bildbearbeitung entworfen wurde. Vieles ist für die neuen Design-Anforderungen in Sketch ganz neu gedacht worden:

 

Sketch Vorteile


  • Sketch läuft sehr füssig und ist extrem schlank, das Hauptmenü der Arbeitsumgebung ist individualisierbar
  • Mehrere Artboards, Seiten und der infinite Hintergrund sparen beim Erstellen von multiplen Screens sehr viel Zeit
  • Der Designprozess in Sketch fokussiert sich ganz auf vektororientierte Webdesignarchtiktur à la Browser – und nicht auf „Designs malen“
  • Es gibt traumhaft einfache Exportfunktionen von Sections, atomaren Pixelteilchen, knackscharfen SVGs und das alles in mehreren Größen @2x @4x auf einen Klick …
  • Die Programmfähigkeiten sind exakt auf den Umfang reduziert, der sich auch in CSS abbilden lässt
  • Eine PlugIn Schnittstelle erlaubt das Einbinden von praktischen Erweiterungen – davon gibt es mittlerweile sehr viele wie z.B. responsive Funktionen, Suchen und Ersetzen, eigentlich alles, was das Herz begehrt!

 

Sketch Zeichenwerkzeuge

Die Sketch Grundformen in den Zeichenwerkzeugen

Zwei Dinge fehlen der Zeichen-App noch

Ich wünsche mir zukünftig noch ein Animationstool für SVGs als PlugIn sowie in weiteres Tool, um innerhalb von Sketch einfache Bitmap-Bildbearbeitungsprozesse durchführen zu können – wie früher bei Fireworks. Dies ist bislang bis auf die Färbung, Skalierung und den Zuschnitt von Pixelbildern nur sehr eingeschränkt möglich. Erstaunlicherweise kann man mit diesen Grundfunktionen schon ganz gut arbeiten. Eine Export-Krücke funktioniert wie beschrieben ganz gut über Affinity Designer, oder als Vektor-PDF direkt aus In-Design oder Photoshop.

Immer mehr Zeichen-Programme arbeiten mit dem Sketchformat direkt zusammen: Neben Affinity Designer kann das neue Figma Zeichenprogramm Sketch-Dateien direkt öffnen. Das bekannte  Prototyping-Tool Principle arbeitet ebenfalls direkt mit der Original-Sketchdatei zusammen. Als weiteren Wunsch hätte ich noch handfeste PlugIns, auf die ich mich referenziert via Bohemian Coding 100%ig verlassen könnte. Derzeit gibt es nämlich leider erheblich mehr Erweiterungen, als erlaubt. Das bedeutet: Gibt es ein Update von Sketch (die gab es in der Vergangenheit monatlich), funktionieren die ganzen PlugIns zum Teil nicht mehr. Mhhhhh…. das ist schlecht für Nutzer in Netzwerken, die auf wirklich verlässliche Industriestandards setzen. Mein Tipp ist daher einfach auf zu viele Sketch-PlugIns zu verzichten. Sie laufen nach einen halben Jahr manchmal nicht mehr und werden auch nicht weiter entwickelt. Hier ist zunächst mal Misstrauen angebracht. Trotz allem ist Sketch in den letzten Jahren ohne Zweifel zu einem neuen Standard im Webdesign geworden. Wer mal mit Sketch als Webdesigner flüssig arbeiten konnte, der will kein Photoshop oder Fireworks mehr. Leider gibt es das Tool auch zukünftig nur für den Mac, weil es direkt auf die Ressourcen und Bibliotheken des Apple-OS zurückgreift. Hoffen wir, dass sich Bohemian Coding nicht von Adobe schlucken lässt. Das wäre der absolute Alptraum…

Als UX-Designer benötigt man neben Sketch trotzdem noch ein Bildbearbeitungsprogramm wie z.B. Affinity Photo, Pixelmator oder eben ein altes Photoshop. Sketch verfügt über eine PlugIn-Schnittstelle, mit der man das kleine Programm sehr weit aufbohren kann. Weil das Tool so simpel erscheint, gab es am Anfang auch keine richtigen Anleitungen oder Tutorials. Seit Sketch 3.x hat sich das geändert, denn ganz so flachl ist die Lernkurve nun nicht mehr. Nun gibt es schon die Sketch-Version 4.x. Um den Überblick zu behalten, habe ich die wichtigsten Links und Ressourcen zu Sketch hier gesammelt.

 

Sketch Plugins 2017


de.icons8.com/lunacy „The first real Sketch-Viewer for Windows with CSS export.“ Bohemian Sketch-Dateien in Windows öffnen, betrachten, zoomen, als PNG exportieren, Elemente-Code als CSS exportieren, usw. In Zukunft kommen noch mehr Funktionen zu „Lunacy“ hinzu. Das wurde aber auch Zeit! Wenn Bohemian Coding nichts für Windows-Coder tut, dann machen es eben andere.

Animatemate.com Einfache Animationen direkt in Sketch erstellen

 

Sketch Templates und Ressourcen 2016


www.sketchappsources.com Sketch templates – thousands of free Sketch resources
sketch.zeef.com/patrick.loonstra Sketch resources
sketchrepo.com Sketch templates
freebiesbug.com/sketch-freebies
Sketch templates
www.chapterthree.com/blog/wireframing-template-sketch Wireframing template
speckyboy.com/2013/04/22/free-ui-templates-for-sketch-app Free UI-Kits
designsrazzi.com/2015/55-best-premium-free-sketch-templates Sketch templates

 

Sketch PlugIns


awesome-sket.ch Eine Sammlung wirklich nützlicher Sketch PlugIns
github.com/marcisme/sketch-preview Artbords aus Sketch live auf auf mobilen Geräten anzeigen. Auch für Android-Geräte geeignet. Dazu wird noch die kostenlose Skala-Preview benötigt: bjango.com/mac/skalapreview/ Ein erklärendes Video zur Funktionsweise: www.youtube.com/watch...
github.com/fhuel/unsplash-it-sketch PlugIn um Bild-Platzhalter (Personas) in Sketch automatisch zu laden

github.com/matt-curtis/Fluid-for-Sketch Responsive-Design-PlugIn für Sketch
magicmirror.design Perspektiven für Mockups
github.com/keremciu/sketch-iconfont Iconfonts verwalten
github.com/timuric/Content-generator-sketch-plugin Sketch PlugIn um Platzhalter-Content zu generieren z.B. Namen, Fotos, Geodaten, Avatare etc.

github.com/andrewfiorillo/sketch-palettes Save and import palettes
github.com/mscodemonkey/Sketch-Find-And-Replace Suchen und ersetzen von Text
github.com/ddwht/sketch-dynamic-button Buttonlängen nach Text automatisieren
marketblog.envato.com/web-design/free-sketch-app-plugins/ Sketch Plugins Übersicht

 

Exporthilfen in das Sketchformat


www.pagelayers.com Exportiert Webseiten in das PSD- oder PNG-Format
hackingui.com/design/export-photoshop-layer-to-svg Noch ein weiteres Export-Script aus Photoshop
www.youtube.com/watch?v=6DWfnBKOusk Video Sketch-Export nach PSD über Affinity Designer

 

Sketch erlernen – Sketch Tutorials und Tipps für Anfänger und Fortgeschrittene


sketch-wiki.de Tutorials und Anleitungen zu Sketch in Deutsch
sketchtalk.io Sketch User Forum
www.sketchcasts.net Einige Sketch-Video-Tutorials sind kostenlos

designcode.io/sketch Eine der besten Websites über Sketch von MengTo
medium.com/sketch-app-sources/sketch-app-tutorial-series-part-1-of-4... Gutes Tutorial für Sketch Anfänger von Marc Andrew
sketch.land Useful ressources für Sketch

medium.com/sketch-app-sources/prototyping-with-marvel-and-sketch-part-1-of-2-e2f828141171#.39l6fqeoq Tutorial „Prototyping with Marvel“ für Fortgeschrittene von Marc Andrew
www.bohemiancoding.com/sketch/learn
Sketch Tutorials vom Hersteller
www.sketchapp.com/support/documentation/ Sketch Handbuch vom Hersteller

Sketch Prototyping und Kollaboration


blog.yummygum.com/... Die besten Prototypingtools im Test
www.sketchappsources.com/blog/... Guter Vergleichstest über die bekannten Sketch Prototyping Tools

www.flinto.com/mac Soll von allen Prototyping-Tools mit Sketch mit am besten funktionieren
principleformac.com
www.pixate.com
Pixate wurde von Google aufgekauft und ist nun kostenlos erhältlich
framerjs.com Codebasiertes Prototyping
atomic.io
www.invisionapp.com
marvelapp.com Prototyping and collaboration

zeplin.io Tool für die Zusammenarbeit von Programierern und Designern
www.sketchappsources.com/blog/... Prototyping mit Origami (free)
marcosvid.al/sketch-notebook/ PlugIn, um Sketch Artboards zu dokumentieren
webdesign.tutsplus.com/articles/how-to-collaborate-with-your-team... Wie Sketch Teams kollaborieren

 

Lesenswerte Sketch-Artikel aus dem Smashing Magazine


www.smashingmagazine.com/2017/03/sketch-figma-showdown/
www.smashingmagazine.com/2015/04/17/using-sketch-for-responsive-web-design-case-study/
www.smashingmagazine.com/2015/05/15/sketch-with-material-design/
www.smashingmagazine.com/2015/01/30/prototyping-ios-android-apps-sketch-freebie/
www.smashingmagazine.com/2015/06/13/freebie-responsive-sports-icon-set-40×4-icons-ai-csh-png-psd-sketch-svg/

 

Ältere Sketch-Ressourcen


Die folgenden Links zu Sketch sind schon etwas älter. Zum Löschen sind sie aber zu schade. Ich freue mich sehr über weitere, gute Sketch-Links per Email.

sketchshortcuts.com Tastaturkürzel für Sketch
webdesign.tutsplus.com/articles/the-a-to-z-of-sketch–cms-22030 Sketch A-Z Tutorial
github.com/getflourish/Sketch-Style-Inventory Style Inventory for Sketch
brianhoffdesign.com/#/blog/switching-from-photoshop-to-sketch-day-by-day Von Photoshop zu Sketch – Tagebuch

medium.com/@KounterB/a-month-with-sketch-3-68c443fe5041#.w3bmmhxf2
Der erste Monat mit Sketch 3…
medium.com/sketch-tricks Interessante Sketch Tricks von Medium.com
twitter.com/sketchtricks Sketch Tricks auf Twitter
sketchtricks.com Sketch Tricks
www.youtube.com/channel/UC4HSLwylN2gvbP5H5Swp4Cg Sketch Video Tutorials

www.sketchtips.info Tipps, Gedanken und Einsichten in das Lieblingsgrafiktool Sketch
www.amazon.de/Creating-Graphics-Sketch-Learn-Video/dp/0133992934 Sehr gute Sketch 3.x Video-Tutorial-DVD von Amar Sagoo
www.sketchtips.info Tipps zu Sketch
github.com/sketchplugins/plugin-directory Sketch Plugin Directory
sketchdesign.io Sketch Lernvideos