Was ist Adobe XD? – Design- und Prototyping-Tool für UX UI Design

Was genau ist Adobe XD und was kann man damit machen? Das werde ich euch hier schnell erklären. Adobe XD wurde, wie schon der Name verrät, von Adobe entwickelt und ist teil der Adobe Creative Cloud. Es soll die Komplettlösung von Adobe sein für UX und UI Design. Ob alleine oder zusammen mit in einem Team kannst du Prototypen erstellen und teilen. Binde Kunden interaktiv in deinen Prozess mit ein und hole dir Feedback von Nutzern.

Was ist Adobe XD?

Adobe XD ist ein Vektor-basierendes Programm, genauso wie auch Illustrator, womit man Wireframes und Prototypen erstellen kann. Im Vergleich zu den anderen Adobe CC Programmen, ist die Benutzeroberfläche von Adobe XD viel schlichter und einfacher gehalten, was es viel intuitiver macht es zu bedienen. Weshalb der Erfolgsgrad des Lernens hier Steil ist, als bei Illustrator oder Photoshop. Das Programm ist in drei verschiedenen Tabs aufgeteilt: Design, Prototyp und Freigeben.

Design

Im Design Tab ist, wo die meiste Aktion passiert. Hier kann man mit den verschiedensten Werkzeugen Objekte erstellen und anpassen. Die Auswahl an Werkzeugen ist klein, aber relativ ausreichend. Es macht, was man erwarten würde von so einem Programm. Erstelle Rechtecken, Kreise oder Ovale. Füge Text hinzu und erstelle somit Menüs, Header oder Buttons. Wenn man ein neues Dokument erstellt, wird gefragt auf was für einer Zeichenfläche man arbeiten will. Dort kriegt man Optionen für Smartphones, Tablets, Web und die Wahl Benutzerdefinierte Größen einzutippen. Leider kann man Benutzerdefinierte Größen noch nicht speichern, weshalb man das jedesmal neu eintippen muss.

Wenn man dann eine Zeichenfläche sich ausgewählt hat, kann man dort die Viewport Höhe einstellen, bei einem Vertikalen Bildlauf. Viewport steht für den sichtbaren Bereich eines Bildschirmes, beispielsweise 1920 px x 1080 px. Somit wäre die Viewport Höhe bei 1080 px. Man kann die Zeichenfläche somit in der Höhe ändern und den Bereich Scrollbar machen. So würde das dann im Programm aussehen; die blau gestrichelte Linie, die durch die Seite geht, ist die eingestellte Viewport Höhe.

In der Werkzeugleiste unten gibt es außerdem noch weitere Untermenüs die machen öffnen kann: Elemente, Ebenen und Plug-ins. Unter Elemente kann man Farben, Zeichenformate und Komponenten speichern, um eine schnelle arbeiten zu ermöglichen. Bei Komponenten kann man Beispielsweise einen Button hinzufügen, den man oft im Projekt nutzt.

Bei Ebenen hat man zwei verschiedene Ansichten. Wenn man keine Zeichenfläche ausgewählt hat, werden die einzelnen Zeichenflächen angezeigt, wenn jedoch eine Zeichenfläche im Fokus ist, werden die einzelnen Objekte, Texte und Elemente aufgelistet. Und beim Punkt Plug-ins hat man die Möglichkeit Plug-ins von Dritt-Anbietern zu installieren, welche verschiedene Funktionen erfüllen können. Viele sind Kostenlos erhältlich und andere müssen gekauft werden.

Prototyp

Wie auch hier schon der Name sagt, kann man nun ein interaktives Prototyp erstellen. Adobe XD hat mittlerweile weitere Funktionen und Möglichkeiten hinzugefügt, um Prototypen noch besser zu machen. Man wählt sich ein Element aus, wie z. B. ein Menüpunkt aus der Navigationsleiste, und mit deinem Drag-and-Drop System wählt man dann das Ziel aus. Man hat da die Auswahl zwischen vier verschiedenen Trigger, Antippen, Ziehen, Tasten & Gamepad und Sprache. Anschließend wählt man die Aktion aus. Dort hat man die Wahl aus Übergang, Auto-Animate, Overlay, Bildlauf zu, vorherige Zeichenfläche, Audiowiedergabe und Sprachwiedergabe. Man kann auch das Easing einstellen und die Dauer dessen. Es gibt viele Möglichkeiten hier, so könnte es dann am Ende ausschauen.

