Das ist im März neu bei Adobe XD: Prototypen mit Audio und Anchor Links

Autor: Dani Beaumont

Mit Adobe XD gelingen euch ganz einfach immersive Designs, die sich wie echte digitale Produkte anfühlen. Das leistungsstarke Prototyping-Tool erlaubt es euch unter anderem, eure Designs um Animationen zu ergänzen und anklickbare, interaktive Prototypen zu erstellen, die ihr mithilfe der Vorschaufunktion direkt auf eurem Desktop, euren mobilen Endgeräten und sogar auf Geräten mit Amazon Alexa-Funktion anschauen könnt.

Auch diesen Monat haben wir wieder innovative Prototyping-Funktionen für euch, die auf bestehenden Funktionen von XD wie Auto-Animate und Voice Prototyping aufbauen. Außerdem stellen wir euch eines unserer Lieblings-XD-Plugins aus unserem konstant wachsenden XD-Ökosystem vor: Freut euch auf zeroheight.

Ladet euch einfach die neuste Version von XD herunter oder aktualisiert eure Creative Cloud Anwendung und schon geht es los. Und wie immer gilt: Euer Feedback ist unsere Inspiration! Lasst uns wissen, was euch besonders gut gefällt, was ihr euch für zukünftige Versionen wünscht und gestaltet die Zukunft von XD auf Twitter, Facebook und in unseren Community-Foren mit.

Los geht’s!

Dreht den Sound auf: Ergänzt eure Prototypen jetzt um Audio Playback

Audio ist ein entscheidender Bestandteil des menschlichen Erlebens. Vom „Swoosh“-Sound beim Abschicken einer Nachricht bis hin zum Glockenspiel, wenn ein Benutzer ein Formular erfolgreich vollendet hat oder ein markenspezifischer Sound wie die Animation des Netflix Logos: Töne helfen uns dabei, Situationen und Erlebnisse einzuordnen und wiederzuerkennen.

Das geht jetzt auch in Adobe XD: Mit der Audiowiedergabe-Funktion könnt ihr nun Soundeffekte einsetzen, um eure Nutzer intuitiv durch Anwendungen zu leiten und über Prozessfortschritte zu informieren. Und das zahlt sich aus: Marken, die auf ein gebrandetes Audiodesign setzen, punkten mit einem hohen Wiedererkennungswert.

Im Prototypenmodus könnt ihr jetzt die Audiowiedergabe als Aktion auswählen. Wenn ihr z.B. beim Anklicken einer Schaltfläche einen Ton abspielen möchtet, könnt ihr jetzt die entsprechende Komponente auf eurer Leinwand und die Funktion „Tippen als Auslöser“ auswählen. Ladet dann über das Dropdown-Menü entweder eine Audiodatei von eurem Computer hoch oder verwendet einfach eine zuvor hochgeladene Datei aus. Klickt dann auf den „Abspielen“-Button in der oberen rechten Ecke, um euch die Vorschau anzeigen zu lassen. Ziemlich einfach, oder?

Und das ist noch nicht alles: Ihr könnt sogar festlegen, dass das Antippen eines Sound-Buttons verschiedene Aktionen wie beispielsweise das Abspielen eines Sounds, aber auch den Übergang zu einem anderen Button auslöst. Der Tap-Trigger unterstützt jetzt sowohl überleitende Aktionen (z.B. Überlagerung, Auto-Animation usw.) als auch statische Aktionen (Audio- oder Sprachwiedergabe).

Damit ihr direkt loslegen könnt, hat Sam Anderson, Experience Designer bei Adobe, eine Bibliothek mit Sounds für euch zusammengestellt, mit der ihr euch durch die neue Audiowiedergabefunktion probieren könnt. Ladet die Bibliothek einfach über Behance herunter und los gehts!

Schnelle und einfache Navigation mit Anchor Links

Anker-Links führen Benutzer zu vorab definierten Punkten auf einer Webseite. Gerade wenn ihr lange Artikel auf eurer Website oder euerm Blog habt, erleichtern Anker-Links die Navigation erheblich. Klassische Beispiele für Anker-Links sind etwa Navigationsmenüs, Seitenindizes oder Inhaltsverzeichnisse.

Mit der aktuellen Version steht euch diese Option jetzt auch in Adobe XD offen: Durch Anker-Links könnt ihr beispielsweise durch das Klicken auf einen Link oder eine Schaltfläche das automatische Scrollen zu einem bestimmten Punkt auf der Website imitieren. Außerdem könnt ihr euren Prototypen über Anker-Links eine Seitennavigation, ein Inhaltsverzeichnis oder Schaltflächen für den automatischen Bildlauf hinzuzufügen.

Das geht ganz einfach: Wählt im Prototyping-Modus ein Objekt – eine Schaltfläche oder einen Navigationsmenü-Link – aus, zieht den Prototyping-Wire auf eurer Zeichenfläche nach unten, bis ihr den Punkt erreicht habt, an dem ihr den Link erstellen wollt. Die gewünschte Verbindung entsteht dann ganz automatisch. Standardmäßig sind im Property-Inspector „Tippen“ als Auslöser und „Scrollen“ als Aktion voreingestellt. Ihr könnt den Y-Offset entweder über den Property-Inspector oder direkt auf der Leinwand konfigurieren, um festzulegen, wie weit über oder unter dem Zielpunkt eure „Scrollen zu“-Aktion lokalisiert werden soll. Insbesondere für schwierig händelbare Navigationsleisten oder für die Platzierung weiterer Elemente ist das eine echte Erleichterung.

Anker-Links lassen sich außerdem mit anderen Funktionen wie Component Status, Preserve Scroll Position, Content-Aware Layout oder Responsive Resize für die Website-Gestaltung in Adobe XD kombinieren.

Ladet euch einfach die neuste Version von XD herunter oder aktualisiert eure Creative Cloud Anwendung und probiert es direkt aus!

Erstellt euer eigenes Design-Archiv mit zeroheight für Adobe XD

Mit Adobe XD könnt ihr ein Designsystem erstellen, das es euch ermöglicht, Assets und Komponenten gemeinsam im Team zu nutzen. Wenn ihr Assets gemeinsam nutzt, könnt ihr sie ganz einfach mit dem Originaldokument verlinken – so sind alle Änderungen sofort für alle verfügbar. Wie das funktioniert, zeigen wir euch hier.

Übriges: Einmal aufgesetzt, könnt ihr euer Designsystem über den gesamten Produktentwicklungsprozess hinweg einsetzen. Doch wie könnt ihr sicherstellen, dass alle Beteiligten jederzeit Zugriff auf alle relevanten Informationen haben? Die Lösung heißt zeroheight für Adobe XD.

Das neue Plugin erlaubt es euch, Assets und Komponenten aus euerm Designsystem auf Zeroheight hochzuladen und so ein für alle Beteiligten einseh- und nutzbares Design-Archiv zu erstellen. Der Adobe Fund for Design unterstützt zeroheight durch Kapitalbeteiligungen für Unternehmen und Personen, die die Zukunft von Design und Kreativität gestalten.

Probiert doch einmal die kostenlose Testversion aus und ladet euch das zeroheight Adobe XD-Plugin herunter. Weitere Informationen findet ihr in unserem Blog.