Adobe Xd Masterclass: Design a Mobile App & Website Wireframe

Lindsay Marsh, Teacher & Freelance Designer 14+ Years ✅

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
24 Lessons (3h 3m)
    • 1. Class Intro

      1:41
    • 2. Getting Started

      10:49
    • 3. Hero image

      7:29
    • 4. Repeat Grids

      7:35
    • 5. Creating The Footer

      9:45
    • 6. Creating Our Subpage

      10:02
    • 7. Responsive Grid

      7:33
    • 8. Prototyping

      9:39
    • 9. Sharing & Resizing

      6:11
    • 10. Mobile App Design - Setup & Ux/Ui

      6:45
    • 11. Mobile App Design - Homescreen

      8:47
    • 12. Mobile App Design - Homepage Animate

      12:40
    • 13. Mobile App Design - User Home Screen

      8:11
    • 14. Mobile App Design - User Home Screen - Part2

      7:22
    • 15. Popout Menu Design

      6:45
    • 16. Transaction Menu

      11:36
    • 17. Fine Tuning and Linking Our Design

      8:53
    • 18. Testing Your Design On Your Phone

      0:59
    • 19. Linking It All Up

      4:34
    • 20. Message Screen

      9:47
    • 21. Message Screen Part2

      11:33
    • 22. Message Screen Part3 - Animating Our Toggle Button

      4:31
    • 23. Student Project

      1:02
    • 24. Bonus Lesson - Create A Slidable Bar

      8:40
62 students are watching this class

Project Description

2657f7ac

Quick Note: Make sure you update Adobe Xd to get the latest version to keep up to date with it's constant improvements. 

Resource Files for this Class Are Located Here as Attachments.

It is time for your student project!
I want you to design a very simple web layout or mobile app with at least three transitions or links. Try to think about your user journey and map out his or her final goal or destination.

Keep this one simple and add to it as you feel more and more comfortable with Xd and the many animation and transition options available to you.

You can go the extra mile by publishing a live link of your prototype and posting it in the project section or in my student facebook group. You can even post it in the community section of this class to get feedback from other students. Just posting jpgs of your design or wireframe would be great too! 

Remember, to keep it simple at first, the best digital layouts are simple and focus on making the experience for the user as easy and pain free as possible!

Feel free to reach out to me anytime with questions you may have along the way!

Happy creating!

Resource Files for this Class Are Located Here as Attachments.

Student Projects