PORTFOLIO
 

Wireframes
Provide the skeleton of navigational and content elements. Final wireframes provide a refined framework of each page level on which the User Experience team can build the site look and feel.
Answers the following questions:
  • How can the client be comfortable with the design of the navigation and page layout before it is designed and developed?
  • What amount of space layout is assigned to each element on the page?
  • What is the priority of information on the page?
  • How will the user flow from page to page and complete tasks?
Provides the following benefits:
  • Provides a visual layout of the real estate of the page (clearly defines interface elements, windows, buttons, and graphics)
  • Indicates exact navigation appearance and functionality (clearly details how functions operate at a page level)
Wireframes are a basic visual guide used in digital design to suggest the layout of fundamental elements in the interface. Because of this, they are often completed before final visual designs are developed. When completed correctly, they provide a visual reference upon which to structure each screen.

Wireframes also act as a way to communicate with clients and stakeholders. Over the course of a project, the process of wireframing provides a stable foundation on which to consider alternate user paths or new requirements. The information architect and information designer often use wireframes as working documents on which to establish the language, content, and structure of interactions users will have with a given product.

— Adapted from Wikipedia, Website Wireframe
  1. HMA - Detailed Wireframes (PDF)
  2. RR - Detailed Wireframes (PDF)
WHAT GUI PEOPLE DO: