Why Your Next Website Should be Designed with Wireframes
Getting a design to click can take time. In many cases, it takes several rounds of revisions to even get to an effective starting point. What can you do to give yourself a better chance at designing something great sooner?
In this article, we’ll take a look at a pre-design process known as wireframing. It’s used by designers to help define a website’s essence before working on the time consuming details.
This a long post, and it may take you more time than usual to read through. But I promise that if you stick with it, you’ll make that time back over and over with the amount saved in future design process. You’re a busy person, so let’s get started.
What is a Wireframe?
Chances are that you’ve already done a wireframe before without even realizing it. It might have been in the form of a rough doodle in the margin of a notebook or a series of boxes in Photoshop, but the principle is the same. You’ve simplified a website design down into fundamental elements and shapes.
A wireframe is breakdown of a website layout into simple shapes and text to represent unique elements. This allows a designer to plan a site without having to worry about anything but the size, proportions, and arrangement. Details in the design is not the focus of a wireframe.
The Difference from Site Maps
It’s important to remember that even though both part of planning stages, a wireframe is not the same as a site map. A site map helps plan links by showing how pages relate to each other. The wireframe takes that one step closer by individually plotting page content.
Wireframes separate the design from the structure. This is important, because we often blend the two together in the opening stages of a new project. Design is the aesthetic of a sidebar, where structure is the positioning of it.
Why Do Wireframes Matter?
Laying out a site in simplest terms makes focusing on the usability intuitive. With gray boxes representing complex elements, you’re less likely to get distracted by a visual nuance that might not even be in the final product.
Bringing focus back to the basics is a wonderful asset to productivity in web design with clients. It’s less overwhelming, and allows the designer to guide the client’s attention to the task at hand.
The only thing needed to start a wireframe is general idea. This means that you can start building before receiving any content from the client.
They Organize
By displaying the flashier elements of a site in terms of grayed out boxes, you’re making it easier to arrange objectively. Layout becomes an exercise in spacing and grouping rather than contrast and color palettes.
When you’re ready to bring the layout to a full Photoshop composition, you’ve already got a blueprint to design over. With some forward thinking, you’ll have a lot less measuring to do. Discovering at the last moment that your entire design is physically impossible is highly overrated anyway.
They Simplify
Wireframes strip away the extra thought and intricacies of “3 pixels further right” when getting started. It’s easier to plan a slideshow when you only have to worry about positioning.
Wireframes are easy to present because they’ve stripped away many of the “preference” elements. By breaking a layout into the fundamental building blocks, you’re more likely to discuss about the font placement than the font choice.
They Save Time
“But spending time doing wireframes add an extra step!” This is not entirely true. Which of the following would take longer? Putting together a full design in Photoshop? Or drawing out a series of monochromatic boxes?
After slaving over a design for hours, few things are more frustrating to a designer than hearing “I don’t like this direction” from the client. It’s a major setback, and in many cases, it is avoidable with some basic discussion on layout before producing a near-finished design.
Build Your Own Wireframes Online
Digital wireframes are the step between a rough sketch in a Moleskine, and a full mock-up in Photoshop. They translate a hand drawn design into an almost pixel perfect scale model of the final page.
It’s not easy finding a tool that allows you to quickly build wireframes on the computer. I’ve read similar posts with a dozen links to possible tools and web apps showcased. Your time is valuable, so I’m going to save you the trial and error by just recommending one.
Meet HotGloo
Keep in mind: This just is an enthusiastic recommendation from personal experience. There is no partnership nor sponsorship between Build Internet and Hot Gloo.
Even though I just came across it in the past month, Hot Gloo is one of the nicest web-based wireframe builders out there. I’ll let the company’s elevator pitch summarize it further:
HotGloo is designed by IA’s for IA’s. With the help of the elements you can create a whole world out of wireframes. Just drag and drop, scale, link, name and rename them – it’s super easy and intuitional.
Their servers host all wireframes, so sharing work with clients or fellow teammates is incredibly easy. You are also able to add users with “Editor” or “Reviewer” roles to each project. The allows them to participate and add notes directly on the layout at any time.
I’ve attached a video below which demonstrates the editor’s basic functions. It’s a little small, but it should give you a general idea of what Hot Gloo is about.
Hot Gloo is still in Beta at the moment, so the service is completely free (for now). Take advantage of this and challenge yourself to use it on your next web project. It will go much smoother.
Examples and Inspiration
I’ve picked out several examples of good wireframes from the I ♥ wireframes Flickr pool to showcase below. You can click on an image to see the full size author page.
How to Get Started
Do you think that wireframes could help revolutionize your workflow? If you’re interested in learning more, I’ve compiled a series of links that are a great next step into the world of wireframes.
Tutorials and Articles
A recommended reading list for learning the process and logic behind wireframe design.
- Wireframes Magazine
- The Importance of Wireframing
- Better Perspective in Wireframing
- 35 Excellent Wireframing Resources
- The Importance Of Wireframes In Web Design And 9 Tools To Create Wireframes
Examples and Inspiration
Unsure of what makes a good wireframe? Refer to these links as inspiration of good wireframing.
Share Your Experience
Have any wireframing tools that you couldn’t live without? Has designing with wireframes made client work easier? We’d love to hear your experience in the comments.
Discussion
September 17th, 2009 at 9:51 PM
I completely agree. Ever since I’ve been using wireframes I’ve found designing to be a whole lot more fun.
.-= David´s last blog ..Goldfish Attention Span – Engaging And Keeping Your Audience =-.
September 18th, 2009 at 4:05 AM
thanks for the great article mate
September 18th, 2009 at 7:34 AM
Been doing this forever… however, never seen it laid out bare and clear like this. Bang on the button. Will help a lot of people and made me review how I had contaminated my way of doing ‘wireframe’ design.
Good one.
September 18th, 2009 at 8:54 AM
a serious *hat tip* for a serious article ! thanks for such a great post.
September 18th, 2009 at 10:12 AM
Can’t wait to get started with this. I’ve been curious about wireframes, and this is a great explanation. I wish I read this 6 months ago! Thanks!
September 18th, 2009 at 3:11 PM
I’m also switching to wireframes
.-= Rahul – Web Guru´s last blog ..Global fight against Polio =-.
September 18th, 2009 at 3:24 PM
A combination of wireframes and a site map is indeed the fastest way to go about organizing the website’s content.
Has anyone used iPLOTZ for their wireframes?
iPLOTZ
September 18th, 2009 at 5:17 PM
Nice article. I prefer good old paper and markers
.-= Janko´s last blog ..Sixpack status – free icon pack =-.
September 18th, 2009 at 5:43 PM
HotGloo is fantastic for collaboration over UI design prototyping, and their “review” section allows for nice basic interaction with elements. Great post
September 18th, 2009 at 7:59 PM
I have also used Gliffy, another decent web-based app, but in general I’m wary of online tools. I don’t like losing control of the format my data is stored in.
You linked to several articles which include desktop tools, so thanks for that. I had a heck of a time trying to find some previously. I will check them out
.-= Jose Fernandez´s last blog ..Top X List of Y =-.
September 19th, 2009 at 2:36 AM
really cool article, thanks
September 19th, 2009 at 8:15 AM
Good article. I’ve gone back an forth on including wireframing in my workflow. I think I’ll try it now on my personal website redesign.
Thanks for the information.
.-= Brad_Strickland´s last blog ..10.6.1 is Out =-.
September 19th, 2009 at 2:27 PM
thanx for the hotgloo link. It is really an awesome tool!
.-= praveen´s last blog ..uhuroo – content collaboration made easy =-.
September 19th, 2009 at 8:12 PM
hot gloo (wireframe)
September 19th, 2009 at 11:20 PM
Yes, something I will do for every website I make from now on. It’s just smarter to do a simple blueprint rather than a full design and have to do another full design which costs more time. Repeat wireframing the first time and save yourself time and money.
.-= Daquan Wright´s last blog ..Update =-.
September 21st, 2009 at 7:33 AM
Good article! Except from simple sketches, I´ve been using Open Office Draw to create wireframes for every template. Man, it saves some serious amount of time.
September 21st, 2009 at 12:32 PM
I must say that I completely with the contents of this article. The tip tool that you gave in the article looks really interesting. It’s a bit slow though, but still very useful. Would be nice to run such an application on my own server instead.
For now, I have been using Omnigraffle. But it’s only for the Mac and not all of my partners have a Mac. I prefer to use one and the same program to create Wireframes.
September 21st, 2009 at 3:14 PM
A+ article. Couldn’t agree more!
I use OmniGraffle for both wireframes and site maps. I’ve saved a considerable amount of time by plugging in stencils and simplified graphics available at Graffletopia (free.)
Wireframes truly make designing a site better.
September 22nd, 2009 at 6:18 AM
This is truly going to help a lot. Nice article and nice that I got to read it!
- Pixellicious Photos
.-= Kalpesh Ajugia´s last blog ..The day God played holi =-.
September 22nd, 2009 at 5:15 PM
Thanks for the article. It really puts the use of wireframes in a truthful perspective.
September 23rd, 2009 at 7:56 PM
Gloo looks promising. I will give that a try.
.-= Jad Graphics´s last blog ..Why I Post Most of My Work =-.
September 24th, 2009 at 3:08 AM
I just recently discovered the I Love Wireframes website, and am now a regular follower. A bit of inspiration on the subject really helps!
I don’t believe enough new designers use wireframes at first, but I can say first hand that once I began focusing on them it improve both the quality of my finalized designs and quickened my workflow literally by hours!
.-= Kayla´s last blog ..75+ Marvelous Hand-Picked Navigation Menus =-.
September 24th, 2009 at 1:22 PM
Very informative! Wireframes definitely make a difference when designing a site. Thanks!
September 27th, 2009 at 9:32 AM
I highly recommend Balsamiq .. http://balsamiq.com/
September 27th, 2009 at 9:33 AM
Great article, definitely a technique I’m gonna use in the future.
September 27th, 2009 at 9:37 AM
I’m just about to launch another financial site with a completely new Web 2.0 look and I think wire frames are now going to be a huge part after reading this article. Who says stumbling out of bed early on a Sunday doesn’t have it’s benefits! Nice job Zach, you just made my day.
.-= Forex Protectors´s last blog ..Forex Protectors Signal for September 23, 2009 =-.
September 27th, 2009 at 2:34 PM
If you’ve read Sketching User Experiences, I think in it Bill Buxton makes an extremely important point. The clumsy lines of a sketch are evocative rather than didactic like the hard lines of computer output. The hazard I see in doing mockups — even wireframes— too soon is that they still communicate that hard didactic edge. It says to clients and stakeholders “I am a colouring book. All I need is a flood fill and we can be up and selling.” (And no, Comic Sans and pretend Sharpie don’t quite substitute, especially with grid and guide snap — it kind of misses the point.)
Further, wireframes still take significantly more time than a pencil and paper (unless you’re moving lots of stuff around, in which case I recommend post-its and/or scissors, and avoid your $20 Moleskine for this). Even if you’re using a wireframing tool-du-jour like Axure or Balsamiq, or something like Omni or Visio. If you’re using Illustrator, good luck.
Finally, I see a lot of wireframes with Lorem Ipsum all over the place, even in microcontent. There is talk among IAs and content strategists that when interfaces are designed (even wireframed) with mock content, they sometimes mismatch when the real content comes along (my commentary).
I recommend more sketching and paper prototyping and less wireframing; the latter is no substitute for the former. There is a time and a place for wireframes, but that time is when we’re telling, not asking.
September 28th, 2009 at 7:44 AM
im kinda confused, i love wireframing ever since i started designing – its easier and boosts creativity when using pen and paper, in the same time id like to do it on screen…
.-= Martin´s last blog ..Toormix New Papers =-.
September 28th, 2009 at 11:14 AM
Good tips, I actually do this first thing in Photoshop, before I start adding colors, graphics, etc…It’s basically like using a grid in print.
September 29th, 2009 at 2:43 AM
here is an open vector ui patterns for sketching web apps: http://bit.ly/1Hn4oT
September 30th, 2009 at 10:36 AM
Yeah man, nice post, its pretty hard to find nice posts now…
October 13th, 2009 at 11:09 AM
Great post! Anything that saves time and organizes is great for me.
October 30th, 2009 at 5:23 PM
Great Post,
Developing Wireframes can really increase productivity and It makes things much easier for the designer and give him the basic outline or blueprint to start off with.
December 19th, 2009 at 5:14 AM
Nice article!
December 22nd, 2009 at 2:56 AM
Great post! I love this article thank you so much!
February 2nd, 2010 at 8:15 PM
Wow! Fantastic! Great thing!
March 3rd, 2010 at 5:40 AM
Couldn´t agree more and even more than just “simplify, organize and save time” i´d add “improve communication between IT & non-IT literate people”! A wireframe is worth a 1000 words. Personnaly I use Justinmind Prototyper to wireframe dynamic and interactive websites.
Join the Conversation!
Remember: Life's not all doom and gloom, so please keep it constructive. If we've made an error or missed something big, please let us know! Learning is revisions, after all.