beyond the banner

Thanks to Marc at work for this heads up. It is a good example of thinking beyond normal constraints (phew I didn't say 'outside the box'). And although this isn't technically brilliant it is a good idea and loads of fun. I won't spoil the surprise just promise you'll keep watching until the end :) It is worth it. Check it out here.

get the message

I am finally getting around to reviewing this awesome piece of work by Glue London for the Royal Navy entitled get the message. It's just a really nice execution and great use of flash video. So aiming itself squarely at teens and mostly boys at that, this site invites a user to create a video postcard for a friend by selecting from a preset list of 6 videos each depicting a different Royal Navy inspirational scene. Once selected you get to pick your friend's name from another set of presets (this won't work if your friend has an obscure name). And then you get to type in a message limited to a fixed character length. The video is rendered and you can see the results in the link at the bottom of this post. Even more powerful is the ability to send it to your phone. This is a really cool feature and the results incredible. I urge you to try it. What is really cool is that the audio speaks the person's name (hence the presets) and also dynamically displays the message written. The area the message is written is on a loop of video that has camera shake for added drama. The text field follows the movement of the camera shake which is really nice. I'm guessing this is done in flash but I suspect some heavy back end work is going on as well. Any ideas on how this is achieved would be greatly appreciated....


Check out my video here.

try drugs

This educational site about the dangers of drug use is very clever. Titled 'try drugs' the site is split into three areas exploring marijuana, cocaine and heroin effects. But the way the site works is to present you with a seemingly static page featuring an animation, some copy and a piece of music but turn things on their head by hijacking the controls. So for the marijuana section your cursor is sluggish and the copy blurred (until you rollover it) and at the end a pop-up warning window appears from the Norwegian crime unit saying that illegal activity has occurred with your IP address and country. For the cocaine section the cursor is hyper and over responsive and keeps taking lines of coke making the screen flash brightly with an email pop-up window saying that illegal activity has been spotted on this machine and the email getting sent to the authorities (although not for real obviously). And finally the heroin section is surreal with the copy exploding inwards and being generally illegible and lots of pop-up internet pages dealing with death and bankrupcy appearing. It is a clever way to highlight the effects of drugs on the user as for those who have never tried the drug you can get a feeling of what it is like to be on them.

Don't forget to vote for your favourite city break (right column)...

christian aid week

So it's Christian Aid Week this week and as they are one of our clients at GT we have produced a really nice microsite for them. A really cool idea taking the metaphor of the envelope and showing exactly what your small donation can mean. Visually realized with a cool 3D model and some nice animation all lead to a very effective little campaign. Nice work guys! Oh and please give generously if you can. It's a GREAT cause ;) Check out the microsite

javier ferrer vidal

I am totally blown away by this site for photographer Javier Ferrer Vidal who is in himself a fantastic photographer who concentrates on portrait work. This flash site is slick to the enth degree. The opening view of the kid in glasses has been broken up in Photoshop and put on layers within flash to create this really slick parallax effect. Little details like the plane flying through the sky really add to the drama of this shot. This kind of parallax thing is VERY in vogue at the moment and I can think of quite a few examples of this being implemented really well (check out this months winner over at the IAB for a good example). I am actually deeply involved in a project now for a client who wants this effect to showcase their product.

As you delve deeper into this site you get to the photography which is all laid out in a 3D space in a haphazard manner. Rolling over one image turns it to greyscale and blurred (god bless flash 8) and clicking on an image gives you an enlarged version. The navigation throughout is simple. One click to zoom in and another to zoom out. This style of navigation is quite intuitive these days and it is pretty much a given that by clicking on the background it will take you back out. I think this kind of work will lead nicely into any multi-touch work that may come in the future as we figure out what kind of gestures will work for this new interface (check out my other blog posts on multi-touch).

And then to finish off there is the contact section with an underlying bit of video as a background of some people on a merry-go-round. As you move your mouse right they playhead goes forward and as you move left it goes back. Yes this is really simple to implement but the effect is perfect especially given the subject of the video. Oh and underpinning all this work is a sound track of considerable talent. It is perfectly fitting and really quite catchy. All round a great site, perfectly exectued in my mind.

self titled

