What are wireframes, and why does your website need them?
One of the most misunderstood UX deliverables are website wireframes. Maybe it's because they are lo-fi, or maybe it's because they are sometimes filled with scary decisions, or maybe it's just because some clients want to get to the fun "marketing" part: creative design. I'm not really sure. But, here's how I usually explain wireframes to clients when they encounter them for the first time.
What are wireframes?
Wireframes are a visual guide to elements on a page. They represent function, content elements and features, and express navigation and wayfinding.
Though wireframes underpin the visual design, they are not one-to-one layouts of the future creative design composition; rather, they serve to influence and guide the design process.
In development and coding, wireframes transition into a functional specification for the build.
Why does your website project need wireframes?
The short answer: because someone has to plan for what the site is going to do and how it is going to do it, captured in a language that designers and tech folk understand. Wireframes are these blueprints.
If you've ever envisioned a new website before (or even a part of one), you know that you have a goal or a strategy in mind. Wireframes are the bridge between these strategies and the technology required to implement them successfully for users.
What do you need to know before you start wireframing?
Basically, it boils down to these things:
Awareness of client's wishes, strategy, objectives or goals.
A content outline, beginnings of a content strategy, audiences identified, analytics, calls to action, success measures, etc.
Understand the PROBLEM. There is always a problem; take it on.
When it's time to start, look at the content outline or sitemap and decide what should be illustrated. Ask yourself:
- What content templates or page types will the site need?
- Are there processes that should be paper-prototyped? Paper prototypes are essentially wireframes that express a workflow. For example, a registration process or shopping cart.
- Is there a content management system (CMS)? If so, do you know the CMS's capabilities? If you do, great! Try to work within these capabilities. If not, talk to tech people as you go and prepare to adapt.
Once you've produced the wireframes, expect tweaks throughout the rest of the project. Though "approved," or even endlessly vetted with coders, developers, designers and the client, nothing is ever final on the web.