An Introduction to Wireframing

3 March, 2011

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

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.
http://balsamiq.com/products/mockups

Mockingbird

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.
https://gomockingbird.com/

Cacoo

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.
http://cacoo.com/

Pencil Project

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.
http://pencil.evolus.vn/en-US/Home.aspx

Further Reading

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
http://thinkvitamin.com/design/20-steps-to-better-wireframing/

35 Excellent Wireframing Resources - Smashing Magazine
http://www.smashingmagazine.com/2009/09/01/35-excellent-wireframing-resources/

Ultimate Guide to Website Wireframing - Six Revisions
http://sixrevisions.com/user-interface/website-wireframing/

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.

5 Comments

Andrea at ProtoShare
16th October 2017 at 9:16am

Hi Nik,
Nice, straightforward post on wireframing! For anyone new to the best practice, this is a great article and explains clearly why we wireframe.

ProtoShare is another wireframing and prototyping application that has also been around a few years now. And actually, we just launched an all-new product on Monday: ProtoShare 5.

ProtoShare 5 is web-based built in HTML, Javascript, and CSS. What's nice is that you can evolve your simple wireframes into more complex prototypes, depending on your project's needs. All the while, you can share your work with team members or clients to gain their feedback directly in the app for the collaboration benefits you mentioned above.

I recommend people taking a look; it's very different from previous versions.

Best,
Andrea
@ProtoShare

Post reply
Nik Gill
16th October 2017 at 9:16am

Thanks for sharing Andrea, I'd not heard of your software, but looks like a nice solution, best of luck with it

Post reply
Kerry Moran
16th October 2017 at 9:16am

I hate doing wireframes, but without them I'd be screwed.

Post reply
Nik Gill
16th October 2017 at 9:16am

Definitely, I've always done a simple wireframe myself on paper up to now, as I've always preferred laying content out before designing. Thankfully with software (I use balsamiq) the process is twice as fast and a whole lot less scrawly ;)

Post reply
Mark Petherbridge
16th October 2017 at 9:16am

I really like the Balsamiq wireframe app: http://balsamiq.com/ - built in air but I think they are developing a web based one too.

@mgpwr

Post reply
Mary
16th October 2017 at 9:16am

Nik, have you used Lucid Chart? Didn't see it on your list but it's what I've used for some pretty intense wireframing and I recommend it to any designer.

Post reply
Nik Gill
16th October 2017 at 9:16am

Hi Mary, I'd not come accross that one before, but thanks for letting me know, seems to be a nice little package. There's so many available it's hard to keep track!

Post reply
Sarah Rogers
16th October 2017 at 9:16am

Thanks so much for this, I had been doing sketches and it is very time consuming.

Post reply

Leave a comment

Replying to: - Cancel