Freigabe

Sobald man die Freigabe ausgewählt hat, wird der Arbeitsbereich ausgegraut und der Fokus liegt dann auf dem rechten Menü. Hier kann man die Anzeigedarstellung auswählen und diese dann mit einem Link teilen. Wenn man möchte, kann man den Link mit einem Kennwort sichern. Man hat die Auswahl zwischen fünf Anzeigedarstellungen: Design-Review, Entwicklung, Präsentation, Benutzertest und Benutzerdefiniert.

Alles hat mit Project Comet angefangen

Project Comet wurde in Oktober 2015 auf der Adobe MAX präsentiert und vorgestellt. Dort hat Sarah Hunt die Funktionen von Comet dargestellt und erklärt. Sie sprach darüber, wie Comet von Grund auf aufgebaut worden ist und deshalb sehr schnell arbeitet. Man kann hunderte von Zeichenflächen haben und mehrere Komponenten, doch Comet ruckelt nicht und man kann weiterhin geschmeidig arbeiten. Project Comet war der Anfang für Adobe Experience Design, dem Adobe XD. Adobe wollte damit ein brachen-führendes Tool erstellen, eine Design- und Prototyping-Lösung für UX. Adobe XD arbeitet zusammen mit der Cloud und der Bibliothek, somit können Nutzer schneller an fertige Komponenten, Logos oder Bilder geraten, die sie bereits in Photoshop oder Illustrator verwendet haben. Sie haben in der Alpha Version mit vielen Menschen zusammen gearbeitet, um das beste Produkt rauszubringen. Und das war damals, heute haben sie mittlerweile noch mehr Funktionen bekommen, haben eine größere Community erstellt und bieten ein Daily Creative Challenge an. Adobe XD wird nur weiter wachsen und besser werden.

Doch was sind die Adobe XD Kosten?

Momentan kann man Adobe XD kostenlos herunterladen! Dieses Angebot gilt jedoch nur noch bis April 2020. Die nächste Option wäre die „XD“ Version für 11,89 € pro Monat und Anwender. Die danach wäre dann „XD für Teams“ und kostet 23,79 € pro Monat und Anwender. Wenn man jedoch die Adobe Creative Cloud bereits abonniert hat, ist Adobe XD auch ein Teil davon und man muss es sich nicht extra kaufen. (stand 06.04.2020)

Zusammenfassung – Was ist Adobe XD?

Adobe XD ist ein Prototyping Tool für UX/UI Designer, die Wireframes, Prototypes und Benutzeroberflächen gestalten wollen. Es hat Funktionen zum interaktiven Testen und freigeben der Projekte. Es bietet bei der Freigabe Informationen für Developer oder eine Kommentarfunktion für Kundenfeedback an. Man kann auch zusätzliche Plug-ins installieren, die bei der Arbeit helfen können.

FAQ – Oft gestellte Fragen

Webseite auf Adobe XD fertig, wie stelle ich sie online?

Adobe XD ist keine Software, mit der man Webseiten funktionsfähig für das Internet bauen kann. Es ist ein reines Design- und Prototyping Tool um Konzepte zu erstellen, welche man dann im nächsten Schritt weiter entwickeln würde.

Ist Adobe XD open source?

Ja ist es. Viele arbeiten zusammen und kreieren Plug-ins für die Software. Hier ist das Github von Adobe XD.

Wie füge ich Plug-ins ein?

Das geht sehr einfach. Auf dem Stadtbildschirm unter Plugins wählt das Plus (+) Zeichen aus. Ein neues Fenster öffnet sich und dort könnt ihr Plug-ins entdecken oder direkt suchen.

Ist Adobe XD teil von Adobe CC?

Ja, wenn ihr das Abo habt, könnt ihr auch Adobe XD runterladen.

Falls ihr mehr Fragen haben solltet, stellt sie in den Kommentaren. 🙂