Introduction

For this project, you will use analog tools to draw a detailed site map and wireframe of a complex website. The main objectives for this exercise are to investigate how complex websites utilize grids, to understand the sizes of boxes and page elements, to consider how complex information can be organized through a navigation structure, and to model working away from the screen on designs that are eventually intended for screen-based interactivity.

Instructions

  1. Select one of the following websites (or propose another to the instructor for approval):
  2. Create a Site Map diagram that shows each individual page on the site and how it links to the other pages. Consider if there is a central navigation system, sub-navs, or additional navs on other parts of the site and focus on these. Many of these sites will have seemingly infinite links (ie: articles or items for purchase). In these cases, find a way to represent the myriad of links through your drawing.
  3. Create a Wireframe of your chosen site, including rectangles where boxes lie on the page, approximate pixel dimensions for each, sketches of icons or horizontal/vertical rules. Hint: *use screenshots of the website or developer tools to determine these*
  4. Submit your Site Map and Wireframe sketches in class on or before the deadline.

Suggestions for implementation

Grading Criteria

  1. Meets the criteria in the Instructions section.
  2. Detail-oriented.
  3. Well planned and executed.
  4. Demonstrates an increased understanding of site layout, pixel dimensions, site mapping, and wireframing.

Intro to Web Page & Interactive Design: NM231