Mit Responsive Web Design haben sich nicht nur die Endgeräte geändert für die wir designen. Es haben sich auch die ganzen Arbeitsabläufe verändert. “Design in the Browser” ist nur eines der Schlagworte zu diesem Thema. Betroffen von diesen Veränderungen sind auch die Tools der Designer. Daher geht der Trend weg von altbewährten Design-Tools wie Photoshop oder Illustrator hin zu neuen flexibleren Programmen.

Sketch ist drei Programme in einem

In Sketch kann man beispielsweise Wireframes erstellen (früher Omni Graffle, Balsamiq…), UI Designs machen (früher Photoshop), Logo’s designen (früher Illustrator).

Sketch ist vektororientiert

Der Fokus bei Sketch Grafikprogramm liegt auf User Interface Design für Web Applikationen. Dadurch ist es auflösungsunabhängig. Ein klarer Vorteil gegenüber Photoshop ist die automatische “2x Export”-Funktion, die eine Grafik automatisch für normale und Retina-Displays exportiert. Exportiert werden kann in die folgenden Formate:

• PDF (Portable Document Format)
• EPS (Encapsulated PostScript)
• SVG (Scalable Vector Graphics)
• PNG (Portable Network Graphics)
• JPEG (Joint Photographic Experts Group)
• TIFF (Tagged Image File Format)

Sketch unterstützt auch SVG. Logos oder Icons können durch Drag & Drop importiert und deren Pfade, wie man es aus Illustrator gewöhnt ist, bearbeitet werden.

Sketch ist code-friendly

Alles, was in Sketch möglich ist, kann man auch mit CSS umsetzen. Zudem basiert das Arbeiten in Sketch stark auf Zahlen (Koordinaten, Breiten, Höhen, …) was auch der Arbeitsweise mit HTML & CSS entspricht. Praktisch ist auch das Export to CSS Feature. Mit Rechtsklick auf ein Objekt können schnell die CSS Werte kopiert werden. Vor allem bei komplexen Verläufen spart man sich viel Zeit und Hirnschmalz.

Sketch ist mehr als nur Flat Design

Flat Design ist nicht das einzige, was mit Sketch designed werden kann. Möglich sind auch Verläufe, Schlagschatten bis hin zu Texturen. Sketch liefert schon 11 vordefinierte Texturen mit, es können aber auch eigene Bilder, beispielsweise aus Photoshop oder von Subtle Patterns importiert werden.

Sketch arbeitet mit Grids

Es lässt sich neben dem normalen Raster, wie man ihn aus Photoshop kennt ein Grid definieren. So kann man genau mit den Spalten arbeiten, mit denen man auch im Browser arbeitet. Zusätzlich lassen sich Zeilen definieren, also auch die Arbeit nach einem vertikalen Rhythmus ist möglich.

Sketch unterstützt Templates

In Sketch erstellte Designs können als Template abgespeichert werden. Dieses Funktion ist besonders für Wireframing sehr praktisch.

Resources

Obwohl Sketch noch sehr jung ist gibt es schon einige Ressourcen, die den Einstieg in das Programm erleichtern und eine gute Basis für eigene Designs bieten:

Download Sketch

Sketch – The designer’s toolbox
www.bohemiancoding.com/sketch

Templates

Sketch Template Sammlung – Sammlung von verschiedenen Open Sources Templates für iOS, Icons, Web Interfaces, …
rodolfonovak.com

Simples iPhone 5 Template
dribbble.com/shots/739447-Sketch-Template

Realistische iOS Devices
robbiepearce.com/devices

Wireframe Kit
yo.pixxel.co

Learning

Sketch Tips & Tricks Blog
sketchtips.tumblr.com

Mengto Blog
blog.mengto.com

1 Responses

1. Christoph Rumpel says:

   25th April 2013 at 10:10 AM

   Früher schon mal verwendet, aber jetzt länger vernachlässigt. Werde ich mal wieder reinschauen 🙂 Danke!

   Reply