Seit Beginn meiner Arbeit als Designerin benutze ich Adobe Programme, allen voran Photoshop und Illustrator. Undenkbar, dass es etwas Besseres gibt! Oder doch?

Ich habe mir die Photoshop-Alternative Sketch genauer angesehen und während eines Webdesign-Projekts ausgiebig getestet. Erfahre hier, was Sketch für mich großartig macht – und was mich fast in die Verzweiflung getrieben hat.

Wann Sketch? Wann Photoshop?

Am Vergleich Sketch/Photoshop kommt man einfach nicht vorbei. Dabei haben die beiden Programme andere Schwerpunkte: Adobes Platzhirsch Photoshop ist eigentlich ein Bildbearbeitungsprogramm. Ja, es lässt sich super für Webdesign verwenden – hat aber auch eine Menge weitere Funktionen. Das macht Photoshop sehr komplex.

Sketch – Vektoren, Vektoren, Vektoren

Da kommt Sketch ins Spiel. Sketch ist deutlich schlanker, weil es für den vektorbasierten Einsatz konzipiert ist. Das ist auch bitter nötig. Denn Webseiten – und mit ihnen das Webdesign – haben sich verändert. Responsive Webdesign ist zu Recht ein Muss und auf Retina-Displays möchten wir gestochen scharfe Bilder und SVG-Icons bestaunen.

Deswegen würde ich Sketch auch nicht als Mischung aus Photoshop und Illustrator bezeichnen. Deren Namen kommen schließlich nicht von ungefähr. Andersherum könnte Sketch womöglich Adobe Illustrator ersetzen. Bisher habe ich Sketch aber nur als Webdesign-Tool eingesetzt und nicht bei einem reinen Illustrationsjob wie einer Logo-Entwicklung.

In meinem Projekt habe ich mit Sketch die Wireframes und anschließend auf dieser Basis das Design entwickelt – im gleichen Programm. Ein angenehmer Workflow. Was Sketch 3 alles zu bieten hat, wird hier bei Design+Code gut erklärt und angepriesen. Meine persönlichen Erfahrungen – sowohl Vor- als auch Nachteile – findest du hier.

Vorteile von Sketch

Hier meine persönlichen Lieblingsfeatures von Sketch:

Kein Abomodell

Was früher normal war, ist jetzt ein Feature: Einmal kaufen und zeitlich unbegrenzt nutzen können. Updates gibt es „for free“. Sketch kostet im Moment 99 $, was für ein solches Tool günstig ist. Adobe Photoshop CC (im Paket mit Lightroom) schlägt monatlich mit knapp 12 € zu Buche. In einem Jahr kommen so 144 € zusammen. Jahr für Jahr.

Schnelles Bearbeiten und Positionieren mit Koordinaten und Raster

Auch wenn Pixelgenauigkeit für viele Designer etwas an Priorität verloren hat – für mich ist sie sehr wichtig. Das mag auch daran liegen, dass ich grundsätzlich gerne aufräume und sortiere – chaotische Ebenen sind mir ein Graus. Das Arbeiten mit Koordinaten gibt es seit der letzten Version auch in Photoshop, funktioniert aber nicht bei allen Arten von Objekten.

Dank des hauseigenen Rasterlayouts („Show Layout“) arbeite ich in Sketch seltener mit Hilfslinien (weniger Chaos, yeah). Das Erstellen geht leicht von der Hand, ganz ohne Plugin.

Intuitives Arbeiten

Sketch braucht keine lange Einarbeitung. Alle Bedienfelder sind leicht zu finden. Ein Beispiel: Einzelne Ebenen anwählen durch Doppelklicken, man springt immer eine Ebene tiefer – das hat man schnell heraus.

Mehrere Arbeitsflächen

In Sketch kannst du mehrere Arbeitsbereiche, sogenannte Artboards, nebeneinander anlegen. Es gibt sinnvolle Vorlagen, z. B. für das iOS UI oder eine Webdesign-Vorlage, die mehrere Artboards in Tablet- und Mobile-Größen enthält.

Die einzelnen Artboards lassen sich schnell und einfach in ihrer Größe ändern, samt Hintergrundfarbe.

Neben Artboards gibt es auch Pages. Sie liegen eine Ebene höher. Auf einer Page können also mehrere Artboards angelegt werden.

Einfach Schriften definieren

Mit Sketch lassen sich leicht Absatzformate definieren. Meiner Erfahrung nach funktioniert das hier deutlich besser als bei Photoshop (wo es auch erst seit Photoshop CC Absatzformate gibt!).

Mit Symbolen Elemente synchron bearbeiten

Symbole sind vergleichbar mit Smart Objects in Photoshop. Einmal definiert aktualisieren sie sich alle wie von selbst. Ich setze Symbole vor allem bei Header, Footer und Buttons ein. Das ganze funktioniert „Artboard-übergreifend“. Wichtig dabei: Symbole selbst können keine Symbole enthalten.

