Ralf Kienzler

1.12.2014

Adobe Photoshop als UI Design Tool, Probleme und Alternativen

„Es wird nicht grundlos sein, dass wohl die meisten mit Photoshop arbeiten”, lass ich bei meiner Recherche auf der Suche nach Alternativen für den alten Designhaudegen Photoshop. Eine Meinung, die sich beim Ausprobieren neuer Design Tools als ein maßgebliches Argument für Photoshop herausgestellt hat. Auch wenn weniger Gründe für Photoshop als Allround-Werkzeug gute Argumente liefern, als vielmehr deshalb, da Adobes Marktposition es Konkurrenten extrem schwierig macht, sich gegen den Platzhirschen zu positionieren.

Zuvor aber stellte sich die Frage, warum überhaupt ein Werkzeug, dass sich als erste Wahl für Designer etabliert hat, abgelöst werden soll. Als Photoshop Ende der 80er Jahre die Bühne betrat, markierte es den Übergang der analogen Bildbearbeitung zur digitalen. Der Name verweist auf diese ursprüngliche Funktion, auf die noch immer die zentralen Werkzeuge optimiert sind. Da User Interfaces, extrem grob vereinfacht gesagt, nichts anders als interaktive Bildkompositionen sind, hat sich Photoshop zusätzlich zur Photobearbeitung auch in diesem Segment etabliert. Allerdings spielen hierbei neben den visuellen Aspekten ganz andere Faktoren eine Rolle, auf die Photoshop nur langsam reagiert und bisher wenig nützliche Lösungen integriert hat.

Um einmal einige zentrale Probleme zu nennen:

  • User Interfaces bestehen aus zahlreichen, aufeinanderfolgenden Screens, die sich einer gemeinsamen Bildsprache bedienen. Um diese schnell zu entwerfen bedarf es Bibliotheken, mit denen sich einmal festgelegte Elemente zentral verwalten und anpassen lassen. Solche sind in Photoshop trotz Smart Objects (eine Gruppierung von Bildelementen zur Wiederverwertung) und Stilen (eine Sammlung aus Bildeffekten) nicht vorhanden oder zumindest nicht in den Dateien integriert oder sehr umständlich. Ein Grund, warum Adobe hier so langsam reagiert, könnte die Angst sein, eigene konkurrierende Produkte wie Indesign zu kannibalisieren. Das Ergebnis: Anpassungen müssen vielerorts und zahlreich vorgenommen werden, was zu hohem Zeitaufwand und einer hohen Fehleranfälligkeit führt.
  • Ein entscheidender Vorteil beim gestalten von Screens mit Photoshop ist, dass die Komposition beim Entwurf auf einen Blick sichtbar ist. Smart Objects werden aber ausserhalb des Entwurfes bearbeitet. Dadurch ist das Zusammenspiel mit anderen Elementen erst nach vorgenommenen Anpassungen zu sehen.
  • Kaum ein Anbieter wird heute noch nur auf eine Plattform, wie zum Beispiel das Desktop, setzen. Angebote müssen deshalb für zahlreiche Geräte und Auflösungen optimiert sein. Responsive Design ist im Hause Adobe zwar kein Fremdwort, Lösungen wie Adobe Edge Reflow finden allerdings ausserhalb Photoshop statt und sind zum jetzigen Zeitpunkt noch umständlich und wirken unfertig.
  • User Interfaces sind mehr als ein interaktives Poster, eh klar. Die Elemente variieren inhaltlich und stehen in ihrer Position relativ zueinander. Photoshop ermöglicht aber nur absolute Platzierungen. Eine Anpassung im oberen Teil der Komposition führt meist zu umfangreichen Korrekturen in den folgenden Bildauschnitten.
sketch3screenshot
Eine vielversprechende Photoshop-Alternative für Screendesigner: Sketch

