Habt ihr auch schon einmal bei der Erstellung eines komplexen Visual Designs gedacht: “Das müsste doch alles irgendwie einfacher gehen!”? Gerade wenn Interaktionsdesigner und Visual Designer vor der Herausforderungen stehen, ein komplexes Design über mehrere Monate zu erstellen, ist die richtige Wahl und Verwendung des Werkzeugs entscheidend.
Über die Stolperfallen, die in solchen Projekten lauern, konntet ihr bereits etwas erfahren. In diesem Artikel möchte ich euch nun die unterschiedlichen Visual-Design-Tools, die ich in Projekten kennengelernt habe, vorstellen und diese in Hinblick auf ihre Einsatzmöglichkeiten bewerten.
Im Laufe der Projekte, in denen ich mitgearbeitet habe, musste ich oft mit Kompromissen leben, weil gewisse Tools vorgeschrieben wurden oder die gewünschte Funktion einfach in dem Programm fehlte. Meine Motivation ist es jedoch, den Gestaltungsprozess zu optimieren und immer das Beste aus den Tools herauszuholen. Daher möchte ich euch verschiedene Tools vorstellen und erläutern, welches Tool ich wofür einsetzen und auf welches Werkzeug ich bei dem nächsten Projekt setzen würde. Außerdem könnt ihr euch ein Visual Design Starter Kit für Adobe Experience Design herunterladen.
Adobe Photoshop
Photoshop hat seine Wurzeln in der klassischen Fotobearbeitung und ist überwiegend pixelbasiert. Da Photoshop sich allerdings in den Jahren so extrem weiterentwickelt hat, kann man es inzwischen fast für alle Arten der digitalen Gestaltung einsetzen. Viele Designer setzen auch heute noch auf Photoshop, wenn es um Visual Interface Design geht, obwohl sie wissen, dass es eigentlich nie für die Erstellung von Interfaces konzipiert wurde. Dies liegt zum einen daran, dass sich nicht nur Designer sehr gut mit Photoshop auskennen, auch ältere Projekte liegen häufig im PSD-Format vor.
Adobe Illustrator
Illustrator ist im Gegensatz zu Photoshop ein vektorbasiertes Programm und wurde auch mit diesem Hintergrund als Grafik- und Zeichenprogramm entwickelt. In Illustrator gestaltet man typischerweise Logos, Symbole oder Print-Vorlagen. Obwohl Illustrator Photoshop sehr ähnlich sieht, sind viele Anwendungskonzepte grundlegend verschieden. Auch auf Illustrator setzen sehr viele Designer für das Gestalten von Interfaces, jedoch merkt man auch diesem Tool an, dass es nicht ausschließlich für das Interface Design konzipiert wurde.
Adobe Experience Design
Experience Design ist ein vektorbasiertes Tool der neueren Generation und um einiges leichtgewichtiger als Photoshop oder Illustrator. Hier liegt der Fokus deutlich auf dem Interface Design und Prototyping. Adobe möchte mit diesem Tool ganz klar die Visual- und Interaktionsdesigner ansprechen, die eventuell bisher Photoshop oder Illustrator eingesetzt haben, aber nie so richtig zufrieden waren. Die Oberfläche der Anwendung ist im Vergleich zu Photoshop oder Illustrator deutlich reduziert und auf das Wesentliche für die Gestaltung von Interfaces optimiert.
Bisher gibt es Adobe Experience Design allerdings nur in einer Beta-Version. Der Funktionsumfang, den die Beta bereits jetzt schon bietet, macht aber deutlich, wo es in Zukunft hingehen soll.
Sketch
Sketch ist ebenfalls ein sehr leichtgewichtiges vektorbasiertes Tool der neueren Generation mit dem Fokus auf Visual Interface Design. Die Oberfläche von Sketch ist, wie die von Adobe Experience Design, sehr übersichtlich und auf das Wesentliche reduziert. Im Gegensatz zu Adobe Experience Design gibt es Sketch nun schon etwas länger und es existieren bereits eine große Community und viele nützliche Erweiterungen. Gerade die Erweiterungen machen Sketch für viele Designer sehr interessant, weil sie den Funktionsumfang von Sketch noch einmal stark ausbauen. Bisher gibt es Sketch allerdings lediglich für den Mac, dafür kostet es aber auch nur 99$.
Craft
Craft ist eine Plugin-Sammlung, um mit Beispieldaten innerhalb eines Tool wie beispielsweise Sketch oder Photoshop zu arbeiten. Es ist möglich, Texte, Bilder und Platzhalter automatisiert in das Visual Design einzubetten. Texte können dabei von Websites und Bilder aus Bilddatenbanken synchronisiert werden. Außerdem ist es möglich, JSON APIs anzusprechen, um Inhalte von dort zu beziehen.
InVision
InVision ist ebenfalls kein Design-Tool, sondern eine cloud-basierte Design-Plattform für Collaboration, Prototyping und Workflows. Mit dieser Plattform ist man in der Lage den Designprozess in einem Unternehmen besser zu kommunizieren und Entscheidungen transparenter zu gestalten. Mithilfe einer Erweiterung kann man aus Sketch oder Photoshop heraus die entsprechenden Projektdateien in die InVision Cloud synchronisieren, um das Design in der Cloud weiter zu verwalten.
Hauptfunktionen sind:
- Design Prototyping
- Design Sharing & Presentation
- Design Feedback & Commenting
- Real-Time Design Meetings & Whiteboarding
- Design Organization & Collaboration
- Project Management for Designers
- User Testing & Research
Tools im Vergleich
Für den Vergleich der fünf Visual-Design-Tools, wobei das fünfte eine Kombination aus Sketch, Craft und InVision ist, verwende ich 15 von mir festgelegte Bewertungskriterien. Die Farb-, Symbol- und Typografie-Definitionen als Kriterien sind zentral und konzeptübergreifend zu verstehen. Ich möchte beispielsweise nur an einer Stelle einen Farbwert ändern müssen, damit sich das ganze Designkonzept automatisch anpasst.
Vergleichsmatrix
x nicht erfüllt – teilweise erfüllt + erfüllt ++ sehr gut erfüllt
Erläuterung
Aus der Matrix ist direkt zu erkennen, dass die beiden Adobe-Produkte Photoshop und Illustrator sehr schlecht abschneiden. Der Grund dafür ist, dass sie eigentlich keine besonderen Funktionalitäten für das Gestalten eines Interfaces bieten. Die Oberfläche ist zu überladen – als Visual Designer benötigt man nur einen sehr kleinen Teil des eigentlichen Funktionsumfangs. In beiden Tools ist es nicht möglich, Farben, Symbole und Typografien zentral zu verwalten, um auf geänderte Anforderungen in einem Projekt schnell reagieren zu können. Auch das Erzeugen eines interaktiven Prototyps oder die Generierung von Maßangaben für Entwickler ist sowohl in Photoshop als auch in Illustrator nicht ohne weiteres möglich.
Die beiden Tools der neueren Generation, Adobe Experience Design und Sketch, sind relativ dicht beieinander. Sketch punktet vor allem bei der ausgereiften und intuitiven Oberfläche, die den Designer perfekt bei der Gestaltung unterstützt. Experience Design kann dafür im Bereich Prototyping punkten, denn es ist dort möglich, Zeichenflächen miteinander zu verlinken und App Flows zu erstellen. Eine solche Funktionalität bietet Sketch bisher ohne Extension nicht und ich denke, das wird sich so schnell auch nicht ändern.
Außerdem ist in Adobe Experience Design geplant, das simultane Arbeiten von mehreren Personen an einem Designkonzept zu ermöglichen. Dies wäre ein riesiger Schritt, der das Arbeiten an einem Designkonzept revolutionieren würde. Es ist eigentlich nur noch eine Frage der Zeit, wann Adobe auch noch die Möglichkeiten einbaut, mit Beispieldaten und Maßangaben umzugehen. Denn man darf an dieser Stelle nicht vergessen, dass wir hier erst von einer Beta-Version sprechen.
Die letzte Variante ist eine Kombination aus Sketch, Craft und der InVision-Plattform. Sketch ist ein sehr gutes Werkzeug, um Oberflächen zu designen – die integrierten Smart Guides funktionieren sehr gut und die Oberfläche ist auf das Wesentliche reduziert. Außerdem weißt Sketch genauso wie Adobe Experience Design eine sehr gute Performance auf. Alles läuft äußerst flüssig und stabil.
Um ein Design aber auch mit guten Beispielen zu füllen und diese nahtlos in die Anwendung zu integrieren, braucht man als Visual Designer so etwas wie Craft. Für Sketch gibt es ein Craft-Plugin mit dem man außerdem zahlreiche Möglichkeiten erhält, um statt mit Beispieldaten arbeiten zu müssen, echte Kundendaten importieren kann. Das ist ein sehr wichtiger Punkt, denn die Erfahrung zeigt, dass realistische Inhalte der Schlüssel zu einem guten Design sind. Ohne realistische Daten gestaltet man an den Anforderungen vorbei und es gibt spätestens beim Livegang der Anwendung Probleme, weil die Inhalte nicht in das Design passen.
Damit das Designkonzept aber auch in einem Unternehmen bzw. in einem Team professionell kommuniziert und verwaltet werden kann, benötigt man Funktionen, die die InVision-Plattform bietet. Sie umfasst zahlreiche Funktionen, um ein Design und dessen Screens in einem Prozess mit übersichtlichen Dashboards zu organisieren. Über InVision Inspect können Entwickler die Maßangaben direkt ablesen, css kopieren und notwendige Assets herunterladen. Aber auch Live-Feedback über einen speziellen Collaboration Room ist möglich. Hier schauen mehrere User zusammen auf einen Designentwurf und können direkt skizzieren und kommentieren.
Mit InVision führt man eigentlich eine Design-Plattform zur Organisation und Kommunikation in einem Unternehmen ein, in der das Design einen ganz anderen Stellenwert bekommt und sich völlig neue Möglichkeiten ergeben. Leider unterstützt InVision nur Sketch und Photoshop-Dateien, was unter Umständen in einigen Unternehmen ein Ausschlusskriterium sein könnte. Ob InVision in Zukunft auch das Adobe-Experience-Design-Format unterstützen wird, bleibt abzuwarten, aber wünschenswert wäre es aus meiner Sicht auf jeden Fall.
Fazit
Adobe Experience Design steckt inzwischen auch als Beta-Version nicht mehr in den Kinderschuhen und hat einige entscheidende Vorteile gegenüber Sketch – zum Beispiel die Erstellung von interaktiven Prototypen oder die zentrale Farbverwaltung über eine übersichtliche Farbpalette. Mit dem aktuellen Funktionsumfang kann man bereits komplexe Designkonzepte erstellen und die Anwendung wird mit jedem Update von Adobe besser. Das Video auf der Produkt-Website zeigt schon sehr gut, wo Adobe in Zukunft hin möchte und wie sie sich beispielsweise das simultane Arbeiten an einem Designkonzept in Adobe Experience Design vorstellen.
Sketch ist meiner Meinung nach aktuell noch DAS Tool für Visual Design, weil es speziell für diesen Einsatz entwickelt wurde und am ausgereiftesten ist. Ihm fehlt jedoch die Möglichkeit, interaktive Prototypen zu erstellen oder mit anderen Teammitgliedern zu kollaborieren. Durch eine Kombination mit Craft und InVision könnte man diese Lücke schließen – doch möchte man wirklich drei Programme für ein Visual Design nutzen? Je mehr Programme man verwendet, desto höher ist die Wahrscheinlichkeit, dass es zu Inkompatibilitäten kommt oder Fehler an Schnittstellen auftreten. Wesentlich komfortabler für einen Designer ist der tägliche Umgang mit nur einem Werkzeug, das die gesamte Funktionalität in einem Kontext bietet.
In meinem nächsten Projekt würde ich am liebsten auf die finale Version von Adobe Experience Design setzen, weil das Tool für mich am vollständigsten und am spezialisiertesten wirkt. Es unterstützt mich als Visual Designer mit intelligenten Hilfslinien, bietet Kompatibilität zu Adobe-Produkten (Drag & Drop) und überzeugt mit innovativen Funktionen, wie beispielsweise einem Wiederholungsraster. Mit diesem ist es möglich, ganze Blöcke aus Elementen ganz einfach mit unterschiedlichen Inhalten zu duplizieren. Aber auch die zentrale Verwaltung von Farben, Zeichenformaten und Symbolen ist genau das, wonach ich in Tools wie Photoshop oder Illustrator immer gesucht habe. Zudem bietet es mir die Möglichkeit, komplexe App Flows zu definieren und diese dem Kunden ohne viel Aufwand über einen einfachen Link für Feedback zur Verfügung zu stellen. Der Kunde kann sich das Konzept dann ganz in Ruhe anschauen und an bestimmten Stellen im Design Kommentare hinterlassen. Außerdem scheint es aktuell das zukunftsträchtigste Tool zu sein, was beispielsweise die Features zum simultanen Arbeiten und der Creative Cloud zeigen.
Ausblick
Unabhängig von Adobe werden sich auch die anderen Tools zunehmend in die Richtung des kollaborativen Arbeitens entwickeln, denn diese Funktion unterstützt bisher noch kein Visual-Design-Werkzeug vollständig. In Zukunft wird es möglich sein, Elemente gemeinsam online unabhängig vom Standort zu gestalten.
Was mir persönlich bei den Tools aktuell fehlt, ist die Möglichkeit, bei gestalteten Formen fixe und fließende Bereiche definieren zu können, um wiederverwendbare Symbole “intelligenter” zu machen. Wenn man die Symbole zusätzlich noch mit Zuständen (Events) und Animationen für “inaktiv”, “aktiv” und “deaktiviert” versehen könnte, wäre man noch flexibler und kompakter bei der Definition des Visual Designs. Außerdem würden die Prototypen wesentlich realistischer wirken und der Kunde könnte sich ein besseres Bild von der Anwendung machen.
Bei Texten wäre es ebenfalls schön, wenn man in der Lage wäre, maximale Laufweiten definieren zu können, wonach anschließend ausgepunktet wird. Eigentlich bei allen Tools, die ich bisher getestet habe, fehlt mir zudem die Möglichkeit für Farben, Typografien und Symbole Bezeichner vergeben zu können – ebenso die Definition von responsiven Layouts für spezielle Endgeräte.
Ich denke aber, dass sich in dieser Hinsicht in Zukunft noch sehr viel tun wird und bei den Tools aktuell noch viel Ausbaupotential existiert – denn solche Werkzeuge verändern die Arbeit eines Visual Designer grundlegend und es ergeben sich völlig neue Möglichkeiten mit einem Team an einem komplexen Designkonzept zu arbeiten.
Es bleibt abzuwarten, welche Features die Hersteller noch in die Tools integrieren.
Visual Design Starter Kit
Übrigens: Wer Adobe Experience Design selber einmal ausprobieren möchte, kann sich hier kostenlos ein Visual Design Starter Kit herunterladen.
Kommentare