User Experience Design Essentials: Adobe XD UI UX Design

No Rating(0)
See all reviews

This course is designed for those interested to learn the basics of Adobe XD UI UX Design and be able to produce practical and effective User Experience (UX) and User Interface (UI) designs.

Watch Free For 30 Days

start free access


buy single class $199
  • On Demand Video Lessons
  • Course Certificate
  • 24/7 Support

About This CourseBeginner

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!

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.

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.

 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.

 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. 

What are the requirements?

  • You will need a copy of Adobe XD 2018 or above. A free trial can be downloaded from Adobe.
  • No previous design experience is needed.
  • No previous Adobe XD skills are needed.

What am I going to get from this course?

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

What is the target audience?

  • This course is for beginners. 
  • Aimed at people new to the world of design & user experience. 
  • No previous Adobe XD experience is necessary.
  • For anyone that needs to add ‘UX Design’ to their portfolio.

Our Promise to You

By the end of this course, you will have learned about Adobe XD UI UX Design.

30 Day Money Back Guarantee. If you are unsatisfied for any reason, simply contact us and we’ll give you a full refund. No questions asked.

Get started today and learn more about the Adobe XD UI UX Design.

Course Curriculum

Course Sections

Introduction To Adobe XD

Getting Started With Your Adobe XD Project

What Is UI Vs UX – User Interface Vs User Experience?

The Brief And Persona For Our Real Life Project

Wireframing Low Fidelity In Adobe XD

How Wide Should My Website Or Application Be In Adobe XD?

Working With Existing UI Kits In Adobe XD

Working With Type In Your XD Wireframes

Basic Colors And Buttons In Adobe XD Wireframes

Free Icons For Your Adobe XD And UX UI Projects

Adding Footers And Lorem Ipsum To Our XD Wireframe

New Pages And Artboards In Adobe XD

Class Project 01 – Wireframe Homepage And Contact Us Page

Prototyping And Adding Interactivity To Adobe XD

How To Create A Popup Modal Or Popup Box In Adobe XD

Class Project 02 – Prototype

Working With Groups And Isolation Mode In Adobe XD

How To Make And Use Symbols In Adobe XD

Production Video – Left Nav

Using The Repeat Grid In Adobe XD

Updating Symbols And Problems With Using Repeat Grids

Prototype Trick To Save Time In Adobe XD

Navigation Tricks And Tips In Adobe XD

Class Project 03 – Symbols And Repeat Grids

Make An Application Version Of Your Adobe XD UX Project

How To Use The XD Application On iPhone And Android

Adding iPhone And Android Battery And Status Icons To Mockup

How To Fix The Position Of The Nav Or Battery Icons In XD

Production Video – Login And Dashboard

Sharing Wireframes For Comments In Adobe XD

Recording Your Interactions Via Video Using Adobe XD

Class Project – Wireframe Feedback

Mood Boards And Resources For Hi Fidelity UI Design In Adobe XD

Class Project – Mood Board

How To Create A 12 Column Grid In Adobe XD 2018

Working With Colors Inside Adobe XD CC

Tricks For Using Colors In Adobe XD

How To Create Gradients In Adobe XD

Class Project 06 – Colors

Use Web Safe Fonts Or iOS Or Android Specific Fonts In Adobe XD

How To Use Character Styles In Adobe XD

Font And Text Tips Tricks In Adobe XD

Adding Our First Plugin Lorem Ipsum To Adobe XD

Creating Realistic Buttons In Adobe XD With Paste Properties

Class Project 07 – Text And Buttons

How To Draw Your Own Custom Icons In Adobe XD

Working With Stokes And Lines In Adobe XD

Learn To Draw With The Pen Tool In Adobe XD

Drawing Practice With The Pen Tool In Adobe XD

Production Video With Some Drawing Tips

Back And Forth With Illustrator In Adobe XD

Class Project 08 – Draw Your Own Icons

Working With Indesign In Adobe XD

The Pros And Cons For Working With Images Inside Adobe XD

Working With Images And CC Library Connection

Adobe Stock Connection To Find Similar Image For XD Project

Free Images To Use In Your XD Mockups – Unsplash Pexels Free Image

Masking And Opacity And Blurring Background Images

Working With Photoshop In Adobe XD

Production Video – Infographic

Class Project 09 – Full Hi Def Mockup

How To Make A Mobile Phone Mockup With Adobe XD And Photoshop

Class Project 10 – Mobile Website

Hidden Features For Adobe XD Repeat Grid

Plugin – Content Generator In Adobe XD

Plugin – UI Faces Adding Random Profile Photos To XD

Plugin – PhotoSplash Automatically Import Unspash Images

Plugin – Copy Cat Or Mimic To Style And Images From A Site

Advanced Asset Panel Tricks In Adobe XD

Advanced Symbol Tricks And Tips For Adobe XD

What Are UI Micro Interactions In Adobe XD

Button Grow Or Full Screen Image Micro Interaction In Adobe XD

Animated Image Gallery With Micro Interactions In Adobe XD

Full Vector Change Micro Interaction In Adobe XD

Class Project 11 – Micro Interactions

Time Delay Transitions In Adobe XD

How To Create A Popup Menu Or Modal In Adobe XD

Animated Mobile Side Nav For Burger Menu In Adobe XD

Advanced Prototyping Using Buttons And Dropdown Menus In Adobe XD

How To Use The Drag Transition In Adobe XD

How To Make A Number Ticker Scroll Using Masks In Adobe XD

How To Add Alexa Style Voice Commands To Adobe XD

What Is User Testing In Adobe XD

How To Run An Unmoderated UX User Test In Adobe XD

Class Project 12 – User Testing

Mocking Up Your Designs In Situ On A Real Phone In Photoshop

Advanced Micro Interactions And Prototyping With Protopie In Adobe XD

How To Add Animation In Adobe XD Using Adobe After Effects

How To Export Images And Code From Adobe XD For Developers

How To Export Code In XD For Engineers Using Design Specs

Class Project 13 – Roar Cycles

Conclusion For Adobe XD Training Course

Downloadable Materials


No Reviews found for this course.