Endlich Sketch - Was wir durch den Umstieg von Photoshop gelernt haben

Anders als Developer wechselt man als Designer seltener seine bewährten Tools. Schon allein aus Mangel an Alternativen könnte man in der Rückschau wohl sagen: Was gab es denn anderes als Photoshop, Illustrator und Indesign?
Doch manchmal wird man einfach zu seinem Glück gezwungen.
Natürlich hatten wir uns zuvor schon mit anderen Tools auseinandergesetzt, jedoch noch kein Projekt damit umgesetzt. Nun lieferte uns also ein Kunde eine Sketchdatei, und das nahmen wir zum Anlass, Sketch erstmalig in einem Kundenprojekt einzusetzen. Das war er also, unser Sprung ins kalte Wasser. Und eins können wir vorwegnehmen: aktuell will hier keiner mehr ins warme Wasser zurück ;-)
Die Eleganz des Sprungs sei mal dahingestellt … Aber es gilt ja immernoch: wer nicht wagt, der nicht gewinnt.

Und was haben wir also gewonnen?

1. Endlich ein Tool, das dafür genutzt wird, wofür es auch entwickelt wurde
2. Vieeel Platz auf dem Server und dem eigenen Rechner
3. Transparentere Dateien für Frontendentwickler
4. Prototyping via InVision
5. Neue Erfahrungen und ein gutes Gefühl das passende Tool ausgewählt zu haben

1. Endlich ein Tool, das dafür genutzt wird, wofür es auch entwickelt wurde

Photoshop ist DAS Tool wenn es um Bildbearbeitung geht. Und irgendwann begann jeder Screendesigner, dieses Tool eben auch für seine Webdesigns zu nutzen. Es gab einfach nichts anderes, und somit wuchs man in das Designen von Webseiten und Apps mit Photoshop hinein. Zu Anfang war alles gut und normal, dann wurden die Dateien immer größer und kamen immer mehr an ihre Grenzen, die Basis waren Pixel, Retinadisplays gab es noch nicht, responsives Webdesign ebenso wenig. Lange Rede kurzer Sinn: Photoshop wurde nie dafür erschaffen um Screendesigns zu kreieren. Ganz anders Sketch. Dieses Tool wurde ganz exklusive genau für diesen Einsatzzweck erschaffen. Und genau das spürt man als Anwender ganz schnell.
Alles ist vektorbasiert, responsive Designs erstellen sich fast wie von selbst. Es gibt nicht einfach nur Ebenen und Ebenenordner, sondern eine einzige Datei kann für ein gesamtes Projekt genutzt werden, in der einzelne Unterseiten erstellt werden, die wiederum beliebig viele Artboards in beliebigen Größen für Desktop-, Tablet-, und Mobildesigns enthalten können. Zusätzlich gibt es eine globale Bibliothek, die sogenannte Symbole enthält, die innerhalb der gesamten Datei genutzt werden kann. Eine Änderung an einem Symbol wirkt sich auf alle genutzten Instanzen des Symbols aus, was die Arbeit ungemein erleichtert. Das gilt grundsätzlich für Symbole, Styles, Textstyles, globale Farben … wovon man in Photoshop in dieser ausgereiften Form nur träumen konnte.

2. Vieeel Platz auf dem Server und dem eigenen Rechner

Schon allein der verbrauchte Festplattenspeicher von Sketch gibt im Vergleich zu Photoshop viel Platz frei: Photoshop: 2,39 GB > Sketch: 61,1 MB
Auch die Dateigrößen von Sketch sind in keiner Weise mehr mit den Größen von Photoshopdateien vergleichbar. Durch den vektorbasierten Aufbau ergeben sich bei Sketch Dateien von ca. 5 - 40 MB, wo Photoshop bei Dateien mit mehreren Artboards gerne auf 300 MB bis in den Bereich von GB kommen kann.

3. Transparentere Dateien für Frontendentwickler

Der Transfer der Dateien über die WebApp InVision erleichtert das Zusammenspiel mit Frontend-Entwicklern sowie Kunden enorm. InVision ist ein Design-Kollaborations-Tool, das es Designern, Frontend-Entwicklung und Kunden erlaubt, gemeinschaftlich an einem Projekt zu arbeiten. Große Email-Anhänge werden vermieden und Kommentare zum UI-Design können direkt im Layout platziert werden.
Layouts werden aus Sketch heraus direkt in InVision synchronisiert und für Entwickler und Kunden freigegeben. Alle CSS-Styles können vom Frontend-Entwickler ganz einfach direkt aus den Layouts gelesen und als Code exportiert werden.
Unser Frontendler Ben beschreibt es so:
Wer schonmal versucht hat, einem Photoshop Screendesign die relevanten Informationen zu entlocken, weiß, wie umständlich das werden kann. Mit Sketch und InVision muss man das Lineal und die Pipette zum Glück nicht mehr auspacken. Abstände, Größen, Farben sind sofort ersichtlich. Über die Symbols sind Komponenten konsistent und auch alle verwendeten Farben sind auf einen Blick ersichtlich. Rückfragen wie “Soll der Button auf dieser Seite wirklich ein Pixel kleiner sein, als auf allen anderen?” oder “Brauchen wir wirklich 10 verschiedene Grau-Schattierungen?” erübrigen sich. Da wir heute auch im Internet fast überall mit vektorbasierten Grafiken arbeiten können, ist außerdem die Möglichkeit, alle Assets als svg und in allen erdenklichen sonstigen Formaten weboptimiert direkt aus Sketch oder InVision exportieren zu können, ein großes Plus, was den Entwicklungs-Workflow enorm beschleunigt.

4. Prototyping via InVision

Prototypen bieten einen großen Mehrwert im Vergleich zu statischen Layouts. Es sind Klickdummies, die es dem Kunden ermöglichen, ein Gefühl für die später interaktive Website oder App zu bekommen und sich diese direkt auf verschiedenen Endgeräten anzuschauen. Buttons, Teaser und Menüs werden verlinkt und somit ihre Interaktion simuliert. Die Verknüpfungen werden bereits in Sketch angelegt, und der Prototyp kann dann über ein Plugin auf InVision hochgeladen werden. Über InVision wird der Prototyp dann mit dem Kunden geteilt, und es kann über Kommentare ein direkter Austausch stattfinden. Einfach und unkompliziert - so lieben wir es.

5. Neue Erfahrungen und ein gutes Gefühl, das passende Tool ausgewählt zu haben

Das sind also unsere Erfahrungen mit Sketch, und wir haben das gute Gefühl bekommen, dass sich ein Sprung ins kalte Wasser lohnt. Photoshop bleibt unersetzlich für professionelle Bildbearbeitung - für UX- und Interfacedesign jedoch, das auch in der Entwicklung schon Spaß macht, haben wir unser Herz an Sketch verloren … vorerst. Denn natürlich beschäftigen wir uns weiterhin mit anderen Tools, wie Adobe XD oder InVision Studio. Auch diese “kalten Gewässer” sollen großen Funfaktor bieten, wir halten euch auf dem Laufenden ;-)

Links:

Sketch - https://www.sketch.com/
InVision - https://www.invisionapp.com/