Using Wireframes to Streamline Your Development Process

Creating a wireframe is one of the first steps you should take before designing a website.

A wireframe helps you organize and simplify the elements and content within a website and is an essential tool in the development process.

A wireframe is basically a visual representation of content layout in a website design.

The wireframe acts as a prototype that shows the placement of page features, such as header, footer, content, sidebars, and navigation.

It also specifies the placement of the elements within these content areas. If you want to develop a site that accurately matches the client’s requirements and minimize project revisions, wireframing will keep you on track.

 

Benefits of Wireframing

Creating a wireframe gives the client, developer, and designer an opportunity to take a critical look at the structure of the website and allows them to make revisions easily early on in the process.

Wireframing brings the following key benefits:

  • It gives the client an early, close-up view of the site design (or re-design).
  • It can inspire the designer, resulting in a more fluid creative process.
  • It gives the developer a clear picture of the elements that they will need to code.
  • It makes the call to action on each page clear.
  • It is easy to adapt and can show the layout of many sections of the website.

 

Tools for Wireframe Development

You have many tools to choose from when creating a wireframe:

  • Hand sketching on paper is always a good starting point for any designer. It provides a quick and easy way to focus and organize. If you’re very precise with sketching, you could even use this as your final wireframe. (See Figure 1.)
  • Flowchart or mind-mapping software, such as Visio. These software options come with pre-packaged elements that allow you to easily create flowchart representations of your wireframe.
  • Web prototyping software, such as Gliffy or Balsamiq. Tools like these were created especially for the purpose of generating wireframes, and they have easy-to-use prototyping capabilities.
  • Graphics software, such as Photoshop or Illustrator. The benefit of using these tools is that the wireframe can then be converted directly into a graphic mockup of the website’s design; however, the downside is that you will have to create all of the elements by hand.
  • (X)HTML wireframes are almost like actual sites themselves. You can lay out the wireframe with code before applying the styles, or you can create a fully styled, high-fidelity layout that looks a lot like a final design. (See Figure 2.)

Ultimately, the developer or designer should select the tool they prefer. Personally, I use Photoshop because I like the way it organizes the process and how easily I can convert the file into a mockup.

 

Wireframe Example

The level of detail in a wireframe depends on several factors, including: how much direction and content the client has provided, how complex the content is, how far along in the process you are, and how much detail you’d like it to include.

Here are examples of wireframes that were created using different tools and exhibiting different levels of detail and color:


Figure 1: This simple wireframe sketch for the Coastal Capital Partners website (now renamed Broad Reach Retail Partners) was used to create graphic mockups and, eventually, the final design. By Mike Rohde.


Figure 2: Very low-fidelity HTML wireframe. Useful for demonstrating what a site will look like before the styling is added. Very helpful to visually impaired users.


Figure 3: Low-fidelity wireframe for the Embrace Pet Community, by Jesse Bennett-Chamberlain of 31Three.


Figure 4: A preliminary mockup of a social conferencing tool built on Tiddlywiki for use at Le Web 3. The notes to accompany it are at tiddleleweb.tiddlyspot.com. Wireframe by Phil Hawksworth.



Figure 5: This one is based on advanced use of a blog publishing system (WordPress). By Mattheiu Mingassson or Activeside Internet Strategies and Consulting.


Figure 6: A wireframe for the Embrace Pet Community, by Jesse Bennett-Chamberlain of 31Three.


Figure 7: A wireframe with color and images. Author page wireframe by Bokhandel.



Figure 8: Another wireframe with color. By Mattheiu Mingassson of Activeside Internet Strategies and Consulting.

 

Best Practices

