Adobe XD UI/UX Design, prototype, and handoff from scratch

Learn how to design and prototype apps and webpages using Adobe XD

4.31 (2214 reviews)
Udemy
platform
English
language
User Experience
category
instructor
9,564
students
3.5 hours
content
Oct 2018
last update
$74.99
regular price

What you will learn

You'll learn how to use Adobe XD to design and prototype apps from scratch

You'll learn tools that are universal across multiple design apps to enhance your design workflow

You'll learn how to incorporate best practices in reusing design elements and styles to increase efficiency

Description

Adobe XD is a powerful tool for UI/UX designers giving you the power to design and prototype an entire app, all from one program. 

This course starts off with Adobe XD basics and quickly gets up to speed on designing and prototyping a full fledged app with amazing images, colors, and animations.

You will learn:

  • How to navigate around the interface and toggle on/off the panels you wish to use

  • How to set up art boards to rapidly assemble wireframes

  • how to make your art boards responsive using auto-resize

  • How to design icons using the pen tool and boolean effects

  • How to convert icons and buttons into symbols to reuse across your entire project

  • How to apply text and color style presets and change on the fly

  • How to use the repeat grid to create fast, repeating columns and/or rows

  • How to prototype and test your prototype within seconds

  • How to share projects, prototypes, and design assets

  • and much much more

When you're through with this course, you will be able to share a complete design and prototype with friends and colleagues that they can interact with directly on their phone or desktop.

Who is this course for:

  • UI/UX designers who want to improve their skills and learn the latest design tools

  • Photoshop or Illustrator users who want to switch to a program dedicated exclusively for UX design

  • SketchApp users who want an all-in-one solution for designing and prototyping

  • Product Managers who want to increase their design skills to create better products and communicate more effectively with developers

Content

Getting started with this course

What is Adobe XD?
Installing Adobe XD
Using the exercise files

Getting Familiar with Adobe XD

About this section
The Start Screen
Learning the Interface
A note to Windows users
Keyboard Shortcut Sheet Sheet
The Menu Bar
The Tools Panel
The properties panel
Using The Wireframe UI Template
The Layers Panel
The Assets Panel
Using Keyboard Shortcuts
Copy & Paste Appearances
The Prototype Workspace
Prototype Sharing
Using Device Preview

Get Started with The Project

Introduction to the DoLocal App
Creating Artboards
Grids & Layouts
Creating Content Wireframes
Designing Your Wireframes
Using repeat grids
Adding and formatting text
Adding Images
Working with Object Styles
Working with color
Using Color Assets
Using Character Styles

Working with images and vectors

Importing Icons
Masking images
Preparing Images in Photoshop
Preparing Icons in Illustrator

Creating Content in Adobe XD

Creating a Logo
Creating Icons
Using Symbols
Design Challenge
Completing our Design

Prototyping and Sharing

Why Do We Prototype?
Adding Interactions to your Prototype
Adding Overlays To Your Prototype
Recording Your Prototype to Video
Using Mobile Device Preview

Developer Handoff

Exporting Your Designs and Assets
Creating Design Specs for Developers
Working with 3rd Party Apps like Zeplin and ProtoPie

Adobe XD for Power Users

Importing Sketch & Photoshop Files into XD
Importing Icons from the Web and 3rd Party Tools
Using CC Libraries for Icons & Images

Conclusion

Conclusion

Screenshots

Adobe XD UI/UX Design, prototype, and handoff from scratch - Screenshot_01Adobe XD UI/UX Design, prototype, and handoff from scratch - Screenshot_02Adobe XD UI/UX Design, prototype, and handoff from scratch - Screenshot_03Adobe XD UI/UX Design, prototype, and handoff from scratch - Screenshot_04

Reviews

Scott
November 10, 2023
He goes very fast at certain points that make it very difficult to follow along as he layers multiple things including hex codes into a string of tasks
Ava
November 5, 2023
Unfortunately, there is so much back and forth making unnecessary changes that could have been done from the start that it is making it extremely difficult to follow along.
Suraj
August 24, 2023
Some project files were missing, rest tutorial wise, I got a good insight into the working and functions of adobe xd.
Ioana
October 25, 2022
The course was very well explained. I think though some informations should be updated, because Adobe Xd has changed.
Rochit
September 20, 2022
The course is really good for beginners but you should add animation and more design to the course but still it went well.
Dieuwke
August 21, 2022
Really clearly explained for an absolute beginner, thank you! I am using it to get experience for the UX course that I follow.
Sunita
July 26, 2022
Well I have just completed an online Google Scholarship Program in UX Design. I used figma a lot during my course and only briefly learnt about adobe XD. I want to gain further skills in Adobe XD & this is the reason for me undertaking this course. So far I am really enjoying it learning step by step which is good. Hopefully by the end of this course I can use Adobe a lot more for projects I work on & just in general.
Andrew
June 23, 2022
Great course for beginners. Some of the things are outdated or changed, due to Adobe XD updating each time. Overall, it's followable and takes time to figure out some of the stuff not in the current version of Adobe XD.
Abhiraj
May 8, 2022
Short and crisp. It covers most of what you need to start prototyping user interfaces for your next project.
Jody-ann
April 12, 2022
The lector is using an older version or another version that I am using, so for me its a bit difficult to catch up the entire time. But other then that love the content, his attitude and his way of teaching.
Johana
March 4, 2022
Has some good tips, if you are familiar with the program you can skip some chapters and go right to the good stuff.
Lukas
February 2, 2022
Good and short introduction to, what it seems, one of Adobe's most underestimated programs. I will definately use this in the future. Thanks for the insight.
Michael
December 1, 2021
I must say as a desiner that is very detailed and useful as well. well done. good job! I'll recommend to others that wanna learn XD from the basics in a professional way
David
October 24, 2021
This has been an excellent introduction. I am familiar with PhotoShop and InDesign. I have minimal experience with Illustrator. So the Adobe environment is familiar. But I have never created a wireframe, and this will save us a lot of money because I will be able to pass on a not-so-rough "rough draft" to the web pro who will then produce the actual live site in WordPress.
Jaela
September 25, 2021
This is a great course for becoming familiar with Adobe XD or using it as a refresher course. I like how the first section familiarizes students with the Adobe XD interface and then jumps into creating something viable that can be added into a portfolio. It's also really nice that this course is a little bit shorter than some others on Udemy and can very easily be done in several hours where you're prepared to create more content and explore on your own.

Charts

Price

Adobe XD UI/UX Design, prototype, and handoff from scratch - Price chart

Rating

Adobe XD UI/UX Design, prototype, and handoff from scratch - Ratings chart

Enrollment distribution

Adobe XD UI/UX Design, prototype, and handoff from scratch - Distribution chart
1283676
udemy ID
7/8/2017
course created date
11/22/2019
course indexed date
Bot
course submited by