4.6 out of 5
29 reviews on Udemy

User Experience Design with Adobe XD- Learn UI and UXD

Learn Professional Level User Experience Design while Becoming an Adobe XD Expert.
Framework Television Inc.
131 students enrolled
English [Auto]
Become a UX/UI Designer
Professional Level Design Skills with the Adobe XD package
The Essentials of Wireframing
Designing with Typography with Adobe XD
Using Color within Adobe XD and Creating Color Palettes for User Experience Design
Creating Usable Buttons
Understanding Components and Reusability within Adobe XD
Working with Repeat Grids
Making Changes across Adobe XD Artboards
Creating Prototypes
Adding Transitions and Animations to our Prototypes
Prototyping Interactivity with Adobe XD
How to Mock up a Mobile App
How to Share Wireframes with your Team and Clients
Creating High-Fidelity Wireframes
Stylizing Designs with Design Elements
Finalizing a Design in XD -- Color Palette, Fonts, Character Styles
Drawing Your Own Graphics with Adobe XD
Iconography and Creating Icons with Adobe XD
Using the Pen Tool with Adobe XD to Create Shapes
Expanding the Capabilities of XD with Plugins
Animating UI Elements with Microinteractions
How to Finalize Imagery and Mockups for Production
Create a High-Res Mockup Without Photoshop
Drag Transitions
How to Prototype a Carousel
Understand User Testing as Part of the User Experience Design Process
Exporting Your Work from Adobe XD

So you want to become a designer?

Today, we call them user experience designers (UXD), user interface (UI) designers, or just plain web and mobile designers.  Whatever title you’re after, this in this course you’ll master the User Experience Design Process while learning Adobe XD.

You’ll join master designer and instructor Odin Fors, who will guide you through the design process and the software that makes user experience design happen, Adobe XD.

You’ll watch Odin’s video lectures and learn all of the critical skills you need to get started in UXD.  With a great level of precision, you learn the in’s and out’s of how professional user experience designers, use Adobe XD to create digital products like websites, or mobile applications.

But you certainly won’t just be watching!

Mastery comes from doing. And Odin’s exercises are designed to immerse you in the world of Adobe XD and design.  Each video lecture is paired with a lab exercise to reinforce and master the skills taught in the video. With each lab, you’ll be building on to a pro-level design project as Odin provides mentorship.

Rest assured, you won’t be covering Adobe XD at just a surface level, but, developing true expertise and mastery as you go through new and advanced XD skills like microinteractions and production workflows.

When you complete this course, you’ll be able to work as a User Experience or User Interface Designer and create the digital products of tomorrow.

Digital design is a field with a great future.  Your future starts here with Odin Fors’ User Experience Design with Adobe XD- Learn UI and UXD.

Introduction to UXD with Adobe XD

Getting Up and Running with Adobe XD

Here we’ll explore XD’s interface and core components. You’ll be introduced to themes that we will be putting into practice throughout the course.

In the Activity...
This is an introduction to the tools of XD. We'll demonstrate each then go through what they'll learn by the end of the course.

Wireframing Essentials

Everything in XD revolves around wireframes. We’ll be using a project brief, UX persona, and UI kits to provide a base for design.

In the Activity...
Odin will provide a project brief and persona to show who the design is for. He'll then show where to find pre-made UI Kits to jumpstart the wireframing process and build a basic wireframe using a UI Kit

Type, Color, & Button Basics

Here we cover the elements we need to stylize our design. We’ll explore type, swatch a color palette, and build buttons

In the Activity...
We'll review each element, building on each as we go to make the basic elements for the wireframes.

Constructing Prototypes

Using Components & Repeat Grids

Linked assets are key to avoiding repetitive tasks and staying organized. Easily make changes across artboards and speed up your workflow.

In the Activity...
An overview of components and demonstrate their use by creating elements and assigning them as components. We'll copy a component to another artboard and show how changes are linked. We'll take a component and create duplicates using repeat grids

Homepage & Contact Us Wireframes

Using the skills we’ve learned so far, we’ll wireframe the rest of the homepage and contact us page to include the features outlined in the brief.

In the Activity...
You will wireframe the rest of the two pages with Odin, using the elements we made and skills you've learned so far

Prototyping & Interactivity

Now we begin connecting our artboards through interactions. We’ll cover the basics of creating transitions, and previewing your prototype

