4.5 Wireframes
posted September 28, 2015
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).
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).