If, like me, you are constantly on the look out for new and interesting ways to navigate through a site you will love this one from John Iacoviello. Given a simple circle as the main navigation tool you click and drag to move the bar around the circle. Each segment of the nav is a section of his site and the colour coding helps you to move to different sections. This is something unique I think and really quite intuitive. Oh and also there are a bunch of flash actions available for you to download so check out the yellow section if you are a fellow Flashter.

one over

Mmmmm this portfolio site from Jon Ruppel, a designer/developer from Los Angeles, is just gorgeous. He has focused on a really clean layout that you can fully customize by changing background, layout and content. Interestingly this made me view a lot more of his work. I am loving the motion he has achieved in his tweens and I suspect he has discarded such crutches as the tween class in favour of hard coding it himself. The technique, if I am right, is this: nail your tween on the timeline and tweak it until it is perfect adding all those little extra bounces that make it look great (you'll need a high frame rate to get this looking good, I'd say 31 fps is best); then get flash to trace the x, y pos for you and push those to an array; use that array as the guide for each future tween and discard your timeline work. If anyone is really interested post a message and I'll send you some sample code as to how I would go about doing that. Check out the work here.

got milk

Some serious production values have gone into this excellent flash site built for the 'Got Milk?' campaign. What is lovely here is the attention to detail with a 3D modelled environment built to look like a miniature island. Tapping into our childhood love of board games you even get to toss a realistic looking die about your screen. Ok so the gameplay is a bit tough and if you are on a laptop with a trackpad you can forget it. But definitely worth a look and a bit of a play.

Play it here

hey gringo

I've been meaning to post this site for a while as it has stuck with me in terms of it being a fairly novel interface design. The basic idea here is that each page of the site is one side of a cube. And you navigate by turning the box left, right or back onto it's head. What is great is the concept here. What is not so great is the execution. Look out for those wibbly lines as the box rotates. This is created in the way the 3D effect is generated. As you chop up your image into triangles the distortion can lead to uneven lines when you piece them back together (see this tutorial for the full explanation). What is also bad is how difficult it can be to select an area of work to look at (it seems to just fly away from your mouse interaction...never a good thing!)

Check out the work here

bizarre

I know this is kind of off topic but I found this blog and I just found it so bizarre. The video is absolutely terrifying and not for the faint hearted. I can see why there was a wave of suicide after this one. Please be warned it is very graphic. Please click here with caution. Could it really be true that there are frequencies that we do not know about where communication is happening.... Please email me your comments (I am intrigued)....

iamstudio

iam-studios presents this FWA site of the day here. Using some really cool 3D character design with an animated robot dog with what looks like a speaker for a head. Drawing heavily on Pixar animation style here most notably their Luxo Jr lamp toon and also the imac g4 ad. But this goes a bit further and uses the dog's animation as you navigate through the site. Once you enter you need to use the blue pebbles to navigate through the site and each pebble has a different dog animation. Oh did I mention they are funny too. A nice clean design style with great use of white space. Simple, elegant navigation is the key here. But did they draw on our studios mantra at Good Technology (where I work) namely we are good technology (only he is i am studio, i am work etc) see the comparison here.

mono face

Happy New Year!!!! I can't actually believe it is 2007. But it is so I guess that means another chance to get it right. I stumbled across this site today and had to share (click here to access monoface). It really is just buckets of fun. A simple premise made even better by gorgeous photography and a tight clean layout. Swap the heads, eyes, mouths and noses around to create some weird and wacky Frankenstein's monsters. There are 759,375 possibilities and I want to see yours. Email me your version and I'll stick it up on the blog (screen grab the image: Shift, Apple 4 on a mac and press Print Page button on a PC I think).

Jeremy Willmott



Michael Parsons



Thomas Major

moto colours

Stroke of genius by motorola here. This is a gorgeous flash site designed to showcase the many colours in the moto range. You are presented with a floating colour palette whereby you can select one colour at a time. You then paint an animated selection of shapes and designs onto the canvas. The texture of the background is subtly a paper texture. The designs are bold and random and done in stunning vector art. Once you have created a design you get a chance to save and share the design. Or as a matter of navigation you get a dock of phones in all their colours at the bottom of the page which you can cycle through as you move your mouse to each end. Simple, elegant and entirely addictive.