page-template-default,page,page-id-22,page-parent,page-child,parent-pageid-12,theme-stockholm,qode-social-login-1.1.3,qode-restaurant-1.1.1,stockholm-core-1.1,woocommerce-no-js,select-theme-ver-5.1.8,ajax_fade,page_not_loaded,wpb-js-composer js-comp-ver-6.0.5,vc_responsive

This is an individual assignment worth 10% of the overall course grade (subsequent feedback discussion 5%)


Working from your backlog, create a wireframe that represents your view of the overall site design. You’ll be designing the basic layout for the site or app site along with mockups of your primary site functionality.

Assignment Components

  • Review other websites or mobile apps for layout ideas (make sure that the design is responsive)
  • As part of your wireframe, create a style sheet with primary site colors and typography
  • Gather some design assets that you can use in your wireframe
  • Create a high-fidelity wireframe for your site design


This assignment requires the use of Adobe XD.

There are many free sources for images and graphics (freepik.com, flaticon.com) that you can use in your design, and you’re welcome to source audio and video (YouTube, Vimeo) as commercially allowed for your final deliverable.

PLEASE ENSURE THAT ALL ASSETS ARE APPROPRIATELY SOURCED. If you’re using images from another site, include a page on your site with references.


For this assignment, don’t worry about writing any content. In a wireframe, we typically use dummy text as a placeholder in our designs. The Latin Lorem Ipsum is the standard dummy text used in typesetting – it’s been a standard since the 1500s! We use it to keep our reader from being distracted on the written content, allowing them to focus on the overall look and feel of our design. Lorem Ipsum has a normal distribution of English letters and provides a visual context for how the words will appear in the design. You can use a Lorem Ipsum generator and copy the text into your design. For fun, check out the Lorem Hipster text generator.

Presenting Your Work

You can export your XD artboards and present your work an interactive XD prototype or provide screenshots in Powerpoint (70 points). Once your design is complete, share your work on your group’s discussion board with a summary of your work and thought-process. Provide feedback on at least two of your classmates’ designs (35 points).


Wireframing with Adobe XD