Mockup A Homepage with Adobe XD (Nov 2018)

Rob Willey, UI and UX Designer

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
40 Lessons (2h 23m)
    • 1. Intro

      1:02
    • 2. Video Labels

      0:59
    • 3. XD in the Ecosystem

      1:07
    • 4. Prototyping

      1:37
    • 5. Prototype Uses

      1:29
    • 6. Inspiration & Process

      1:49
    • 7. Sketching

      5:28
    • 8. Choosing a Project

      1:57
    • 9. Uploading Projects

      1:32
    • 10. Getting XD

      0:50
    • 11. XD Interface

      2:50
    • 12. XD Skill: Navigation

      1:59
    • 13. XD Skill: Adding Colors

      2:16
    • 14. XD Skill: Adding Photos

      3:54
    • 15. XD Skill: Shapes

      4:19
    • 16. Adding Shapes

      5:21
    • 17. Fonts

      1:36
    • 18. XD Skill: Text

      5:08
    • 19. Add Text to the Mockup

      4:46
    • 20. XD Skill: Merging & Converting Text to Outlines

      3:22
    • 21. XD Skill: Cutout Text

      4:10
    • 22. Buttons and Menu

      7:07
    • 23. General Cleanup

      6:23
    • 24. Intro to global styles

      2:55
    • 25. XD Skill: Assets, Colors, and Character Styles

      6:53
    • 26. XD Skill: The Pen Tool

      6:44
    • 27. The Pen Tool in Action

      10:33
    • 28. Adding a Curved Shape

      4:07
    • 29. XD Skill: Masking Images

      3:20
    • 30. Adding a Circular Image

      4:48
    • 31. XD Skill: Gradients

      2:36
    • 32. Adding a Contact Form

      6:10
    • 33. Creating a Menu

      5:43
    • 34. XD Skill: Menu Prototype

      5:33
    • 35. XD Sharing Prototypes

      4:02
    • 36. XD Skill: Exporting

      1:36
    • 37. XD Skill: Repeat Grid

      2:55
    • 38. XD Skill: Paste in Place

      1:23
    • 39. XD Skill: Prototyping II

      2:15
    • 40. Conclusion

      0:15

Project Description

Create A Homepage Mockup

Using what your existing knowledge, plus what you learn in this course, use Adobe XD to mockup a homepage. The videos give suggested items to complete as you progress. I recommend that start your project before you complete the course, then upload each iteration of your project. This will help you to stay on track and also to get feedback from your classmates as you progress. 

The sky is the limit on the type of homepage you want to create. Here's the one I made in while creating this video series. 

7fa1c88e

Student Projects

project card
Les Patin
1 comment