Early in the design process, after creating user personas, we develop wireframes for a website or user interface (UI). A wireframe is a simple drawing consisting of lines, boxes, and simple grayscale graphics depicting page elements, organizing its content and communicating hierarchical structure. The wireframe design process provides numerous benefits to the client, designers, and developers involved on a project, which we’ll outlined below.
Structure and Hierarchy
Wireframes establish a page schematic, acting as a blueprint for the entire project. By organizing the elements contained within a page, the UI designers can understand how objects relate to each other. These relationships between elements create prominent content areas in specific positions on the page where users can find similar information and interact with these elements (also known as interface patterns).
Even the simplest wireframes provide a skeletal structure and establish hierarchy for the content of a project. Most interfaces have a consistent header area with logo, primary navigation, main content area, sidebar, and footer. Wireframes establish the placement of these elements on the canvas and the content that will be included within each content area. Wireframes do not include design elements like typography, final pictures and images, graphics, color, or functionality.
Prototyping and Focus Groups
When the UI designers are satisfied with their initial set of wireframes for a project, they can conduct a focus group to test their design against target users. Directed by a moderator, the individuals in a focus group are given paper or digital prototypes to interact and navigate through specified tasks. These tasks help validate that the primary functionality, navigation, and the user flow for the project are working as defined by the project objectives.
By studying the subjects’ interactions in the focus group, designers can make quick adjustments to the paper or digital prototypes, to improve navigation or content hierarchy. The process of adjusting wireframes on the fly prove to be quicker and more effective than changing the code base of a staged product. Once a large enough percentage of the test group users are able to complete the assigned tasks with ease, the prototypes are validated and ready to hand off to developers for production.
The process of adjusting wireframes on the fly prove to be quicker and more effective than changing the code base of a staged product.
Cost Benefits
By allocating a small percentage of your project’s resources to wireframes, costs are reduced in several key areas:
- It’s much cheaper to test multiple interface patterns against target users.
- Designers and developers are given clear project requirements before production begins, rather than after the first design phase.
- Wireframes make the process of establishing and communicating expectations with client stockholders for their project much more effect and far less error-prone.
As you can probably imagine, this early preparation can save large amounts of time and headaches in development, by flushing out features that may not have been fully realized early in the process. I encourage you to experience the benefits of wireframe prototypes first-hand, by using them in the development of your next project.