In the Activity...
We connect the two pages using basic transitions in the prototype tab. I'll then show how to preview the prototype on the desktop

Mocking Up A Mobile App

Here we build main navigation screens for a mobile app to go with our website. We’ll add interactions and preview the prototype.

In the Activity...
I'll walk you through making the main screens for the mobile version of the project. We'll add basic transitions and preview the prototype.

Sharing Your Wireframes

Sharing low fidelity wireframes with others allows you to get feedback on the key elements of the user interface before adding hi fidelity features. Here you learn to publish your wireframes, receive feedback, and record interactions.

In The Activity...
I'll show how to publish a prototype by creating a shareable link and opening it in a browser. You'll go through how comments are added, and how to record yourself demonstrating the prototype in preview mode.

Professional Design Practice

High Fidelity Wireframe Design

Now that we’ve built and tested our wireframes, it’s time to stylize with design elements. We’ll find inspiration, finalize our color palette and fonts, and use character styles to save us time later on.

In the Activity...
We'll examine websites you can use to find inspiration. We'll create a basic moodboard and create a color palette from it. We'' review how to find fonts and choose ones that work together, then turn then into character styles by adding them to the components panel.

Drawing and Incorporating Graphics

Not all icons are created equal. We’ll use lines, shapes, and the pen tool to make custom icons and details to elevate your UI design.

In the Activity...
You'll learn how to create and integrate basic icons and draw elements to further develop our high fidelity wireframes.

The Power of Plugins

Eliminate repetitive tasks and auto-import assets to speed up your workflow. You’ll also learn tricks to make the most out of repeat grids and generate placeholder content.

In the Activity...
We'll walk through how to find, install, and use plugins. We'll have files with images and text ready for the autofill plugins for them to download and follow along

Animating with Microinteractions

Animate UI elements with microinteractions to bring your design to life. We’ll learn what they are and apply them to buttons and images.

In the Activity...
You'll learn what Microinteractions are, websites where to find microinteraction examples, and create our own in Adobe XD.

Finalizing Imagery & Mockups

Presentation is an essential part of any UI project. We’ll incorporate final imagery and text into our design, find mockups, and learn to use them. You’ll learn how to create a high res mockup for your design with and without using Photoshop.

In the Activity...
We'll look at free and paid asset sites. We'll take an image and manipulate it in multiple ways within XD such as masking and opacity. We'll download a free mockup graphic template and show how to use it and why you should.

Professional Prototyping

We’ll go beyond the basics so you can prototype like a pro. It’s not as scary as it sounds. We’ll walk you through simple techniques to build impactful transitions.

In the Activity...
Odin will walk you through how to use drag transitions to prototype a carousel. We'll also make a time-delayed number ticker.

User Testing & Exporting

It’s time to put your finished prototype to the test, the user test, that is. We’ll walk through how to go about it. Congrats! Your prototype is ready for export to developers, we’ll show you how to format it properly for an easy handoff

In the Activity...
We'll discuss free and paid, moderated and unmoderated testing. We'll then go through the exporting process.

Bonus Lecture

I really hope you enjoyed this course! Don't forget to leave a review here on Udemy!

I hope you take advantage of these learning opportunities from Mark and Framework:

⭐️ Become a pro-level web/mobile developer or designer for just $9.95 a month: https://frameworktv.com

⭐️ Free courses, workshops, and projects for developers and designers: https://www.frameworktv.com/free-training

Please follow us:

Mark's Twitter: http://www.twitter.com/mlassoff

Subscribe to Framework on YouTube: https://www.youtube.com/c/frameworktechmedia

Thanks again!


You can view and review the lecture materials indefinitely, like an on-demand channel.
Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don't have an internet connection, some instructors also let their students download course lectures. That's up to the instructor though, so make sure you get on their good side!
4.6 out of 5
29 Ratings

Detailed Rating

Stars 5
Stars 4
Stars 3
Stars 2
Stars 1
30-Day Money-Back Guarantee


4 hours on-demand video
1 article
Full lifetime access
Access on mobile and TV
Certificate of Completion
User Experience Design with Adobe XD- Learn UI and UXD
$218.98 $169


For Professionals

For Businesses

We support Sales, Marketing, Account Management and CX professionals. Learn new skills. Share your expertise. Connect with experts. Get inspired.


Partnership Opportunities

Layer 1
Register New Account
Compare items
  • Total (0)