Farben global und dateibezogen bestimmen

Die Farben können global UND für ein speziell für ein Dokument definiert werden. Der Picker ist verbunden mit der Farbpalette. Großartig.

Sauberes Exportieren

Die Export-Einstellungen sind großartig. Kein Slicen, kein Ebenen-Ausblenden. Es können alle Artboards auf einmal als PDF oder einzeln als PNG exportiert werden. Praktisch: Klickt man links in der Leiste Artboards an, wird nur diese Auswahl exportiert.

Sollen Objekte wie Icons als SVGs exportiert werden, muss dafür nur das Objekt selbst angeklickt werden: Ganz rechts unten bei „Make exportable“ die Größe (1x, 2x …) und das Format auswählen – fertig. Der Ebenenname wird direkt als Dateiname übernommen.

Nachteile von Sketch

Leider gibt es auch einige „Kinderkrankheiten“ bei Sketch:

Schrift- und Strichstile fehlen

Ich vermisse die Möglichkeit, Schriften in Versalien zu setzen. Auch die Hochgestellt-Textfunktion fehlt. Ähnlich sieht es bei den Strichstilen aus: Weder bei Pinsel, Linie noch Pfad können Stile ausgewählt werden.

Look & Feel ausbaufähig

Der Look & Feel ist ok, aber nicht wirklich schön. Besonders im Ebenen-Fenster fehlt die Detailliebe.

Keine Bildbearbeitung möglich

Dafür ist Sketch nicht gemacht: Bildbearbeitung. Dennoch muss ich in Webseiten-Layouts Bilder einsetzen können, vor allem zur Ansicht für den Kunden. Durch das Hin- und Herwechseln in Photoshop und erneutes Exportieren entsteht ein lästiges Springen.

Fehlerhafte Zurück-Funktion

Dies ist einer der unangenehmsten Bugs: Die Zurück-Funktion zerschiesst ab und zu Layouts oder komplette Absatzformate, die dann neu definiert werden müssen. Grrr.

Styles mit kleinen Bugs

Weitere kleine Bugs können nerven: So wird z. B. die Rundung an Eingabefeldern nicht übernommen, obwohl es sich um einen „Shared Style“ handelt. Mh.

Copy & Paste an falscher Position

Das einfache Kopieren und Einfügen von Objekten ist nicht abhängig davon, wo ich mich befinde. Das Objekt wird in der Mitte des Artboards eingefügt, nicht an der Position, an der ich mich befinde. Hierfür muss dann ein anderer Kurzbefehl verwenden werden.

Objekte löschen – Orientierung verlieren

Wird ein Objekt entfernt, „springt“ man aus der Gruppe. Dann muss man wieder die Ordner öffnen, um an die gleiche Position zu gelangen. Blöd.

Sketch für Webdesign – mein Fazit

Sobald man mit anderen Designern und Entwicklern zusammen arbeitet, die kein Sketch haben, ist kein Datei-Austausch möglich. Das ist manchmal schwierig. Die meisten Netzwerk-Kollegen arbeiten mit Photoshop, der ein oder andere mit Affinity Designer. Und dann gibt es noch diejenigen Kandidaten, die keinen Mac haben…

Was ich bisher vermisse, sind Erweiterungen wie Adobe Color CC (vorher „Kuler“). Das ist ein Service von Adobe, mit dem du deine persönlichen Farbthemen erstellen oder die von anderen Designern nutzen kannst. Deswegen werde ich mir noch die vielen Plugins aus der Sketch-Community vornehmen. Da könnte die ein oder andere Lösung schon parat sein.

Was mir noch schwer fällt: Die neuen Kurzbefehle und Gesten. Auch bei den gängigen Adobe-Programmen sind sie ja nicht alle gleich… daran muss ich mich erstmal gewöhnen. Außerdem gibt es für „Ansicht vergrößern/verkleinern“ eine Reihe an Kurzbefehlen: Scrollen mit gedrückter cmd-Taste; Pinchen am Trackpad (wie bei Tablet oder Smartphone); Drücken der Z-Taste – dann erscheint eine Lupe; und noch das unspezifische cmd+Minus und cmd+Plus… also eine ganze Menge.

Mein Fazit: Für Projekte, bei denen ich die einzige Designerin bin, ist Sketch eine gute Alternative. Ich hoffe, dass die kleinen Bugs nach und nach verschwinden werden. Insgesamt hat sich der Design-Test und das Kaufen für mich also gelohnt.

Deine Meinung ist gefragt!

Was hältst du von Sketch 3? Frisch getestet oder schon alter Hase? Ich freue mich auf deinen Kommentar – und natürlich immer über Likes, Shares und Co.