Creating your first Prototype from Adobe XD

Advanced Challenges

Learning outcomes:

  1. Introduction to Adobe XD

  2. How to select brand colours

  3. Building a component library

  4. Use of basic website design

  5. Turn website designs mobile responsive

  6. Basic use of prototyping



Where Adobe Photoshop, CoralDraw and Figma played an important role in the design industry, Adobe XD has taken design to whole new level where it not only provides UX engineers with design tools, but prototyping tools and also helps create a library of design components for ease-of-use and the ability to share those created libraries among others.



Challenge description:


Under this challenge you are expected to design a prototype for the single-page charity website which you have considered in the “Creating Persona and User Journey Map” challenge using Adobe XD. 


You need to consider below sections when designing this website: 

·      Header / Navbar

·      Home page banner / Hero section

·      Who we are / About us

·      What we do

·      Contact us

·      Footer


Additionally, you must definitely include an area for a user to enter their email to subscribe (no need to be functional). Also, the sections mentioned above are just a guide, and you can add any other sections and show us your creativity. Apart from that, this web site needs to be responsive on both, desktop and mobile.

You can get prepared for this task by studying the learning resources and research around available charity websites.


Also, if you haven’t completed the “Introduction to the UX design industry” and “Creating Persona and User Journey Map” challenges yet, recommend completing those before starting with this challenge.

Learning Resources


Getting Familiar

Step 2 :
Step 2 :

To Complete, follow these steps :

Step 1 :
Step 1 :

Go through the learning resources given above, 

Step 1 :

Go through the learning resources given above, 

Upload the link below

Click Here

Step 2 :

Answer the questions 

Click Here

Step 3 :