A picture is worth a thousand words

Wireframes are the backbone of any successful web or software project. Information architects create wireframes to provide a visual schema on how pages are put and linked together without specifying a visual identity. Similar to the architectural blueprints for a building, wireframes constitute the common understanding between the client, business analyst, designers and developers.

A "napkin scetch"

Wireframes are the backbone of any successful web or software project. Information architects create wireframes to provide a visual schema on how pages are put and linked together without specifying a visual identity. Similar to the architectural blueprints for a building, wireframes constitute the common understanding between the client, business analyst, designers and developers.

Seeing is believing

During the concept phase, wireframes help to visualize ideas and get everybody involved. Tools such as Visio allow information architects to quickly create click-through scenarios to simulate possible interactions with the future application.

Stakeholders are busy people. They will not read lengthy functional specifications and are unlikely to page through detailed presentations. But they will look at screen mockups and storyboards. The use of wireframes is a time-saver. Instead of waiting for months before seeing actual screens, stakeholders get a sneak preview almost immediately. A client once told me after a three-day intensive workshop: “This is amazing! Prior to working with you, we waited for six months to see actual pages, and when we finally did, they were not at all what we had asked for.”

Reducing time = saving money

Wireframes can save you very costly rework at a much later stage in the development process. Making fundamental changes during the development phase may cost a lot, with an outcome that is often uncertain. Paper, on the other hand, is patient – and cheap. Changes are easily made. In fact, good user experience design relies on an iterative process involving different team members as well as feedback from the end users.

Wireframe in visio

Getting the team on one page

Early paper prototyping also helps with internal communication and productivity.

  • Designers are able to quickly mock-up the visual identity and enhance the user experience without wasting time thinking about data, page flow, and business scenarios.
  • Content providers can easily visualize the placement and space for their copy.
  • Developers may use the prototype to give more accurate estimates for development time and to raise potential flags in terms of feasibility or performance.

During the development phase, the wireframes serve as a quick reference and reduce the chances of misinterpreting functional requirements.

Last but not least, wireframes facilitate early usability testing, which will reveal potential issues with page flow, layout, nomenclature, or functionality. As discussed previously on Agile Usability Testing, this can be done very quickly at low cost and will provide valuable insight into the users’ minds.

Digital news!

Are you as digitally addicted as we are? We can supply you with a regular dose of digital news. Simply sign-up, or click to Follow us online.

About the author

Julia Borkenhagen
Julia Borkenhagen

Julia is a certified usability analyst by HFI (Human Factors International) with over 15 years of experience in user research, interface design, usability testing and project management.
Prior to joining blue-infinity, Julia worked several years for the San Francisco based agency Digitas on the dell.com account and as the lead web producer for NIKU, now CA Technologies.
Julia has been with blue-infinity since 2005 and is leading our in-house User Experience practice.