Adobe Experience Design – Review

|

tl;dr? Eine Zusammenfassung und eine Pro- und Kontra-Liste gibt es am Ende, zusammen mit einigen nützlichen Shortcuts.

Die englische Version dieses Artikels gibt es hier.

Was ist Adobe Experience Design?

Adobe Experience Design ist ein Tool, das in Adobes Produktpalette noch gefehlt hat: Rapid Prototyping von interaktiven Wireframes und einfaches Veröffentlichen und Teilen. Mit Adobe Experience Design kannst du Screens für deine App designen, Interaktionen definieren, indem du Pfeile von Screen zu Screen ziehst, das Ergebnis im Preview-Modus prüfen und dann den Link zu deinem Prototypen teilen oder eine Live-Demo direkt auf dem Smartphone präsentieren. Der Workflow ist überraschend einfach.

Das Tool ist aktuell nur für Mac erhältlich in der Version 0.5.2. Da das eine Preview-Version ist, sind wir nachsichtig und warten geduldig auf Features wie Layer und scrollbare Boxen.

Design

Ich bin Software-Entwicklerin, kein Designer und definitiv kein Photoshop-Experte. Trotzdem war der Einstieg in Adobe XD leicht und intuitiv. Nach den Tutorial-Videos bin ich die Schritte im Beispielprojekt durchgegangen. Das alles hat weniger als eine halbe Stunde gedauert.

Ein paar Skizzen auf Papier und dann ging es ans Designen. Man wählt eine Screen-Größe und fügt ein paar Artboards hinzu. Jede Screen-Größe braucht ein eigenes Design, das ist etwas nervig. Positionierung und Größenanpassungen sind super einfach, ein verdecktes Objekt auszuwählen dagegen nicht: Es gibt kein Layer-System (man arbeitet daran). Objekte aus Photoshop und Illustrator können einfach in Experience Design eingefügt werden.

Ein spannendes neues Feature ist das Repeat-Grid. Dazu wird ein Vorlage-Objekt als Repeat-Grid markiert, dann zieht man mit der Maus ein Rechteck auf und die Vorlage wird darin automatisch wiederholt. Wenn jetzt ein Element im Vorlage-Objekt bewegt oder vergrößert wird, übernehmen alle Kopien die Änderungen automatisch. Änderungen des Inhalts werden nicht übernommen, so kann man einheitlich angeordnete Boxen mit unterschiedlichen Inhalten bestücken. Mir fehlte eine Möglichkeit ein Template zu erweitern, zum Beispiel ein Icon nachträglich hinzuzufügen. Mein Workaround sieht so aus: Das Repeat-Grid auflösen, das Template ändern und erneut das Repeat-Grid anwenden. Nichtsdestotrotz ist das Repeat-Grid ein cooles Feature, das Layouting und Positionierung erheblich vereinfacht. Definitiv eine große Zeitersparnis.

repeat-grid.pngrepeat-grid-resize.png

Bilder können einfach auf Objekte gezogen werden, um sie auszufüllen – klasse! Unschön daran: Ich konnte das Bild hinterher nicht mehr bewegen oder vergrößern. Mit der Funktion Maskierung ging das, aber bei keiner der beiden Methoden konnte ich das Bild ändern, wenn es erstmal platziert war. Benutzt habe ich die Funktion, um Kreise mit Profilbildern zu füllen und Hintergründe und Icon-Formen mit Texturen.

Das Designen hat wirklich Spaß gemacht. Das Interface ist sehr intuitiv und ich habe mich ziemlich schnell daran gewöhnt. Jetzt wird das Ganze interaktiv!

Prototyping

Designen war intuitiv? Prototyping erst recht! Das Objekt auswählen und einen Pfeil auf den Screen ziehen, der erscheinen soll. Dann noch Typ und Dauer der Transaktion ändern und das war’s.

Das Interface ist bewusst einfach gehalten, aber es gibt immer einen Tradeoff zwischen Funktionalität und Einfachheit: Es gibt noch keine Möglichkeit Hover-Effekte hinzuzufügen oder scrollbare Container und Popup-Menüs. In meinem Prototypen habe ich dafür mehrere Kopien von einem Artboard erstellt und immer ein Detail geändert. Kopien? Als Software-Entwicklerin schaudert mir bei dem Gedanken – Redundanz! Ein Master-Screen als Vorlage für weitere Screens wäre nett.

interaction.png

add-interaction.png

Preview und Teilen

Der Preview-Modus zeigt den aktuellen Prototypen an. Man kann auf die Elemente klicken und testen, ob die Interaktion wie gewünscht funktioniert. Interaktionen können aufgenommen werden oder man teilt einen Link zur App. Ziemlich praktisch, um den Prototypen direkt auf dem Smartphone zu zeigen, ohne vorher Dateien kopieren zu müssen. Man kann die Screens auch direkt als Bilddateien exportieren.

Summary

Adobe XD ist ein nützliches Tool, um schnell UI-Prototypen zu erstellen. Der Einstieg ist intuitiv und einfach. App designen, Interaktion hinzufügen, im Preview-Modus testen und teilen. Smarte Funktionen wie das Repeat-Grid nehmen einem aufwändige händische Arbeit ab. Der aktuellen Preview-Version fehlen einige Features wie Layer oder Master-Screens und verschiedene Screen-Größen müssen manuell angepasst werden. Insgesamt deckt Adobe Experience Design den gesamten Prototyping-Prozess ab und man kommt mit schnellen Iterationen zum Ziel.

Pros

  • Super einfacher Start & intuitive Benutzeroberfläche
  • Repeat-Grid um Vorlagen zu vervielfältigen
  • Objekte mit Bildern maskieren
  • Interaktion: Einfach Pfeile ziehen
  • Preview-Modus
  • Link zur App teilen, nichts kopieren
  • Screens als Bilddateien exportieren
  • Photoshop und Illustrator-Integration

Cons

  • Kein Konzept für Responsiveness (jede Screen-Größe braucht ein eigenständiges Design)
  • Keine Layer ∗
  • Keine scrollbaren Container ∗
  • Keine Erweiterung des Repeat-Grid Templates
  • Kein Master-Screen (sodass Screens Änderungen erben können)
  • Keine Effekte für Interaktionen (Hover, Popups)

∗ Features sind für zukünftige Releases geplant, hier aktuelle Features ansehen

Shortcuts (+ shift macht einige davon rückgängig)

Bewegen space + drag
Repeat-Grid cmd + R
Gruppieren cmd + G
Sperren cmd + L

Die Bilder, die im Prototypen verwendet wurden sind von iStock und Library of Congress.

^ Nach oben!