Please ensure Javascript is enabled for purposes of website accessibility
UI/UX And Web Design Using Adobe XD

This course is designed for those interested to learn how to use the Adobe XD software to design websites and applications. Read more.

5.0( 3 REVIEWS )
683 STUDENTS
5h 17m
Course Skill Level
Beginner
Time Estimate
5h 17m

Access all courses in our library for only $9/month with All Access Pass

Get Started with All Access PassBuy Only This Course

About This Course

In this course, we are going to learn how to use Adobe XD. We will use this UX UI design tool to create a beautiful User Interface & streamlined User Experience.

During our course we will use an actual freelance project which I am working on. It’s a project that needs both a website interface & a mobile app, so it will give you a good idea of how to manage your own UX projects.

This course is aimed at people new to design & user experience. We will start right at the beginning and work our way through step by step.

First I’ll show you how to construct a good brief & UX persona. Then you will learn to create simple wireframes, from there we will learn how to implement colours & images correctly in your designs. You will learn learn the do’s and don’ts of choosing fonts for web & mobile apps. We will also cheat a little by exploring pre-made UI kits to speed up our workflow.

We will build & prototype both a website design and a mobile app design, connecting pages and also adding full interactivity ready for user testing. I will share with you all the secret tricks inside Adobe XD that help you speed up repetitive tasks and we will work all the way through to exporting correct files & creating your design specs.

There is a project for you to complete during this class which 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?

  • 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 how to design website and apps using the Adobe XD software.

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 the Adobe XD software.

Course Curriculum

Section 1 - Overview
Introduction To Adobe XD 00:00:00
Downloadable Materials: Completed And Exercise Files 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
The Brief And Persona For Our Real Life Project 00:00:00
Section 2 - Wireframing Low Fidelity
Wireframing: Low Fidelity In Adobe XD 00:00:00
Working With Existing UI Kits In Adobe XD 00:00:00
Working With Type In Your XD Wireframes 00:00:00
How To Create Forms, Checkboxes And Buttons In Adobe XD 00:00:00
Free Icons For Your Adobe XD And UX UI Projects 00:00:00
Prototyping And Adding Interactivity To Adobe XD 00:00:00
Production video: Student Views In Adobe XD 00:00:00
How To Make And Use Symbols In Adobe XD 00:00:00
Using The Repeat GridIn Adobe XD 00:00:00
Mocking Up An App In Adobe XD 00:00:00
How To Use The XD App On iPhone And Android 00:00:00
Production Video: Sign Up Screen And Dashboard 00:00:00
Sharing Wireframes For Comments In Adobe XD 00:00:00
Section 3 - High Fidelity UI Design
Mood Boards And Resources For Hi Fidelity UI Design In Adobe XD 00:00:00
Why Do You Need A 12 Column Grid In Adobe XD 00:00:00
How To Create A 12 Column Grid In Adobe XD 2018 00:00:00
Working With Colors Inside Adobe XD CC 00:00:00
Use Web Safe Fonts: iOS Or Android Specific Fonts In Adobe XD 00:00:00
How To Use Character Styles In Adobe XD 00:00:00
Creating Realistic Buttons In Adobe XD With Paste Properties 00:00:00
How To Draw Your Own Custom Icons In Adobe XD 00:00:00
How To Make A Gradient And Blur In Adobe XD 00:00:00
The Pros And Cons For Working With Images Inside Adobe XD 00:00:00
Working With Illustrator, Photoshop And Indesign In Adobe XD 00:00:00
How To Mask In Adobe XD 00:00:00
Production Video: Adding Text Fields And Buttons In Adobe XD 00:00:00
How To Make A Popup Modal In Adobe XD With A Blurred Background 00:00:00
Creating 12 Column Card Dashboard Using The Repeat Grid Tool In Adobe XD 00:00:00
How To Make A Mobile Phone Mockup With Adobe XD And Photoshop 00:00:00
Make An App Version Of Your Adobe XD UX Project 00:00:00
Hidden Features For Adobe XD Repeat Grid 00:00:00
Advanced Prototyping Using Buttons And Dropdown Menus In Adobe XD 00:00:00
One More Prototype Trick And Faking Depth Of Field For Mockup 00:00:00
UX User Testing In Adobe XD 00:00:00
How To Export Images And Code From Adobe XD For Developers 00:00:00
Section 3 - What Next
Shortcuts And Cheat Sheet For Adobe XD 00:00:00

About This Course

In this course, we are going to learn how to use Adobe XD. We will use this UX UI design tool to create a beautiful User Interface & streamlined User Experience.

