This document discusses wireframing as an important step in the screen design process. It defines wireframing as a way to plan the layout and interaction of an interface without focusing on visual design elements. The document outlines a 7-step process for wireframing, including picking tools, setting a grid, determining layout with boxes, defining information hierarchy, fine-tuning with grayscale, creating high-definition wireframes, and translating wireframes into visual designs. It also discusses the importance of annotating wireframes to explain the user experience and providing mood boards with examples of design elements.
40. Moodboards combine examples of color
palette, imagery and typography. They often
contain design elements grabbed from other
websites that illustrate possible approaches.
41. Homework Assignment
1. Revise your journeys, if necessary, and select at least five templates for
wireframe execution.
2. Your Homepage template, which includes the site’s global navigation,
must be included.
3. Then annotate your wirefames, focusing on the behavior of key features.
4. Create a mood board that reflects the type of imagery and style elements
you recommend for your site.
5. You are not expected to develop visual designs, but you are welcome to
for extra credit.
DELIVERY FORMAT:
Formal presentation, collected for final grading.
Note: this is group assignment. This will be the final presentation for this
assignment. A new assignment, and new groups, will be assigned for the
remainder of the quarter.