What is a Wireframe?

Published:
Updated:
Wireframe design, a tool for being more creative!

When information, interface, and navigation are being designed, page concept comes up to create a unified skeleton for a website. Garrett (2010) says: “the page layout must incorporate all the various navigation systems, each designed to convey a different view of the architecture” (Garret, 2010, p. 128); all of these pieces are necessary because they have a role in the page. Therefore, information design is crucial for a good result in this part.

A wireframe can be defined as schematic way to create the skeleton of a website that shows how all elements can be fit together to communicate with users (Garrett, 2010). Wireframes collect all ideas in a single document and in the process of working on a web project it is an important reference for the implementation of visual design (Garrett, 2010).

Wireframes are the first phase in a formal visual design for a web project (Garrett, 2010), and in the whole process of development, the developers must be able to come back and compare the product with what has been defined in the wireframe. A wireframe should be a tool for builders of a website to check if they are progressing correctly.

Garrett also believes that when there are separate visual designers and user experience designers in a project, the wireframe enables both sides to share their comments and ideas on a specific topic. It also helps them find hidden questions, apart from its utility in uncovering problems during the design process (Garrett, 2010).

In a nutshell, a wireframe can integrate different parts of structure, navigational, information design, and positions of visual elements in a website. The wireframe plays an important role in the process of user experience design for the entire design team. It is a common reference for everyone involved in a web project. It also has potential to be a language because of its simplicity in action and its ease of use for everyone.

Wireframe Tools

There are a number of wireframe tools available that can be divided into two major types: wireframe software tools, and wireframe analogue tools. Software wireframe tools include Balsamiq (Guilizzoni, 2010), Axure (Axure, 2012), and Pencil (http://pencil.evolus.vn/en-US/Home.aspx). Popular analogue wireframe tools include Paper prototyping (Synder, 2003), Phone Doo (https://www.cohdoo.com/phonedoo.php) and Wireframe Magnets (DIY Kit) (http://konigi.com/tools/wireframe-magnets-diy-kit).

Analogue methods are supported by User Experience pioneers such as Bill Buxton (2010), author of Sketching User Experience (Buxton, 2010) and Carolyn Snyder, author of Paper Prototyping (Snyder, 2003). According to their comments on analogue wireframes they recommended them based on these reasons (Nedved, 2012):
 
  • Analogue wireframes keep all team members motivated to participate in prototyping sessions.
  • They allow designers to do what they want quickly and collect feedback faster.
  • They give team members more freedom, since there are no limitations in these tools.
The last two analogue tools seem interesting because they work based on magnets and are made by magnetic materials. They are useful for group activities where they can be used on large sized whiteboards using dry erase markers, but they are usually mentioned as tools for user experience designers and visual designers in a web project team.

Resources

Garrett, J. J. (2010). Elements of User Experience, The: User-Centered Design for the Web and Beyond. Pearson Education.

Guilizzoni, G. (2010). “Balsamiq Mockups. Balsamiq, http://www. balsamiq. com.

Axure, R. P. (2012). Interactive wireframe software and mockup tool

Buxton, B. (2010). Sketching User Experiences: Getting the Design Right and the Right Design: Getting the Design Right and the Right Design. Morgan Kaufmann

Nedved, M. (2012). Paper Prototyping and 5 Analog Tools for Web and Mobile Designers. Retrieved September 10, 2014 from http://www.1stwebdesigner.com/design/paper-prototyping-analog-tools-web-mobile-designers

Snyder, C. (2003). Paper prototyping: The fast and easy way to design and refine user interfaces. Newnes.
 
Eslamifar, A. (2014). A Tool for Empathetic User Experience Design (Doctoral dissertation, ARIZONA STATE UNIVERSITY).
2
1,332 Views

Comments (0)

Have a question about something in this article? You can receive help directly from the article author. Sign up for a free trial to get started.