Learn Adobe XD UI UX Design to create User Experience and User Interface designs, preparing you for those ideal user experience jobs. Read more.
Access all courses in our library for only $9/month with All Access Pass
Get Started with All Access PassBuy Only This CourseAbout This Course
Who this course is for:
- This course is for beginners
- Aimed at people new to the world of design and user experience
- For anyone who needs to add ‘UX Design’ to their portfolio
- No previous Adobe XD experience is necessary
What you’ll learn:
- How to design websites and mobile phone apps
- Work with fonts and colors
- Prototype your designs with interactions
- Test on mobile phones
- Send your designs for feedback and commenting
- Export production ready assets
- Create your first UX brief and persona
- Create quick wireframes
- How to use premade UI kits
- Learn professional workflow tricks and shortcuts
- All the techniques used by UX professionals
Requirements:
- Adobe XD 2018 or above. A free trial can be downloaded from Adobe.
- No previous design experience or Adobe XD skills are needed
Software version used in the course:
- Adobe XD 2018
This course was designed for people interested in UI/UX Design. It is a step-by-step process from the very beginning and work all the way through. If you are an experienced UI/UX Design professional but want to get up to speed using Adobe XD, then this course is ideal for you too!
XD is a effective design tool used by industry professionals to produce high quality and functional mockups. After finishing this course, you will be able to create practical and effective User Experience and User Interface designs, sufficient to get your dream user experience jobs!
Throughout the course, let’s work together in a real-life freelance project I’m working on that requires a fresh website and mobile app interface. A perfect preparation for dealing with real world projects as you move towards a UX/UI career path.
First, we will discuss the differences between UX and UI Design. We will look at what this real-world project is, then tackle low-fidelity wireframes and how to use existing UI design kits.
Let’s go over all the essential tools in 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 you can experience it on your mobile device.
Maximise your UX Design workflow by utilising other software such as Photoshop and Illustrator. And I’ll be teaching you just that, by making use of both to effectively boost your XD productivity.
We will also discuss one of the awesome new features of XD which is micro-interactions, and learn how to use them to grow icons and scenes. This is one of the fields of web design that’s growing and being adopted rapidly, it’s always better not to miss out on learning it early.
The two class projects for you to complete will help develop your skills and will add an impressive skill on your portfolio.
It is now time to upgrade yourself and learn Adobe XD to get those user experience jobs you’ve been aiming for!
Learn more about designs and their practical applications, visit my profile to see more hands-on design courses.
Our Promise to You
By the end of this course, you will have learned about Adobe XD UI UX Design.
10 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
| Section 1 - Getting Started | |||
| Introduction To Adobe XD | 00:00:00 | ||
| Getting Started With Your Adobe XD Project | 00:00:00 | ||
| What Is UI Vs UX - User Interface Vs User Experience? | 00:00:00 | ||
| Section 2 - The Brief | |||
| The Brief And Persona For Our Real Life Project | 00:00:00 | ||
| Section 3 - Wireframing Low Fidelity | |||
| Wireframing Low Fidelity In Adobe XD | 00:00:00 | ||
| How Wide Should My Website Or Application Be In Adobe XD? | 00:00:00 | ||
| Working With Existing UI Kits In Adobe XD | 00:00:00 | ||
| Section 4 - Type, Color And Icon Introduction | |||
| Working With Type In Your XD Wireframes | 00:00:00 | ||
| Basic Colors And Buttons In Adobe XD Wireframes | 00:00:00 | ||
| Free Icons For Your Adobe XD And UX UI Projects | 00:00:00 | ||
| Adding Footers And Lorem Ipsum To Our XD Wireframe | 00:00:00 | ||
| New Pages And Artboards In Adobe XD | 00:00:00 | ||
| Class Project 01 – Wireframe Homepage And Contact Us Page | 00:00:00 | ||
| Section 5 - Introduction To Prototyping A Website | |||
| Prototyping And Adding Interactivity To Adobe XD | 00:00:00 | ||
| How To Create A Popup Modal Or Popup Box In Adobe XD | 00:00:00 | ||
| Class Project 02 – Prototype | 00:00:00 | ||
| Section 6 - Symbols And Repeat Grids | |||
| Working With Groups And Isolation Mode In Adobe XD | 00:00:00 | ||
| How To Make And Use Symbols In Adobe XD | 00:00:00 | ||
| Production Video - Left Nav | 00:00:00 | ||
| Using The Repeat Grid In Adobe XD | 00:00:00 | ||
| Updating Symbols And Problems With Using Repeat Grids | 00:00:00 | ||
| Prototype Trick To Save Time In Adobe XD | 00:00:00 | ||
| Navigation Tricks And Tips In Adobe XD | 00:00:00 | ||
| Class Project 03 - Symbols And Repeat Grids | 00:00:00 | ||
| Section 7 - Introduction To Prototyping An Application | |||
| Make An Application Version Of Your Adobe XD UX Project | 00:00:00 | ||
| How To Use The XD Application On iPhone And Android | 00:00:00 | ||
| Adding iPhone And Android Battery And Status Icons To Mockup | 00:00:00 | ||
| How To Fix The Position Of The Nav Or Battery Icons In XD | 00:00:00 | ||
| Production Video - Login And Dashboard | 00:00:00 | ||
| Section 8 - Wireframe Feedback | |||
| Sharing Wireframes For Comments In Adobe XD | 00:00:00 | ||
| Recording Your Interactions Via Video Using Adobe XD | 00:00:00 | ||
| Class Project - Wireframe Feedback | 00:00:00 | ||
| Section 9 - High Fidelity UI Design | |||
| Mood Boards And Resources For Hi Fidelity UI Design In Adobe XD | 00:00:00 | ||
| Class Project - Mood Board | 00:00:00 | ||
| How To Create A 12 Column Grid In Adobe XD 2018 | 00:00:00 | ||
| Section 10 - Colors | |||
| Working With Colors Inside Adobe XD CC | 00:00:00 | ||
| Tricks For Using Colors In Adobe XD | 00:00:00 | ||
| How To Create Gradients In Adobe XD | 00:00:00 | ||
| Class Project 06 – Colors | 00:00:00 | ||
| Section 11 - Text And Fonts Advanced | |||
| Use Web Safe Fonts Or iOS Or Android Specific Fonts In Adobe XD | 00:00:00 | ||
| How To Use Character Styles In Adobe XD | 00:00:00 | ||
| Font And Text Tips Tricks In Adobe XD | 00:00:00 | ||
| Adding Our First Plugin Lorem Ipsum To Adobe XD | 00:00:00 | ||
| Creating Realistic Buttons In Adobe XD With Paste Properties | 00:00:00 | ||
| Class Project 07 - Text And Buttons | 00:00:00 | ||
| Section 11 - Drawing | |||
| How To Draw Your Own Custom Icons In Adobe XD | 00:00:00 | ||
| Working With Stokes And Lines In Adobe XD | 00:00:00 | ||
| Learn To Draw With The Pen Tool In Adobe XD | 00:00:00 | ||
| Drawing Practice With The Pen Tool In Adobe XD | 00:00:00 | ||
| Production Video With Some Drawing Tips | 00:00:00 | ||
| Section 12 - Working With Illustrator | |||
| Back And Forth With Illustrator In Adobe XD | 00:00:00 | ||
| Class Project 08 - Draw Your Own Icons | 00:00:00 | ||
| Section 13 - Working with InDesign | |||
| Working With Indesign In Adobe XD | 00:00:00 | ||
| Section 14 - Images | |||
| The Pros And Cons For Working With Images Inside Adobe XD | 00:00:00 | ||
| Working With Images And CC Library Connection | 00:00:00 | ||
| Adobe Stock Connection To Find Similar Image For XD Project | 00:00:00 | ||
| Free Images To Use In Your XD Mockups - Unsplash Pexels Free Image | 00:00:00 | ||
| Masking And Opacity And Blurring Background Images | 00:00:00 | ||
| Section 15 - Working with Photoshop | |||
| Working With Photoshop In Adobe XD | 00:00:00 | ||
| Production Video – Infographic | 00:00:00 | ||
| Class Project 09 - Full Hi Def Mockup | 00:00:00 | ||
| Section 16 - Application Design | |||
| How To Make A Mobile Phone Mockup With Adobe XD And Photoshop | 00:00:00 | ||
| Class Project 10 - Mobile Website | 00:00:00 | ||
| Section 17 - Placeholder Content And Plugins | |||
| Hidden Features For Adobe XD Repeat Grid | 00:00:00 | ||
| Plugin - Content Generator In Adobe XD | 00:00:00 | ||
| Plugin - UI Faces Adding Random Profile Photos To XD | 00:00:00 | ||
| Plugin - PhotoSplash Automatically Import Unspash Images | 00:00:00 | ||
| Plugin - Copy Cat Or Mimic To Style And Images From A Site | 00:00:00 | ||
| Section 18 - Asset Panel | |||
| Advanced Asset Panel Tricks In Adobe XD | 00:00:00 | ||
| Section 19 - Symbol : Advanced | |||
| Advanced Symbol Tricks And Tips For Adobe XD | 00:00:00 | ||
| Section 20 - Micro Interactions | |||
| What Are UI Micro Interactions In Adobe XD | 00:00:00 | ||
| Button Grow Or Full Screen Image Micro Interaction In Adobe XD | 00:00:00 | ||
| Animated Image Gallery With Micro Interactions In Adobe XD | 00:00:00 | ||
| Full Vector Change Micro Interaction In Adobe XD | 00:00:00 | ||
| Class Project 11 - Micro Interactions | 00:00:00 | ||
| Section 21 - Prototyping Advanced | |||
| Time Delay Transitions In Adobe XD | 00:00:00 | ||
| How To Create A Popup Menu Or Modal In Adobe XD | 00:00:00 | ||
| Animated Mobile Side Nav For Burger Menu In Adobe XD | 00:00:00 | ||
| Advanced Prototyping Using Buttons And Dropdown Menus In Adobe XD | 00:00:00 | ||
| How To Use The Drag Transition In Adobe XD | 00:00:00 | ||
| How To Make A Number Ticker Scroll Using Masks In Adobe XD | 00:00:00 | ||
| Section 22 - Voice Interactions | |||
| How To Add Alexa Style Voice Commands To Adobe XD | 00:00:00 | ||
| Section 23 - User Testing | |||
| What Is User Testing In Adobe XD | 00:00:00 | ||
| How To Run An Unmoderated UX User Test In Adobe XD | 00:00:00 | ||
| Class Project 12 - User Testing | 00:00:00 | ||
| Section 24 - Pitching To Clients And Customers | |||
| Mocking Up Your Designs In Situ On A Real Phone In Photoshop | 00:00:00 | ||
| Advanced Micro Interactions And Prototyping With Protopie In Adobe XD | 00:00:00 | ||
| How To Add Animation In Adobe XD Using Adobe After Effects | 00:00:00 | ||
| Section 25 - Exporting | |||
| How To Export Images And Code From Adobe XD For Developers | 00:00:00 | ||
| How To Export Code In XD For Engineers Using Design Specs | 00:00:00 | ||
| Section 26 - What Next | |||
| Class Project 13 – Roar Cycles | 00:00:00 | ||
| Conclusion For Adobe XD Training Course | 00:00:00 | ||
| Downloadable Materials | 00:00:00 | ||
About This Course
Who this course is for:
- This course is for beginners
- Aimed at people new to the world of design and user experience
- For anyone who needs to add ‘UX Design’ to their portfolio
- No previous Adobe XD experience is necessary
What you’ll learn:
- How to design websites and mobile phone apps
- Work with fonts and colors
- Prototype your designs with interactions
- Test on mobile phones
- Send your designs for feedback and commenting
- Export production ready assets
- Create your first UX brief and persona
- Create quick wireframes
- How to use premade UI kits
- Learn professional workflow tricks and shortcuts
- All the techniques used by UX professionals
Requirements:
- Adobe XD 2018 or above. A free trial can be downloaded from Adobe.
- No previous design experience or Adobe XD skills are needed
Software version used in the course:
- Adobe XD 2018
This course was designed for people interested in UI/UX Design. It is a step-by-step process from the very beginning and work all the way through. If you are an experienced UI/UX Design professional but want to get up to speed using Adobe XD, then this course is ideal for you too!
XD is a effective design tool used by industry professionals to produce high quality and functional mockups. After finishing this course, you will be able to create practical and effective User Experience and User Interface designs, sufficient to get your dream user experience jobs!
Throughout the course, let’s work together in a real-life freelance project I’m working on that requires a fresh website and mobile app interface. A perfect preparation for dealing with real world projects as you move towards a UX/UI career path.
First, we will discuss the differences between UX and UI Design. We will look at what this real-world project is, then tackle low-fidelity wireframes and how to use existing UI design kits.
Let’s go over all the essential tools in 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 you can experience it on your mobile device.
Maximise your UX Design workflow by utilising other software such as Photoshop and Illustrator. And I’ll be teaching you just that, by making use of both to effectively boost your XD productivity.
We will also discuss one of the awesome new features of XD which is micro-interactions, and learn how to use them to grow icons and scenes. This is one of the fields of web design that’s growing and being adopted rapidly, it’s always better not to miss out on learning it early.
The two class projects for you to complete will help develop your skills and will add an impressive skill on your portfolio.
It is now time to upgrade yourself and learn Adobe XD to get those user experience jobs you’ve been aiming for!
Learn more about designs and their practical applications, visit my profile to see more hands-on design courses.
Our Promise to You
By the end of this course, you will have learned about Adobe XD UI UX Design.
10 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
| Section 1 - Getting Started | |||
| Introduction To Adobe XD | 00:00:00 | ||
| Getting Started With Your Adobe XD Project | 00:00:00 | ||
| What Is UI Vs UX - User Interface Vs User Experience? | 00:00:00 | ||
| Section 2 - The Brief | |||
| The Brief And Persona For Our Real Life Project | 00:00:00 | ||
| Section 3 - Wireframing Low Fidelity | |||
| Wireframing Low Fidelity In Adobe XD | 00:00:00 | ||
| How Wide Should My Website Or Application Be In Adobe XD? | 00:00:00 | ||
| Working With Existing UI Kits In Adobe XD | 00:00:00 | ||
| Section 4 - Type, Color And Icon Introduction | |||
| Working With Type In Your XD Wireframes | 00:00:00 | ||
| Basic Colors And Buttons In Adobe XD Wireframes | 00:00:00 | ||
| Free Icons For Your Adobe XD And UX UI Projects | 00:00:00 | ||
| Adding Footers And Lorem Ipsum To Our XD Wireframe | 00:00:00 | ||
| New Pages And Artboards In Adobe XD | 00:00:00 | ||
| Class Project 01 – Wireframe Homepage And Contact Us Page | 00:00:00 | ||
| Section 5 - Introduction To Prototyping A Website | |||
| Prototyping And Adding Interactivity To Adobe XD | 00:00:00 | ||
| How To Create A Popup Modal Or Popup Box In Adobe XD | 00:00:00 | ||
| Class Project 02 – Prototype | 00:00:00 | ||
| Section 6 - Symbols And Repeat Grids | |||
| Working With Groups And Isolation Mode In Adobe XD | 00:00:00 | ||
| How To Make And Use Symbols In Adobe XD | 00:00:00 | ||
| Production Video - Left Nav | 00:00:00 | ||
| Using The Repeat Grid In Adobe XD | 00:00:00 | ||
| Updating Symbols And Problems With Using Repeat Grids | 00:00:00 | ||
| Prototype Trick To Save Time In Adobe XD | 00:00:00 | ||
| Navigation Tricks And Tips In Adobe XD | 00:00:00 | ||
| Class Project 03 - Symbols And Repeat Grids | 00:00:00 | ||
| Section 7 - Introduction To Prototyping An Application | |||
| Make An Application Version Of Your Adobe XD UX Project | 00:00:00 | ||
| How To Use The XD Application On iPhone And Android | 00:00:00 | ||
| Adding iPhone And Android Battery And Status Icons To Mockup | 00:00:00 | ||
| How To Fix The Position Of The Nav Or Battery Icons In XD | 00:00:00 | ||
| Production Video - Login And Dashboard | 00:00:00 | ||
| Section 8 - Wireframe Feedback | |||
| Sharing Wireframes For Comments In Adobe XD | 00:00:00 | ||
| Recording Your Interactions Via Video Using Adobe XD | 00:00:00 | ||
| Class Project - Wireframe Feedback | 00:00:00 | ||
| Section 9 - High Fidelity UI Design | |||
| Mood Boards And Resources For Hi Fidelity UI Design In Adobe XD | 00:00:00 | ||
| Class Project - Mood Board | 00:00:00 | ||
| How To Create A 12 Column Grid In Adobe XD 2018 | 00:00:00 | ||
| Section 10 - Colors | |||
| Working With Colors Inside Adobe XD CC | 00:00:00 | ||
| Tricks For Using Colors In Adobe XD | 00:00:00 | ||
| How To Create Gradients In Adobe XD | 00:00:00 | ||
| Class Project 06 – Colors | 00:00:00 | ||
| Section 11 - Text And Fonts Advanced | |||
| Use Web Safe Fonts Or iOS Or Android Specific Fonts In Adobe XD | 00:00:00 | ||
| How To Use Character Styles In Adobe XD | 00:00:00 | ||
| Font And Text Tips Tricks In Adobe XD | 00:00:00 | ||
| Adding Our First Plugin Lorem Ipsum To Adobe XD | 00:00:00 | ||
| Creating Realistic Buttons In Adobe XD With Paste Properties | 00:00:00 | ||
| Class Project 07 - Text And Buttons | 00:00:00 | ||
| Section 11 - Drawing | |||
| How To Draw Your Own Custom Icons In Adobe XD | 00:00:00 | ||
| Working With Stokes And Lines In Adobe XD | 00:00:00 | ||
| Learn To Draw With The Pen Tool In Adobe XD | 00:00:00 | ||
| Drawing Practice With The Pen Tool In Adobe XD | 00:00:00 | ||
| Production Video With Some Drawing Tips | 00:00:00 | ||
| Section 12 - Working With Illustrator | |||
| Back And Forth With Illustrator In Adobe XD | 00:00:00 | ||
| Class Project 08 - Draw Your Own Icons | 00:00:00 | ||
| Section 13 - Working with InDesign | |||
| Working With Indesign In Adobe XD | 00:00:00 | ||
| Section 14 - Images | |||
| The Pros And Cons For Working With Images Inside Adobe XD | 00:00:00 | ||
| Working With Images And CC Library Connection | 00:00:00 | ||
| Adobe Stock Connection To Find Similar Image For XD Project | 00:00:00 | ||
| Free Images To Use In Your XD Mockups - Unsplash Pexels Free Image | 00:00:00 | ||
| Masking And Opacity And Blurring Background Images | 00:00:00 | ||
| Section 15 - Working with Photoshop | |||
| Working With Photoshop In Adobe XD | 00:00:00 | ||
| Production Video – Infographic | 00:00:00 | ||
| Class Project 09 - Full Hi Def Mockup | 00:00:00 | ||
| Section 16 - Application Design | |||
| How To Make A Mobile Phone Mockup With Adobe XD And Photoshop | 00:00:00 | ||
| Class Project 10 - Mobile Website | 00:00:00 | ||
| Section 17 - Placeholder Content And Plugins | |||
| Hidden Features For Adobe XD Repeat Grid | 00:00:00 | ||
| Plugin - Content Generator In Adobe XD | 00:00:00 | ||
| Plugin - UI Faces Adding Random Profile Photos To XD | 00:00:00 | ||
| Plugin - PhotoSplash Automatically Import Unspash Images | 00:00:00 | ||
| Plugin - Copy Cat Or Mimic To Style And Images From A Site | 00:00:00 | ||
| Section 18 - Asset Panel | |||
| Advanced Asset Panel Tricks In Adobe XD | 00:00:00 | ||
| Section 19 - Symbol : Advanced | |||
| Advanced Symbol Tricks And Tips For Adobe XD | 00:00:00 | ||
| Section 20 - Micro Interactions | |||
| What Are UI Micro Interactions In Adobe XD | 00:00:00 | ||
| Button Grow Or Full Screen Image Micro Interaction In Adobe XD | 00:00:00 | ||
| Animated Image Gallery With Micro Interactions In Adobe XD | 00:00:00 | ||
| Full Vector Change Micro Interaction In Adobe XD | 00:00:00 | ||
| Class Project 11 - Micro Interactions | 00:00:00 | ||
| Section 21 - Prototyping Advanced | |||
| Time Delay Transitions In Adobe XD | 00:00:00 | ||
| How To Create A Popup Menu Or Modal In Adobe XD | 00:00:00 | ||
| Animated Mobile Side Nav For Burger Menu In Adobe XD | 00:00:00 | ||
| Advanced Prototyping Using Buttons And Dropdown Menus In Adobe XD | 00:00:00 | ||
| How To Use The Drag Transition In Adobe XD | 00:00:00 | ||
| How To Make A Number Ticker Scroll Using Masks In Adobe XD | 00:00:00 | ||
| Section 22 - Voice Interactions | |||
| How To Add Alexa Style Voice Commands To Adobe XD | 00:00:00 | ||
| Section 23 - User Testing | |||
| What Is User Testing In Adobe XD | 00:00:00 | ||
| How To Run An Unmoderated UX User Test In Adobe XD | 00:00:00 | ||
| Class Project 12 - User Testing | 00:00:00 | ||
| Section 24 - Pitching To Clients And Customers | |||
| Mocking Up Your Designs In Situ On A Real Phone In Photoshop | 00:00:00 | ||
| Advanced Micro Interactions And Prototyping With Protopie In Adobe XD | 00:00:00 | ||
| How To Add Animation In Adobe XD Using Adobe After Effects | 00:00:00 | ||
| Section 25 - Exporting | |||
| How To Export Images And Code From Adobe XD For Developers | 00:00:00 | ||
| How To Export Code In XD For Engineers Using Design Specs | 00:00:00 | ||
| Section 26 - What Next | |||
| Class Project 13 – Roar Cycles | 00:00:00 | ||
| Conclusion For Adobe XD Training Course | 00:00:00 | ||
| Downloadable Materials | 00:00:00 | ||
Related Courses
Are you interested in higher education?
All Rights Reserved