User Experience Design Essentials - Adobe Xd Ui Ux Design (updated 8/2022)

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

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.
Requirements
You will need a copy of Adobe XD 2019 or above. A free trial can be downloaded from Adobe.
No previous design experience is needed.
No previous Adobe XD skills are needed.
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.

Overview

Section 1: Getting Started

Lecture 1 Getting started with your Adobe XD project.

Lecture 2 What is Adobe XD for & does it do the coding

Lecture 3 What's the difference between UI and UX in Adobe XD

Lecture 4 What we are making in this Adobe XD course

Lecture 5 What is a persona & task flow in UX design

Lecture 6 Class Project 01 - Create your own brief

Section 2: Wireframing Low Fidelity

Lecture 7 What is Lo Fi Wireframe vs High Fidelity in Adobe XD

Lecture 8 Artboards & how wide should my website or app be in Adobe XD

Section 3: Type, Color & Icon Introduction

Lecture 9 Working with type in your XD wireframes

Lecture 10 Rectangles, Circles, Buttons and Rounded corners in Adobe XD

Lecture 11 How to use color in Adobe XD

Lecture 12 Strokes & copy & paste appearance in Adobe XD

Lecture 13 Class Project 02 - Wireframe

Lecture 14 Free icons for your Adobe XD & UX UI projects

Lecture 15 How to find and use existing UI kits in Adobe XD

Lecture 16 Groups & issues editing icons in Adobe XD

Lecture 17 Class Project 03 - Icons

Section 4: Prototyping - Level 1

Lecture 18 How to add interaction to your prototype in Adobe XD

Lecture 19 Prototype animation & easing in Adobe XD

Lecture 20 How see your design on XD App on iPhone & Android

Lecture 21 Class Project 04 - Testing on your phone

Section 5: Animation

Lecture 22 Getting started with auto-animations in Adobe XD

Lecture 23 Understanding more about animation in Adobe XD

Lecture 24 Class Project 05 - My first animation

Section 6: Feedback & Commenting

Lecture 25 Sharing Wireframes for comments in Adobe XD

Section 7: Moodboard - High Fidelity UI Design

Lecture 26 Mood Boards & resources for Hi fidelity UI design in Adobe XD

Lecture 27 How to create a mood board in Adobe XD

Lecture 28 Class project 06 - Mood Board

Lecture 29 How to work with Columns & Grids in Adobe XD

Section 8: Columns & Grids

Lecture 30 View port aka dotted line on the page in Adobe XD

Lecture 31 How to add & delete guides to Adobe XD

Section 9: Colors

Lecture 32 Color Inspiration & the eyedropper in XD

Lecture 33 How to create a color palette in Adobe XD

Lecture 34 How to create gradients in Adobe XD

Lecture 35 How to save and reused color swatches in Adobe XD

Lecture 36 Class Project 07 - Colors & Columns

Section 10: Text & Fonts - Level 2

Lecture 37 What fonts can I use in my web or app design in Adobe XD

Lecture 38 Check what other font’s people have used

Lecture 39 What common font sizes should I choose in web design

Lecture 40 How to make Character Styles in Adobe XD

Lecture 41 Plugin - Adding our first Plugin Lorem Ipsum to Adobe XD

Lecture 42 Class project 08 - Text

Section 11: Drawing

Lecture 43 Drawing & editing shapes in Adobe XD

Lecture 44 Strangeness with shapes in Adobe XD

Lecture 45 Learn to draw with the pen tool in Adobe XD

Lecture 46 Working with strokes & lines in Adobe XD

Lecture 47 Class Project 09 - Icons & Buttons

Section 12: Working with Illustrator

Lecture 48 Do I need to know Illustrator with Adobe XD

Section 13: Images

Lecture 49 Masking & cropping images in Adobe XD

Lecture 50 Free images to use in your XD mockups - Unsplash Pexels Freeimage

Lecture 51 Darkening background images with opacity in XD

Lecture 52 Blurring backgrounds and objects in Adobe XD

Section 14: Working with Photoshop

Lecture 53 Do I need to know Photoshop with Adobe XD

Lecture 54 Snack bar Toast banners using masked image in Adobe XD

Lecture 55 Class Project 10 - Add images

Section 15: Components & Instances

Lecture 56 How to make & use components in Adobe XD

Lecture 57 Difference between Main & Instance Components in Adobe XD

Lecture 58 How to create component hover states in XD

Lecture 59 Class Project 11 - Buttons

Section 16: Repeat Grids

Lecture 60 How to use the repeat grid in Adobe XD

Lecture 61 Class Project 12 - Repeat Grid

Lecture 62 Updating & issues with repeat grids of the edge

Section 17: Stacks

Lecture 63 How to use stacks in XD to make a form

Lecture 64 Class Project 13 - Stacks & Checkout Page

Section 18: Micro Interactions & Animations

Lecture 65 The difference between animation & micro interactions

Lecture 66 Dan drawing stuff in Adobe XD

Lecture 67 More animation in Adobe XD

Lecture 68 Class Project 14 - My Second Animation

Lecture 69 Micro interaction toggle switch in Adobe XD

Lecture 70 Micro interaction burger menu turned into a cross in XD

Lecture 71 Class Project 15 - Micro interaction

Section 19: How to pin navigation to the top in Adobe XD

Lecture 72 How to pin navigation to the top in Adobe XD

Lecture 73 How to add a popup overlay modal in Adobe XD

Lecture 74 Slide in mobile nav menu overlay in Adobe XD

Lecture 75 Class Project 16 - Popup & Navigation

Lecture 76 What are Flows in Adobe XD

Section 20: Exporting

Lecture 77 How to share your document with clients & stakeholders & user testers

Lecture 78 Talking to your developer early in the XD design process

Lecture 79 Export the right image file formats from Adobe XD

Lecture 80 Batch export images at once using Mark for Export in XD

Lecture 81 How to export code in XD for engineers using Design Specs

Lecture 82 What is a style guide in Adobe XD

Lecture 83 Class Project 17 - Final Design

Section 21: What Next

Lecture 84 Whats next after Adobe XD Essentials

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.