Website frames

We’re now going to look at wireframes; essentially how your website will be laid out. Wireframes are important because you need to do it before you commit to a Web Developer and actually create a visual design.

You’ve got all the information that you need and you know what the 8 Key Success Ingredients are, but if you don’t plan it out correctly, then it’s easy to get it wrong. There is no point in knowing everything about what you need to put in your website if you forget to plan. It is so important that you plan it out with a wireframe if you want to build the Killer Website.

Imagine that you’ve got a particular website which is all about information provision. Your site is directed at a core interest group; for this example let’s say that it is a website based on cycling. Imagine “Peaking in the Alps” is a story in the middle of the page. This article could include information about cycling in France and the best Alpine routes; a story aimed at a specific interest group.

How would you lay out the rest of the site?

As this type of website relies on interaction, you should have the Social Media content links right at the top of the page so your visitors cannot miss them. You could of course, have the Logo in the typical place of the left-hand corner. However, make sure it’s not filling up so much of the screen that your customers don’t get to see some of the really useful information above the fold. (“Above the fold” is what the customer will see before they start scrolling on the page or “turn the page”, because it originally came from Newspapers. Have a look at different browsers and resolutions when you’re working out what we call “above the fold” as that position will be in different places.

It’s really important that we get some key information above the fold.

In addition to the Social Media Links being up there, it would also be useful to be sharing videos above the fold. People, who are into a specific thing, will want to see others doing that specific thing. So, you could have some videos of riders on the jumps in Cannock Chase for example, which will encourage interaction on your website. Remember, that’s the core purpose for this particular website.

Navigation needs to be simple and clear. In terms of our cycling site, the navigation bar sections could include UK Cycle Routes and Centres, European Cycle Routes and Centres and Coaching Courses. It is best to avoid too many options for website visitors on each page.

What about the Headline? Headlines are written to grab people’s attention. We’ve spoken before in “Writing Your Copy” about our friend AIDA, so straight away you can create a headline that grabs attention. You’ve got a subtitle which generates interest, and then you can move on to the story. Remember, this story doesn’t even need to sell anything, but it still needs to follow those principles. As your visitors read the information and become really interested, what are they able to do? Right at the top of the page, they can share this content with their contacts on Social Media. Again, we’ve talked about the +1 buttons, the ‘Tweets’ and the ‘Likes’ with the Social Bookmarking. This is what you need on every single page. So make sure that is in your wireframe.

What about capturing people’s information? Well, you could have a “Sign up for Course Information” section on your Home page, or “Send us your biking pictures”. There are lots of opportunities to get people to interact with your site. Remember to use a relevant image that draws the visitor’s attention and encourages somebody to actually scroll down. So, there’s lots of different things that you could have working together to achieve the objective of your website.

So that’s one particular site, but what if you were running an e-Commerce site? Let’s talk about this now. What are the key things that you would want to see? We are going to use the example of a clothing website and remember as always to put yourself in the visitor’s shoes. The first thing we’re going to see is a Guarantee in the middle of the page. You can even have it nearly as big as the Logo itself so it becomes eye catching.

Make your Guarantee stand out: “This is a 100% Fairtrade Cotton”. Don’t try and appeal to everybody. We’ve already spoken about being specific. The people going to this kind of site will be looking for Fairtrade and ethical sourcing, so make sure that a Guarantee stands out from the rest of your content. Again, keep the menu clean and simple; it could simply be “Wardrobe”, “Design Your Own” and”Supporting Producers”.

In this example you may have a story that’s interesting and engaging to reinforce your company values. It would reinforce why the particular visitor would want to buy from this particular site. This story doesn’t need to be above the fold.

What else would people want below the fold? You can’t show every product on the Homepage, it would just be a mess. So it’s best to showcase a few samples, such as ‘New Range’ and ‘Offer of the Month’ or you could split your Target Market into ‘Maternity’, ‘Women’, ‘Men’ and ‘Kids’.

Running special offers is a great idea. Revert back to the Success Ingredients we spoke about, what are the Special Offers? How can you make people feel more welcome for visiting your site? Once again, the Social Media Links should be at the top of your Homepage.

One of the key things to have on an e-Commerce Site, other than the Guarantee is the Shopping Cart Icon. Why is that so important that you have it on the top right of your Homepage? As your customers begin to shop, they don’t want a complicated process to get to the Shopping Basket. By putting that straight up there at the top of the page, you’re making it easy for them to buy from you.

What we’ve spoken about in this Wireframes section are just examples. You don’t need to sketch your Wireframes like an artist would. It doesn’t matter if it is just words that you give to a Graphic Designer to make it clear that you want these elements to be on your website. It doesn’t matter what is where, as everybody will have a different opinion on what will work. The point is that you need to go through the wireframe stage before you commit to anything on computers.