Website Wireframe – What, Why and How Things Are Wired

What are the most important pinpoints and goals of your projects? Effectiveness – time- cost? Very probably! Exactly the reason why, a website wireframe is one of the most important elements at the beginning of the design process. Helping you be effective and therefore saving time and cutting costs. Everyone’s a winner!

What’s a website wireframe anyway?
What is a website wireframe NOT…
Why you should (not) use a wireframe in your project
Phases of wireframing
Low-, mid- and hi-fidelity wireframes
Best tools for wireframing
Common problems and issues

What’s a website wireframe anyway?

Imagine you start building a house. You wouldn’t go to the construction site and start putting walls on one side and foundations on the other, and crossing your fingers that the roof will meet the walls. Wait, where are the windows? Exactly. You need a blueprint prior to your construction work. No matter if you design your own “house” or one for a client – you need to sketch, visualize and be able to present your ideas and how things will work together.

In that sense, a website wireframe is the blueprint for your entire project – a starting point, showing the important functional relationships in the design, the skeletal framework of your website. It is a simple, visual guide to the information hierarchy in your project, designed to accomplish a particular purpose. The keyword here is functionality and it has less to do with the actual visual design of your website. Once you’ve constructed the house, only then can you decorate. If you’re still in doubt as to what a wireframe is, use the following bulletpoints as a simple checklist:

• Presents the main information groups;
• Outlines the structure and layout of a page;
• Basic, boxy and grey-ish vision and description of a user interface;

What is a website wireframe NOT…

Let’s get back to the analogy with the house. To what extend do you develop your blueprint? Because if you don’t stop, at some point you will start decorating with little pot plants here and there and choose the textile of the sofa, the colors of the walls. These steps are NOT part of the wireframing process. There are separate terms, such as mockup and prototype to describe that level of detailing. People often mix these up, so let’s sort things out, put them in an own box with a label and we will proceed:

• mockup – mockups are flat images/visuals used to create a certain feel of your design; you can’t interact with a mockup, as you can do with a prototype;

• prototype – typically refers to an interactive prototype, which allows users to navigate from page to page and use functionality; allows usability testing and allows stakeholders to see what the final product will look like at the early stages of design;

Why you should (not) use a wireframe in your project

We’d recommend using website wireframe for any project, but avoid presenting it to the client with the intent of signing them off. That would place a lot of restrictions on the designer and limit flexibility later in the design process. It would affect designers and developers’ creativity and it is poor choice for explaining the interaction on your website. There are many opinions flying around the web, such as “wireframing is dead” and restricting your project and scrum, but the truth is somewhere in the choice of fidelity of a wireframe and how much weight and power you give to it.

Let’s look at some benefits and disadvanatges of a website wireframe, just to keep in mind when you start designing:

Advantages

• Interrogtation; Testing; Feedback

Disadvantages

• Up to 3 different wireframes per page – for desktop, mobile, tablet – responsive is the standard today
• Flipping of a screen, shown with a wireframe can be time-consuming and inefficient;
• Wireframes do NOT include any design –  can be difficult for the client to grasp the concept;

 

Now that we know the difference between a wireframe and a prototype and we’ve decided to use it for our project, let’s look at the different phases of wireframing and types of wireframes, depending on the level of detailing in them.

Phases of wireframing

There are two main phases of wireframing – the ideation and the validation phase. Let’s say a few words for each one of them.

Ideation phase

In this phase, you are faced with a problem of the client and trying to figure out how your product can solve these problems and leave customers satisfied. This is where you generate as many ideas as possible in order to iterate toward better and better solutions.

Validation phase

The ideation phase includes a small-scale, internal validation phase. Naturally, you would lack at least some information required to build the best solution. You may be missing some key information about your customer, or other details about the market/technology. No matter what’s the case, to optimise your solution, you’d need feedback from others, most often the stakeholders. In short, showing your wireframes allows others to help validate and improve your ideas.

Low-, mid- and hi-fidelity wireframes

Let’s have a look at the different types of wireframes, depending on the level of detailing in them:

Low-fidelity wireframes

• Low-fidelity wireframes may be as simple as a series of paper sketches which can be easily edited;
• Low-fidelity wireframes also allow clients themselves to communicate ideas with the web team;
• These wireframes are usually drafts or quick overviews;
• Low-fidelity wireframes usually include a placeholder, consisting of black and white boxes, suggested copy and annotations;

Mid-fidelity wireframes

• Mid-fidelity wireframes demonstrate how the site or app is going to feel to use;
• Maintains the professionalism of hi-fidelity wireframes with the simplistic detail of lo-fidelity;

Hi-fidelity wireframes

• Detailed version, displaying actual styling, menus and probably real text or images;
• Each item usually includes detailed information, regarding  measurements and movements;
• Look like a finished version minus the finest details;

Which type should you choose?

So how do you decide which wireframe is best suited for your timeframe and project? If you’re short on time, start lean and we leave the rest for you to decide!

Best tools for wireframing

Let’s start with 2 of the most well-known free tools for creating a website wireframe – Frame Box and Mockingbird.

Frame Box

Frame Box is a free online tool for creating very simple wireframes. You can drag and drop elements and include titles and descriptions to make your concept even clearer to the recepient. You can share the created web page with a unique URL.

Mockingbird

With Mockingbird you can create clickalble wireframes. It’s a web-based beta software based on Cappuccino framework. The drag and drop, scaling, resizing and the easy sharing (from anywhere) with colleagues makes it an accessible and prefered tool from designers.

 

In love with wireframing already? Here are some more tools to explore:

Gliffy

You can even upload logos and own backgrounds to complement your diagrams; you can share, collaborate plus track and protect changes.

Mockflow

Gives the ability to map out an entire site and its structure; extensive built-in components -charts, menus, dropdowns; ability to upload your own images.

SimpleDiagrams

Desktop application, very basic, but you can easily drag, drop, resize symbols and add post-notes and photos.

Lumzy

Mockup and prototype creation tool with real-time collaboration, with a tool for team editing; can add events to controls.

Common problems/issues with wireframes when working with clients/projects

Sometimes designers are given some kind of sketches/wireframes from the client. If the client does not have much experience in creating websites, it would be more efficient to provide the designer with just a brief of the website’s goal, any useful information regarding customers/users and the product. Experienced designers have extensive knowledge about flows and user interaction and should be able to come up with a good wireframe easily, saving the clients the headache of creating one themselves. Even if the client submits a wireframe, it will often take time to communicate the idea of it to the designer. In that sense, it’s kind of double work.

It is also good practice to communicate with the client the level of wireframing needed for a particular project, the difference in cost and time for production. Setting clear goals for the project and giving the client options to choose from is always one of the key ingredients for a smoothly running and transparent process.

Will you use wireframing for your projects?

To use or not to use a website wireframe? We ask you the question, let us hear your opinion about wireframing in the comment section below! We are always glad to hear from you! See you next time.

Cheers,

htmlBurger team