LearnUX.io Awwwards Honorable Mention

Adobe XD Course

  1. Intro to Adobe XD 02:08

    Intro to Adobe XD

    Welcome to Adobe Experience Design

  2. Grids and Artboards 08:15

    Grids and Artboards

    Organize your assets on the XD Canvas

  3. Resolutions and Retina Screens 05:59

    Resolutions and Retina Screens

    Check out how Adobe XD deals with imported design assets

  4. Assets Exchange 16:37

    Assets Exchange

    Work with different software such as Illustrator and Photoshop

  5. Document Navigation 03:59

    Document Navigation

    Find your way around the canvas in Adobe XD

  6. Interface and Shortcuts 05:22

    Interface and Shortcuts

    Learn about most useful shortcuts and navigation

  7. Searching for inspiration 05:02

    Searching for inspiration

    Look for some inspiring projects before you start

  8. Colors and Structure 12:28

    Colors and Structure

    Setting up the color scheme inside Adobe XD

  9. Typography 16:00

    Typography

    Working with typography and custom fonts

  10. Working with Shapes 09:43

    Working with Shapes

    Explore vector tools in Adobe XD

  11. Symbols 09:22

    Symbols

    Working with Symbols

  12. Working with Image Assets 07:45

    Working with Image Assets

    Import images into Experience Design

  13. Import From Text File 07:00

    Import From Text File

    Work faster thanks to this import feature

  14. Pen Tool 09:58

    Pen Tool

    Use Pen Tool for custom, advanced shapes

  15. Repeat Grid 05:49

    Repeat Grid

    One of the most powerful tool in Adobe XD

  16. Generating Grid 10:56

    Generating Grid

    Automate some tasks inside Adobe XD

  17. Next Screens 07:16

    Next Screens

    Creating next pages of our website

  18. Testimonials Screen 08:17

    Testimonials Screen

    Working on the next screen for apps website

  19. Boolean Operations 05:56

    Boolean Operations

    Create more advanced shapes operations

  20. Creating Sections 05:51

    Creating Sections

    Use repeat grid function to easily generate multiple sections

  21. Working with Forms 09:04

    Working with Forms

    Designing a simple form in Adobe XD

  22. Prototyping 11:06

    Prototyping

    Using prototyping workflow in Adobe XD

  23. Prototyping Tips 04:33

    Prototyping Tips

    See how to pin the elements in prototypes and use Overlays

  24. Sharing Your Work 07:13

    Sharing Your Work

    How to send out the prototype for feedback

  25. Mobile Version 15:31

    Mobile Version

    Adjust for different screens and resolutions

  26. Device Preview 08:24

    Device Preview

    Check out how to test your design on a real device

  27. Design Preview 04:11

    Design Preview

    Check out how to automatically generate developer specs with sizes, colors and fonts from XD

  28. Exporting Assets 10:11

    Exporting Assets

    Generate some image assets out of Adobe XD

  29. Muse Import 16:04

    Muse Import

    Getting things together inside of Adobe Muse

  30. Using Google Fonts 13:52

    Using Google Fonts

    Istall and use Google Fonts inside Muse

  31. Mobile Menu 05:42

    Mobile Menu

    Working with the first components for our website

  32. Second Screen 18:56

    Second Screen

    Create the second screen and responsive version

  33. Third and Fourth Screen 15:23

    Third and Fourth Screen

    Work on the following screens of the website

  34. Fifth Screen 10:49

    Fifth Screen

    Importing assets for the next screen of our page

  35. Sixth Screen 09:11

    Sixth Screen

    Mastering workflow between Adobe XD and Adobe Muse

  36. Seventh and Eight Screen 12:08

    Seventh and Eight Screen

    Last screens of our website and RWD

  37. Interactive Elements 09:43

    Interactive Elements

    Working with user interactions in the menu

  38. Exporting to Server 06:44

    Exporting to Server

    Share your work and make it accessible online!

  39. Exporting to ProtoPie 08:01

    Exporting to ProtoPie

    Create more sophisticated prototypes with ProtoPie export from Adobe XD

  40. E-commerce UI Element 07:48

    E-commerce UI Element

    Create an UI element for an e-commerce website using this quick XD workflow

  41. Organizing Layers for Export 09:20

    Organizing Layers for Export

    Prepare the file structure, naming and grouping convention for export

  42. ProtoPie Basics 09:27

    ProtoPie Basics

    Import your design from Adobe XD to ProtoPie and create simple animations

  43. Creating First Animations 10:47

    Creating First Animations

    Use the elements from XD to easily create simple transitions in ProtoPie

  44. Advanced Interactions 07:54

    Advanced Interactions

    Use ProtoPie for even more advanced animations and link the elements together

  45. Finishing off with ProtoPie 08:05

    Finishing off with ProtoPie

    Add some finishing touches to the prototype, such as a cool blink while adding to the cart

  46. Thank You 00:55

    Thank You

    Goodbye

