Introduction to WireFrames

Introduction to WireFraming for Web Design and Development


A website wireframe, also known as a page schematic or screen blueprint, is a visual guide that represents the skeletal framework of a website. The wireframe depicts the page layout or arrangement of the website’s content, including interface elements and navigational systems, and how they work together. The wireframe usually lacks typographic style, color, or graphics, since the main focus lies in functionality, behavior, and priority of content. In other words, it focuses on “what a screen does, not what it looks like.” Wireframes can be pencil drawings or sketches on a whiteboard, or they can be produced by means of a broad array of free or commercial software applications.

Wireframes focus on:

The kinds of information displayed
The range of functions available
The relative priorities of the information and functions
The rules for displaying certain kinds of information
The effect of different scenarios on the display

The website wireframe connects the underlying conceptual structure, or information architecture, to the surface, or visual design of the website. Wireframes help establish functionality, and the relationships between different screen templates of a website. An iterative process, creating wireframes is an effective way to make rapid prototypes of pages, while measuring the practicality of a design concept. Wireframing typically begins between “high-level structural work—like flowcharts or site maps—and screen designs.” Within the process of building a website, wireframing is where thinking becomes tangible.

Aside from websites, wireframes are utilized for the prototyping of mobile sites, computer applications, or other screen-based products that involve human-computer interaction. Future technologies and media will force wireframes to adapt and evolve.

Wireframing vs. Storyboarding — Although some people believe that wireframing is synonymous with storyboarding, it is not. Actually, wireframing could be considered the storyboard’s parent technique. A wireframe can provide structure for a storyboard.

The distinction between a wireframe and a storyboard is critical. Wireframing defines the What of the creative process while storyboarding tackles the How. In other words, “What is” preceeds “How to.” This distinction can be reduced to “What you want to accomplish and how you want to do it.”

Learner Outcomes

* What are the uses of wireframes
* What are the elements of wireframes
* Discuss and respond to questions about the benefits of a wireframe
* What are the differences of a low and high fidelity wireframe
* How does a wireframe compare to a story board?


Review the details on Wikipedia on Wireframes and review the following video and be prepared to respond to the questions above.

Leave a Reply