User Experience Design Essentials - Adobe XD UI UX Design
All LevelsDesignUser Experience Design

User Experience Design Essentials - Adobe XD UI UX Design

Use XD to get a job in UI Design, User Interface, User Experience design, UX design & Web Design

Created by Daniel Walter Scott
9.5 hours
Video Content
85
Lectures
188,102
Students
4.6
Rating
4.6
(188,102 students enrolled)

What you'll learn

βœ“Become a UX designer.
βœ“You will be able to start earning money from your XD Skills.
βœ“You will be able to add UX designer to your CV
βœ“Build a UX project from beginning to end.
βœ“Become a UI designer.
βœ“Build & test a full mobile app.
βœ“Build & test a full website design.
βœ“You will have a project of your own to add to your portfolio.
βœ“93 lectures of well-structured, step by step content.
βœ“Learn to design websites & mobile phone apps.
βœ“Work with fonts & colors.
βœ“Prototype your designs with interactions.
βœ“Test on mobile phones.
βœ“You'll create realistic prototype complete with micro interactions.
βœ“Send your designs for feedback & commenting.
βœ“Export production ready assets.
βœ“Create your first UX brief & persona.
βœ“Create quick wireframes.
βœ“How to use premade UI kits.
βœ“Learn professional workflow tricks & shortcuts.
βœ“You will get the finished files so you never fall behind
βœ“Downloadable exercise files
βœ“Forum support from me and the rest of the BYOL crew
βœ“All the techniques used by UX professionals
βœ“Build a mobile app prototype that responses to voice commands.
βœ“You will be able to talk correctly with other UX design professionals.
βœ“You'll learn how to choose colors.
βœ“You'll learn how to pick the correct fonts.
βœ“You'll be able to send your finished work to other professionals in the correct formats.

Course Content

21 sections β€’ 85 lectures β€’ 09:43:53 total length

Getting Started

6 lectures β€’ 27:30

Getting started with your Adobe XD project.02:26
What is Adobe XD for & does it do the coding05:31
What's the difference between UI and UX in Adobe XD03:32
What we are making in this Adobe XD course01:11
What is a persona & task flow in UX design11:26
+2 more lectures

Wireframing Low Fidelity

2 lectures β€’ 12:33

What is Lo Fi Wireframe vs High Fidelity in Adobe XD02:55
Artboards & how wide should my website or app be in Adobe XD09:38

Type, Color & Icon Introduction

9 lectures β€’ 01:18:26

Working with type in your XD wireframes11:25
Rectangles, Circles, Buttons and Rounded corners in Adobe XD08:25
How to use color in Adobe XD06:16
Strokes & copy & paste appearance in Adobe XD11:55
Class Project 02 - Wireframe04:10
+6 more lectures

Prototyping - Level 1

4 lectures β€’ 29:11

How to add interaction to your prototype in Adobe XD07:28
Prototype animation & easing in Adobe XD06:10
How see your design on XD App on iPhone & Android10:21
Class Project 04 - Testing on your phone05:12
Class project 04 - Testing on your phone1 question

Animation

3 lectures β€’ 26:10

Getting started with auto-animations in Adobe XD11:17
Understanding more about animation in Adobe XD09:55
Class Project 05 - My first animation04:58
Class project 05 - My first animation1 question

Feedback & Commenting

1 lectures β€’ 07:09

Sharing Wireframes for comments in Adobe XD07:09

Moodboard - High Fidelity UI Design

4 lectures β€’ 33:08

Mood Boards & resources for Hi fidelity UI design in Adobe XD08:20
How to create a mood board in Adobe XD07:48
Class project 06 - Mood Board01:41
Class Project 06 - Moodboard1 question
How to work with Columns & Grids in Adobe XD15:19

Columns & Grids

2 lectures β€’ 08:31

View port aka dotted line on the page in Adobe XD04:05
How to add & delete guides to Adobe XD04:26

Colors

5 lectures β€’ 29:51

Color Inspiration & the eyedropper in XD07:10
How to create a color palette in Adobe XD10:43
How to create gradients in Adobe XD05:10
How to save and reused color swatches in Adobe XD03:17
Class Project 07 - Colors & Columns03:31
+1 more lectures

Text & Fonts - Level 2

6 lectures β€’ 48:33

What fonts can I use in my web or app design in Adobe XD12:17
Check what other font’s people have used03:28
What common font sizes should I choose in web design06:11
How to make Character Styles in Adobe XD16:17
Plugin - Adding our first Plugin Lorem Ipsum to Adobe XD05:19
+2 more lectures

Drawing

5 lectures β€’ 33:08

Drawing & editing shapes in Adobe XD05:51
Strangeness with shapes in Adobe XD05:12
Learn to draw with the pen tool in Adobe XD08:41
Working with strokes & lines in Adobe XD06:02
Class Project 09 - Icons & Buttons07:22
+1 more lectures

Working with Illustrator

1 lectures β€’ 10:06

Do I need to know Illustrator with Adobe XD10:06

Images

4 lectures β€’ 16:39

Masking & cropping images in Adobe XD04:36
Free images to use in your XD mockups - Unsplash Pexels Freeimage02:53
Darkening background images with opacity in XD03:40
Blurring backgrounds and objects in Adobe XD05:30

Working with Photoshop

3 lectures β€’ 18:23