Adobe XD Course

Duration: 06:54:45 Last update: 3 weeks ago
  • Key Points
  • Author
  • Source Files
  • Who is this course for?

Do you want to design interfaces quickly and without issues? Adobe Experience Design is an extremely versatile tool for UI/UX designers because it also lets the users create interactive prototypes. Not only are we going to discuss working techniques for Adobe XD but also make our project into a working website with Adobe Muse!

  • XD Interface & Tools
  • Efficient design
  • Prototyping transitions
  • Working with Adobe Muse
  • UI – in practice
  • Creating a responsive website

Greg Rog - “My work is all about design, coding and education. For over 10 years I’ve been a professional designer, design lead and UX consultant for companies such as Microsoft or Google. I work closely with Adobe as Community Professional. I also run a software house and a training facility, speak on design conferences and more. I’m curious, passionate and I love sharing knowledge.”

Sorry, you don’t have access to the project files.

Why don’t you subscribe and get full access throughout the site?

The course is perfect for anybody interested in making modern website and applications, regardless of their professional experience. Workflow you will see in the lessons will allow you to optimize your work efficiency and at the same time design interesting, working projects. You do not really have to know much about coding and website implementation, and you do not have to know Adobe Muse either. If you are interested in developing your skills with this particular software, look up our Adobe Muse Course.

Reviews (2)

Adobe XD as a part of Adobe CC

One of the most striking benefits of Experience Design is the fact that it is included in a popular Adobe package - you can gain access to its functions as part of your CC subscription, and it works together with other apps in the family, such as Photoshop or Illustrator. This course is a complex analysis of Adobe XD working techniques to be used for the creation and later implementation of our project into a fully fleshed, working website, without even a single line of code!

Adobe Experience Design in CC

Integration with other apps

Course lessons will show you how to exchange data between Adobe XD, Photoshop, Illustrator, and even mobile apps, which you can use to quickly prototype with your tablet or smart phone. Wireframes created this way can be easily imported to XD where you can continue your work. In Experience Design, you can use Assets panel and Creative Cloud Libraries to manage all the assets and keep them consistent in your software.

Adobe Experience Design and other Adobe apps
Prototyping in Adobe XD

Adobe XD magic

Tools implemented in Adobe XD make interface design incredibly efficient. One of the most interesting examples is one called Repeat Grid, which lets you easily copy repeatable elements of an interface, such as tables or lists. You can even painlessly place graphic assets or texts in each of the elements of the resulting grid, by simply dragging images/text files into the application!

Design + Prototyping

Thanks to an in-built function of rapid prototyping, Adobe XD allows you to develop your project with transitions and animations for each particular screen. The preview function lets you monitor your progress in the app itself or on a connected device. You are able to quickly test implemented solutions and choose a layout optimized for the device you are currently monitoring the project on!

Create web layout with Adobe XD

Sharing and feedback

Adobe XD is capable of sharing website and application prototypes. Anyone who is sent the link will be able to take a peek at a working prototype, even on their mobile devices. They will also be able to provide feedback on each Artboard, and mark specific edits or corrections.

Practical project of a website

This course focuses on the creation of a practical website project. The site advertises the intelligent home app we have worked on during our previous UI courses. However, the start might seem a bit unusual because we deal with a desktop view, then we create a responsive view and test it on a mobile phone. Next we prototype transitions and interactions for a finished project and prepare graphic assets to be exported to the Web.

Develop a web page with Adobe Muse

Course lessons will show you how to exchange data between Adobe XD, Photoshop, Illustrator, and even mobile apps, which you can use to quickly prototype with your tablet or smart phone. Wireframes created this way can be easily imported to XD where you can continue your work. In Experience Design, you can use Assets panel and Creative Cloud Libraries to manage all the assets and keep them consistent in your software.

Adobe Muse for painless web development
Gain access to all courses from $8/mo