Web Design Tutorial: Getting Started with Wireframes

Following up on my tutorial 5 steps for a successful website design that walks you through 5 essential steps of a ‪website‬ design‬ process to boost your productivity. I will thoroughly go into detail with the 3rd step: wireframes.

This guide will cover what you need to know about wireframes, why and how you should use them in your workflow.

Definition

Wireframe (n.)
"A basic visual guide used to suggest the layout of fundamental elements in a web interface."
(Source: Wiktionary)

Wireframes are invaluable in keeping everyone on the same page. Developers use wireframes to get a clear picture of the elements that they will need to code, architects present plans before building a house, business analysts use wireframes to visually support the business rules and interaction requirements, business stakeholders review wireframes to ensure that requirements and objectives are met through the design.

Most successful designers wireframe their project in one way or another, whether by sketching it on a piece of paper or laying out detailed structures.

Uses of Wireframes

Why should I use wireframes?

In short, everyone uses wireframes. I do, and throughout this post I’ll explain why you should do too. Some people think they’re time consuming, why bother create more work? But in fact, it’s the complete opposite. They actually save time.

A wireframe is the blueprint of your website. The main purpose is to show the client how the website will be structured before designing. Remember, clients are usually busy running their own businesses. They want something clean and readable to quickly get up to speed on what they’ve missed.

What happens if I don’t use wireframes?

Let’s suppose you didn’t start with wireframes. Instead, you jumped into Photoshop and created a nice well designed homepage. The client liked it in general, but he didn’t like how the “about” section is on the left side, he wants it on the right side. Also, he didn’t like how the navigation bar - that you’ve been working on all weekend - looks like. You’d have to make the corrections, move every layer, one by one, which requires lots of work and time. Here’s the problem, you started off on the wrong foot.

By laying out a simple website structure, you can quickly change any element placement to meet your client’s needs. You can clarify exactly what needs to be on the different pages of your website, even if it’s a quick sketch on a scratch paper.

Wireframes vs. Prototypes vs. Mockups

Before going any further in details, let’s get things straight. Wireframes, mockups and prototypes are often used interchangeably, yet they are not the same.

Wireframes

A wireframe is a low fidelity representation of a web page that shows the basic elements of the page. They are not interactive, and do not show much detail, but create a simple design that guides the project. Once it starts becoming interactive, it becomes a prototype.

Prototype

A prototype is a more detailed interactive representation of the final product. Prototyping means building a model of the website before you build the actual website. Prototyping allows you to test the final product before spending time or money on code.

Mockups

A mockup is a static design representation in which the corporate identity is applied through color, typography and visual style. Mockups are more easily understood than abstract wireframes while being quicker to create than prototypes.

Here’s a nice table that shows wireframe, prototype & mockup differentiation.
(Source: www.quickfocus.com)

Elements of a Wireframe

What to Include in a Wireframe

Think about general elements when you plan every webpage: header, footer, sidebar and content areas. Then, think of additional elements: navigation bars, widgets, buttons.
Once you have an idea of the elements, you can now start creating your wireframe.

All elements in the wireframe are usually displayed and organised to consider the following:

Content

What will exactly be displayed in this page?

Structure

How will the elements of this page be put together?

Hierarchy

How will these elements be displayed in positioning, labelling and size?

Functionality

How will these elements work together?

Behavior

How does these elements interact with the user?

The above graph shows the layered elements of a web page.
(source: Jesse James Garret, The Elements of User Experience)

What not to include in a wireframe

Graphic elements

Wireframes are not supposed to include design elements, as this will distract the purpose of the wireframes. This is why they should be created without the use of colour, graphs, or typography.

Lorem ipsum text

Dummy text should not be used in a wireframe. Instead, use real text for clarity.

Actual design

Wireframes shouldn’t define the final look of the page. It should show how the site will work, not how the site will look like.

Types of Wireframes

So what types of wireframe should you build? Do you need a hand drawn sketch on a piece of paper? Or a somewhat more formal, cleaner plan? It all depends on the purpose of your wireframe.

Basically, there are two types:

Sketchy

Some people think a sketchy type of wireframe is somehow more attractive to the client, it shows them that this is an ongoing process, that they can criticize and freely manipulate the elements and placements.

Digital

The digital type gives a more formal and sophisticated look. This one goes one step further by using some basic design elements through the wireframe.
It’s close to a level of mockups, where it shows the client a sense of what the website will look like, especially for the clients who might have a hard time imagining the finished product with a sketchy wireframe.

Wireframe Tools

There are dozens of techniques to create a wireframe ranging from simple sketches to a high fidelity almost finished wireframe.

The tools you decide to use will depend on personal preference and project requirements. Some look for simple fast techniques, other prefer high fidelity mockups, even if it takes a little more time from the project scope.

Every tool has its pros and cons, there is no "best" tool for wireframing. It’s whatever you’re comfortable using and whatever works for you.

Illustrator and inDesign

Illustrator is created for drawing, and inDesign is a program for page layout and documentation. So technically, these two combined together can make a great wireframe tool.

Why both? First, illustrator doesn’t support multiple pages and master pages, but inDesign does. Also, inDesign doesn’t offer drawings and icon libraries, but illustrator does.

Therefore, by using Illustrator for the majority of the screen illustrations, you can use InDesign to pull everything together and add behavior notes.

Balsamiq

Balsamiq Mockups specialises in creating sketchy wireframes. It’s simple to use, intuitive and can get you up and running in no time.

Although it’s not free, it does have a free trial version.

wireframe.cc

wireframe.cc is a very simple and minimal wireframing tool for websites and mobile apps. It also has a 7 day free trial.

HTML/CSS

If HTML and CSS are in your skill list, then you can set up some code and link up your images. It’s an inexpensive tool to wireframe your website and even offers a range of frameworks.

Creating HTML wireframes may add time to your process from the time you begin wireframing to the point when you have client approval. However, it may well reduce additional communication and work after your wireframes are approved, since the blueprint has already been done.

There are lots of other good wireframes tools on the web, such as: uxpin, OmniGraffle, MockFlow, etc…

Conclusion

No matter which technique you choose to wireframe, you’ll learn that wireframing is a crucial part for your design workflow. As long as you give your client a visual structure from the beginning, any discussion or misunderstandings that might happen during your project scope can be solved by referring back to the wireframe. You’ll present a professional image to your client.

Also, by starting with wireframes, you’ll be much more confident when you actually open your photoshop file and start designing.

In my next article, I will guide you through a tutorial for your next step: style tiles.

Stay tuned!