4.5 Wireframes

posted September 28, 2015

Page Content

What is a wireframe?

A wireframe is a simple illustration of a website's page structure and layout.

How can you create a wireframe?

Wireframe layout example

Here is a simple static wireframe example (via Utah Valley State University).
wireframe layout example
You do not have to choose these layouts, this is your design. Looking for ideas? See this post on Web Design Ideas.

Wireframe Elements

Here are some important elements to include in your Web page illustration1:
  • Navigation
  • Company logo
  • Content area sections
  • Search function
  • User log in areas if appropriate
Each wireframe contains the following information and a description1:
  • Title: This is at the top of every wireframe.
  • Purpose: What is the purpose of the page? How does it connect to the main goal of your website?
  • How to Get Here: This section describes how the user got to this panel.
  • Content/Data: This section describes all the content on the panel including any buttons or icons.
  • If/Then: This section describes a user behavior and the result of that behavior (e.g., what panel is rendered after the 'If' condition is met).
wireframe with notes example

Resources and Notes

  1. This page was developed using Usability.gov's document on Creating Wireframes. We will use this as our main reference on creating wireframes.
  2. Using Wireframes to Streamline Your Development Process, webdesignerdepot.com, July 9, 2009. Accessed October 1, 2014.
  3. Inspiring UI Wireframe Sketches, by Gisele Muller via WDL, October 4, 2012. Accessed October 1, 2014.