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.
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.
The granddaddy of wireframing apps, Balsamiq is available as a standalone app, built on adobe air and costing $79. As its built on Adobe Air, its availble on both Windows and Mac. Balsamiq has thousands of satisfied users the world over, and due to its wide range of UI elements and ease of use remains ever popular.
Quite new to the party, mockingbird is a web app which runs fast and has huge amount of predesigned elements enabling you to wireframe even the most technical site with ease. Use of the mockingbird web app is via monthly subscription service which starts at $9 for 2 active projects and rises to $85 for unlimited projects. The system is powerful and when you have no active projects in your dashboard you don't pay the monthly bill.
This is another web app along the same lines as Mockingbird but also has the added effect of differnt drawing themes, from straight lines and deliberate content to sketchy and loose. Multple users can also open and edit the same wireframe at the same in real-time. Certainly a feature that could be really useful to large project teams with some working remotely. Yearly subscription to the service costs $49 and there is a free account which limits you to 2 projects and PNG export.
Pencil project is a free and open source plugin for Firefox or as a standalone app run through XULRunner. This is definitely one for the programmers and those that like to get their fingers dirty. Less seasoned users should probably stay clear.
Been inspired to learn more? we'll be following up this article in the coming months, but for now here's a few links to some very useful wireframing articles and resources
20 Steps to better Wireframing - Carsonified Think Vitamin
35 Excellent Wireframing Resources - Smashing Magazine
Ultimate Guide to Website Wireframing - Six Revisions
Got any tips or stories you want to share?
Please feel free to post them in the comments, we'd love to hear about the software you're using or how wireframing fits into your design workflow.