Getting started with Wireframing

Wireframes are becoming very popular as a new way to design the basis of a new website, more specifically to plan and decide upon a layout before getting into the actual look of the website. In this article you’ll learn how to get started with wireframing, applications to use and loads more.

Why Should I Wireframe?

• Wireframing allows you to concentrate on the very layout of the website without getting distracted with other design decisions.
• It’s very quick and easy to do, allowing you to create 4 layouts in a very short space of time to show to the client.
• You don’t need any fancy expensive tools to wireframe, just a pen and a piece of paper.
• Wireframing encourages the use of a grid.

How to Wireframe

Whilst the best stuff to use is often just a pen and a pad of paper, there are applications out there that create mockups for you. These include:

• Balsamiq Mockups [$79] Adobe Air
• ForeUI [$79] Cross OS
• HotGloo [Free] Browser Based
• iPlotz [Monthly plans available, $79 for desktop app] Browser Based/Adobe Air
• OmniGraffle [$99] Mac Only

If I’ve missed an application you think should be included, please let us know in the comments and we’ll add it.

The application you use, if indeed you do decide to use one, should be based on personal preference. You will also notice that bar HotGloo, they all require you to delve relatively deep into your pocket, so I would certainly try the trial versions of all to find one you are truly comfortable with. At the end of the day, you may not even decide to use one. (In the future we will be reviewing all these applications so keep an eye out!)

How much Detail?

The beauty of wireframing is that you can use as much or as little detail as you think is required. You may want to just draw lots of boxes, and label them with what will fill that area. Or you may decide to add all your text, all the little icons you plan to use, and go into a lot of detail. Either way is fine and it’s what makes wireframing so diverse. Everyone can do it to how they want.

My only advice would be to be aware that the idea of wireframes is that they are quick and easy, a way of purely deciding how your page should be laid out. Therefore spending 45 minutes adding little details to your page and even writing the text is not what it’s about. That’s what Photoshop (or the app of your choice) is there for. You can decide on the copy and the colours later. Wireframing takes you back to basics.

Stick it to the grid

Wireframing also allows you to design to a grid, which is becoming a very popular choice amongst designers these days. What I do is get some squared paper, and first thing with a ruler and pencil split my page up into a square that is 3×3. I then break those up further. Of course this is all down to choice. You may wish to follow such a grid as the 960 Grid, or you may like me wish to create your own. It does not matter, all that matters is that you have to be comfortable. You may choose to not even use one, which is fine. Remember, because you have a grid does not mean you have to rigidly stick to it.

Showing Clients

Once you’ve done some layouts (I tend to do 3-4) it’s time to show the clients. Don’t worry that it does not look neat, it’s not meant to be. Just explain to them what these wireframes are and why you’ve done them. Discuss the layouts and why you’ve done what you have. Try to avoid getting into such conversations as “We could have a blue colour there” or “Helvetica would look lovely for the blog titles” as you are not there to discuss that. Be clear, you wish to clarify and decide upon a layout, nothing else.

Finalising the Layout

Once you have decided on a layout with your clients you may wish to create one final wireframe, going into a bit more detail. At this stage it might be worth considering the width of the boxes, the height. How wide should your entire site be? Should it be fluid width? Personally I like to make these discussions at this point, before heading into photoshop. In this wireframe you may want to go into a bit more detail, adding things you didn’t before. It’s totally up to you.

Moving into Photoshop

When moving into Photoshop, stick to your layout but don’t be too rigid. Remember that things may change. Once you’ve added colours, fonts and text, you might realise that something needs to be smaller/wider. This is perfectly fine, and will happen quite regularly. I find it useful to start off placing grey blocks on the page, matching your wireframe exactly. Then as you progress it will become clear where changes need to be made.

So that’s it. Here you have been introduced to wireframes, how they work, what they are used for and you how can create them yourselves. Good luck, and may the best wireframe win!