Beginner’s Guide to Wireframes and Tools to Create Them

Posted in Tools, Web Design • Posted on 12 Comments

Wireframing, or prototyping, while designing, costs almost nothing, but can give back so much. While many designers start with a sketch in their mind and then just put it into Photoshop or even code it right away, some others start on paper. Yes, paper, that (most of the time) white thing we write on with our hands. Sounds very 2000-ish, but even today the best designers out there use this technique to their advantage. Web prototyping saves lots of frustrations later on during the project development phase, as it makes sure there are no things to undo or redesign. If you prototype correctly, you can be sure about the fact that redesigning will never be something you will have to think of.

What wireframing basically means is putting your design ideas on paper – for each of the multiple pages of a website. All pages will probably share some elements, therefore the first one will be a bit more challenging to do, whereas the rest of them will be a bit less difficult as you already have a basic idea over the general design patterns.

Keep in mind that these common elements are a must for any design. When switching between pages the user will have to immediately recognize the fact that he is on the same site and not somewhere else. Always keep the navigation and the important sections (content, sidebar, footer) in the same place. But this tends to become a novice guide to web design, so let’s move on.

General – the wireframe

In order to be able to use a wireframe, you need to know how it actually works. What this does is simple – it illustrates the layout of a website and its main components on paper. You can use different shapes, such as boxes and ovals to draw content, navigation and other functional elements. You might ask yourself why do we use shapes? The answer is simple: because it allows us to focus more on the design and forget about coding, cross-browser compatibility, images and so on. It’s pure and basic design.

Image by Zach Hoeken.

Wireframing or Photoshop design?

The alternative to paper web prototyping is creating the visual design in Photoshop first. While it has advantages to some extent, creating the layout in Photoshop is not as effective because it does not allow you to focus on the basic design elements. If you start designing in Photoshop you will probably also start thinking about colors, images and fonts. There is no need for this if done on paper. And the process is way faster on paper as well, so why not go for it? You can obviously start designing in Photoshop at a later stage, but I wouldn’t recommend doing it before you have a clear idea of what you want to get out of the project. The only way to achieve this is to start on paper.

You can call a wireframe a sketch if you want to. As a matter of fact, a wireframe is a basic, simplified sketch of a website. It communicates some ideas to the client which he can accept or not. If he doesn’t, it is quite easy for you to take another sheet of paper and draw other ideas from the top. The main reason behind a wireframe is to let you focus on what is really important on a website: how each page looks, where the most important elements go and how to achieve the overall positive balance you need.

After you get the idea to the client and he accepts it, you are welcome to evolve the basic sketch into something more detailed. Now it is maybe time to start thinking of fonts, colors and images.

Image by Denkbeelhouwer.

The Prototyping Stage

It is crucially important for designers and clients to work together during this stage of the project. While a client doesn’t have too much to say during the coding phase, this is where he usually gives a lot of input you should consider. Remember that once he accepted the design, he will gladly give into your further ideas – at this point in time he already believes in you and your skills. It will be a tough and long project if you don’t get the acceptance on the basic wireframe from him.

If you are a client remember not to stress a lot about the lack of colors, images, fonts and other styles. The job of a designer for now is to give you a basic idea of what he thinks is good for you. If you ask for more detailed wireframes from him and reject them three or four times, it will cost you lots of money. On the other side, if you ask for basic wireframes and reject them, it won’t cost you as much, because they are easier to draw and think of.

Tools for web prototyping

Here is a list of some tools I recently tested in order to see how much designers can trust them in building wireframes. If paper is not good enough for you then, in any given order, here are the other possible solutions:

1. iPlotz

This tool allows you to create wireframes which you can click on and navigate through. This helps creating the experience of a real website. While you can get a free account on iPlotz, I recommend one of the premium ones if you are serious about starting with web prototypes from now on.

2. Balsamiq

If you like drawing, then this tool will give you the feeling of it, only now it is digital. The elements can be tweaked and rearranged easily and the control over them is quite easy as well. The results are clean and one of its advantage is that everything can be reiterated in real-time.

3. Pencil Project

This tool can easily be used to make diagrams and GUI prototyping.

4. templatr

Although it will not allow you to draw anything, this tool lets you create individual designs for your website on the go. You don’t need to know any HTML and you can download the template in the end with a single click.

5. Flair Builder

This is a tool capable of creating interactive wireframes very fast. It is quite easy to use and comes with a palette of functional components which will ease the process of creating prototypes. Flair Builder is also interactive and will improve your experience a lot.

