WEB 200: Assignment 04

wireframe
Rehabilitation Institute of Washington Wireframes, by Mike Sinkula

Using a proven navigation convention and a consistent content design structure reassures your page’s visitor of where they are and will allow them to find the content they are looking for easily.

Effective navigation answers three questions:

  1. Where am I?
  2. Where have I been?
  3. Where can I go?

 

Given the site information architecture diagram, develop a navigation plan for the web site.

  1. Specify the global and local navigation systems using the appropriate labels for the navigation items.
  2. Specify any courtesy, ad hoc, cross-links or other navigation that will appear on the web site.
  3. Identify a way to let users know where they are within the site.
  4. Identify the navigation for the mobile site.

 

Wireframes can be low fidelity (rough sketches with pen and pencil) to higher fidelity (grayscale) to highest fidelity (four-color). Whether low or high fidelity, wireframes represent

  1. Primary & secondary navigation
  2. Images/figures/illustrations/other media (video, sound)
  3. Written content
  4. Functionality
  5. Header & footer
  6. Target window aspect ratio

 

Requirements

You will need to complete black-and-white or grayscale wireframes for your project website.

  • You must complete six wireframes for project, one set as desktop and one set for mobile.
  • For part one of the assignment, develop a set of three for desktop
    • Home page
    • A main (gateway) page
    • A sub (destination) page 
  • For part two of the assignment, refine the desktop wireframes and develop mobile wireframes (be sure to place the design inside a mobile “container” and tell us which phone you’re designing for (so many different aspect ratios)
  • The wireframes should be developed in Illustrator, Photoshop or Sketch (or another wireframe tool) and turned in per the class schedule. Share the URL in the appropriate section of our Slack group. MAKE SURE THE ELEMENTS ARE TO SCALE.

* We will discuss mobile next week

 

Mobile wireframe mock up:
pick a mobile device and wireframe goes inside this container. Indicate on the wireframe the OS/model chosen.

mobile-wireframes

Examples