“This can be a tricky one…” says the secret agent on the site’s intro. A few seconds later, a sexy lady goes “You don’t need to look, you just need to drive”. Suddenly, you find yourself in the street of Paris, driving like a mad to reach the checkpoints with the precious help of the CK 20w car system from Nokia.

What a ride. Fantastic interactive experience, a game narrative in the pursuit of a challenge and the certainty that you’ll not forget the new product from Nokia (besides the GPS features it allows you to change your car tunes, handsfree).

This Nokia experience through the street of Paris, has also a great soundtrack and sound fx, so if you have a broadband connection then you are set for a ride in Paris. Speed up to the site, “or we’ll never make in time”.

• URL: http://www.the-passenger.com/
• Client: Nokia
• Product: Nokia Multimedia Car Kit CK 20W
• Interactive Agency: Fuel Games + Hyper Happen
• Film Production: Karbon Arc

Just a quick note on a freelance job i did last month, for a new portuguese B2B company: HamletB2B

Two of the partners are old friends so i helped them out, designing and developing a temporary internet presence. As we’ve discussed in a metting prior to the website launch, in today’s media landscape it’s essential to have an interactive strategy and a solid hability to communicate through digital channels. So, i’m expecting that HamletB2B will evolve to consulting on matters such as corporate blogging, internet PR and interactive branding.

Good luck Jayme an Eduardo.

Just in time for Valentine’s day, a new wicked website from Herbal Essences: Dump Cupid.

Some really cool stuff: a music video, a online game, a chance to win $25,000 and the (non) classic e-card “Help a Friend - Dump Cupid”.

With a smooth interface and subtle background sounds, it’s really handy for tomorrow.

The company of renowned web heroes Jeffrey Zeldman and Jason Santa Maria, just did a mid-winter reboot on their site.

Happycogg.com is now cleaner, more focused on content (as every site should be) and with a navigation on a H1:

We design beautiful websites, publish our best ideas, and speak to a worldwide community. Find out more about us.

Just moved to their new Philadelphia office, this sure is a peculiar way to start decorating the bureau. Find more about the redesign with Jason or Zeldman.

Great article from Mark Boulton on ALA, where he discusses whitespace, legilibility and brand positioning.
I was already a regular reader of his site, but this one is a concise and easy to read approach on the use of whitespace.

For more great content and work, check out his web site:

http://www.markboulton.co.uk/

Swedish interactive agency NorthKingdom has launched On Toyota’s Mind, an immersive experience with lots of cows and whistles. Literally.

It’s fun enough to listen to the comments in sweddish (english subtitles provided), especially if you remind yourself that Toyota is Japanese. What a clash of cultures.

The great thing about this particular interactive genre is the fact that it beats the hell out of those boring slideshow presentations and dull annual  reports that you show-off to clients. I’m not sure if this was the creative briefing, but it seems that while visiting the site, you end up knowing a lot more about Toyota.

• Demo website: http://demo.northkingdom.com/ihuvudetpatoyota/index_en.html
• Interactive Agency: http://www.northkingdom.com/

A common feature in a self promotion or portfolio website is the use of great music. Whether as a soundtrack in a film reel or a background loop throughout the whole site, using music sets the mood for how the user interprets your work.

The works above used music in interactive narrative in different ways, guiding users but also involving them in a multimedia experience that goes beyond the visual. Usually are chosen simple instrumental soundtracks or background loops with clear cuts and transitions, with special attention with the drum sections that define the general rhythm of the website.

The recent rise of Flash Video also gave birth to a new technique, with it’s roots in e-learning and presentations, that is the use of a narrator or animated character (in case you’re not that photogenic), blended with the background as a alpha channel.

Already employed by large corporations, the technique allows a more close connection with the user, with a first person speech and taking advantage of the way our cognitive process works and reacts to visual stimulus.

Finally, one of the most important ingredients of a great portfolio is the navigation or the “interactive toys” you let your user play with. These is the kind of experience that is really memorable since it breaks the usual point-and-click experience and replaces it with a immersing multimedia travel.

Interactive narrative is like a romantic diner: you clean and organize your place (information architecture), prepare the main dish (your content) and a nice desert (the navigation or toys). Then, with the right music setting the mood you might just get lucky. With the user, of course.

Color schemes seem to be a hot topic these days. Just after I’ve read Digital Web magazine article about color, Adobe launched Kuler, a tool that allows you to create and share color schemes.

These online tools are great but you get best results if you learn a bit about color theory. The role of light, primary and secondary colors, analog and complimentary or the works of Munsell or Kandinsky is a knowledge that always comes in handy no matter how good taste you have in designing your own color schemes.
While theory is great, nature still is the richest source of inspiration when you have to come up with something new. The psychological and anthropological connections of color, the tones and contrast that flowers use to attract the insects or the way the animals change their skins to repel predators are great examples of the importance of color in nature.

These relations can be brought to the web in many ways, for instance:

• Use yellow and green tones if your website has something to do with travel or agriculture.
• Choose colors that are clearly identified with the product such as brown chocolate, plum or olive.
• Red has a cognitive perception of danger and warning. You can use it when you need to have immediate attention by the user.
• Light yellow and blue in a horizontal layout can create a calm and peaceful design, reminding us of the beach, the sea and the horizon.

Another great choice you have to pick your color schemes from are the works of great painters, particularly those who excel in the use of color such as Kandinsky or Picasso.

[Colorful Ensemble by Wassily Kandinsky]

Find how color was employed by these artists or just use your Photoshop picker in some of the paintings and build your next Mona Lisa color scheme. If the natural way is still not enough you have a lot of resources on the web:

Tools

• Color Schemer Online v2
• Color Scheme Generator on WellStyled
• Color Palette
• Color Schemer
• Color Match redux
• Color Jack

Sharing:

• Daily Color Scheme
• Color Schemes
• Color Scheme project
• colr.org
• Colour Lovers
  

Other Resources:

• ColorWorqx
• Colorsontheweb.com
• HTML Colors
• Munsell Palette
• Color Lab (color blind simulation)

If you have some other great resources you want to share, feel free to post a comment.

Update: Veerle has an awesome article on the same subject

Andy Clarke, aka “And all that Malarkey”, from StuffAndNonsense, has just published one of the books every web designer should ask for Christmas: “Transcending CSS: the fine art of web design“.

The book is focused more on the creative process rather than the technology itself, as many of the publications in the field seem to do. The extensive knowledge of the author (who is an invited expert of W3C), known for it’s useful articles on web design will surely be a good starting point to creatives starting to explore the fields of web design.

When i have my copy available (since it’s only on pre-order), i’ll post the full review here. Meanwhile, you can check the companion website.

Update: just found out Malarkey’s Flickr photostream, so you can do a sneak preview of some of the pages.