How to wireframe your new website

Wireframes are critical to the success of any project because it allows all stakeholders have critical input early enough to assist the actual design process. It saves time, money and creates a better result.

What is a Wireframe in Web Design?

A wireframe is a skeletal (bare bones) layout guide for your webpages. It displays the structure of a web page without the use of images or colours or content, so you can see and define the page elements.

By definition:

wireframe-definition

Wireframes allow you the ability to define how you see you pages being laid out in advance of choosing anything else.

Wireframes also help create the foundations you will need on determining your content needs.

Wireframes guide the design process in a way that allows for the important things to be prioritised in your hierarchy of content / elements so that you get to make critical decision when it’s easy to change.

Equally important to understand is What a wireframe is NOT.

What a Wireframe isn't.

Wireframes don’t involve images, artwork, or colour typically. Once you move into the realm of visual imagery you aren’t working on wireframes you are working on design mock-ups / prototypes that are part of the visual design.

Understanding this difference is very important.


Wire Frame Structure

When to wireframe?


When to wireframe

Wire framing should follow the Scope phase, so that you are wire framing what you need, not inventing on the fly.

Wire framing is an important part of achieving the best end result. Not because more steps necessarily make a site better, but for you to take control of the process of what your site needs to be.

Many people hand over all control of the design process to the designers. While that may make sense in many instances you are assuming that the designer has the skills to achieve the best result for your business.

Many web designers are front end visual designers who ultimately draw inspiration from themes or other designers work. Don’t fault them for that, we don’t need to re-invent the wheel here but also many business decision makers similar choose their end resulting web site based on what they like about someone else’s site.

If you don’t understand the why something exists in a design you copy can mean it doesn’t have any impact for your business if you apply it to your sites design.

I recommend you don’t over control the actual visual design process, and the justification for that, apart from two decades of experience of how wrong that can go, is knowing if you spend the time in research, wire framing and content you will be much happier in handing over the reigns to the design team.

You will know they have everything they need to give you a resulting end product you will love.

How to Wireframe:

A piece of paper is a great starting point and I will still often do the first sketch there and move to a digital copy later.

There are numerous methods and tools for drafting up wireframes electronically, and you can choose the method that suits you the best.

No need for you to purchase an app or piece of software unless you are going to be producing wireframes regularly.

I typically use Balsamiq which is a great app and is fast for me to utilise. Previously I have used word or powerpoint to do the exact same thing.

I found Powerpoint is too restrictive in the size of screen so for many people Word or Google docs will be more than suitable.

Don't get bogged down in the tool you will use, and don't be overly concerned about exactness or whether your wireframe 'looks as good' as a designers. A wireframe is instructional and isn't an exercise in design.

Tips:

  • Create a page template (basic outline) that you can re-use over and over
  • Start with the simple outline, reflect later on the hierarchy and priorities.
  • Think more in terms of what needs to live in page, and what doesn’t to begin with.
  • Ignore ‘other sites’ looks, learn more from other sites ‘layout’.

Page Layout Basics

Starting point:

The base page layout. Typically for most sites you will be utilising something similar to the layout below for the overall page.

Desktop view:

Wireframe-Base-Structure

This convention tends to stand true for pages designed for desktops and most of our needs would easily be contained with it.

The Header is what users see first, and typically holds branding assets, primary navigation and key devices involved in consistent user interaction (e.g. search, shopping cart, contact info etc.).

The Body being where most of the dynamic content will live and where much of the user interaction takes place.

The Footer is the base and end of the page which might contain less critical information but useful none the less. It may hold links to items that reinforce the header or encourage general interaction with less obvious resources.

On mobile / responsive this still works, however the complexity comes later as you start to design for multiple view points and your pages get more involved.

While this is practical for laying out what a page contains invariably your key wireframes will be built from the top down and be as long as you need them to be.

For the purpose of my wire framing I use a grid typically divisibile by 3 that matches to the way we invariably design and build things, so they are responsive and friendly in multiple sizes and allowing for sizing that is practical to hold content.

In the examples shown from Blasamiq my grid is 18 units across.

Wireframing Process

