YAY, WIREFRAMES!

Ah, wireframes: the unsung heroes underpinning a lot of great work

An essential tool for team collaboration, wireframes are the place to:

• Bring new ideas to the table without investing a lot of time

• Gather team member and stakeholder support around a common vision

• Build client or stakeholder trust by getting step by step sign off

• Easily organize and reorganize sections and repeating design components without bringing up look & feel

• Create a clear structural guide to pass to a visual designer if I won't be doing the visual design myself

• Test for "user fatigue" or disorientation in multi-step task flows

• Work out instructional writing, labels, and tone (for example, in an onboarding task flow)

I use wireframes to work out my ideas or to collaborate with with my team. In my experience, team members prefer even the skimpiest of graphic layouts to straight text documents when it comes to engaging in early discussions about design.

Check out some of the ways I've leveraged the power of wireframing in the past:

As the first step in rapid decision making

APSA Website Redesign

Wireframes rarely match the final implementation, as in this example of a wireframe I created for SFU APSA's website home page. Wireframe changes are a great way to get many site architecture and content category questions answered quickly and inexpensively, before moving to design.

To collaboratively build a clear information architecture

Historica Canada Website Redesign

By clearly matching site architecture labels to the related wireframes, the team was able to efficiently "batch review and approve" screens that have similar components.

As a vision document for proposed-but-as-yet-unapproved change

CalabrioOne Analytics Task Manager

This wireframe helped me to keep track of design decisions I needed to confirm with stakeholders.

As a way to focus on the end user

Encounters With Canada Website

User expectations noted on these wireframes (in red) persistently reminds the team to present content in a way that will engage our target users.

As a to-do list

Custom App for the Tickit Medical Survey Platform

These wireframes were almost a to-do list, with placeholders for all copy and images to come. They provide a great at-a-glance overview of how all elements are meant to work together toward a whole.

As a quick way to get first ideas down on paper

Canada In Space website, for Science World BC

Pencil and paper (and whiteboards) are a great way to get thoughts out of my head, and validate or reject early ideas.