To achieve optimum results, here are several important things to keep in mind when developing a wireframe:

  • Simplicity. The key is to keep it simple enough to be clear to the client and to be flexible for the designer, but detailed enough to guide the programmer. As mentioned, you could create a high-fidelity wireframe, but doing this early in the development process could be confusing for the client, who may mistake it for a final draft.
  • Work in grayscale. When creating elements for a wireframe, it’s best to work in grayscale so that you can focus on the layout without being distracted by the design. If you have been given a full-color logo, convert it to grayscale as well. To distinguish between and categorize various elements, show shapes and outlines in different shades of gray.
  • Use wireframes in tandem with a sitemap. A wireframe is a visual representation of a good sitemap, not a replacement. A sitemap is a useful tool for any website and would definitely be helpful to refer to during the development process.
  • Focus on the desired outcome. Have a clear understanding of how your client wants users to respond to the page before creating your wireframe. The calls to action should be very clear simply from looking at the wireframe.
  • Create a full-sized wireframe if it is for a website. This will give the most accurate representation of the actual page.
  • Plan the elements by securing the content in advance. In a best-case scenario, your client will have already supplied you with the elements that should appear on each page, such as the logo, ads, Flash or video players, features, navigation sections, and sidebar, header, and footer elements. If you do not have this information yet, meet with your client and get (or create) a sitemap. If you are re-designing existing elements, you can gather them from a careful review of the website. In this scenario, be sure to first confirm with your client that you will not be required to add or remove elements, because not having a clear understanding of their expectations will slow down the process.

 

Grayscale vs. Color

When creating a wireframe, working in grayscale helps maintain focus on the primary function of the process, which is to finalize the layout, not the design (see Figure 3). Another risk of working in color is that the client may mistake the wireframe for the final mockup.

Color can, however, prove useful when showing the location of each call to action.  Because one page may contain several calls to action, prioritizing them is important. Wireframes can help determine which call to action to draw the user’s eye to first.

I recently worked on a project that had a very vibrant logo, which, in that case, was the primary call to action because it represented a newly launched magazine.

When you use color, you can more easily tell if certain elements are overpowering the primary call to action. This process still falls under the realm of wireframing, rather than mockup design, because element locations are still being determined.

Color can gradually be added to the wireframe as the project advances, which is more efficient than moving ahead with mockups before the location of elements is locked down. In doing this, graphic software can help you switch directly to a mockup when ready.

 

What to Avoid

Like other aspects of your development process, wireframing can have its pitfalls if not carried out properly. Here are some tips on what to avoid in order to acheive the most effective results:

  • Too much happening on the page. Leave ample white space so that the design doesn’t appear too busy or cluttered.
  • Emphasis on color and design. Wireframing is for deciding the layout and location of elements. Even though a wireframe can influence the design, adding graphics and color would probably only distract from its purpose.
  • Too much detail. You can always add more detail later, but if you include too much in the begining, the client may confuse the wireframe for the final mockup.

If you are interested in learning more about wireframes, Wireframe Magazine is a great resource that shares samples, discusses techniques, and solves problems related to information architecture.

Creating a wireframe for your client’s website provides an effective communication tool for all parties involved.

Even building a simple wireframe will save time in the long run and ease the development process for the designer, developer, and client.



Written exclusively for WDD by Eric Shafer.

