Deliverables

A website wireframe, also known as a page schematic, is a visual guide that represents the functional front-end framework of a website, like the blueprints for a house. The main focus lies in functionality, behavior, and priority of content in a website or piece of software. Aside from websites, wireframes are utilized for the prototyping of mobile sites, computer applications, or other screen-based products that involve human-computer interaction.

Wireframing basics

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 lacks typographic style, color, or graphics–that comes later when the UI designer gets to work.

Wireframes focus on:

• 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 use cases on the display

We start with the information architecture (IA) of the site. The IA describes not only how the data will be organize on the back end, but how it will be accessed on the front. Think of a detailed flow diagram for each link on your website. Then the wireframe connects the IA to the visual design of the application.

Development documentation

Our wireframes are created to show not just business stakeholders how the application will work, but as a document engineers can use to build the software or website.

Data-driven design

Wires are created by balancing business goals with user research metrics. 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 with high-level structural work—like flowcharts or site maps—and screen designs.

We like to iterate with low-fidelity versions of the wires first, sketched onto paper or drawn on a whiteboard. That way we can get input from stakeholders and developers and make rapid changes. Once we’re all in agreement about the functionality and features, our designers draw up detailed plans that are clearly annotated so the programmers can build from them.