We feel that the variety of skills exhibited in this website is a good example of what Attitude Design is all about. Not only does the site look great, but it is functional, accessible, user friendly and communicates key messages strategically. Because of this we have taken some time to go over a few of its features.

Marketing Messages

We worked very closely with the 500 team to establish the key messages which they wanted to be communicated to the audience. We worked on the idea of their products being robust and their belief that “voice is mission critical”. We felt quite strongly from the beginning that a visual mechanism needed to be developed which would act as a way of consistently communicating these and other key messages.

After many hours of brain storming we had a selection of concepts which could communicate these messages through the medium of animation. The 500 team reviewed each of our ideas and the winner was “Agent 500″. This concept was based around a James Bond / Matrix character who embodies the 500 brand. He is used to carry the key messages to the audience and presents them in an engaging way. The general idea is that he is placed in different scenarios or missions which he completes. We have only developed one so far but more are planned. This concept works well as the site is aimed at a male dominated target audience.

Design & Layout

The overall design is clean and simple and in keeping with 500’s brand guidelines. The site is not cluttered and is very clean and easy on the eye. This is so that the content does the talking and gives a professional, confident persona.

The layout has been strategically designed to maximize the probability of the eye falling upon the priority of each page. We base our designs upon the findings of the Eye Track III viewing pattern research. The home page for example has clear areas - where things have been placed according to their priority, in the order which will naturally allow the top priority item to become most noticed.

Animation

The animation was developed from a series of ideas, which we developed, based around the Agent 500 concept. More animations will follow but this one is dedicated to the communication of the fail safe options which 500 solutions offer. We worked very hard to discover a unique style which reflected the brand ethics and which could be animated. Here are a few of our initial mood boards:

The concept places Agent 500 against a bad agent. We worked alongside the 500 team initially to get the overall message right. Each frame had to be sketched out, first by hand and then illustrated using the computer. Please see below our early story boarding:

This hand drawn story board was then developed into a series of illustrations. These were completed in Adobe Illustrator and then placed into Adobe Flash for animation:

The overall effect is a feature animation, complete with sound effects and voice over. The animation communicates the key message whilst engaging the audience and making a subject which would normally be quite boring - fun and interesting. This is what we love to do - come up with concepts which are purpose driven to amplify messages.

The Technical Side (Geek Speak)

The site needed to be controllable by the 500 team. They wanted the ability to add, edit and delete pages as well as post recent news and white paper articles.

The solution we came up with was to customize WordPress, an open source (free) piece of online blogging software. This saved a lot of development time (and therefore cost) and was a far more cost effective solution than if we had produced a fully new, bespoke system. Also, WordPress doesn’t require a license fee for upkeep as other CMS systems do.

We find WordPress one of the best systems around and have used it on many of our recent CMS projects and some projects which are still under development. In fact this very site is driven by WordPress.

We produced CSS and HTML templates - all of which are accessible and built to a high coding standard - these were then integrated into WordPress.

Conclusion

So there we are. A little bit of the behind the scenes strategic thinking which we, at Attitude Design, bring to projects. If you have any projects which you would like us to take a look at, please do not hesitate to contact us »

What do you think of the site dear reader? Does it work for you? We would be most interested in your feedback…

The design was developed from the company’s existing colour pallet and logo - a classic but eye catching font was selected and an interesting typographic mix produced a slick, simple, positive, clean and message driven design - all communicating quality.

It’s always nice to have our hard work recognized, especially if it is from design experts - We just wanted to say a huge thanks for all of the support we are receiving. Here is the ‘cream of the crop’ of some of the sites which have exhibited us:

• CSS Container
• CSS Hive
• CSS Mania
• CSS Glance
• Pristina
• CSS Design Yorkshire
• Ala Brazil
• CSS Clip

Joe Dizon “The Model”.Holmar Filipsson of ‘The Spenser Filipsson Experience’ for allowing us to use the superb “Happy (Love Is Everywhere)” music track.Anders Analogue for the ‘drum n base’ music track.Copyright for help sourcing equipment and for technical support. 

What is a “Home Page”?

A homepage is the first page the user comes to when typing in your url. This page would normally introduce your site in someway and it is the way in which your site is introduced which we want to focus on. One thing we want to make clear is that a “holding page” is not what we would class as a home page. A homepage offers you the navigation for the site and is “functional”. As a side point, Flash introductions and pages which say “click here to enter”, are not only terrible from a search engine perspective, but also from a usability perspective. So we are not talking about holding pages, in fact we don’t even believe in them.

What do you want your Home Page to do?

