Getting Started with Wireframes

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

What does wireframe mean?

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.

Why should I use wireframes?

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

It 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, mockups and prototypes are often used interchangeably, yet they are not the same."

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.

Wireframes vs 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.

Wireframes vs. 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)

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 do 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
It 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.

"There is no 'best' tool for wireframing. It’s whatever you’re comfortable using and whatever works for you."

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.

Wireframes vs. Sketch

If you use Sketch to design your mockups, then wireframing on Sketch will save a lot of time. You can start withdrawing your wireframes and use symbols throughout. When the wireframes are approved, you can design a style guide then edit your wireframes to become design mockups.

Using Sketch’s symbols in the process will make your work faster and more efficient, as you can edit the symbols that you previously created in the wireframes, which will convert the wireframes into mockups instantly. You can even make your wireframes (and mockups) interactive by using Marvel App plugin.

Sketch App

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 outline your website and even offers a range of frameworks.

Creating HTML outlines 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.

Conclusion

No matter which technique you choose to, you’ll learn that wireframing is a crucial part of 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.

"No matter which technique you choose, you’ll learn that wireframing is a crucial part of your design workflow."

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

This article was originally published on Nicole's Medium Page

Further reading:

• The Ultimate Guide to Prototyping
• UX Design Deliverables
• How To Build Wireframe Presentation Decks for Clients