blog

The Fine Art of Wireframing

August 17, 2009


Wireframing is the first step in the web design process. It is also the least known and talked about. Along with a sitemap, wireframes lay the groundwork for building a solid website. So, to give wireframes some much needed respect, in this post I’ll share my own process for designing wireframes and illustrate some examples. I’ll also talk a bit about the current trends and wireframing best practices. And finally I’ll mention some of the tools I use to produce rockin’ wireframes.

What’s the importance of using wireframes? For one it is an essential tool of Information Architecture because it establishes the hierarchy and relationship of informational elements displayed on a web page. Secondly, not only do wireframes crystallize the design and information behind a website, they are also a huge time saver in the development process. Just like the blueprints for a building, wireframes act as the structural blueprints for a website. Each web page wireframe can be likened to a floor blueprint in a building. If you think about it, it’s not much different than that, conceptually speaking of course.

Because few people outside the web design industry know about wireframes, wireframing is both an art and a science. And even among web professionals it’s almost an esoteric subject. When I was in design school I only touched wireframes lightly, yet it’s one of the most important pieces of the web design puzzle. And until recently, this part of the process was usually not well documented in web design books. It was either that or the literature was too technical for web designers and geared towards software engineers. This is because wireframes got their start in the software industry. So as a web designer, I had to fend for myself and pick up this knowledge as I gained experience designing bigger and bigger websites. When I started my web design career I did some projects without wireframes, and to be honest, a five page website can survive without wireframe support. But if the project is a bit more complex it’s crucial to spend a good deal on this aspect.

So how does one go about making wireframes? There are many ways to do this, and every web designer and information architect has his own process and style. In the next few paragraphs I’ll cover the simple process I developed over the years. And one that has served me very well in my web design career.

Sketch

To start things off, I sketch. Using the sitemap as the guide, I lay out all my ideas in a notebook and after spending a few hours I revise. I try to fill as many pages as I can with sketches of all the web pages for a site in progress. In this part of the process I freestyle and hold nothing back. I complement my sketches with notes, arrows and pointers; any kind of additional information and complementary idea that will make my design clearer to understand. All digital designs start in the mind, and facing a computer screen with a blank stare can make things more difficult. That’s why I like to use pen and paper before clicking the mouse. It breaks mental inertia and by the time I hit the computer screen my mind is bubbling with ideas. There’s also something about the organic process of sketching that frees me and allows me to think differently than I would if I were focusing solely on digital media. So sketching is always a great starting point.



Tools

Once all the final sketching is done for every single page I fire up the computer. When it’s time to design the sketches digitally my software of choice is Adobe Illustrator. I used Visio a bit in the beginning, but never caught on since I’m a Mac fanatic. Visio is one of the most popular applications for designing wireframes. And it is the preferred tool for software engineers. Other options are Balsamiq, Omnigraffle for mac, and any other vector program in the market. I also know that Adobe InDesign is gaining popularity as a wireframing tool because of its nifty paginantion property. The important thing here is to choose a tool that gives you the power and capability to design wireframes as you like, and most of all one that you’re comfortable and familiar with using.

Digital Synthesis

When creating the wireframes digitally I get more organized and polished with my ideas. At this point I have to hammer out the final structure of the information that will be presented on the site, page by page. But this does not yet involve the visual layout, so let’s not confuse one with the other. The visual design and layout comes right after this stage. Many times clients start to pick things apart visually without understanding that the actual look and feel is not yet present; the wireframes are the bare bones, the skin comes next. I sometimes tend to make this mistake too, since I’m a visual person by nature I automatically see the color and fonts and graphics for a site when I’m in the wireframing stage. But doing this usually stalls the process. Sometimes it’s helpful if some new insight is produced which will enhance the presentation and layout of the page. If not, it’s not recommendable to go down that path. So I separate structure from presentation in my mind, and on the wireframe.

Structure

I group my information into blocks or components. The branding block, the header, the main navigation, the secondary navigation, the main content, the secondary content, the footer, and any images that may be distributed around the page. These are the basic informational elements present in most standard websites. Depending on the project scope, I also include additional elements such as a Flash component, or an ad banner. Four of the basic components are ubiquitous and appear on every single page without any modification: Branding, Header, Main Navigation, and Footer. So I place these in the Background layer. I group each additional section into a layer and display as needed. So the home page goes into a separate layer, the contact page into another, and so forth. I also color code the elements so it’s easier to understand, and display a key or legend at the bottom of the page for clarification purposes. Next to the key I also include the name of the client, the name of the page, and the date in case revisions are made.





Putting it all Together

Once it all comes together the results are well worth the effort. It’s very useful to have a structural reference by the time I hit the visual design phase of the project. Working with wireframes side by side is a huge time saver and it allows me to focus. This is because most of the structural layout decisions have already been made, and I’m only concentrating on the visual aspect. It frees my mind to focus on the pretty stuff. It’s a great foundation to start from and my work as a designer is half done.

To end this post on a dramatic note, next time you design a 15 page website, think of it like designing a 15 story building. Without the proper planning and foundation in the wireframing phase your structure can come crumbling down somewhere along the way. It’s best to be safe and build a solid foundation for your website using thoroughly designed wireframes. I also leave you with a great wireframe reference I found on Tumbler called I Love Wireframes. It may come in handy next time you start the wireframe phase of a project, and it also helps to see what others are doing in this regard.

10 Responses to “The Fine Art of Wireframing”

  1. Thanks for a comprehensive, well-described post on wireframing!

    If you ever need to incorporate remote team members or clients during the wireframing phase, I recommend ProtoShare. It is web-based so it works on Mac and PC and it allows team members to interact with and discuss the wireframes in a single location. You can also pull in live websites to discuss a redesign or review a work-in-progress.

    You also present some great wireframe examples - just enough detail to know what is going on, but only presenting the areas that are of most importance.

    Cheers,
    Andrea

  2. Marisol

    Impressive!!

  3. Desiree

    This is one of your most inspiring blog posts.

  4. Hello. I simply want to declare that what you share here is really good post so I have post http://maquinastudio.com/blog/2009/08/the-fine-art-of-wireframing on my Twitter profile so everybody can have the chance to enjoy. I was glad when I saw this tittle, The Fine Art of Wireframing | Maquina Studio, in my google search, and i was so becouse finally I found what I was looking for. My regrds

  5. I got what you intend, thankyou for posting .Woh I am glad to find this website through google.

  6. Alon

    Awesome insights, nice styles, being a designer myself I tend to want to work in Illustrator for wireframing while my boss insists using a wireframing app like gomockingbird.

    With your insights and techniques I think I may just be able to lean him over to the other direction :)

Leave a Comment

Get FREE WordPress Theme

Sign up below to receive our occasional newsletter. You'll also get a FREE download of our premium WordPress theme SPARTA, a clean and minimal theme for your online business ($80 value).


FREE WordPress Theme Sparta
latest posts
sites we like flickr photo stream