An Introduction to Wireframing

Whether you're just getting started in web design or you're a seasoned pro, the concept of wireframing must either be something you're familiar with or been hearing a lot about recently. In this article, we'll take a brief look at what wireframing is and how you and your clients can benefit from encorporating a wireframing stage into your workflow.

WHAT IS A WIREFRAME?

Unless you've been living under a rock, you can't have escaped this term. Wireframing has definitely become a buzzword in the last 1-2 years and many people, including myself, have now incorporated the wireframe stage into their normal project workflow. At its bare minimum a wireframe can be a loose guide to content and layout, and at its height can be a skeletal layout with clickable links and multiple pages to really demonstrate the user experience (UX) of a page or site.

Many of you probably wireframe your designs without even realising, those rough sketches and layout scrawls on notepaper serve exactly the same purpose. Modern wireframing takes this concept to a new level, and with software, these sketches can be created and edited with ease on screen. Multiple pages can be created and navigation buttons linked can serve as a great basis for showing how a website will work and how the user can interact with it.

WHY SHOULD YOU WIREFRAME?

When designing a site for maximum usability, planning is one of the most important phases in any web development. Put simply, a wireframe can eleminate a huge amount of potential issues with a sites layout before any design is done. Spending some quality time arranging content in a readable and usable manner in your wireframes can save you hours later in the design process when correcting such issues is a far more time consuming proposition. A good wireframe can also show the best positions for key shouts and calls to action.

GETTING CLIENTS INVOLVED.

Client feedback can be one of the most important and rewarding stages of wireframing, the hours saved by getting the layout and user experience right prior to design are invaluble and shouldn't be overlooked. Demontrating the usability of a site and getting client feedback on how the design works is now a very important step in our web design and development process.

WIREFAME SOFTWARE

The good news is that, in the last year or so, the wireframe software market has expanded and there is now more choice than ever for the task in hand. Ranging from standalone applications to browser based web apps. I'll detail a few of the better ones here.

BALSAMIQ