Written by Brian Cray on December 2nd, 2009
Wireframing in terms of website design means to create a basic "sketch" of your website's user interface. While many web designers jump straight from client meeting to Adobe Photoshop, or even to creating CSS and HTML prototypes, they are missing important opportunities in the website design process. Wireframing addresses extremely important issues in strategic design, client adoption, and user-centered design.
The value of wireframing comes down to a simple idea: Wireframing forces you to think about your user interface design decisions in terms of user needs first, instead of in terms of what looks good.
Ideal website design deliverables from start to finish
Removing the wireframe from the website design process
Without wireframing your website designs, you're vulnerable to these design pitfalls:
- Lack of focus on strategic UI design. Taking a website design from conceptual design to UI means considering the strategic value of UI components, which doesn't always happen when you're considering 48 shades of red.
- Client focuses on appearance rather than strategy. It's easy to get caught up in how something looks, and everyone thinks they're an expert on looks. Using wireframes helps keep everyone's focus on strategic design decisions.
- Unable to justify user interface design decisions to stakeholders. If you've carefully thought about the value of UI components before moving into skinning and prototyping, you're armed with the power of reason against inevitable uninformed criticisms.
- Changes to page structure are more difficult in later stages. If you've already tweaked everything to look beautiful in Photoshop, changes to structural issues can quickly turn into massive headaches. Moving things around in a wireframe is super simple.
How to start wireframing
Starting to wireframe websites can range from something as simple as sketching layout ideas on a napkin to using more advanced wireframing software, such as OmniGraffle for OS X users or MS Visio for Windows users. Other options include graphing paper, which helps make straight and measured lines, or web-based options such as Mockingbird or Balsamiq Mockups.
The important thing is to focus on the strategic why while you sketch things out, and not on what shade of blue you'll use or what technology you'll use. Usually website designs that have been "wireframed" turn out simpler to design and easier to use.
Conclusion
Taking time to wireframe your website can save time and headaches further along in the website design process for both you and your clients. On your next website, put a wireframe in front of your client and work together on strategic design decisions before jumping in front of Photoshop. You may be happy with the results.