Sketch vs. Photoshop – Der Vergleich

Von Melanie Schneider am 25. April 2017

Photoshop – jeder Designer hat es schon einmal genutzt. Das Programm ist bis heute das meist verwendete Werkzeug, wenn es um die Erstellung von Mockups oder Webdesigns geht.
In erster Linie ist Adobes Platzhirsch Photoshop für die Bearbeitung von Bildern entwickelt worden. Das Programm wurde jedoch mit der Zeit immer mehr als Grafik- und Webdesign-Tool genutzt. Mittlerweile scheint es fast undenkbar, dass es etwas Besseres gibt! Oder etwa nicht?

von Melanie Schneider

Doch der Thron scheint zu wackeln, denn in der vergangenen Zeit hört man immer mehr von “Bohemian Coding Sketch: Ein Vektor Tool, das speziell für Web- & Applikationsdesign entwickelt wurde. Wir wollten uns das Ganze natürlich nicht entgehen lassen, daher hat unser Designteam zunächst angefangen kleinere Webprojekte in Sketch umzusetzen, um sich besser mit dem Programm vertraut zu machen. Nun ist es an der Zeit Resümee zu ziehen und den veränderten Workflow zu durchleuchten.  

Was genau ist überhaupt Sketch?

Im Vergleich zu Photoshop tritt Sketch viel schlanker auf, da es “nur” für den vektorbasierten Einsatz konzipiert wurde. Der Vorteil daran ist, dass es ohne großen Überfluss an Funktionen auskommt.

Sketch ist aktuell bei Version 3 angelangt und klingt nach genau dem Programm, auf das viele Designer jahrelang gewartet haben - entworfen von Screendesignern für Screendesigner. Doch kann man sich wirklich zwischen Photoshop und Sketch entscheiden?

 

Sketch vs. Photoshop

 

Der Einstieg in Sketch

Erstmals hat Sketch nun auch in unserem Designteam Anwendung gefunden. Wir haben das Programm bereits vorher wahrgenommen, konnten es aber nie richtig in unseren Arbeitsalltag integrieren – bis jetzt! Aus heutiger Sicht ist das kaum noch nachvollziehbar, da das Programm aus unserer Sicht einfach klasse ist. Auch wenn der Start etwas holprig war, da zum Beispiel gelernte Shortcuts nicht mehr in der gewohnten Art und Weise genutzt werden konnten oder Funktionen anders positioniert sind, konnten wir uns schnell in das Programm einfinden.

Vor allem die Seite Sketch App Sources erwies sich für den Einstieg als sehr hilfreich, da hier viele Templates, Plugins aber auch Tipps und Tricks publiziert werden, die man sich zur Hilfe nehmen kann. Mittlerweile gibt es allerdings auch viele weitere Quellen. Das Programm ist in vielen Bereichen optimal durchdacht und für die Entwicklung von z.B. Responsive Webdesigns, UX- und UI Oberflächen und Apps nicht mehr wegzudenken.

Schlankere Oberfläche & kleinere Dateien

Bereits beim Öffnen von Sketch zeigt sich ein deutlicher Unterschied: es wirkt alles viel aufgeräumter, schneller und kompakter als in Photoshop. Schnell wird deutlich, dass sich Sketch auf eine schlichte Benutzeroberfläche mit vielen Werkzeuge fokussiert hat – optimal für Webdesigner. Einer der größten Vorteile von Sketch ist zudem das vektorbasierte Arbeiten. Dadurch ist es nicht mehr notwendig, bereits während des Anlegens der Datei die Größe für die Ausgabe zu bestimmen. Somit lassen sich beliebige Größen exportieren und Sketch eignet sich dadurch perfekt für responsive Designs und für HD-Bildschirme. Hier spart man im Gegensatz zu Photoshop viel Zeit und Arbeit.

Oberfläche Sketch

Was ebenfalls direkt bei der Arbeit in Sketch auffällt, sind die kleinen Dateien, denn Sketch benötigt nicht viel Arbeitsspeicher. In Photoshop erhält man relativ schnell große Dateien, die das System verlangsamen. Durch die kleinen Dateien laufen nicht nur die Programme schneller, sondern auch das Synchronisieren der entsprechenden Daten, z.B in der Dropbox.

In Sketch arbeitet man zudem grundsätzlich näher am Web. Viele Funktionen, die man auch in der Programmierung wiederfindet, sind in dem Programm eingegliedert. Es können beispielsweise per Rechtsklick CSS Attribute kopiert werden, um sie an anderer Stelle zu nutzen.

Sketch stellt ebenfalls eingebaute Grids zur Verfügung, die es dem Designer ermöglichen, Designelemente einfacher und schneller einzustellen. Darüber hinaus bietet das Programm auch eine große Anzahl an Template-Voreinstellungen und Zeichenflächen-Voreinstellungen. Durch das Installieren von diversen Plug-ins können auch die Sketch-Funktionalitäten individuell erweitert werden.

Unsere Zukunft mit Sketch

In Zukunft wäre für uns denkbar, Sketch abteilungsübergreifend einzusetzen. In der Regel startet ein Projekt in der Konzeptionsphase, in der Scribbles, Wireframes und eine logische Basis für den weiteren Ablauf geschaffen werden. Sketch eignet sich durchaus auch perfekt als Wireframing-Tool. Die offenen Sketch-Dateien mit den entsprechenden Wireframes können direkt an das Designteam weitergegeben werden. Der Vorteil: Die aktuell genutzten Programme werden auf ein einziges minimiert, alle arbeiten mit den gleichen Anforderungen und auch die Rahmenbedingungen sind für alle Beteiligten klar (Grid, Vermaßung, Dimensionen,etc.).

Erste Ergebnisse können so schneller und effizienter erstellt werden. In der Frontend-Entwicklung können die fertigen Layouts direkt weiterverarbeitet werden. Durch die CSS-Logik, die diese Anwendung beinhaltet, können die bereits erstellten Designs mühelos in CSS-Elemente umgewandelt werden. Die Grenzen von Webdesign und Webentwicklung verschwimmen noch mehr, so kann beispielsweise ein Button erstellt werden, um anschließend per Rechtsklick die CSS-Styles zu kopieren.

Fazit

Sketch kann Photoshop nicht zu 100% ersetzen. Im direkten Vergleich jedoch bietet Sketch gegenüber Photoshop mehr Vorteile als Nachteile, wenn es um Interface Design geht. Einer der größten Vorteile für unsere tägliche Arbeit sind natürlich die Dateigrößen, das vektorbasierte Arbeiten sowie das schnellere Programm und ein verbesserter Workflow.

Die Arbeit mit Sketch ist sehr effizient und der Effektivitätsgewinn ist enorm. Das Potenzial des Programms ist zwar noch nicht ausgeschöpft aber in der Zukunft werden uns von Seiten Sketch sicher noch weitere innovative Arbeitserleichterungen erwarten.

 

Themen: Agency, Design, Photoshop, Sketch