The Home Page is different from the other pages on your website. Why? Because the user has not asked for any specific information that they will see there. They have not clicked on an “about us” button or an “our services” link. The Home Page is all about what YOU WANT the user to see. It’s a portal to show the user what’s in the website and sell the information held further within the depth of the site. When the user clicks through to another page that page will display the info the user has requested - but on the home page the user hasn’t request any information yet. To keep users on your site you will need to show the user at least one of two things 1) What they came to the site to see or 2) Something that they didn’t expect but, upon seeing it, they will be interested in. For example you may go to a supermarket for milk but at the checkout you notice the chewing gum, nicely and conveniently stacked by the side of the till. The next thing you know is you have bought the chewing gum as well - something you didn’t go into the shop to buy! This principle can be used within your home page design. Normally, what you want your Home Page to do, is to give a balance between showing the user what they expect to see and attracting them to areas of your site they might not have known about but that you want them to be tempted by.

The “Shop Window”

Retail shop windows carry massive lessons for home page designers. Take a high street fashion shop for example. The shop window will typically contain the following - the logo of the shop, some attractive graphics, some plastic models displaying a wide range of garments which are sold in the shop.

Now a website is slightly different but the ideas are the same. The logo will give the overall authority and brand recognition to the website as it does above a shop window. The attractive graphics mean that the user’s eye goes to the area of the site which you want them to go to. These graphics may carry key messages which entice the user to go to that section of the site. Then there is a wide display of tasters from different areas of the site like the wide range of garments used in show windows. All of these things need to sit within an overall structure so the user can navigate simply and effectively.

Another lesson that can be learnt from shop window displays is that they are always changing. New products, new displays, new seasons. If there is a sale red “sale” words appear. They are always changing. This brings interest and attracts attention. It’s the same with your website. Update the information, change the main image / messaging graphics. Do you have a latest news section? Pull areas through to the home page. These things help to keep your site looking fresh.

Priorities

When designing a Home Page though, because there will be so many areas of your site which are important, you need to make some decisions. Firstly you need to ask; “what areas do I want the user to go to”? Then ask what areas will the user probably want to go to. For example you might find with a bit of research that people are coming to your site to read your blog - which is nice - but you want them to buy your products. Once you have established a user pattern you need to decide on the priorities of each section of the site. This will help you to create a Home Page which will have the balance. It will have enough of the things the user will want to see to make sure they don’t go away, but it will also have those things which you want the user to see. How do you find out what your users are doing? Install Google Analytics - It’s the best free website tracking software. Poynter have some very interesting research results. Basically they tracked where users eyes go over a site. Top left is most popular - bottom right is least popular. See the example below:

The above is of course, just a guide because if strong graphics were used on the bottom right the eye might levitate to that area. However it’s important to understand how people will naturally look at your website and make things easy for them.One thing which is essential is that you give the user an easy way to navigate and that they can clearly see they have come to a website owned by your company. Normally this is done with a consistent header bar which includes a logo and the main sections of navigation for the site.

Keep the message simple

The problem that some people have is that they want to say so much to a user that they cram everything in their home page. Remember sometimes less is more. Consider the apple site below:

The user clearly sees what Apple want them to see, although areas which the user might want to look at are displayed in four boxes below or they will be able to access them via the navigation at the top. In this example Apple have basically got 4 levels of priory. 1) the main message area, 2) The 4 boxes 3) The navigation and 4) the footer. Obviously things may be different for your company and your priorities may be different from an established brand like Apple.Heres another example from Skype. The text can be picked up by search engines but there really is only one thing they want you to do - download their software.

Last example - Ebay below - they have a few things they want users to do.

If you are not signed up, they want you to do so, so thats there as a priority. However what they also want people to do is get shopping so they have a few ways of doing that. One is a list of areas of products, another is by pulling our collections which may interest the user. All have the main aim of getting people face to face with the products - but all communicate what Ebay does best.We could of course feature many more sites but we’re confident by now you will be able to take the form of thinking we are promoting and apply it to your website. Get those priorities right and then your home page will start working far more effectively than if you haven’t thought things through…

Stay up-to-date

Just as a retail store may keep giving it’s shop window frames a fresh lick of paint and changes it’s window from season to season, so your site will need to be updated on a regular basis. Is your site a couple of years old? Chances are that web-design has moved on, even in 2 years. There will be new technologies, better techniques and new design styles.Also consider that peoples browsers change - IE6 might be the most popular browser for your audience today but maybe IE7 will be in a years time. What if your website falls apart in IE7 because it was not tested for the latest version. It’s important to review your site on an ongoing basis to ensure you maximize what the web can do for you.

SEO

Search engines have a massive influence on how many people will visit your website. This is where Search Engine Optimization comes in. Your home page is the main page of the site that will feature in the rankings. It’s worth getting an expert to analyze it and suggest improvements so that you can rank higher than your competition for key search terms.

Other interesting articles on this subject

Want to find out more - well folks if you liked that you’ll love these:

• Alert Box | Top Ten Guidelines for Homepage Usability
• A List Apart | Home Page Goals
• UX Matters | Home Page Design
• Web Style Guide | Home Page
• Alert Box | The Ten Most Violated Homepage Design Guidelines

Conclusion

So there we are, a brief outline of how you can improve your homepage, your online shop window. If you have any comments or suggestions that could help others please leave a comment…

This article can also be found on Fadtastic