The full process summary:

  1. Initial wireframe, simple lines / shapes, no additional shading or colour. Desktop version.
  2. Review wireframe referring to key materials already developed (e.g. research, must haves, scope pages, audience information and other data
  3. Refine Layout and work on Mobile version of the same page including steps 1 & 2 again.
  4. Refine layout, insert priorities visually (bolding, highlighting, shades)
  5. Finalise shading and highlighting and add examples if necessary to finish the wireframe.
  6. Rinse and repeat.

NB> Due to the way most people make decisions I have given Desktop the priority in how things are laid out. I don’t believe this is the correct order specifically (less so in recent years) but it is workable and no one gets excited over a narrow layout mockup for a phone. Sometimes reality needs to be held in check to help you get the task done, which means providing key stakeholders something they can understand.

A Working Example

Let’s put this into practice using the Legal Services example in our scope.

The Contact Page.

Create the top of the page, focusing more on the key structural elements not the detail, which will come later.

header-wireframe

Our header has been split now to show the navigation bar.

While this tends to predicate that a horizontal navigation bar will be used in the actual design, that isn’t necessarily the case. Despite what you build in your wireframes, actual detailed design discussions will still take place with your design team (assuming they’re fully engaged) about the best method to implement the navigational device you are laying out.

We aren’t adding in actual navigational elements (menu items) at this point and there is still much room that may need filling in the header and nav bar, but this gets us under way.

We are aiming for the big rocks first, little rocks come into the process when we have identified our most important elements and those that are needed.

Keeping in mind our primary goal / purpose for this page:

contact-purpose

and the multiple ways mentioned that are listed in our functionality list:

contact-functionality

we want to place those item blocks into our page and move them around until we are happy with how these two elements work together.

The evaluation for this page is that there are 2 primary methods of contact we want to drive: Phone and Email inquiry.

All other forms are of a lower priority to us and less effective, and Fax is something important in legal transactions but not a primary item. It needs to be present but not too dominate.

Our location is important too.

contact-page-wf1

At this point we are simply putting boxes and lines in place. Hopefully the Key numbers box is obvious.

Typically a design would put the photo at the top and make it the ‘feature / highlight’ of the page and everything else underneath.

If we stay true to what we have already identified as most important then the photo is of much lower importance (and only a suggestion at this point). This form of layout helps us see if it’s even practical to keep.

Remember this page has a BIG purpose and that’s to get inquiries. If the photo doesn’t help then remove it, if it helps with a secondary or third goal then keep it but use it where it needs to be.

Look at how the mobile version of this page would look:

contact-page-mobile-wf

Imagine if we had the office photo at the top. On most typical smart phones and smaller devices all you would see would be that image and the header.

Not a result driven or user friendly experience at all.

Bring in more detail.

In our current example here is the next step:

Contact-page-desktop-2

Notably at this point we aren’t using complete content. We are indicating the content type we think would go there. Knowing full well someone in content production will need to review each and every word, this is more indicator content that helps everyone understand intent.

Using Balsamiq the icons and options I have chosen are in some instances heavier in colour than desired.

When building wire frames of this type shades of black and weight tend to emphasise the priority of elements.

Consequently some of the icons are weighted heavier than I would like.

The footer is definitely not as important as the higher elements in this view.

Right click on an icon to view properties. You can change colour and other settings in there.

By changing the colour weights to lighter shades I am able to indicate the visual hierarchy without brining in colour. I realise my role isn't to choose colours, I want my professional designers handling that. Using 'Shades of Grey' will help them understand quickly what I value as important.

Contact-page-desktop-3

The changes are subtle but very important.

Progressively you are building out each page. Element by element and considering the for who, what and why about each and every element.

Staying with the ‘every page has a purpose’ philosophy and ‘designing’ the best way to achieve this goal that you can invisage is the key area of design that needs your input.

You don’t have to understand if it’s technically possible, easy or hard, you need to understand if it’s important or not.

My view is that if most stakeholders who want new results for their websites got to this box only phase in the scoping process, more projects would end up with better / more successful results.

The following steps are cream and more depth to the process. Do them, do them well but also understand getting to this point in your process of wire framing for every page is a major development.

Tips:

  • Make a desktop and a mobile version for each key page / page template.
  • Every page needs to be designed don’t fall into the trap of using a bulk standard template model
  • Sites can be built with many different styles
  • Treat every page as a key landing page that is the key to the success of the next step or it’s failure
  • If you design a repetitive page type (e.g. blog post) then only wireframe up a single instance of key areas – post, archive page etc. These are acceptable to use a template model for.


BUY the entire guide as an ebook or paperback

 

Buy the Guide

 

Available on Amazon, Kobo, iBooks, Barnes & Noble and other great bookstores

Free access to the Website Planning Guide Facebook Group with any version you purchase