Adobe XD Tutorial: Experience Design

Language: German

Adobe XD Tutorial - Experience Design and Prototyping

Adobe XD makes your app and website designs interactive without any coding! Turn your ideas into tangible prototypes that you can immediately comment on, share with others and discuss further. In this five-hour Adobe XD tutorial by Stefan Riedl, you will learn how to use the software for experience design and prototyping - step by step and with ease!

From idea to prototype: How to create interactive designs with Adobe XD
For an easy start: learn how to use artboards, colors, UI kits and more.
Prototyping and wireframing: How to combine your artboards into a user experience
Practical application: Put what you have learned into practice using two sample projects
For smooth collaboration: How to comment and share your prototypes with others
Working with Adobe XD, brought to the point by Stefan Riedl in 5 goal-oriented hours
Bonus: Everything you need to know about what's new with the Adobe XD 19 update

Show how your app and website should work! - Learn how to use Adobe XD with the tutorial, and your designs will be clickable right away!

Details

Usable with:
content: 5 h Video training
Licence: private and commercial Rights of use

Examples of use

Open gallery

Example: Learn how to create UI designs and link them to interactive prototypes.
Open gallery

Example: Learn how to create user interfaces for smartphone displays and desktop views in Adobe XD.
Open gallery

Example: Get into the concrete application of Adobe XD in two sample projects.

Adobe XD Tutorial: Experience Design and Prototyping

free of charge

Adobe XD-Tutorial: 01 | Intro

Welcome to the big Adobe XD tutorial. In this intro, I introduce myself as your trainer.

Adobe XD-Tutorial: 02 | UI & UX and different level designs

What is the difference between user experience (UX) and user interface (UI)? What types of level design are there and what is Adobe XD best used for? The answer is here!

Adobe XD Tutorial: 03 | Getting started, splash screen and available functions

Open Adobe XD for the first time - and there are already numerous options to choose from. This video gives you a short warm-up for Adobe XD, an overview of the program and an introduction to the splash screen of XD and its functions.

Adobe XD-Tutorial: 04 | Create artboards with different resolutions

Artboards (artboards) can be created in Adobe XD for different resolutions and devices in no time at all. In this tutorial, you will find out which peculiarities need to be taken into account.

Adobe XD Tutorial: 05 | Grid settings for columns and rectangular grids

Different grid settings make it easier for us to arrange elements and objects neatly one below the other. A rectangular grid and a column layout for columns are available for this purpose.

Adobe XD-Tutorial: 06 | Helpful presets with UI-Kits

Google, Apple and Microsoft provide practical UI kits for a quick start. These ready-made artboards help us enormously in the later design of prototypes for different platforms.

Adobe XD-Tutorial: 07 | Working with colors

Colors play an extremely important role in almost every design - in this video you will learn how to work with colors in Adobe XD, how to import them and what practical sources are available to collect ready-made color harmonies.

Adobe XD Tutorial: 08 | Importing Assets

There are numerous methods to import assets such as images, files, text documents, etc. into Adobe XD. In this video, I present a few methods. However, since XD is part of Adobe's Creative Cloud, it is of course extremely convenient and comfortable to work with the libraries.

Adobe XD-Tutorial: 09 | Fonts and Typography

The topic of fonts and typography is a big part of our journey through Adobe XD. In this video, you will learn how to use fonts correctly and efficiently.

Adobe XD Tutorial: 10 | Shapes and Symbols

Shapes can either be easily imported into Adobe XD or created using the path tool. If an object is used more than twice, it is also advisable to add it to the assets list as a symbol.

Adobe XD Tutorial: 11 | Inspiration for designers

Designing has a lot to do with inspiration and input from outside. This includes the analog environment as well as the digital world. Here I present some portals that I like to visit.

Adobe XD-Tutorial: 12 | Create Onepager, Part 1 - Learn techniques

Let's start with a small, fine practical project. In this tutorial and the next two videos, we will create a one-pager.

Adobe XD Tutorial: 13 | Create Onepager, Part 2 - Repetition Grid

The repeat grid is one of the most important features of Adobe XD. It helps us to scale and individually fill groups of objects once they have been created.

Adobe XD-Tutorial: 14 | Create Onepager, Part 3 - References and Footer

In the last part of the one-pager design, we will take care of the footer and an area for references. Here we use practical SVG files and get to know other design techniques.

Adobe XD Tutorial: 15 | Basics in prototyping and wireframing

In this lesson, we look at the question of how individual artboards can be connected interactively. We will clarify the options for choosing the transition and what other modifications we can make to the prototype.

Adobe XD-Tutorial: 16 | Build menu for desktops interactively

Every website needs an anchor point for navigation. In this video, we focus exclusively on the creation of a main navigation in the header area and the interactive connection to each other.

Adobe XD-Tutorial: 17 | Build menu for smartphones interactively

This training builds on the previous chapter and shows how we adapt the created desktop menu for a smartphone. The hamburger icon and the menu items are enhanced with interesting animations.