Konkurrierende Softwareunternehmen haben diese Probleme erkannt und versuchen mit Alternativen dem übermächtig wirkenden Giganten das Leben schwer zu machen. Zum einen zu nennen wären hierbei Programme, die sich auf das layouten von Screens spezialisiert haben, wie beispielsweise Sketch 3, das versucht vor allem den Anforderungen von Interfaces gerecht zu werden und traditionelle Bildbearbeitungungsfunktionen ignoriert.

Zum anderen finden sich heute eine Vielzahl von Programmen, die eher Prozesse der Softwareentwicklung mit einzubeziehen und gerne HTML-orientiert zum Einsatz kommen. Beispiele einer strukturorientierten Vorgehensweise wären etwa Webflow, Pinegrow und Macaw. Der Einsatz solcher Programme lohnt sich aber nur, wenn der Quellcode dann auch wirklich Verwendung findet. Gestalterisch sind solche Programme umständlich und wenig intuitiv.

Screenshot Webflow
Beispiel eines strukturorientierten Tools für Screendesign: Webflow

Ergänzend an dieser Stelle zu nennen sind auch Alternativen aus eigenem Hause. In Adobe Illustrator lassen sich gleichwohl Entwürfe erstellen wie auch mit Adobe Indesign. Festzuhalten ist dabei aber vor allem, dass beide Programme Expertentools sind, wodurch sich besonders in der Weiterverarbeitung bei Entwicklern Probleme ergeben.

Eine Prognose, wie groß das Potential möglicher Alternativen ist, vermag ich derzeit nicht abzugeben. Zum Abschluss sollen aber nochmals die Stärken von Photoshop genannt werden:

  • Photoshop bleibt ein alternativlos effizientes Werkzeug im Zusammenspiel mit Bitmap- und Vektorelementen, das schnell und umstandslos gestalterische Ideen sichtbar macht.
  • Die hohe Verbreitung, auch bei nichtberuflichen Designern, ermöglicht ein problemloses Austauschen von Dateien. Wirklich alle Designer beherrschen das Programm und können angefangene Projekte übernehmen. Auch Entwickler nehmen gemeinhin Photoshop Dateien entgegen und sind in der Lage daraus Entwürfe ohne Vermassung in Quellcode umzusetzen.
  • Unbedingt nennenswert sind hierbei die zahlreichen Exportmöglichkeiten von Photoshop. Alternativen beschränken sich zumeist auf PNG und HTML-Export, Photoshop erweist sich im Zusammenspiel mit anderen Programmen als hocheffizient.

Als Fazit empfehle ich einen gezielten Einsatz neuer Werkzeuge. Durch eine präzise Definition der zu übergebenden Dateien zur Weiterentwicklung können  zum Beispiel quellcode-generierende Programme wie Webflow zum Einsatz bei Responsive Design kommen. Bei einer umfangreichen Deklaration von Screens wäre Sketch 3 ein angemessenes Tool, um sich aufwändiges Copy&Paste zu sparen.

Mein größter Wunsch allerdings ist, Adobe würde in Photoshop selbst schneller Möglichkeiten eröffnen, den gar nicht mehr so neuen Anforderungen mit entsprechenden Werkzeugen gerecht zu werden. Im Ansatz geschieht das auch, etwa mit den neu dazu gekommenen Funktionen wie etwa  Creative Cloud Libraries oder externen Smart Objects. Allerdings erweitert Photoshop sich nur langsam und die neuen Funktionen wirken oft noch sehr umständlich.

Ralf Kienzler

UX / UI Designer

rk@coeno.com

Newsletter

Bleib auf dem Laufenden!

Mit dem 4x jährlich erscheinenden Newsletter erhalten Sie alle 3 Monate aktuelle Neuigkeiten unserer Agentur. Wir werden Ihre E-Mail Adresse zu keinen weiteren Zwecken verwenden und Sie können den Newsletter jederzeit bequem über einen Link im Mailfooter abbestellen.
Mehr dazu erfahren Sie in unseren Datenschutzbestimmungen.

Thank you! Your submission has been received!
Oh! Etwas hat nicht geklappt. Bitte versuch es nochmal.