Image by Michael Lancaster.

Bottom line

Wireframes, or web prototyping, is a process known to many designers, although just a handful of them use it. While it might seem that it takes a lot of time, on long-term it will help you a lot. If you know how to properly communicate and closely work with the client during prototyping, the rest of the project will go smoother than expected. I totally encourage you to prototype your designs before actually starting to code or to create the whole visual design in Photoshop. It will make the process easier for you and will spare you frustrations down the road.

Until next time, let’s spark some discussion here for my 50th article on 1WD. How often do you prototype your designs? How effective has it been for you? If you don’t do it, why is that?

69 Written ArticlesWebsite

Christian Vasile is an enthuziastic Romanian web designer currently living in Denmark. He is passionate for the industry and writes about design, usability, coding and freelancing and is a regular publisher here at 1WD. You can follow him on Twitter at @christianvasile or visit his web portfolio by clicking on the link above.

12 Comments Best Comments First
  • Van

    Friday, April 27th, 2012 18:56

    2

    If you prototype correctly, you can be sure about the fact that redesigning will never be something you will have to think of.

    I pretty much disagree with this statement right there.

    +1
    • Andrea

      Monday, April 30th, 2012 11:57

      11

      You are correct in that you won’t be able to stop any and all changes a client may make just by going through the wireframing and prototyping process, but it’s not about eliminating all rework. It’s about clearly communicating with your client on what you intend to build, them getting a visual understanding of what you intend to build, and making sure you are both on the same page and moving the in the right direction.

      It’s also about the designers/project managers/etc communicating with developers (a little bit different if you’re a one-man shop). You want to work with developers before telling a client something is possible, when in reality it isn’t, or it isn’t possible within their budget.

      You may not eliminate ALL rework, but if you can eliminate 50-70% of rework with wireframing then you’re still saving a lot of time and money because programming is expensive.

      -5
    • Christian Vasile

      Saturday, April 28th, 2012 11:52

      6

      Wireframing correctly and closely working with the client during this phase will ensure that once you design the website, he will be happy with it. You might have to redesign it in 3 years, I agree, but this is not what I was referring to. I was referring to the fact that you will not have to redesign the concept before actually coding the webpage.

      -5
      • Chris Demetriad

        Saturday, April 28th, 2012 13:33

        7

        Van is actually right. Most of the clients will change their mind some way or another, no matter how good the communication was between both parts during wire framing. I see this weekly.

        -6
  • Bharat Chowdary

    Saturday, April 28th, 2012 06:45

    5

    I’m a newbie in this area and this article helped to learn something new. Thanks Christian for this stuff.

    -2
  • Phil

    Saturday, April 28th, 2012 18:50

    9

    Thanks for these pointers.

    I think it’s really important to establish a wireframe for UX and user journey intent through the website before the pretty colours get put on there and confuse the client and yourselves away from the original intention of the app or utility.

    It really helps with thought process and helps build up multivariate & A/B testing processes to help establish quick iterations to go forwards with.

    Some more I’ve just thought of:
    This one: https://cacoo.com/ – Really nice free wireframer that you can also live client share with.

    Our process for physical meetings is to get the iPad out with this app. iMockups for iPad.
    http://itunes.apple.com/us/app/imockups-for-ipad/id364885913?mt=8&ign-mpt=uo%3D4

    -Really good little app that you can build very rapid prototypes of functionality and user journeys with click-throughs in front of the client.

    If all else fails good old pen and paper :)

    -2
  • Art

    Saturday, April 28th, 2012 20:02

    10

    I have been using Pencil for about a year, and have been fairly satisfied (mostly because it’s free). However, it doesn’t appear to be in active development, and the last update introduced a bothersome behavior; selecting all objects doesn’t just select all objects on the current page, it selects all objects across all pages. Lots of object locking and unlocking is now part of the workflow. Be ready for this.

    I was a bit bummed to see that it was no appeared to be in development. It showed great promise. I’m sure it is a great deal of work to develop. I should have played the lottery and donated my winnings to further development :-)

    -3
  • InkThemes

    Saturday, April 28th, 2012 06:44

    4

    Great article to read …1stwebdesigner is great source for the useful information.

    -3
  • Morgan & Me Creative

    Saturday, April 28th, 2012 04:26

    3

    We go through the wireframing methods too, we draw them out while tossing ideas, plot concepts and workflows before inking them out on illustrator. It’s very helpful when to comes to site planning and prototyping the initial concepts.

    -5
  • André

    Friday, April 27th, 2012 18:44

    1

    everytime im shu… wireframing… Wireframes are just a must have do got a better overview of the whole projects

    -5
  • Deborah

    Saturday, April 28th, 2012 15:12

    8

    One of my favorite wireframing applications is GoMockingbird.

    -6
    • Joe Zim

      Tuesday, May 1st, 2012 01:33

      12

      Same here. Mockingbird works out pretty nicely.

      -1
  • Art

    Saturday, April 28th, 2012 20:02

    10

    I have been using Pencil for about a year, and have been fairly satisfied (mostly because it’s free). However, it doesn’t appear to be in active development, and the last update introduced a bothersome behavior; selecting all objects doesn’t just select all objects on the current page, it selects all objects across all pages. Lots of object locking and unlocking is now part of the workflow. Be ready for this.

    I was a bit bummed to see that it was no appeared to be in development. It showed great promise. I’m sure it is a great deal of work to develop. I should have played the lottery and donated my winnings to further development :-)

    -3
  • Phil

    Saturday, April 28th, 2012 18:50

    9

    Thanks for these pointers.

    I think it’s really important to establish a wireframe for UX and user journey intent through the website before the pretty colours get put on there and confuse the client and yourselves away from the original intention of the app or utility.

    It really helps with thought process and helps build up multivariate & A/B testing processes to help establish quick iterations to go forwards with.

    Some more I’ve just thought of:
    This one: https://cacoo.com/ – Really nice free wireframer that you can also live client share with.

    Our process for physical meetings is to get the iPad out with this app. iMockups for iPad.
    http://itunes.apple.com/us/app/imockups-for-ipad/id364885913?mt=8&ign-mpt=uo%3D4

    -Really good little app that you can build very rapid prototypes of functionality and user journeys with click-throughs in front of the client.

    If all else fails good old pen and paper :)

    -2
  • Deborah

    Saturday, April 28th, 2012 15:12

    8

    One of my favorite wireframing applications is GoMockingbird.

    -6
    • Joe Zim

      Tuesday, May 1st, 2012 01:33

      12

      Same here. Mockingbird works out pretty nicely.

      -1
  • Bharat Chowdary

    Saturday, April 28th, 2012 06:45

    5

    I’m a newbie in this area and this article helped to learn something new. Thanks Christian for this stuff.

    -2
  • InkThemes

    Saturday, April 28th, 2012 06:44

    4

    Great article to read …1stwebdesigner is great source for the useful information.

    -3
  • Morgan & Me Creative

    Saturday, April 28th, 2012 04:26

    3

    We go through the wireframing methods too, we draw them out while tossing ideas, plot concepts and workflows before inking them out on illustrator. It’s very helpful when to comes to site planning and prototyping the initial concepts.

    -5
  • Van

    Friday, April 27th, 2012 18:56

    2

    If you prototype correctly, you can be sure about the fact that redesigning will never be something you will have to think of.

    I pretty much disagree with this statement right there.

    +1
    • Christian Vasile

      Saturday, April 28th, 2012 11:52

      6

      Wireframing correctly and closely working with the client during this phase will ensure that once you design the website, he will be happy with it. You might have to redesign it in 3 years, I agree, but this is not what I was referring to. I was referring to the fact that you will not have to redesign the concept before actually coding the webpage.

      -5
      • Chris Demetriad

        Saturday, April 28th, 2012 13:33

        7

        Van is actually right. Most of the clients will change their mind some way or another, no matter how good the communication was between both parts during wire framing. I see this weekly.

        -6
    • Andrea

      Monday, April 30th, 2012 11:57

      11

      You are correct in that you won’t be able to stop any and all changes a client may make just by going through the wireframing and prototyping process, but it’s not about eliminating all rework. It’s about clearly communicating with your client on what you intend to build, them getting a visual understanding of what you intend to build, and making sure you are both on the same page and moving the in the right direction.

      It’s also about the designers/project managers/etc communicating with developers (a little bit different if you’re a one-man shop). You want to work with developers before telling a client something is possible, when in reality it isn’t, or it isn’t possible within their budget.

      You may not eliminate ALL rework, but if you can eliminate 50-70% of rework with wireframing then you’re still saving a lot of time and money because programming is expensive.

      -5
  • André

    Friday, April 27th, 2012 18:44

    1

    everytime im shu… wireframing… Wireframes are just a must have do got a better overview of the whole projects

    -5

Comments are closed.

54.226.81.185 - unknown - unknown - US