Creating Celebfavorites.com
This is the second in a series of tutorials revealing the design techniques used on content-rich internet sites. In the first article, 'Dr Neil's new clothes', I included some interactive design basics such as selecting the parameters of projects and the importance of sketching initial ideas. If you have not already read the previous tutorial you may want to do so before you continue.
When we were asked to design an interface for a fun new celebrity-focussed website which embraces the Virtual Earth API and promotes the 'Windows Live' service http:// local.live.com, I was extremely excited. This article explains how we set about the task of designing and developing Celebfavorites.com and deals with the brand-issues involved with this type of project.
A few years ago I read: 'Making the invisible visible' by Hillman Curtis, it is an amazing book. One of the chapters focussed on something that has stuck with me ever since, Hillman mentioned that you should never set out to simply design a page, you should in fact 'make a place'. I always think about this when I begin a project, I enter every development with the intention of creating an expressive experience for the end-user. I want to create an emotional tie that links the website to its audience. The easiest way for me to explain this rule and the most obvious example is the Apple Ipod packaging, clearly when the product designers at Apple thought about how to package the Ipod they did not say: "Hey, lets make a box!"
With this project one of the first steps was to create a unique and memorable name, when I first got involved the project was labelled: 'View From The Top'. Whilst this may have worked as an offline brand we were not convinced that it was a suitable name for the website. For an online brand (or '.com' if you are still comfortable with that 'Web 1.0' term), the name stands alone, so it better be good! Here are five tips to help you choose great names for your projects:
1. The name needs to be available. Use a service like 'whois.net' to check this.
2. It must be a proper name; all of the success stories of web 1.0 had proper names. AOL, Amazon.com, eBay, Priceline.com, Yahoo! have all been proper names rather than common names.
3. Keep it short, in general the shorter the better.
4. Keep it simple. Simple is not the same as short; a simple word uses only a few letters of the alphabet and arranges them in combinations that repeat themselves.
5. The name should be speakable and sticky. When you have to choose between several brand names that seem equally good, the smartest name to pick is usually the one that also has a good nickname. Examples: Chevy not Chevrolet, Coke not Coca Cola, Fed Ex not Federal Express, Mac not Macintosh.
Before we arrived at the name Celebfavorites.com the development team and the client bounced a number of potential ideas around the table. This process can take a few days to resolve itself, it is very difficult to reach a solution any faster. Finding a name is a process that is made even more difficult by the necessary requirement to keep a project like this 'under wraps', the danger being that any security leaks could lead to somebody else registering the name first!
Before we finally settled on the name 'Celebfavorites.com' there were a number of alternatives that didn’t quite make it, to give you a unique insight into the project I have listed them here: Celebspaces.com, Starfavs.com, Celebhood.com, Celebrityspaces.com, Thecelebritymap.com, Starmapped.com, Allstarmap.com, Starfavourites.com
The reasons for not selecting any of the above names vary. Often the '.com' suffix would not be available, and occasionally it was just 'political reasons'. We are all extremely happy with the final result.
Next we began the process of 'branding' Celebfavorites.com, identifying the objectives of the project and ensuring that these goals are reflected in the design. I believe that the secret to uncovering a brand identity is in asking the client excellent questions; here are some of the questions that I posed, (If you click on the screenshot you can see my original Powerpoint presentation which includes and early design 'mockup').
Q. Who is your audience?
A. View from the Top uses 'The Power of Celebrity' to target a broader online audience than has previously accessed the 'Virtual Earth' technology.
Q. Who else is competing in your arena?
A. Celebrity Big Brother, MTV Cribs, Celebrity Maps, Hello Magazine, Heat Magazine
Q. What sets you apart from your competitors?
A. Unique technology, Location orientated, Exclusive celebrity information
Q. What is the objective?
A. Make MSN members aware of the 'Virtual Earth' technology and encourage them to use Windows Live Local.
With the initial artwork for Celebfavorites.com we set-out on a zesty and colorful design-route with the intention of capturing the celebrity vibe, these initial concepts were well received by the client. One of our ambitions for the project was to ensure that women were included in the target audience, we always envisioned Celebfavorites.com as a project that would appeal to both sexes, for this reason we pushed on with a colorful and kitsch look.
Once the client had 'bought-into' the direction of the project, we brainstormed features internally. As a global team this involved lots of Skype calls and OneNote shared sessions. At this stage of the development we needed to decide how far we could push the boundaries, one area of contention was navigation and usability, we loved the concept of an Apple style dock (Fig.4), but knew that this wouldn't sit well with the Microsoft Live brand, so eventually we opted for a 'Start Menu' style navigation which included image rollovers (Fig.3).
One of the unique features that made it into the first version of the site was 'tabbed' dialogue boxes; this was something that was previously unseen on a Virtual Earth mash-up before this project launched. 'Tabbing' is now a feature of the V3 release of Virtual Earth which also includes features such as ‘collections’.
At the next milestone the project had an interesting change of direction; large companies have special departments that act as brand guardians and Microsoft are no exception. The value of the Microsoft brand is estimated to be in the region of US$65,000,000,000, so you can forgive them for being a little protective! To our team this special branding department is affectionately known as the 'Brand Police', they are consulted on all of our projects to ensure that everything adds value to the Microsoft brand and doesn't damage it, everything has to meet with their approval and Celebfavorites.com would need a makeover before it went live.
Some substantial changes that brought the Celebfavorites.com website in-line with the Windows Live branding included neutralising the colours to meet with the Windows Live brand guidelines, removing the graduated banner at the top of the page and also removing the coloured stars from the Celebfavorites.com logo. As the design evolved we had to be especially careful that the functionality remained the same, the development team had already begun assembling the site. Essentially we were 're-skinning' a existing functionality.
Once the branding team were completely satisfied that the new direction was on-brand, we continued to work with the marketing team to collate the celebrity data, this trickled in right up to the live date. The final designs were 'spliced' using Adobe Photoshop and sent to the development team, I have included a zip file (click here), this shows how the web graphics were supplied to the developers. You can find out more information about exporting graphics in my previous article; 'Dr Neil's new clothes'.
An update to the Virtual Earth API was carried out shortly after the Celebfavorites.com site was launched. This meant that immediately we had to execute a tactical update to protect the site against any down-time, below is a screenshot of the holding page that we created to launch visitors into the latest version of Celebfavorites.com.
I hope that this tutorial has been useful and look forward to your feedback!
When we were asked to design an interface for a fun new celebrity-focussed website which embraces the Virtual Earth API and promotes the 'Windows Live' service http:// local.live.com, I was extremely excited. This article explains how we set about the task of designing and developing Celebfavorites.com and deals with the brand-issues involved with this type of project.
A few years ago I read: 'Making the invisible visible' by Hillman Curtis, it is an amazing book. One of the chapters focussed on something that has stuck with me ever since, Hillman mentioned that you should never set out to simply design a page, you should in fact 'make a place'. I always think about this when I begin a project, I enter every development with the intention of creating an expressive experience for the end-user. I want to create an emotional tie that links the website to its audience. The easiest way for me to explain this rule and the most obvious example is the Apple Ipod packaging, clearly when the product designers at Apple thought about how to package the Ipod they did not say: "Hey, lets make a box!"
With this project one of the first steps was to create a unique and memorable name, when I first got involved the project was labelled: 'View From The Top'. Whilst this may have worked as an offline brand we were not convinced that it was a suitable name for the website. For an online brand (or '.com' if you are still comfortable with that 'Web 1.0' term), the name stands alone, so it better be good! Here are five tips to help you choose great names for your projects:
1. The name needs to be available. Use a service like 'whois.net' to check this.
2. It must be a proper name; all of the success stories of web 1.0 had proper names. AOL, Amazon.com, eBay, Priceline.com, Yahoo! have all been proper names rather than common names.
3. Keep it short, in general the shorter the better.
4. Keep it simple. Simple is not the same as short; a simple word uses only a few letters of the alphabet and arranges them in combinations that repeat themselves.
5. The name should be speakable and sticky. When you have to choose between several brand names that seem equally good, the smartest name to pick is usually the one that also has a good nickname. Examples: Chevy not Chevrolet, Coke not Coca Cola, Fed Ex not Federal Express, Mac not Macintosh.
Before we arrived at the name Celebfavorites.com the development team and the client bounced a number of potential ideas around the table. This process can take a few days to resolve itself, it is very difficult to reach a solution any faster. Finding a name is a process that is made even more difficult by the necessary requirement to keep a project like this 'under wraps', the danger being that any security leaks could lead to somebody else registering the name first!
Before we finally settled on the name 'Celebfavorites.com' there were a number of alternatives that didn’t quite make it, to give you a unique insight into the project I have listed them here: Celebspaces.com, Starfavs.com, Celebhood.com, Celebrityspaces.com, Thecelebritymap.com, Starmapped.com, Allstarmap.com, Starfavourites.com
The reasons for not selecting any of the above names vary. Often the '.com' suffix would not be available, and occasionally it was just 'political reasons'. We are all extremely happy with the final result.
Next we began the process of 'branding' Celebfavorites.com, identifying the objectives of the project and ensuring that these goals are reflected in the design. I believe that the secret to uncovering a brand identity is in asking the client excellent questions; here are some of the questions that I posed, (If you click on the screenshot you can see my original Powerpoint presentation which includes and early design 'mockup').
Q. Who is your audience?
A. View from the Top uses 'The Power of Celebrity' to target a broader online audience than has previously accessed the 'Virtual Earth' technology.
Q. Who else is competing in your arena?
A. Celebrity Big Brother, MTV Cribs, Celebrity Maps, Hello Magazine, Heat Magazine
Q. What sets you apart from your competitors?
A. Unique technology, Location orientated, Exclusive celebrity information
Q. What is the objective?
A. Make MSN members aware of the 'Virtual Earth' technology and encourage them to use Windows Live Local.
With the initial artwork for Celebfavorites.com we set-out on a zesty and colorful design-route with the intention of capturing the celebrity vibe, these initial concepts were well received by the client. One of our ambitions for the project was to ensure that women were included in the target audience, we always envisioned Celebfavorites.com as a project that would appeal to both sexes, for this reason we pushed on with a colorful and kitsch look.
Once the client had 'bought-into' the direction of the project, we brainstormed features internally. As a global team this involved lots of Skype calls and OneNote shared sessions. At this stage of the development we needed to decide how far we could push the boundaries, one area of contention was navigation and usability, we loved the concept of an Apple style dock (Fig.4), but knew that this wouldn't sit well with the Microsoft Live brand, so eventually we opted for a 'Start Menu' style navigation which included image rollovers (Fig.3).
One of the unique features that made it into the first version of the site was 'tabbed' dialogue boxes; this was something that was previously unseen on a Virtual Earth mash-up before this project launched. 'Tabbing' is now a feature of the V3 release of Virtual Earth which also includes features such as ‘collections’.
At the next milestone the project had an interesting change of direction; large companies have special departments that act as brand guardians and Microsoft are no exception. The value of the Microsoft brand is estimated to be in the region of US$65,000,000,000, so you can forgive them for being a little protective! To our team this special branding department is affectionately known as the 'Brand Police', they are consulted on all of our projects to ensure that everything adds value to the Microsoft brand and doesn't damage it, everything has to meet with their approval and Celebfavorites.com would need a makeover before it went live.
Some substantial changes that brought the Celebfavorites.com website in-line with the Windows Live branding included neutralising the colours to meet with the Windows Live brand guidelines, removing the graduated banner at the top of the page and also removing the coloured stars from the Celebfavorites.com logo. As the design evolved we had to be especially careful that the functionality remained the same, the development team had already begun assembling the site. Essentially we were 're-skinning' a existing functionality.
Once the branding team were completely satisfied that the new direction was on-brand, we continued to work with the marketing team to collate the celebrity data, this trickled in right up to the live date. The final designs were 'spliced' using Adobe Photoshop and sent to the development team, I have included a zip file (click here), this shows how the web graphics were supplied to the developers. You can find out more information about exporting graphics in my previous article; 'Dr Neil's new clothes'.
An update to the Virtual Earth API was carried out shortly after the Celebfavorites.com site was launched. This meant that immediately we had to execute a tactical update to protect the site against any down-time, below is a screenshot of the holding page that we created to launch visitors into the latest version of Celebfavorites.com.
I hope that this tutorial has been useful and look forward to your feedback!
posted by Tricky at
2:02 AM
0 Comments
