Adobe XD Tutorial - Experience Design and Prototyping

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

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!

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.

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.

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.

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.

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.

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.

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.

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.

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.

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

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.

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.

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.

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.

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.

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.

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.

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.

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

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 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.

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

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.

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.

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!