Mit Adobe XD werden deine App- und Webseiten-Designs interaktiv, ganz ohne Programmierung! Verwandle deine Ideen in erlebbare Prototypen, die du sofort kommentieren, mit anderen teilen und weiter diskutieren kannst. In diesem fünfstündigen Adobe XD-Tutorial von Stefan Riedl erlernst du den Umgang mit der Software für Experience Design und Prototyping – leichtfüßig und Schritt für Schritt!
Wende Adobe XD an, damit deine Designs verstanden werden
Starte das Tutorial und lass dich in fⁿnf anschaulichen Stunden unverzⁿglich zu deinen ersten interaktiven Adobe XD-Designs leiten. Dein Trainer Stefan Riedl hat die BedienoberflΣche, den Funktionsumfang und den Workflow fⁿr den Umgang mit der Software im Kopf û und fⁿr dich alles Wesentliche kompakt aufbereitet.
Darum bist du in diesem Adobe XD-Tutorial goldrichtig
Ob UX und UI fⁿr dich noch Neuland sind oder nicht û das Adobe XD-Tutorial richtet sich sowohl an Ein- als auch an Umsteiger. Die Ziele des Tutorials sind gesteckt: Lerne erstens Adobe XD an sich kennen. Erfahre zweitens Grundlegendes ⁿber Experience Design, Wireframing und Prototyping. Und eigne dir drittens Wissen und K÷nnen an, um deine Designs kⁿnftig interaktiv zu prΣsentieren:
- Grandios fⁿr den Umstieg zu Adobe XD: Nutze das Tutorial, um schnell von einem alternativen UX-Programm auf Adobe XD umzusteigen. - Perfekt fⁿr den Einstieg in Adobe XD: Gehe erste Schritte im Experience Design und erstelle direkt deine eigenen User Interfaces. - Bessere Zusammenarbeit im Team: Lerne, wie du deine Prototypen mithilfe von Adobe XD mit anderen teilst. Ein enormer Vorteil fⁿr deine Kooperation zum Beispiel mit Programmierern und Entwicklern! - Nutze das volle Potenzial der Creative Cloud: Wie Adobe Dimension CC ist auch Adobe XD ein eher junges Programm. Probiere es aus und reize die M÷glichkeiten deines CC-Abos aus!
Die Inhalte: Interface und Experience Design, Wireframing und Prototyping
Das Adobe XD-Tutorial setzt bei den Grundlagen an, entfⁿhrt dich immer wieder in die praxisbezogene Anwendung und entlΣsst dich mit der Kompetenz, deine App- und Webseiten-Designs kⁿnftig selbststΣndig interaktiv zu gestalten.
Zu Beginn lernst du Adobe XD im ▄berblick kennen. Sieh dir gemeinsam mit deinem Trainer die BedienoberflΣche an und erfahre, worauf es im Umgang mit ZeichenflΣchen, Rastern, Farben, Assets, Formen und den verfⁿgbaren UI-Kits ankommt. Es sind diese Elemente, aus denen heraus du deine Designs entwirfst. Praktisch: Stefan Riedl erstellt im Tutorial das Design eines Onepagers, wobei all die Grundlagen noch einmal gebⁿndelt prΣsentiert werden.
Im Folgenden wagst du dich an das zweite Hauptthema von Adobe XD û an die Verknⁿpfung deiner Designs. Mithilfe des sogenannten Wireframing gibst du vor, was in der App bzw. auf der Webseite geschehen soll, wenn Nutzer zum Beispiel eine SchaltflΣche drⁿcken. Dynamische Animationen inklusive! Dieser Teil ist besonders fⁿr Auftraggeber enorm wichtig, um schnell zu verstehen, wie sich der Flow einer Anwendung konkret darstellt. Dabei geht dein Trainer sowohl auf die Menⁿgestaltung fⁿr Smartphone-Displays als auch fⁿr die Desktop-Ansicht ein und rundet den Abschnitt mit der Teilerstellung eines High-Fidelity-Prototyps anhand eines Shop-Beispiels ab.
Schlie▀lich spielst du den eigentlichen Vorteil von Adobe XD aus: Du visualisierst erst dir selbst und dann auch anderen, wie dein Design funktioniert û wie es sich also in Interaktion mit dem Nutzer verhΣlt. Erstelle dazu eine von dir kommentierte Vorschau. Oder: Teile dein UX-Design mit Projektbeteiligten, sodass sie deinen Prototypen direkt selbst ausprobieren und kommentieren k÷nnen. So kommt ihr gemeinsam noch viel schneller ans Ziel! Darⁿber hinaus kannst du deinen Prototypen live auf deinem Smartphone oder Tablet betrachten und begutachten, um ein sehr realistisches Gefⁿhl von der Anwendung in natⁿrlicher Umgebung zu bekommen.
KompatibilitΣt
Das Adobe XD-Tutorial wurde mit Adobe XD 18 aufgezeichnet. Zudem werden die Neuerungen in Adobe XD 19 betrachtet.