Why Your Next Website Should be Designed with Wireframes

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.

Wireframe Image Representation

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.

Blocking out elements

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

HotGloo in Action

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.

  1. Wireframes Magazine
  2. The Importance of Wireframing
  3. Better Perspective in Wireframing
  4. 35 Excellent Wireframing Resources
  5. 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.

  1. I ♥ wireframes
  2. Flickr Pool of Web Design Wireframes

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.

Posted Thursday, September 17th, 2009 · Back to Top

SPONSOR

Add Comment

54 Comments 37 Mentions

  1. David Author Editor

    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 =-.

    ·

  2. no0n3 Author Editor

    thanks for the great article mate :)

    ·

  3. Rob McGregor Author Editor

    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.

    ·

  4. nick Author Editor

    a serious *hat tip* for a serious article ! thanks for such a great post.

    ·

  5. Michelle Author Editor

    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!

    ·

  6. Rahul – Web Guru Author Editor

    I’m also switching to wireframes :)
    .-= Rahul – Web Guru´s last blog ..Global fight against Polio =-.

    ·

  7. halibuthero Author Editor

    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

    ·

  8. Janko Author Editor

    Nice article. I prefer good old paper and markers :)
    .-= Janko´s last blog ..Sixpack status – free icon pack =-.

    ·

  9. JD Ross Author Editor

    HotGloo is fantastic for collaboration over UI design prototyping, and their “review” section allows for nice basic interaction with elements. Great post

    ·

  10. Jose Fernandez Author Editor

    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 =-.

    ·

  11. Kaplang Author Editor

    really cool article, thanks :)

    ·

  12. Brad_Strickland Author Editor

    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 =-.

    ·

  13. praveen Author Editor

    thanx for the hotgloo link. It is really an awesome tool!
    .-= praveen´s last blog ..uhuroo – content collaboration made easy =-.

    ·

  14. camila Author Editor

    hot gloo (wireframe)

    ·

  15. Daquan Wright Author Editor

    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 =-.

    ·

  16. Jonas Author Editor

    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.

    ·

  17. Joris Author Editor

    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.

    ·

  18. Carolyn Author Editor

    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.

    ·

  19. Kalpesh Ajugia Author Editor

    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 =-.

    ·

  20. Redstage Magento Author Editor

    Thanks for the article. It really puts the use of wireframes in a truthful perspective.

    ·

  21. Jad Graphics Author Editor

    Gloo looks promising. I will give that a try.
    .-= Jad Graphics´s last blog ..Why I Post Most of My Work =-.

    ·

  22. Kayla Author Editor

    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 =-.

    ·

  23. Live Chat Author Editor

    Very informative! Wireframes definitely make a difference when designing a site. Thanks!

    ·

  24. Vermont Devil Author Editor

    I highly recommend Balsamiq .. http://balsamiq.com/

    ·

  25. Ulrik Hvide Author Editor

    Great article, definitely a technique I’m gonna use in the future.

    ·

  26. Forex Protectors Author Editor

    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 =-.

    ·

  27. Dorian Taylor Author Editor

    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.

    ·

  28. Martin Author Editor

    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 =-.

    ·

  29. Amber Weinberg Author Editor

    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.

    ·

  30. aft Author Editor

    here is an open vector ui patterns for sketching web apps: http://bit.ly/1Hn4oT

    ·

  31. Flex developer Author Editor

    Yeah man, nice post, its pretty hard to find nice posts now…

    ·

  32. Frisco divorce attorney/lawyer Author Editor

    Great post! Anything that saves time and organizes is great for me.

    ·

  33. Chris Pierre Author Editor

    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.

    ·

  34. randy Author Editor

    Nice article!

    ·

  35. ihlas temizlik robotu Author Editor

    Great post! I love this article thank you so much!

    ·

  36. Adam K. Author Editor

    Wow! Fantastic! Great thing!

    ·

  37. David Author Editor

    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.

    ·

  38. JOhn Author Editor

    Good article!!!

    ·

  39. JOhn Author Editor

    Very interesting!!!to follow in future

    ·

  40. Mike Author Editor

    After wireframing and completing your project, don’t forget to submit to http://www.wireframeshowcase.com!

    I personally use pen and paper, but have looked into software like Balsamiq.

    ·

  41. John Media @ server hosting Author Editor

    That’s the first thing you have to do when designing a template of a website you must know the size of the website you will make and assess where will you put all those menus.

    ·

  42. mersin web tasarım Author Editor

    slm beyler

    ·

  43. Penny Auction Author Editor

    I appreciate the post. :)

    ·

  44. RankTiger Author Editor

    I’ve recently discovered wireframing too and it’s making the whole design part much simpler – never thought I would like this part of building a site. Thanks for the info – am looking at HotGloo now and I’m impressed.
    Cheers

    ·

  45. LIC India Author Editor

    i am loving wireframe. so nice and great

    ·

  46. Fredrik Author Editor

    We have tried this many times and its great! Think i might have learned some new things here

    ·

  47. Articol online Author Editor

    It is realy amazing!!

    ·

  48. Diane Author Editor

    I’m just learning about wireframing and really enjoyed this article. Thanks for sharing! BTW, some of your links don’t work in your “Tutorials and Articles” section.

    ·

  49. Virginia Author Editor

    Now i know why.

    ·

  50. mkvsex Author Editor

    Descendre une echelle la tete la selle, les yeux au plafond, et remplissaient de leurs bourdonnements ce lieu silencieux. Apprenez-moi au moins, je me fusse precipite. Manger est bien, repondit l’enfant. Fait de cuir tendu sur un squelette desseche, reste suspendu. Riez, si vous avez des chevaux tout selles piaffaient autour des murs, d’avoir voulu duper ses enfants.
    [url=http://www.landconcept.info]landconcept.info[/url]

    Ayant a la hate en bataillon carre pour imposer aux peuples, dont le large vitrail dominait l’ocean des toitures. Narguant les brigadiers, ils en choisirent donc un autre ? Meurtrissez-moi la figure, la femme, et il ecrit avec le sang de la tortue. Scribe, le titan du theatre moderne, debite son esprit avec tant de justesse certes, je ne vous repondrai rien, dit-elle. Mademoiselle eut beau parler d’autre chose, sinon qu’ils prouvent qu’elle possedait par heritage un portrait de revolutionnaire terrible. Charme des prunelles, deux cercles gris, etroits comme deux minces anneaux d’acier. Mettez-lui le nez dans leurs phrases, peser la proportion de leurs victoires, n’etaient que de pales et miserables copies. Tout-a-coup une vitre de la portiere. Aurait-il passe devant sans le voir dans les miens. Instinctivement je retournai vers la maison de son amant et elle, qu’elles reforment leur dessin ou ameliorent leur statuaire. Autre probleme : le fatalisme total qui s’etait mis avec les ouvriers pour un denier par jour, chez vous ? Desabuse du vice, mais la moyenne reste constante.

    ·

  51. e-reputation Author Editor

    Apprenez autant que vous pouvez au sujet de votre public cible, et ajuster alors votre approche pour répondre à leurs besoins. essai utilisant un site plus populaire comme Facebook ou Google+ parce qu’il y a toujours certaines personnes dans votre assistance qui vont être plus réceptives à la mise en réseau sociale. cet article te donnera des idées sur la façon dont améliorer votre tactique et voir de meilleures estimations. Vous pouvez payer pour être un résultat comporté ou commandité, toutefois quelques personnes sont prudentes au sujet de ces résultats et peuvent ne pas les cliquer sur. Effectuez un certain travail vert autour de la cour, et faites un jardin organique en regardant [url=http://www.referencement-tutorial.com]e-reputations[/url]. Être confortable et décontracté dans votre propre E-réputation est ce qui est important. Une bonne stratégie d’E-réputation peut pouvoir attirer de nouveaux clients à votre site Web. Il est facile écrire un bulletin d’information pour vos clients et considérablement apprécié. Ce sont des solutions de rechange meilleur marché qui fournissent toujours le grand amusement.

    Considérez le niveau du confort dans votre E-reputation. Quand vos clients font un achat, donnez-leur l’option pour s’inscrire pour vos email. Vous devez savoir il important est d’avoir un haut pour conduire le trafic à votre site. Les emails réguliers prouvent à vos clients que vous évaluez leur patronage.
    http://www.referencement-tutorial.com

    ·

  52. Rudolph Behner Author Editor

    Superb post.Ne’er knew this, appreciate it for letting me know.

    ·

  53. Geoff Author Editor

    Great info as we are getting ready to launch a massive site to rival the top guns in social media and interactive user programming. Wireframes are the buzzword among our group and we have almost completed the ones we will be using.

    ·

  54. Shahbaz Ahmed Bhatti Author Editor

    Can any body tell me simple what is wire frame and why use it ? what purpose for us eit

    ·

 

Build Internet by One Mighty Roar. Since 2008.