UI Design Tools: Sketch überholt erstmals Adobe Photoshop (oder auch: Sketch vs Photoshop)

UI Design Tools: Sketch überholt erstmals Adobe Photoshop (oder auch: Sketch vs Photoshop)

Im Battle Sketch vs Photoshop gibt es einen Sieger: Laut eines Reports von Avocode wurden im Jahr 2016 erstmals mehr Sketch- als Photoshop-Files hochgeladen (basierend auf 1.127.302 Designs)

Anfänglich war da (good old) Photoshop

Als ich mit User Interface Design, damals noch einfachem Webdesign, startete, war Photoshop das Tool der Wahl. Es gab aber auch nicht wirklich eine Alternative. Das Bildbearbeitungsprogramm, umfunktioniert zum Screendesign-Programm, war nie das optimale Werkzeug um professionell Websites oder Apps zu designen. Die Dateigröße wuchs schnell zu mehreren 100 MB heran, die Verwendung von Smartobjekten war meistens umständlich und Texte zu layouten machte in Photoshop nie großen Spaß. Auch die Zusammenarbeit mit Entwicklern war aufwendig: Abstände und Größen mussten im Photoshop-File abgelesen werden und der Export von Icons und Grafiken beanspruchte wertvolle Zeit.

Und dann kam Sketch

Zum ersten Mal hörte ich von Sketch vor einigen Jahren. Deshalb installierte ich voller Neugier die Testversion. Nach ersten Versuchen verstaubte das Tool jedoch wieder in meinem Programmordner und ich schenkte ihm nicht weiter Beachtung.

Im Laufe der Zeit jedoch las ich immer öfter in Blogs und Foren darüber. Lobeshymnen, verfasst von UI Designern UND Developern: „Das UI Design Tool der Zukunft“, „besser als alles von Adobe“, „Sketch vs Photoshop hat einen klaren Gewinner“…

Darum lud ich mir vor etwas mehr als einem Jahr die App zum Preis von knapp 80 EUR herunter. Ein Wochenende lang probierte ich alle Funktionen aus, führte mir die Shortcuts zu Gemüte und designte erste UIs. Eine schlanke App, vektorbasiert und keine unnützen Filter, 3D Funktionen etc. wie in Photoshop… Kurzum: Ich war begeistert. Ab diesem Zeitpunkt lag mein Fokus klar auf Sketch.

Sketch Programmoberfläche

Sketch Programmoberfläche (Bohemian BV, Screenshot von Website)

Deshalb „überholte“ das App Icon von Sketch im Dock ganz schnell jenes von Photoshop. Mittlerweile, viele Designprojekte und auch App-Updates später, hat sich Sketch in Zusammenarbeit mit Zeplin und InVision zum perfekten UI Design Tool für mich entwickelt.

Sketch bietet Vorteile für Designer und Developer

* Sketch ist ein vektorbasiertes Programm, das den Einsatz und Export von Icons und Grafiken wesentlich erleichtert. Designt wird in Sketch auf Basis 1x. Der Export passiert anschließend – da vektorbasiert – verlustfrei mit bspw. 2x und 3x für iOS oder den verschiedenen Skalierungen für Android.

* Symbole erleichtern die Arbeit vor allem im UI Design für Apps erheblich. Sie ermöglichen die zentrale Verwaltung von wiederkehrenden Elementen wie Buttons, Header, etc. oder sogar ganze Toolbars, App Bars und Nav Bars. Einmalig im Symbol angepasste Änderungen werden automatisch im gesamten Design übernommen.

* Sketch bietet die Möglichkeit Plugins von Drittanbietern zu installieren. Mittlerweile gibt es davon jede Menge. Meine Favoriten sind Sketch Runner (Spotlight-ähnliche Funktionen für Sketch), Craft (sehr umfangreiches Plugin von InVision LABS) und Sketch Measure (kostenlose Zeplin-Alternative zur Erstellung einer Spec als HTML-File für Developer).

* Obendrein sind innerhalb kürzester Zeit die frei verfügbaren (und auch kostenpflichtigen) Ressourcen für Sketch zu einer beachtlichen Anzahl angewachsen. Auch Apple, Google und Facebook bieten sehr umfangreiche UI-Kits für Sketch an. Weitere Sketch Ressourcen findet man zB hier: Sketch App Sources, Sketch App Rocks.

Facebook iOS 10 GUI Ressources

Facebook iOS 10 GUI Ressources (Facebook, Screenshot von Website)

* Gemeinsam mit Zeplin oder InVision wird Sketch zum Traum aller Designer UND Developer. Plugin und App bieten pixelgenaue Specs der Designs inkl. aller Ressourcen wie Icons, Grafiken oder Bilder.

Zeplin Mac App

Zeplin Mac App (Screenshot von Website)

* Alle Elemente eines Sketch Designs können via Drag’n’Drop direkt mit Slack versendet werden. Ein nettes Feature, um beispielsweise einzelne Grafiken aus Sketch heraus schnell mit Kollegen zu teilen.

Sketch vs Photoshop – wie sieht es mit den Kosten aus?

Photoshop CC ist Teil der Adobe Creative Cloud, kann jedoch einzeln erworben werden. Die kostengünstigste Variante ist das Paket „Fotografie“, welches gemeinsam mit Lightroom CC und Behance 143,14 EUR (Jahres-Abo, Prepaid, inkl. USt) kostet. Sketch von Bohemian BV ist für 99 $ jährlich auf der Sketch Website erhältlich.

Zusammengefasst

Sketch vs Photoshop ist keine Entscheidungsfrage. Denn mit Sketch hat sich ein neues Programm für reines UI Design erfolgreich auf dem Markt positioniert. Adobe Photoshop, Illustrator und Co werden aber nicht verdrängt, sondern können sich auf Ihre Kernfunktionen fokussieren: Nämlich die Bildbearbeitung bei Photoshop und Logo- und Icondesign bei Illustrator.

Wie die Zukunft wird? Adobe arbeitet mit Hochdruck an einer Sketch-Konkurrenz namens Adobe XD. Diese befindet sich allerdings noch im Beta-Stadium und momentan sind noch keine Schnittstellen für Drittanbieter Plugins in Sicht. Es bleibt spannend.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.