This course is designed for those interested to learn the basics of Adobe XD, how to use its advanced features, and create interactive prototypes and professional presentations.
Read more.Course Skill Level
Beginner
Time Estimate
7h 13m
Instructor
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
Adobe XD is the next big thing in the design industry! Learn how to use it to create better designs, impress your work colleagues or your boss, start a new business, or charge more for your freelancing projects.
This training is perfect for people of all levels. It doesn’t matter if you’re a long-time Photoshop user, an Illustrator enthusiast or you’re just getting started. Adobe XD will make you a better UI and UX designer.Â
Here’s what you’ll learn:
- The fundamentals of Adobe XD – how to get up and running with it
- How to use Adobe XD’s advanced features
- Design beautiful UI (user interface) projects: websites, mobile apps, presentations of all sorts
- Learn how to apply UX (user experience) principles without getting overwhelmed by loads of theory
- Create interactive prototypes that will impress clients
- Help your clients make more money by making key design changes to their websites
Who is this training program for?
- Anybody that wants to learn about the next big thing in the design world;
- People who are not happy with Photoshop’s performance – it’s so slow sometimes!
- Web designers who want to make more money from their projects;
- People who need to create sleek and professional presentations (forget PowerPoint!);
- App designers who want to quickly create iOS or Android apps;
- Developers who want a better handover process from designers;
- Project managers that need interactive prototypes done fast;
If you don’t have a lot of time to learn about various design programs, then this is the best course for you! Adobe XD is easy to learn and you’ll see how through fun exercises and activities, you’ll become proficient in no time at all!
Important Features Included:
- Live chat: my students frequently find me on our Discord group chat. This is a free program where you can chat with my fantastic community of students, ask questions, and get help fast. I’m regularly on there!
- All the sources files are included (.xd files): this means you can easily work along and pick things up at any point
- Facebook group: get access to a private group of over 7000 people who regularly share their designs, insights, and comments.
Requirements:
- Adobe XD (which is free)
- Windows 10 – Adobe XD doesn’t work on Windows 7 or 8
Who this course is for:
- Web designers, app designers, and people who rely on visual presentations
- Designers who want to stay current with the latest design tools
- Designers who are interested in making their work interactive
- People who are interested in learning about UI & UX
Our Promise to You
By the end of this course, you will have learned how to use Adobe XD.
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 Adobe XD.
Course Curriculum
| Section 1 - Getting Started | |||
| Introduction | 00:00:00 | ||
| How To Get The Most Out Of This Training | 00:00:00 | ||
| Course Resources | 00:00:00 | ||
| Adobe XD Vs Photoshop | 00:00:00 | ||
| Get Started With Adobe XD | 00:00:00 | ||
| Create Your First Design In Adobe XD | 00:00:00 | ||
| How To Get Around Adobe XD | 00:00:00 | ||
| Best Way To Select Layers In XD | 00:00:00 | ||
| Exercise: Practice Your Selecting | 00:00:00 | ||
| From Photoshop Or Illustrator To Adobe XD | 00:00:00 | ||
| Cloud Documents And Saving Your Work | 00:00:00 | ||
| Adobe XD Quirks | 00:00:00 | ||
| Section Conclusion | 00:00:00 | ||
| Section 2 - Adobe XD Tools And Features | |||
| Introduction | 00:00:00 | ||
| How To Work With Rectangles Like A Pro | 00:00:00 | ||
| Use The Ellipse, Polygon And Line Tools | 00:00:00 | ||
| Editing Shapes | 00:00:00 | ||
| Pen Tool | 00:00:00 | ||
| Let’s Have Fun – Use All The Tools | 00:00:00 | ||
| Work With Colors And Gradients | 00:00:00 | ||
| Grids, Guides, Smart Guides – Pixel Perfect Designs | 00:00:00 | ||
| The Alignment Tools – Overview | 00:00:00 | ||
| How To Use The Alignment Tools | 00:00:00 | ||
| Work With Text Layers Like A Pro | 00:00:00 | ||
| Best Way To Work With Images | 00:00:00 | ||
| Create A Collage | 00:00:00 | ||
| Section Conclusion | 00:00:00 | ||
| Section 3 - Saving And Exporting Your Work | |||
| Export Our Work As PNGs | 00:00:00 | ||
| Share Your Work To Get Feedback | 00:00:00 | ||
| Optional – Save Presentations As PDFs | 00:00:00 | ||
| Share Your Work With Developers | 00:00:00 | ||
| Shrink Your PNGs And JPEGs Without Losing Quality | 00:00:00 | ||
| Section 4 - Adobe XD Advanced Features | |||
| Introduction | 00:00:00 | ||
| Fast Designing With Repeat Grid | 00:00:00 | ||
| Quickly Replace Content | 00:00:00 | ||
| Components – A Revolutionary Feature | 00:00:00 | ||
| Practice Working With Components | 00:00:00 | ||
| Why We Need To Talk About Style Guides | 00:00:00 | ||
| How To Supercharge Your Color Use | 00:00:00 | ||
| How To Work With Character Styles | 00:00:00 | ||
| Here’s How You Actually Set Up Your Assets Panel | 00:00:00 | ||
| A Smarter Way To Work With Linked Assets | 00:00:00 | ||
| Undecided? Keep Multiple Versions! | 00:00:00 | ||
| Working With Several Designers At Once | 00:00:00 | ||
| Section Conclusion | 00:00:00 | ||
| Section 5 - First Web Design Project | |||
| Introduction To Our First Web Design Project | 00:00:00 | ||
| Create The Website’s Header | 00:00:00 | ||
| My Advice For Perfect Social Media Icons | 00:00:00 | ||
| Setting Our Typography | 00:00:00 | ||
| Adding The Search Bar | 00:00:00 | ||
| The Website’s Categories | 00:00:00 | ||
| Build The Content Area With Repeat Grid | 00:00:00 | ||
| Pagination Through XD Components | 00:00:00 | ||
| Create The Footer | 00:00:00 | ||
| Overview Of The Homepage | 00:00:00 | ||
| Create The Product Details Page | 00:00:00 | ||
| Finishing Touches On The Product Details Page | 00:00:00 | ||
| Section 6 - Responsive Design | |||
| What Is Responsive Design? | 00:00:00 | ||
| Designing Without Coding: Why And How? | 00:00:00 | ||
| Making The Mobile Version Of The Homepage | 00:00:00 | ||
| Adjusting The Design For The Mobile Version | 00:00:00 | ||
| Editing The Footer For The Mobile Version | 00:00:00 | ||
| Create The Mobile Version For The Product Details Page | 00:00:00 | ||
| Design Variation #1 – Color | 00:00:00 | ||
| Design Variation #2 – Typography | 00:00:00 | ||
| Design Variation #3 – The Layout | 00:00:00 | ||
| Key Things About Our Design | 00:00:00 | ||
| Section 7 - Make The Design Interactive (Prototyping) | |||
| Introduction To Prototyping | 00:00:00 | ||
| The Fundamentals Of Wiring A Prototype | 00:00:00 | ||
| Trigger Types In Adobe XD | 00:00:00 | ||
| Transition Animations And Easing | 00:00:00 | ||
| Auto-Animate – The Incredible Game Changer | 00:00:00 | ||
| Auto-Animate And Drag | 00:00:00 | ||
| Previous Artboard – A Must In Any Large Project | 00:00:00 | ||
| How To Make Menus And Pop Ups Seem Real | 00:00:00 | ||
| Jump To A Part Of Your Design With Scroll To | 00:00:00 | ||
| Here’s Why Your Animations Don’t Matter | 00:00:00 | ||
| Section 8 - Advanced Prototyping | |||
| Here’s Why We Should Animate Our Design | 00:00:00 | ||
| What You Should And Shouldn’t Animate | 00:00:00 | ||
| Create Hover States For Social Media And Main Menu | 00:00:00 | ||
| Prototyping The Search Box – Hover And Down State + Drop-Down | 00:00:00 | ||
| Create A Hover State For The Repeat Grid | 00:00:00 | ||
| Setting Up The Pagination And Footer | 00:00:00 | ||
| How To Quickly Change Your Layout With Stacks | 00:00:00 | ||
| Bonus: Make The Navigation Work | 00:00:00 | ||
| Section 9 - What's Next? | |||
| Here’s What I Suggest You Do Next | 00:00:00 | ||
Related Courses
Are you interested in higher education?