Do you use wireframes for your design? What are some of the best ways to create effective wireframes?



  • http://www.silver-solutions.co.uk Anthony Woods

    Wow, I picked up some major tips for my honours degree later this year. For instance, the grey scale while developing the prototype wire frame structure is an excellent idea, I have often came to the attack while doing this for a project with concentrating too much on colour and not enough on structure.

    I also agree with not cluttering your space, I got marked down for including too much information on the design rather than which segments of the structure go where and a brief explanation of what should be included in that space.

    If you have a lot of information trying to explain the design your showcasing the client, what I tend to do which you can see in (Figure 1) with the writing down the sides, is just mark each part from A – Z and then on another piece of paper, give a more in-depth description to the client in writing. This often clears clutter on the wire frame while the client is viewing it, and it allows the client to look at it and look at the in-depth information of each section depending on the letter on another page. This allows you as the designer / developer give the client much more information on the design which is always good.

  • http://www.branditsolutions.com ecommerce website design

    The benefit of a search engine friendly website is it has a greater chance of getting sales. Good website structure makes people spends more time on your site and the more vital it turn out to be useful in their mind, the better chances that they will purchase your product or services.

  • Tim Davis

    The author completely neglected to include Adobe’s FireWorks as wire framing tool. Especially the CS4 version, with snapping objects and guide measurements make it a prime tool for wire framing. Also when wire framing is something you do on a regular basis saving object (like common sized areas “say banners”) in the common library make calling these objects a drag and drop operation.

  • http://www.styledivision.net/ UX Designer

    You’re spot on in saying that hand sketching on paper is the best way to start – it’s a great way to quickly explore design variations without investing too much time in one design. Once you have the OK from your client on one of the sketches, then you can refine it further in one of the tools you mentioned.

    2 tools worth adding to your list which most designers already have are Fireworks and PowerPoint. Both have master pages, both can easily be made into clickable prototypes which offer even more value than a static wireframe. Fireworks is also great because you can re-use symbols, it even has some common UI element symbols built-in.

    Great video on Wireframing in Fireworks on Adobe TV:
    http://tv.adobe.com/#vi+f15411v1006

  • http://www.embed-design.com/ Oliver

    great ideas here, especially the grey scale vs color one; very useful, thanks

  • http://www.moraywebsolutions.com MorayWeb

    Fantastic article, very helpful!

    I am one of those people who is often guilty of approaching a design in photoshop off the cuff, especially if it is a project that is particularly exciting. I know I will produce better quality work if I follow a more structured design process, this article has inspired me to develop some will power and do just that. Thanks!

  • http://www.simonday.com Simon Day

    I strongly believe in the wireframe stage and use it for every project. I too start with pencil and pad because the client can often be intimidated by the designer sat at the meeting with his face in a laptop. I move onto the computer wireframe only once I get back to the office.

    This is a good post but it’s missing the core part of this process which is the questions you need to ask to build up a very good picture of what the client wants. Get this right and the design pretty much builds itself.

  • http://www.nurbsatwork.com Ozy

    Pretty cool post. I have learned a lot. Thanks guys!

  • Marco Colli

    Great article! It is exactly what I was looking for.

  • http://www.zero2heroblogger.com Matt Harris

    Great tips, I’m still a beginner but I i’m going to try out a few of those things for my next design.

  • http://www.ivobosma.nl Ivo Bosma

    Nice article Eric!

    * About your remark “It gives the developer a clear picture of the elements that they will need to code.”. While this is true to a certain height, were I work we take the final wireframe version a step further: the wireframes are specified in a function design.

    In this document the working of each element is described in detail. This way you catch up on things that might have slipped through in the wireframes (yes, it happens more often than you think! No matter how much time you spend wireframing).

    The client has to approve this as well, so there can be absolutely no unclarity about what the client expects and what is delivered.

    * Some clients find it hard to fully understand wireframes, so we often make the wireframes clickable (with Axure you can do this very well, in Visio it is also possible). It helps the client understand the designed product even better

    (I wrote an article that covers the goals of wireframing, unfortunately it is in Dutch. If you are Dutch or can read it, you can find it at: http://www.heeftstijl.nl/usability/interactie-ontwerp-wat-is-het-en-wat-is-de-meerwaarde/ [it may even be readable through Google translate?])

  • http://designi1.com jose pacheco

    Really nice article :D the grey struture is a really nice ideia!!!

    ty for share! I´ll delicious this one…

  • http://zachkrasner.com/July-9-2009 Zach Krasner

    Great article. I’ve been wireframing for years and didn’t even know it was called that officially… ha

  • http://twitter.com/BazDeas Baz Deas

    Interesting post. I’d advise against a high-fidelity mockup, you should aim for something in between figure 3 and 5 otherwise your client might think you’ve just sent them a final design—which has happened to me. Couple a good wireframe with a moodboard and you’ve got a much better workflow and most likely a happy client.

  • http://goodflashsite.com James

    Nice! Very useful post. Thank you!

  • vikas ghodke

    Wow great info.. i never used wireframe before any of my projects in past and the problems which you listed i faced myself so from now will use this… thx again for great info

  • Bree

    No mention of Balsamiq Mockups?

  • http://www.suburban-glory.com Andy Walpole

    What I usually do is create a html wireframe like the Jesse Bennett-Chamberlain example above and then create a Photoshop mockup using the measurements of the html wireframe.

    I find it a pretty quick way of going about things

    However, I take your note about creating a wireframe in grayscale as no matter how many times you inform the client that the first stage is a rough design, if you design in colour they still associate it with a final design and ask where the detail is.

  • http://www.mixtapewall.com lightamatch

    Great post. I was looking for wireframe tools/software for a long time.

  • http://www.derekunderwood.com Derek Underwood

    This was a very good article but I no longer “wireframe” in this way.

    I have come to believe that careful wireframing in general is overused and is a technique that can lead to a lot of extra work, a lot of design compromise, and that it often has a minimal upside. It is important to note that wireframing does not give you an interactive experience. I also feel that too much wireframing can sap enthusiasm out of a project and take away energy from later stages of development.

    Instead, I like to do very rapid macro-sketches of an interface or page without much detail at all. If you can find a broad-tip marker or even thick chalk, you can force yourself to leave out the details at first which is helpful. At the early stage of design, there should not be an emphasis on exact wording and copy anyways.

    In the past, I found that many of my careful wireframes were met with yawns from our clients. They were more interested in seeing a photoshop design mockup or better yet, an interactive page with the basics laid out – even if the graphics were just placeholders. Those who were able to stay awake to go through the wireframes were typically not qualified to tweak them and often had minimal design vision, but nevertheless they tweaked and tweaked until the project was marred with poor design and incoherent interfaces.

    I agree with Jason Fried and 37signals and a lot of the concepts and ideas in their book “Getting Real” – here is just one of their snippets that relates to their aversion to wireframing:

    http://gettingreal.37signals.com/ch06_From_Idea_to_Implementation.php

    Some people really find wireframing useful and you should do what works best for you and your clients. I just wanted to share my own perspective on wireframing based on our design work over the years.

  • http://www.raymondselda.com/ Raymond Selda

    Great post. For now I’m very much comfortable with sketching on paper. I will definitely bookmark this for future reference.

  • http://labs.dariux.com Dario Gutierrez

    Very useful tools, I like use wireframes and sketches for my designs. Thanks for the tips.

  • http://www.shicksdesign.com/onlifeanddesign Sarah Lynn

    I really enjoyed this post! It is a very important part in the design process. You make a good point mentioning the use of grayscale imagery only. Then the client won’t be distracted by comments on the graphics and more importantly focus on the content/layout of their website first. This saves a lot of time before the coding and designing processes begin. Thanks for the wide variety of examples!

  • http://www.j-run.ca/ Mondo Jay


    Good post,
    we never really got taught wireframing in this sense at school.
    Though we did have a similar set up for sketching out our designs.
    I will have to bookmark this. Thanks!

  • http://blog.tripleonesix.com Kevin

    Very good ideas and a great article to boot. I have a whole sketchbook that I use to do my wire frame web design mock ups in, it really helps a lot when you are finally ready to design the website in PS and do the code.

  • http://www.protoshare.com Andrea

    Eric, great post on the benefits of wirefarming! So many industries require mock-ups and prototypes before final production and web development should be no different. However, there are still a lot of companies who do not complete this step as thoroughly as they probably should.

    As someone with a web agency background, I can tell you that we did not always spend enough time in the planning phase, which often resulted in not finding out what the client wanted until development was nearly complete. This was a huge headache for me (the project manager), the programmers, and the client.

    Starting out with sketches and grey boxes is a great way to start brainstorming and getting a feel for where the site needs to go, but in my experience, I’m also a huge believer in some sort of interactive prototyping with the client prior to final development as well. Oftentimes, the client does not understand certain web terminology and can’t visualize what you are presenting unless they are able to click through and actually experience it. This is not to say your prototype has to be elaborate, but it helps to be functional to result in a better user experience and save you (or your programmers) time later down the road.

    Thanks for sharing! I hope many people also find this information helpful.

    Cheers,
    Andrea

  • RoaldA

    Sweet post, this is what I like the most! :)

  • Angelique

    I agree with a lot of what Andrea stated. I find wireframing to be very helpful to me as a designer, but have had mixed results sharing them with clients. Even when I’m there in person to talk though the wireframe and its purpose with the client, unless they have some other design background (eg, an architect), often can’t discuss the flow of the site completely separate from the design/aesthetics.

    I’d be interested to hear how other designers “prep” their clients for the wireframe and how they generate the most productive conversation, as this is clearly something I’m still struggling with.

    • http://www.ccstephens.com Matt Nelson

      I would recommend starting with the site organization first and strategic discussions about why you placed everything where you did in your wire frame and what that will mean for the end users your client has. Then that naturally transitions into the flow of the website and how all the various goals will be accomplished using your structure plans….

  • http://www.crearedesign.co.uk Adam

    I’ve never had to do a wireframe structure for a website design before, but I do often sketch out designs before I start. But we normally do a complete homepage mockup for a customer before a development starts – the structure is usually up to us.

  • http://www.jeffschinella.com Jeff

    Very good post. I have started using http://www.balsamiq.com/ which provides a good low-fidelity mock-up with the benefits of a software tool…although page sketches on graph paper are more than enough in most cases IMO.

    I find the high-fidelity wireframes tend to add a lot more conversation to things that you might not necessarily want when your beginning a project/site, and that it is just as easy to modify a photoshop file of a more refined design than it is a mid-high fidelity wireframe.

  • Eric

    Thank you all for your comments! You’ve contributed valuable information to the evolution of this article.

  • http://webdrops.com.br/ Luis Felipe Fernandes

    Excellent post. I live in Brazil and I´m studying about information architeture right now.

    Thanks.

  • http://www.ccstephens.com Matt Nelson

    I ALWAYS do wire frames for our customers these days. Not only does it add a massive boost to our contract value for the website work we get contracts on, but it also serves to streamline the development and design process by quite a bit.

    This ensures there less “surprises” along the way for us. And being that we are a relatively small shop the more efficient we can be with delivering what our client wants the more jobs we can take on and the more profitable we remain. So really in many way wire frames are as good for us as an agency as they are for the clients!

  • Marc

    Recommended (online) tool: http://www.iplotz.com

    I started to use it in a webdesign project last week and it works like a charm! I can even collaborate with my clients, because they can access the (clickable) wireframes and leave comments!

    Just fab…

  • http://zaskoda.com Zaskoda

    I use a hybrid between a site map and wireframes for establishing UX design:

    http://webcraftstudios.com/wp-content/uploads/2007/12/map.png

  • http://newevolutiondesigns.com Tom – New Evolution Designs

    Good post! I found this very useful.

  • zzz

    Whiteboard baby!

  • http://www.merlinvicki.in merlinvicki

    Very nice checklist for laying out the structure for a new website.

  • http://www.creydesign.com Chris Reynolds

    I recently started using Balsamiq mockups to do wireframing, and I wished I had been doing wireframing sooner. I used to look at it as an lengthy extra step that wasn’t always necessary. But once I started doing it, it became the most important part of the process for me. Everything I do now starts with a wireframe. Totally worth the time.

  • http://www.martiandesign.com David Platt

    Anyone who does serious design uses wireframes. (And they should get sign off from the client before proceeding with design.)

    How can you do a thoughtful design if the structure will be changed at a later date? Ridiculous.

    Use a building analogy when you present your wireframes to your client:

    Hi client,
    When you look at these wireframes I’m about to show you, think of them as blue prints for a building. Building a website is like building a building, a website needs to have it’s blueprints finalized and approved before moving onto design and development. Like a building, it needs a solid foundation or it won’t stand up. Each element is based on the element that precedes it. etc.

    As for the grey boxes, for me, that’s over-designing the wireframes. use an outlined rectangle to separate sections. Wireframes are for content, hierarchy, and functionality. No design whatsoever. In fact, you should make them purposefully ugly so the client gets the message that they are looking at nothing but the bare bones

    Whaddya think guys?

    -dp

  • http://www.blog.mookiedesign.com Cam

    This is a great article! i have been reading more on UI and really taking time out to wireframe sites fully and extend my workflow process. Good stuff!

  • http://www.visitmix.com Thomas Lewis

    I agree with David Platt that you don’t want visual comps delivered early in the process because it is hard to not get bogged down in “that shade of green” discussions. I think wireframing is a great immediate deliverable for clients because it keeps them focused on the higher level things (like primary actions or structure). Being on the “client” side quite often, I wrote up my own thoughts about it:

    http://www.visitmix.com/Opinions/Should-We-Kill-Wireframing

  • Mark

    I like wireframing, I think it adds a lot to the development process, streamlining and communicating to the client. But the problem is the client doesn’t always get it. In the real world most clients want to see what their website will look like. They don’t get b&w pencil sketches and won’t understand what they’re signing off on. Some clients get it, but those without a design background generally don’t and, like Kevin said, end up yawning or asking where the mock ups are.

  • Glenn Huther

    Keep an eye out for Sketchflow in Microsoft Expression Blend 3 (not yet released). It bridges the gap between paper wireframes/prototypes and building.

    Awesome.

    Start at about 28:00 in this video presented by UI designer Matt Morphet: http://www.microsoft.com/australia/remix/videos/video.aspx?vid=v16#mixVideoPlayer

  • http://www.sweetpixels.co.uk web design kent

    I would probably cover a pencil sketch & low fidelity version for smaller projects but for larger projects with revisions in the budget then it’s feasible to develop the wireframe in 6 – 12 steps leading to the final design page(s). There is no definitive way to create wireframes it has to be looked at on a case by case basis!

  • http://wireframesketcher.com Peter Severin

    Great article! Those using Eclipse based IDEs, you should take a look at WireframeSketcher plugin.

  • http://www.yummygum.nl Vince

    Great article.

    I just started sketching before opening up any program, revisions or radical changes are so much quicker with pencil and paper. Plus, when working in a team it is so much quicker to share ideas and visualize them on paper.

  • http://www.flareimaging.com Nick Boyle

    Great post – Wire framing saves your ass later on down the development process.

    We used to get stitched up when clients changed their mind and wanted extra features which were an issue fitting into the designs and coding which we had built. Now we write a functional specification document and create wireframes. We work collaboratively with the client to decide the user journey and how each main page of the site will work. The client then signs off the wireframes and then we work on the actual graphic look and feel.

    By separating out the function first; we now get the client to focus on usability and the ultimate results they wish the site to achieve; rather than being side-tracked by how pretty it is.

    We looked at a lot of wireframe programs but settled on http://www.protoshare.com

    Just don’t tell the bedroom boys as it’s the thing that currently sets us apart from the cheaper design companies. Wire framing is an effort to do it well but it’s worth it.

  • http://www.mendesign.com.br Flavio Mendes

    Parabéns! Bem didático.

  • David

    No mention of Omni Graffle? Seriously?

    http://www.omnigroup.com/applications/OmniGraffle/

  • http://www.webdesigningservices.net Web Designing Services

    Great! I will follow this in my organization.

    Many Thanks

  • http://rohdesign.com Mike Rohde

    Thanks for featuring my pencil sketch wireframes here!

    I think wireframes are important. They help clients and designers come to an agreement on size, relationships and context, separated from the color and flash of comps which when immediately used, can lead to a great looking site that can be structurally problematic.

    When I design logos I always present sketches and then B&W art, to make sure the mark works in the simplest form. As with websites, color can have an emotional impact on clients, leading them to choose a lesser concept because they happen to love blue.

    What I like about pencil sketch wireframes are, they somehow feel more open to changes than crisp, hard edged wireframes. I think because to clients they are clearly an in-between stage, I find clients much more likely to provide feedback.

  • Jeff

    I have to agree that wireframing is a very important part of the process. I start with a very simple list of page elements, move to a rough sketch then into Fireworks for the client wireframe. Fireworks is an amazing program for this. I created a library of reusable items I can just drag over to the wireframe canvas. Plus I can easily scale (using 9-slice scaling) , rename add rollovers and interactivity to these elements in my wireframe. Not to mention export it as a interactive PDF for the client review that they can even mark up and comment on. The best part of this is that the wireframe then becomes the starting point of the actual design! Everything is already in place and in scale. So it’s basically just reskining your wireframe. Brilliant Adobe! Fireworks is my #1 tool for web design – anyone still using photoshop to design websites needs to take a serious look at fireworks. Really.

    Overall I think a lot of those examples were to far along in the design process. Keep it simple, and in black and white – Don’t include images at all! I find clients become to distracted with the image and loose focus on what a wireframe really is about.

  • http://www.techwyse.com/web-development-overview.php Internet Marketing Toronto

    I really liked this article. I didnt think of the gray scale comment that you made. Very good point and it makes some great sense. One of the tools we use to help with wire framing is a piece of software called http://www.axure.com . Id recommend adding that to your list of web development tools as well. Thanks for the great article!

  • http://www.yummygum.nl Leon

    Nice article. The sketch is showing a little too much details if you ask me…. and yes,.. this is out of pure envy ;-)

  • http://www.creativeparanoia.com jerry black

    wireframing … the latest industry buzz word.

    Sorry to burst your bubble but its been called ‘layout design’ for decades, regardless of the technology, and has always been an integral and important part of the design process.

    That’s the problem today, there are so many people out there ,both good and bad, designing web sites who have no formal design training. Someone comes up with a clever word to describe something that has been going on for years and all of a sudden it becomes something NEW. Now almost every web design job being advertised requires experience with wireframing.

    I use a sketchbook and pen … yeah, I know … positively mediaeval. Can’t wait for some self-appointed ‘web guru’ to re-invent that one!

    Good article by the way … interesting read and apologies if I appear to come across as a cynical git.

  • David

    “Wireframing” is what it’s been called since I’ve been in the business. 9-10 years. I think you’ve been sleeping under a .NET bridge for too long.

    For all the “neo” web 2.0 web designers lately it is new and is a buzzword to them.

  • http://deviantstudio.ca/wp Richard

    This was actually really good to read, I started using wireframes recently and this helped me get a little further. I notice my designs are a lot more thought out now.

  • http://www.misty-blue.net Sarah

    Great article! I really love getting to see how other designers do their wireframing.

    Personally, I start out with a preliminary hand-drawn sketch and then do a design mockup in Photoshop to show to the client. I too find that clients often get turned off by something hand-drawn or a style-less HTML page.

  • http://www.cheapwebhostingseller.com Hosting boy

    Great article.wanna more info about wireframing.

  • http://www.creativeparanoia.com jerry black

    For decades professional designers have called it sketch designing / prototyping – an integral part of the design and client management process.

    Now there is a growing number of programmers/coders/developers who have started calling themselves designers (although few of them have any formal design training or education) who, due to a lack of design education, need to validate, redefine and take ownership of what we, as designers, have been doing for a long time.

    Wireframe sketch, low-fidelity html, layout wireframe, concept wireframe … How exactly are these elements not part of the sketch design process?

    I find it all rather amusing.

  • Marco

    You’re a designer jerry? At least you had the balls to show that “design” work of yours.

    I always love people who think they’re great but in actuality are inferior and outdated.

  • http://www.TheWayOfTheUnplugged.com Efraim

    SWEET POST!
    I love the sketch, very well drawn!
    Although I have to say I prefer http://www.MagneticPrototyping.com over Paper Prototyping… but I’m a BIG Balsamiq fan!
    -E

  • http://www.zubvector.com book

    cool topic

  • http://www.mindfieldusa.com bill @mindfieldusa.com

    Mindfield is still referencing this article and comments to keep us on track with basic web design strategies. We’ve even passed it along to some agencies and clients with in-house web developers. Thanks.

  • http://www.webcoursesbangkok.com Carl – Web Courses Bangkok

    We cover this extensively in our beginners course in week1. Very important and useful skill.

    C

  • http://www.doois.com.br Doois Tecnologia

    Great post with lots of useful information.

    We’ve been utilizing Balsamiq to wireframe.

    It’s a great time-saver and usually the client or future client get impressed.

    thanks!

  • Mohamed Kandour

    “…It’s best to work in grayscale so that you can focus on the layout without being distracted by the design” This is really extremely effective. That’s really smart… Thanks for the tip.

  • http://www.masmedios.com David Gonzalez

    I totally agree on working with grey scale! Many clients want to get the final look & feel right away i´d rather show a B/W sketchy design first. It helps the client to focus on the overall usability and navigation process, rather than on the design! Important if you work on RIA or dynamic websites. Recently I´ve started playing around with Justinmind Prototyper: database simulation, JS effects… My client couldn´t see the difference between the final site and my wireframe if it wasn´t for my sketchy design!

  • http://www.ingledow.co.uk/ David Ingledow

    Some really handy tips there – I definitely need some squared paper – it will really help!

  • http://www.brillcreative.co.uk Rich – Web Design Bristol

    I like to start on paper first. In fact, sometimes I’ll start on paper then prototype a black and white wireframe with html and css before designing in colour in photoshop. This works well because it means I can put random Lorem Ipsum into fluid boxes in html and see how the content changes the design in realtime, something which is very often forgotten when the designer signs the final comps over to the developer who builds the design who passes it to the content/web editor who puts an article or image into the page which totally destroys the design!

  • http://www.jasoncorns.com Jason

    Whether you start on paper or pop open visio/axure/take your pick, the wireframe should be the first step in the process. I work as part of a Web Effectiveness group at http://www.systemsalliance.com that includes IA strategists, designers, developers, PMs and a QA group. When the IA and wireframe have been put together, ready for review, we get someone from all the above groups together to talk about the wireframe – how it will look, how it should work, how it meshes with technical design, any potential pitfalls, etc. Later in the project, when we get close to delivery, the transitions from state to state are smooth and (usually) surprise-free; I believe we owe that smoothness to the wireframe and review thereof.

    Your ‘What to Avoid’ section is spot on. Great article.

  • http://www.templatejuice.com J.F. Herrera

    I always imagined this process to be much more difficult than you make it seem in this article. It’s good to know that there is really nothing fancy about wireframes.

  • http://www.infopunta.com Punta del Este

    i love to sketch up first

  • http://pollfa.ir abdollah2

    Great article!

  • http://www.soflexonline.com Diane Michel

    Excellent article. We use wireframes in developing our client’s Websites, and have found them invaluable. It helps significantly in developing the information structure without being too caught up in the specifics of the graphic design.

  • http://www.iconfinder.com Martin LeBlanc

    I have really missed focus on wireframes and other design tools, instead of just colors and look-and-feel.

    By the way, you should also mention Omnigraffle. It is personally my favorite tool to do wireframes with.

  • http://visiotoolbox.com Joshua A

    We also use wireframes for content layout. It helps a lot in developing process of the project by minimizing the revisions, giving a clear layout of the projects and many more. We use the latest version of Microsoft Visio i.e. Visio 2010. It is a great diagramming tool for BPM solutions.

    http://visiotoolbox.com/2010/bpm-maturity-model.aspx

  • http://www.justinmind.com Victor

    Another Justinmind (http://www.justinmind.com) user here. You should definitely take a look at it.