Adobe XD vs Sketch – Alternativen zu Photoshop für die Erstellung von UX- und Interfacedesigns – Teil 1
Im Bereich des UX- und Interfacedesigns tut sich was. Ständig. Neue Anforderungen und Bedürfnisse verlangen regelmäßig nach neuen Lösungen, die es zu gestalten gilt – wofür es wiederum zunehmend mehr Möglichkeiten gibt. Jede Agentur hat hierfür ihren eigenen Workflow, der regelmäßig angepasst werden sollte, um mit der Entwicklung zu gehen. Bei bold ventures wird für Screendesigns bisher klassisch mit Photoshop gearbeitet, doch ein Umbruch steht bevor…
Warum ich nach einer Alternative zu Photoshop suche
Seit einiger Zeit bin ich Screendesignerin. Das ist neu für mich, denn ich bin eigentlich Illustratorin und klassische Grafikdesignerin für Print – oder, um es mit Fortuna Ehrenfelds Worten zu sagen, „ein analoges Mädchen in einer digitalen Welt“. Diese digitale Welt heißt für mich seit nun zwei Jahren für ein paar Tage in der Woche bold ventures. Während ich hier zunächst nur für die (dann doch noch regelmäßig anfallenden) Druckprodukte zuständig war, wuchs ich in die responsive Welt von Grids und UX hinein.
Um meine Kollegin Leonie zu unterstützen, entwarf ich bald auch meine ersten Screendesigns in Photoshop. Das Programm war mir nicht neu, genutzt hatte ich es bis dahin jedoch in erster Linie für seinen ursprünglichen Zweck: Die Bearbeitung von Fotos und Grafiken. So erweiterte ich meine Kenntnisse, lernte viele Funktionen neu (zu schätzen) und entwarf Designs für unsere Kunden. Ganz oldschool, kann man sagen, denn seit meinem Studium hatte sich einiges getan in Sachen Screendesign-Erstellung und Photoshop gehört in dem Bereich nun schon fast zum alten Eisen. Mit der Zeit beschlich mich auch zunehmend das Gefühl, dass das doch irgendwie simpler klappen müsste. Nicht nur meinem in die Jahre gekommenen Mac machte Photoshop zu schaffen. Auch ich blieb immer wieder an fehlenden oder, meines Erachtens, nicht ganz durchdachten Funktionen hängen, was die Arbeit insgesamt etwas schwerfällig wirken ließ. Mich störte bald vor allem, dass es kaum vorgegebene Tools, Raster o.ä. gibt, mit denen sich schnell in einen Screendesignentwurf starten lässt – vieles muss erst einmal neu festgelegt oder durch Plugins hinzugefügt werden, da der Arbeitsbereich ,Grafik und Web’ nicht viel hergibt. Diese unkonzentrierte Ausrichtung erschwerte mir die Umorientierung innerhalb des Programms. Spätestens wenn es an die Erstellung responsiver Designs ging, geriet ich ins Straucheln, alles händisch an andere Formate anzupassen frisst Zeit und Nerven. Außerdem fehlte mir, trotz InVisions Craft-Erweiterung, eine gute Möglichkeit, unseren Entwicklern mit Hilfe von Prototypen genau zu zeigen, wie eine Seite funktionieren soll, so dass zusätzliche Beschreibungen und/oder Besprechungen zu den Entwürfen nötig waren. Kurzum, eine Alternative musste her.
Meine erste Erfahrungen mit Sketch
Als erster Gedanke kam mir Sketch, ein Programm der niederländischen Firma Bohemian Coding, was mir zwar ein Begriff, jedoch nicht wirklich bekannt war. Bemerkenswert ist vor allem, dass das relativ kleine Unternehmen sich mit ihrer Software gegen den unbestrittenen Marktführer im Bereich des digitalen Designs – Adobe – durchgesetzt hat, und zwar, weil sie eine Lücke füllen, die sich seit Erfindung des Smartphones auftat: Sketch ist exklusiv für UX- und UI-Design kreiert.
Die 14-Tage-Testversion war schnell heruntergeladen und erste Gehversuche ließen mein Herz höher schlagen. Hier lief vieles so, wie ich es mir bei Photoshop gewünscht hätte, u.a. Dank leichterer Dateien durch vektor- statt pixelbasiertem Arbeiten. Was mir als erstes im Vergleich zu Photoshop besonders gefiel: Ich fand mich im Programm schnell und gut zurecht. Vieles, was bei Photoshop über Umwege funktioniert, ist hier unmittelbarer erkenn- und erreichbar, was durch die fokussierte Ausrichtung, die UX-/UI-Elemente wie Raster, Viewport und alle erdenklichen Gerätevorgaben, sowie die reduzierte Oberfläche des Programms begünstigt wird. Ein großer Fan war ich sofort von den Symbolen, mit denen sich Änderungen auf mehreren Zeichenflächen gleichzeitig ausprobieren lassen. Zugegeben, vieles hiervon kann Photoshop auch, jedoch ging mir die Erstellung und Bearbeitung in Sketch leichter von der Hand.
Doch schnell offenbarte sich ein entscheidendes Problem: Sketch ist exklusiv für Mac entwickelt, was auch der Grund dafür ist, dass bei uns bisher nicht damit gearbeitet wird, denn ich bin die einzige Mac Nutzerin im Hause bold ventures. Zusätzlich zu den 89 USD (= 78.21 EUR), die jährlich je Sketch-Lizenz für meine Kollegin und mich anfallen würden, müsste also auch noch mindestens ein neuer Mac her. Aus Mangel an Alternativen blieb es daher bei Photoshop und ich verlor die Hoffnung, dass auf das Programm umgestiegen wird.
Adobe XD
Etwas Zeit verstrich, da rückte Adobe XD in meine Wahrnehmung. Hiermit hat der Softwareriese erstmalig ein Programm entwickelt, das – wie Sketch – speziell für die Erstellung von UX-/UI-Design entworfen ist. Ein bestechender Vorteil ist, dass Mac- und PC-Nutzer gleichermaßen hiermit arbeiten können. Außerdem ist es in der Adobe Creative Cloud enthalten, die wir ohnehin nutzen. Diese schlägt zwar mit monatlich 69,99 EUR für die Team-Lizenz deutlich teurer zu Buche, allerdings hat man hier auch alle weiteren Gestaltungsprogramme, die das Herz begehrt (u.a. eben auch Photoshop, sowie Illustrator, InDesign u.v.m.). Wer das alles nicht zusätzlich braucht, kann Adobe XD jedoch auch einzeln für 11,89 EUR im Monat nutzen oder – in der abgespeckten Starter Version – sogar umsonst nutzen. Ein Vergleich der Abos gibt es hier: https://www.adobe.com/de/products/xd/compare-plans.html?promoid=BWBX354V&mv=other
Nach den ersten gelesenen Erfahrungsberichten und durchgespielten Tutorials erinnerte Adobe XD doch stark an das Produkt der Konkurrenz. Auch optisch ist es näher an Sketch als an einem der bekannten Adobe Interfaces, was nicht zuletzt daran liegt, dass Adobe hier einen kompletten Neustart gewagt hat: Von Grund auf wurde alles neu überdacht, Gewohnheiten in Frage gestellt und übrig blieb nur, was für den spezifischen Zweck wichtig und sinnvoll ist, wodurch die Oberfläche sehr viel aufgeräumter und übersichtlicher wurde als es bei Photoshop der Fall ist.
Da das Programm recht jung ist (Release im Oktober 2017), begegnete ich auf meiner Recherche immer wieder Punkten, die kritisiert wurden. So fehlten in früheren Versionen z.B. noch wichtige Elemente wie Grid-Systeme und Hilfslinien sowie Developer-Guidelines. Auch fehlen noch einige Möglichkeiten für die Animation in Prototypen, wie z.B. Mikro-Interaktionen oder Mouseover-Effekte und ganz generell treten zur Zeit noch immer wieder kleinere bis größere Bugs auf. Jedoch gibt es in den Berichten auch fast ebenso viele nachträgliche Kommentare, die darauf hinweisen, dass die Kinderkrankheiten in der Zwischenzeit behoben und fehlende Funktionen hinzugefügt wurden, sodass das Arbeiten mit Adobe XD immer komfortabler zu werden scheint. Dank einer engen Zusammenarbeit mit der ,Community’, die sich aus Entwicklern und den XD Nutzern zusammensetzt, will Adobe sicherstellen, dass „Adobe XD […] ständig erweitert und immer leistungsfähiger [wird]“ – so das Versprechen auf der Website. Und tatsächlich kann man seit Veröffentlichung nahezu monatlich die Weiterentwicklung beobachten, die das Programm auf den Weg zum neuen Marktführer bringen soll. Die ganze Entwicklungshistorie lässt sich hier nachlesen: https://www.adobe.com/de/products/xd/features.html. Durch zahlreiche Add-ons, Plugins und die Integration von Produktivitäts-Tools soll der Arbeitsprozess zudem individuell optimierbar sein.
Worauf ich für den Praxis-Test jedoch besonders gespannt bin sind die Prototypen. Hiermit kann man das Verhalten einer Seite planen, damit das Entwicklerteam direkt sieht, worum genau es geht – ohne dass textliche oder mündliche Erklärungen nötig sind. Hierfür wechselt man einfach in die Prototyp-Ansicht seiner fertigen Design, verknüpft die jeweiligen Arbeitsflächen durch Pfeile und weist einen der vorgegebenen Befehle zu, um festzulegen, was bei Übergang von einer auf die andere Ansicht geschehen soll. Das Ergebnis kann man sich dann auch gleich live im Preview-Fenster innerhalb des Programms ansehen. Gefällt es nicht, ändert man es schnell und die Änderung wird in der Preview übernommen. Aufwändige und dennoch nur statischen Klickstrecken, die bisher für InVision oder gar als PDF gebastelt wurden, könnten also womöglich bald der Vergangenheit angehören. Stattdessen teilen wir hoffentlich bald schon die ersten animierten Designs aus Adobe XD heraus.
Löst Adobe XD jetzt Photoshop und Sketch ab?
In mir ist also wieder Hoffnung geweckt. Hoffnung auf ein produktiveres und angenehmeres Arbeiten, bei dem ich mich mehr auf’s Gestalten konzentrieren und unseren Entwicklern eine klare Darstellung meiner Ideen vermitteln kann. Jedoch gehe ich vorsichtig an die Sache heran, denn eine uneingeschränkte Empfehlung für den Umstieg von Sketch auf Adobe XD ergab meine Recherche bis zu diesem Punkt noch nicht. Während einige auch nach den letzten Verbesserungen noch zweifeln, dass ein Umstieg sinnvoll ist, schwärmen andere in den höchsten Tönen und haben Sketch bereits hinter sich gelassen. Wie so oft kommt es hier ganz auf die persönlichen Anforderungen an. In den nächsten Wochen werde ich mich daher dem neuen Programm widmen, um zu sehen ob es reif für unsere Alltagspraxis ist und es sich somit für uns lohnt, umzusteigen. Meinen Bericht mit Praxis-Tipps hierzu kann jeder, der womöglich vor der selben Überlegung steht, bald hier lesen.