During our course we will use an actual freelance project which I am working on. It’s a project that needs both a website interface & a mobile app, so it will give you a good idea of how to manage your own UX projects.

This course is aimed at people new to design & user experience. We will start right at the beginning and work our way through step by step.

First I’ll show you how to construct a good brief & UX persona. Then you will learn to create simple wireframes, from there we will learn how to implement colours & images correctly in your designs. You will learn learn the do’s and don’ts of choosing fonts for web & mobile apps. We will also cheat a little by exploring pre-made UI kits to speed up our workflow.

We will build & prototype both a website design and a mobile app design, connecting pages and also adding full interactivity ready for user testing. I will share with you all the secret tricks inside Adobe XD that help you speed up repetitive tasks and we will work all the way through to exporting correct files & creating your design specs.

There is a project for you to complete during this class which 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?

  • 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 how to design website and apps using the Adobe XD software.

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 the Adobe XD software.

Course Curriculum

Section 1 - Overview
Introduction To Adobe XD 00:00:00
Downloadable Materials: Completed And Exercise Files 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
The Brief And Persona For Our Real Life Project 00:00:00
Section 2 - Wireframing Low Fidelity
Wireframing: Low Fidelity In Adobe XD 00:00:00
Working With Existing UI Kits In Adobe XD 00:00:00
Working With Type In Your XD Wireframes 00:00:00
How To Create Forms, Checkboxes And Buttons In Adobe XD 00:00:00
Free Icons For Your Adobe XD And UX UI Projects 00:00:00
Prototyping And Adding Interactivity To Adobe XD 00:00:00
Production video: Student Views In Adobe XD 00:00:00
How To Make And Use Symbols In Adobe XD 00:00:00
Using The Repeat GridIn Adobe XD 00:00:00
Mocking Up An App In Adobe XD 00:00:00
How To Use The XD App On iPhone And Android 00:00:00
Production Video: Sign Up Screen And Dashboard 00:00:00
Sharing Wireframes For Comments In Adobe XD 00:00:00
Section 3 - High Fidelity UI Design
Mood Boards And Resources For Hi Fidelity UI Design In Adobe XD 00:00:00
Why Do You Need A 12 Column Grid In Adobe XD 00:00:00
How To Create A 12 Column Grid In Adobe XD 2018 00:00:00
Working With Colors Inside Adobe XD CC 00:00:00
Use Web Safe Fonts: iOS Or Android Specific Fonts In Adobe XD 00:00:00
How To Use Character Styles In Adobe XD 00:00:00
Creating Realistic Buttons In Adobe XD With Paste Properties 00:00:00
How To Draw Your Own Custom Icons In Adobe XD 00:00:00
How To Make A Gradient And Blur In Adobe XD 00:00:00
The Pros And Cons For Working With Images Inside Adobe XD 00:00:00
Working With Illustrator, Photoshop And Indesign In Adobe XD 00:00:00
How To Mask In Adobe XD 00:00:00
Production Video: Adding Text Fields And Buttons In Adobe XD 00:00:00
How To Make A Popup Modal In Adobe XD With A Blurred Background 00:00:00
Creating 12 Column Card Dashboard Using The Repeat Grid Tool In Adobe XD 00:00:00
How To Make A Mobile Phone Mockup With Adobe XD And Photoshop 00:00:00
Make An App Version Of Your Adobe XD UX Project 00:00:00
Hidden Features For Adobe XD Repeat Grid 00:00:00
Advanced Prototyping Using Buttons And Dropdown Menus In Adobe XD 00:00:00
One More Prototype Trick And Faking Depth Of Field For Mockup 00:00:00
UX User Testing In Adobe XD 00:00:00
How To Export Images And Code From Adobe XD For Developers 00:00:00
Section 3 - What Next
Shortcuts And Cheat Sheet For Adobe XD 00:00:00

Course Review

5.0

5.0
3 Ratings
  1. Anonymous
    francisiglesias41 July 29, 2021 at 08:04 AM

    5.0

    daniel is a nice instructor well detailed for every explanation and useful tricks and tips. he is the best.

  2. Anonymous

    Great Course with lots of great info!

    5.0

    Great course, Dan provides lots of useful information all while showing you an actual project which brings the course to life.

  3. Anonymous

    5.0

    Thanks Dan.
    Brilliant course, thoroughly enjoyed it and picked up loads of really useful pointers for Adobe XD

    Many thanks
    Dave

4764597

Join our newsletter and get your first course free!

4764598

Join our newsletter and get your first course free!

Congratulations! You get one free course of your choice. Please check your email now for the redemption code

Are you interested in higher education?