Work Completed / 500 Website
The IP telephony company, 500, commissioned us with the task of developing and designing their website. The outcome is a CMS driven website which looks professional, corporate and in keeping with the 500 brand guidelines. On the home page we have a 1 minute animation using a clever concept to communicate key messages. Check out the new 500 business grade IP telephony website.
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.
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.
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.
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 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.
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...