Adobe XD Tutorial: 18 | The Auto-Animate feature for interactive prototyping

One of the most powerful tools for the best possible visualization is the Auto-Animate function of Adobe XD. In this example, I explain how you can adapt the principle of the Auto-Animate function for every conceivable scenario.

Adobe XD Tutorial: 19 | Creating a High-Fidelity Prototype, Part 1 - Mobile Online Shop

In the following videos, we will learn how to create a prototype for an online store. We will learn ways to create visually appealing high-fidelity prototypes from simple artboards. Part 1 of 4.

Adobe XD Tutorial: 20 | Creating a High-Fidelity Prototype, Part 2 - Product Details

In the second part, we take care of the presentation of the detailed descriptions, add sliders for the images and link the artboards to each other.

Adobe XD Tutorial: 21 | Creating a High-Fidelity Prototype, Part 3 - Overlay Function

The overlay function for interactive prototyping offers us exciting possibilities for showing and hiding information directly.

Adobe XD Tutorial: 22 | Creating a High-Fidelity Prototype, Part 4 - Final Animation

Good usability design always gives the user feedback on the system status. We will incorporate this feedback into a nice animation at the end of the project.

Adobe XD tutorial: 23 | Voice control

Adobe XD also masters interaction by voice command in its prototyping process. Verbal commands therefore lead to system actions that we can define ourselves. I will show you how this works in this tutorial.

Adobe XD Tutorial: 24 | Audio annotation of previews

When collaborating with other departments and people involved, audio commentary is a valuable feature for explaining the project status in an understandable way.

Adobe XD Tutorial: 25 | Device Preview on end devices via app

Testing a prototype in a virtual environment is one thing - presenting it live on an end device is quite another. And that's exactly what Adobe XD makes it easy to do, either via USB or via a Creative Cloud connection. We use the Adobe XD app from the app store for this.

Adobe XD Tutorial: 26 | Publish project with design specifications

During the collaboration, it is essential to exchange information about the project status with other departments. The prototype can be released via the publish function so that reviewers, developers and clients can get a visual impression of the project. At this point, the processing cycle between the specialist departments begins in order to bring the project to maturity.

Innovations in Adobe XD 19

Adobe XD Tutorial: 27 | New features in version 19

Adobe XD is still a very young program and is changing more and more with each update: In this video, I explain what new features have been added in the jump from version 18 to version 19, how the features are used and in which situations they are helpful. These include: Components instead of symbols, Responsive Resize, guides, polygon tool, more options for text formatting and much more. Have fun!

Details of the content

Use Adobe XD to make your designs understood

Start the tutorial and let yourself be guided immediately to your first interactive Adobe XD designs in five illustrative hours. Your trainer Stefan Riedl has the user interface, the range of functions and the workflow for using the software in mind - and has prepared everything essential for you in a compact format.

That's why you're in the right place in this Adobe XD tutorial

Whether you're new to UX and UI or not, the Adobe XD tutorial is aimed at both beginners and newcomers. The goals of the tutorial are set: Firstly, get to know Adobe XD itself. Secondly, learn the basics of experience design, wireframing and prototyping. And thirdly, acquire the knowledge and skills to present your designs interactively in the future:

Great for switching to Adobe XD: Use the tutorial to quickly switch from an alternative UX program to Adobe XD.
Perfect for getting started with Adobe XD: Take your first steps in experience design and create your own user interfaces directly.
Better team collaboration: Learn how to share your prototypes with others using Adobe XD. A huge advantage for your collaboration with programmers and developers, for example!
Use the full potential of the Creative Cloud: Like Adobe Dimension CC, Adobe XD is a relatively new program. Try it out and maximize the possibilities of your CC subscription!

The contents: Interface and experience design, wireframing and prototyping

The Adobe XD tutorial starts with the basics, takes you back to the practical application and leaves you with the skills to create your own interactive app and website designs in the future.

At the beginning, you will get to know Adobe XD at a glance. Take a look at the user interface together with your trainer and find out what is important when working with artboards, grids, colors, assets, shapes and the available UI kits. These are the elements from which you create your designs. Practical: Stefan Riedl creates the design of a one-pager in the tutorial, where all the basics are presented once again.

In the following, you will tackle the second main topic of Adobe XD - linking your designs. With the help of wireframing , you specify what should happen in the app or on the website when users press a button, for example. Dynamic animations included! This section is particularly important for clients in order to quickly understand how the flow of an application actually looks. Your trainer will go into the menu design for smartphone displays as well as for the desktop view and round off the section with the partial creation of a high-fidelity prototype using a store example.

Finally, you play out the real advantage of Adobe XD : You visualize first to yourself and then to others how your design works - how it behaves in interaction with the user. Create a preview with your own comments. Or: Share your UX design with project participants so that they can try out and comment on your prototype themselves . You can also view and review your prototype live on your smartphone or tablet to get a very realistic feel for the application in a natural environment.