Do I need to know Photoshop with Adobe XD10:29
Snack bar Toast banners using masked image in Adobe XD05:56
Class Project 10 - Add images01:58
Class Project 10 - Images1 question

Components & Instances

4 lectures β€’ 32:21

How to make & use components in Adobe XD06:35
Difference between Main & Instance Components in Adobe XD12:49
How to create component hover states in XD07:48
Class Project 11 - Buttons05:09
Class Project 11 - Buttons1 question

Repeat Grids

3 lectures β€’ 17:12

How to use the repeat grid in Adobe XD06:58
Class Project 12 - Repeat Grid07:12
Class Project 12 - Repeat Grid1 question
Updating & issues with repeat grids of the edge03:02

Stacks

2 lectures β€’ 13:03

How to use stacks in XD to make a form11:23
Class Project 13 - Stacks & Checkout Page01:40
Class Project 13 - Stacks & Checkout Page1 question

Micro Interactions & Animations

7 lectures β€’ 41:24

The difference between animation & micro interactions06:20
Dan drawing stuff in Adobe XD06:54
More animation in Adobe XD10:43
Class Project 14 - My Second Animation01:44
Class Project 14 - My Second Animation1 question
+4 more lectures

How to pin navigation to the top in Adobe XD

5 lectures β€’ 33:06

How to pin navigation to the top in Adobe XD07:18
How to add a popup overlay modal in Adobe XD08:27
Slide in mobile nav menu overlay in Adobe XD10:42
Class Project 16 - Popup & Navigation03:22
Class Project 16 - Popup & Navigation1 question
+1 more lectures

Exporting

7 lectures β€’ 01:01:38

How to share your document with clients & stakeholders & user testers12:34
Talking to your developer early in the XD design process04:54
Export the right image file formats from Adobe XD17:09
Batch export images at once using Mark for Export in XD05:23
How to export code in XD for engineers using Design Specs06:42
+3 more lectures

What Next

2 lectures β€’ 05:50

Whats next after Adobe XD Essentials05:06
Continue learning with me! Links inside.00:44

Description

Are you excited to get into the world of UI/UXΒ but you don't know where to start?Β This course will allow you to add UXΒ designer to your CVΒ & start getting paid for your new skills.

Hi there! My name is Dan & I’m an Adobe Certified Instructor. I’m here to help you learn Adobe XD efficiently and comprehensively. XD is a fantastic design tool used by industry professionals to product high quality & functional mockups. By the end of this course, you will be able to produce practical and effective User Experience (UX) and User Interface (UI) designs.

Throughout the course I’ll invite you to participate in a real-life freelance project which I’m working on. It’s a project that requires a fresh website and mobile app interface. This will prepare you for dealing with real world projects if you choose to move towards a UX/UI career path.

  • Aria: "This course is definitely above expectations so far. I didn't expect to get so much insight into the briefing and the communication between UX Designer and a client. It helps to see the brief and to learn that there are different tiers of income based on projects and experience. Love It!"

This course is aimed at people interested in UI/UX Design. We’ll start from the very beginning and work all the way through, step by step. If you already have some UI/UX Design experience but want to get up to speed using Adobe XD then this course is perfect for you too!

First, we will go over the differences between UX and UI Design. We will look at what our brief for this real-world project is, then we will learn about low-fidelity wireframes and how to make use of existing UI design kits.

I’ll go over all of the essential tools necessary for creating excellent wireframes, including: type, colours, icons, Lorem ipsum, artboards, prototyping, models and popups, symbols and repeat grids. We will even make use of the new prototyping app so that you can experience your prototype on your mobile device.

  • Kate:Β Excellent course - Dan is an excellent teacher and I thoroughly enjoyed following along with his videos. Highly recommend! July 2018: I have updated this review with an extra star because of how useful this course has been in the months following it's completion. I am using Adobe XD daily and Dan's instruction was instrumental to adding this feather to my front-end web development hat.

An important part of maximising your UX Design workflow is being able to utilise other software such as Photoshop and Illustrator. This is why I’ll be teaching you how to make use of both to help boost your XD productivity.

One of the awesome new features of XD is micro-interactions. I’ll be teaching you all about those and how to use them to grow icons and scenes. This is one of the parts of web design that’s growing and being adopted rapidly so you won’t want to miss out on learning it early.

  • Leigh:Β "I really enjoyed this course. I was a UX designer before the course and was looking for more information on XD and getting to know the program itself better, and this course really nailed it! It has great UX references and a few refreshing perspectives. As well as it really helps you learn XD in the process. The instructor is engaging and fun to listen to. Really really great course. I highly recommend to any new UX designers, as well as veterans looking for a refresh, or just to learn how to use XD."

There are two class projects for you to complete during this class, these will help develop your skills and will give you something for your own portfolio.

It is now time to upgrade yourself & learn Adobe XD.

Who this course is for:

  • Anyone who wants to start using Adobe XD in their career & get paid for their user experience design skills.
  • This course is for beginners, newbies & amateurs in the field of UX design.
  • Aimed at people new to the world of design & user experience.
  • For anyone that needs to add β€˜UX Design’ to their portfolio.

This course includes:

  • 9.5 hours on-demand video
  • 1 articles
  • 1 downloadable resources
  • Access on mobile and TV
  • ∞Full lifetime access
  • Certificate of completion

Instructor

Daniel Walter Scott

Students also download

Explore related courses to expand your learning journey.