How to Design Your Website Wireframe

How to Design Your Website Architecture
July 11, 2013
Do It Yourself SEO
July 25, 2013
Show all

How to Design Your Website Wireframe

In this instalment of Words that Bite, I show how to minimise the angst as you go through the process of putting your website together.

What is a website wireframe and why do you need one?

What is a website wireframe?

A website wireframe is a drawing that shows the placement of elements on a web page.

Generally, web designers use them before they start designing a website.

A wireframe shows the layout of a webpage without the distraction of visual elements, such as font styles, colours or graphics. It focuses on the website’s business purpose and functionality, rather than on how things are going to look.

Wireframes range from being as simple as a sketch on a piece of paper, to being sophisticated drawings produced by a range of specialist software. However, all you need is a piece of paper and a pencil. You do not need to become an expert in using wireframe software to create your own wireframe.

My wireframe for the Pink Rottweiler Copywriting home page looked like this:


Why you shouldn’t leave the wireframe to your web designer/developer

Yes, most people leave the creation of the wireframe to their web designer/developer.

The question is whether this is a good idea.

The answer is ‘Probably not.’

Unless you are going to hire someone who will research your business, as well as handling your information architecture, website wireframe and copywriting, it is smart to have a go at putting together your information architecture and wireframe before starting work with your website designer/developer. It will make both your lives easier because:

  1. It will force you to work out, from a business perspective, the purpose of your website.
  2. It will give your designer/developer much more idea of what you want your website to do for your business.

So, again, unless you are hiring a copywriter/information architect to research your business and come up with an online strategy, it is usually best to take ownership of the process of creating a website, not just flick all the responsibility to designers and developers. Although web designers and developers may be fantastic at their jobs, they are not experts in your business. They are not going to take the time to research your business, or pinpoint the purpose of your business going online, because, quite frankly, it isn’t what they do. In short, they are not responsible for working out what your website should be doing for your business.

That doesn’t mean I advise designing your own information architecture wireframe, and then, when you visit your website designer/developer, refusing to budge from what you have come up with.

Obviously, if you want a great website, it is crucial that you listen to your designer/developer. The process should be collaborative. You should come from a ‘business purpose/research/usability/functionality’ perspective, while the designer/developer should come from a ‘visual/usability/functionality on screen’ perspective.

The trick is working with the web designer/developer in a way that gets the best possible result.

What do you need to think about when putting together your wireframe for your home page?

Step 1: Look at other web pages

Spend some time looking at websites and deciding what style you like. I always spend time looking at ones that have won design awards because:

  1. It shows you what is recognised as looking good.
  2. You can explore how well they function.

Remember, a good website should not only look great but be easy to use.

Step 2: Decide where you want the menu bar

Most websites seem to have their menu bar at the top of the page, which is my personal preference, although I admit I’ve seen lots of well-designed websites that have the menu bar on the left-hand side of the page

Ultimately, it comes down to whatever toots your horn.

Step 3: Determine the location of your contact details

I am a firm believer in contact details appearing on every page. It always irritates me not to be able to find the contact details for a website quickly.

The prime real estate on any web page is the top right-hand corner, so I suggest that you place your phone number or email address there.

Less important contact details can be located elsewhere, but they should still be easy to find, on every page.

Step 4: State exactly what your business does

As I’ve said in a previous blog, it is vital to state on your home page what your business does for customers and clients. It is surprising how often this element gets overlooked.

For example, if your business is the largest retailer of fencing materials in your area, state that fact as clearly as possible.

Don’t leave it to the poor old customer to work out whether you:

  • install fences;
  • sell fencing materials;
  • sell wholesale fencing materials to fencing contractors; or
  • are a hardware store that stocks some fencing materials.

Consider placing the information about the purpose of your business at the centre of the home page.

Step 5: Include a ‘call to action’

Tell your customer, not only on your home page but on every page, what you would like them to do. In advertising land, they call this the ‘call to action’.

For example, tell visitors to your webpage if you want them to:

  • call a toll-free number
  • make an appointment
  • visit your shop or restaurant
  • buy something from your online store
  • subscribe to an eNewsletter
  • sign up to receive a copy of your eBook

Step 6: Include an ‘offer’

It is often a good idea to include an ‘offer’ on the home page.

Examples are:

  • a discount for anyone who buys something online
  • a discount for a limited time
  • a two-for-one deal
  • a free initial consultation
  • a free eBook in exchange for contact details
  • a gift

This can mean the difference between a customer or client thinking they might possibly be interested in your product or service, and a customer or client:

  • buying something from you online
  • giving you a call to make an appointment
  • requesting a quote from you
  • subscribing to your eNewsletter

Step 7: Avoid clutter

One of the biggest problems any website can have is clutter.

You’d be surprised how quickly the desire to add just one more piece of information, especially on the home page, leads to a webpage that is hard to read and messy.

Try to keep what appears on the home page to a minimum. With everything you include, ask yourself whether it really needs to be there or whether it can be located elsewhere.

To summarise

The purpose of your website is as important as the design.

For this reason, I suggest that, before you talk to your website designer/developer, you spend some time coming up with your information architecture and a website wireframe, so that your designer/developer gets a good understanding of what you want your website to do for your business.

In the next installment of Words that Bite the Pink Rottweiler will look at how to approach SEO.

Are you too busy running your business to think about your website? Would you like someone to look after it for you? If so, call the Pink Rottweiler on +61 (0)409 609 903 or email me at

Who is the Pink Rottweiler? The Pink Rottweiler is Genevieve Burnett – a copywriter who will take the time to research your business and come up with the smart words to sell your product or service.

Call Now