INSIGHTS Der Wechsel von Photoshop zu Sketch — Ein Ratgeber in 7 Schritten

Der Hammer heißt Photoshop. Und er ist durchaus sehr nützlich für Fotografen, Composer, Retuscher und viele andere kreative Köpfe. Und mit Sicherheit ist er in vielen Sparten der bunten Welt fast unersetzlich. Nicht ohne Grund ist er Adobes Flaggschiff.

Für UI- oder Webdesigner steht Photoshop für genau zwei Dinge: Fluch und Segen. Einerseits ist man als Gestalter recht unflexibel was Versionierungen oder globale Elemente betrifft, andererseits hat man ein Multifunktionswerkzeug, mit dem man grenzenlos gestalten kann. Die Liste weiterer Pros und Cons ist lang. Immer wieder kamen daher Apps auf den Markt, die den Arbeitsalltag eines Internetgestalters vereinfachen sollten. Wir erinnern uns gerne an die Zeiten, in denen wir mit Fireworks und Illustrator kreativ waren, aber auch an Ausflüge in Gefilde, die größtenteils aus Codezeilen bestanden. Ein Programm, an das wir uns gar nicht gerne erinnern ist zum Beispiel Macaw: Ein guter Ansatz war vorhanden, für mehr hat es aber leider nicht gereicht — erst recht nicht für eine komplexe Social-Commerce-Seite wie ABOUT YOU.

Immer wieder hörten wir dann von diesem Sketch aus den USA — Google, Facebook und auch Apple sollten bereits damit arbeiten. Aber Europa versank weiterhin in Photoshop Pixeln und nur wenige trauten sich an Sketch heran. Für das Design-Team von ABOUT YOU gab es aber genug Gründe, den Wechsel zu wagen: Transparentere Dateien für Frontendentwickler, Konsistenz zwischen Gestaltungselementen, globale Stile und Objekte und nicht zuletzt die Möglichkeit, schneller arbeiten zu können.

Schritt 1: Spring ins kalte Wasser!

Wir sind mittlerweile 5 Köpfe im Team, die sich ausschließlich um die UI der Shops auf verschiedenen Devices konzentrieren. Daily Business bei ABOUT YOU ist Fast Business. Arbeitssprints sind kurz und die Liste der Aufgaben ist lang — und dann kommt einem dazwischen die Idee, das Tool zu wechseln. Der Kickofftermin wurde über Tage verschoben, um endlich die geeignete Lücke zu finden. Alles sollte gut geplant sein. Also recherchierten wir, wie anderen Firmen der Wechsel gelang. Es wurde notiert, besprochen und gedacht. Und am Ende gab es dann den einen Moment, der aus einem spontanen Bauchgefühl heraus entstand, der einem sagte „Wenn nicht jetzt, wann dann?“. Wir machten den harten Switch und es gab Photoshopverbot. Nach drei Tagen war klar: Die Planung und der Respekt vor dem Wechsel war zu 90% überflüssig. Jeder einigermaßen erfahrene Designer kennt Sketch nach ein paar Stunden gut genug, um damit zu arbeiten. Alle Kreativen blühten mit dem neuen Tool in der ersten Zeit auf. Unser Learning: Nicht denken. Einfach machen.

Schritt 2: Das Internet ist dein Freund.

Ohne Tutorials geht es gut — aber wesentlich langsamer. Gebt euren Mitarbeitern etwas Luft, um sich an das neue Tool zu gewöhnen und auch einen tiefen statt nur oberflächlichen Einstieg zu ermöglichen. Sie schon zum Einstieg mit komplexen Aufgaben zu befeuern funktioniert nicht, also haben wir jedem Teammitglied mindestens einen halben Tag zur freien Tutorialverfügung und Einarbeitung gegeben.

Schritt 3: Talk!

Wir haben eine wöchentliche, einstündige Routine, in dem die Arbeit als Team mit Sketch optimiert wird. Hier werden auch gezielt kleine Rechercheaufgaben verteilt. Ein Beispiel: „Finde heraus, mit welchem Plugin wir am besten einen globalen Styleguide anlegen“. Durch die Aufteilung in verschiedene Aufgaben und den Austausch danach sind wir schnell zu Antworten gekommen, die uns als Team weitergebracht haben.

Schritt 4: Verliere nicht die Struktur.

Symbole, Styles, Textstyles, globale Farben — alles Dinge, die Sketch neu an den Start bringt oder den Umgang mit Ihnen anders interpretiert. Nach den ersten Designs sollte man globale Elemente gut und schlau definieren und sich Gedanken über die Datei und Ordnerstruktur gemacht haben, damit man am Ende nicht eine Woche lang den Müll aufräumen muss, den man vorher selbst gemacht hat. Auch hier ist viel Kommunikation mit dem Team gefragt, damit alle genordet sind.

Schritt 5: Wir lieben Plugins!

Macht euch schlau, welche Plugins am besten zu eurer Arbeitsweise passen. Wir entschieden uns gleich am Anfang für Craft, Zeplin und Sketch Palettes und probieren noch heute neue Dinge aus, um sie zu bewerten. Da es hier häufig Updates gibt, ist es schlau, wöchentlich den Markt zu checken.

Schritt 6: Fly with Zeplin.

Gerade der Transfer der Dateien mit dem Tool Zeplin erleichtert das Zusammenspiel mit den Frontend-Entwicklern enorm. Alle Styles können direkt aus den Layouts gelesen und als Code exportiert werden. Für uns war es sehr hilfreich, mit allen Entwicklern einen Kick-Off und Retro Termin zu vereinbaren, in dem sich beide Seiten austauschen und man so die eigene Arbeit optimieren kann.

Schritt 7: Dran bleiben!

Nichts ist perfekt. Auch Sketch nicht. Uns fehlen noch diverse Features in der App, damit wir komplett reibungslos und ohne Workarounds arbeiten können. Viele Updates in der letzten Zeit zeigen uns allerdings, dass unser Feedback erhört und von Bohemian Coding umgesetzt wird. Ein paar Aspekte des Tools sind ausbaufähig, aber trotzdem ist Sketch auch für uns „#1 for UI & Wireframing“.

P.S: Unsere Liebe zu Photoshop wird trotzdem für immer sein ❤