north america

The Build

By | @instrument | No Comments

the-build-1

the-build-2

the-build-3

 

Nice site – an interactive video documentary showing the lives of three custom motorcycle dudes. Essentially three different stories divided up into chapters. Really nice interface that comes in when you select a specific chapter, revealing what you can see – love the way you can scrub through the video on rollover – the image gallery is a treat. Love the amount of polish and craft that has gone into this experience – all the transitions, animations and effects have been crafted and perfected. A real showcase into what can be achieved with animations, video, and transitions.

Created by Instrument (@instrument).

Site here…

Under Armour – I Will

By | @firstborn_nyc | No Comments

underarmor-1

underarmor-3

underarmor-2 

Site for Under Armour, sports clothing – another long scrolling site with lots of depth. You scroll through various people doing sports, wearing the clothes and equipment – copy floats on the highest level, background on the lowest – with a line running through the site with images / video scrolling down along with it. Large bold typography really adds to the impact. Nice transitions, cool scrolling effect and animations – all wrapped up in a nice design.

Created by Firstborn (@firstborn_nyc).

Site here…

Travis Rice – On His Own Terms

By | @webdesign | No Comments

travis-1

travis-2

travis-3

travis-4

Nice magazine style site documenting an interview with snowboarding maestro Travis Rice. Nice large full bleed imagery, large text and magazine layout. Love the little animations as you scroll, and the transitions to the next section – the current page sliding back and so on. Nice touch is that it is responsive too. Great example of an editorial, easy to browse and read site, will great imagery and subtle animation.

Site here…

Oakley Airbrake

By | @oakley | No Comments

oakley-moto-1

oakley-moto-2

oakley-moto-3

 

Really cool site for Oakley’s new goggles for Moto Cross. Essentially a long scrolling page – with scrolling triggering animation – in line videos, nice exploded 3d views and so on. The great part of the site is the fact it is responsive, so on the larger screens you get the full parallax experience, on mobile you get a stripped down experience and on in-between sizes you get fewer animations. The animations are fluid and it all comes together to really explain the product well – great example of a responsive parallax scrolling site.

Created by Oakley Digital (@oakley).

Site here…

Tanlines – Not The Same

By | @okfocus | No Comments

Tanlines - Not The Same

Tanlines - Not The Same

Tanlines - Not The Same

Fun interactive music video presenting you with keyed out videos of the various tracks in the song – all wrapped up in an old school Photoshop interface. You can turn on and off the various tracks i.e. vocal, guitar, keyboard and so on – and also change the background to a life fish tank, NYC, Jupiter and so on. Irreverent and playful, a fun interactive music video.

Created by OKFocus (@okfocus), and The Creators Project (@CreatorsProject).

Site here…

Form Follows Function

By | @cmiscm | No Comments

Form Follows Function

Form Follows Function

Form Follows Function

 

Pretty cool site of interactive HTML5 experiments. All set within a ultra minimal interface comprising of a draggable wheel, clicking on one of the items transitions to the experiment launching full screen. Love the typographic style and bold colours and minimal interace. This guy is seriously pushing the boundaries of what is possible right now in Canvas / CSS / Javascript – pretty impressive stuff. Great reference to demonstrate to people to the possibilities of how far we can go!

Created by Jongmin Kim (@cmiscm).

Site here…

Welikesmall

By | @welikesmall | No Comments

Welikesmall

Welikesmall

Welikesmall

Welikesmall, nice new portfolio for this digital agency based in Salt Lake City. Nice responsive layout and lots of transitions – love the case studies for each project – a blend of animated gifs / videos / nice visuals and well explained ideas. Each section is different and interesting to browse through. Cool site, looks good, works across lots of devices – modern responsive approach.

Created by Welikesmall (@welikesmall).

Site here…

The Rational Keyboard

By | @ftzo | No Comments

The Rational Keyboard

The Rational Keyboard

The Rational Keyboard

Interesting site this – The Rational Keyboard. Has to be seen and played with – best explained by the man himself: “The Rational Keyboard is an HTML5 web app demonstrating a consonance model injust intonation. It’s kind of like a piano with infinitely many keys (one for each rational number) that move around and resize based on what sounds good.”

Essentially – play around with it, fascinating work and utterly mesmerising – looks great too. You can spend a long time here playing around with the sounds and watching how the keys blend and change size.

Created by Fritz Obermeyer (@ftzo).

Site here…

Boundary Breaks

By | WEBSITES | No Comments

Boundary Breaks

Boundary Breaks

Boundary Breaks

 

Site of Boundary Breaks wine from NY. Great looking typography and photography site – with some really nice touches. They go into great detail about how the wine is created, who is behind it, nice big photos – all aimed at getting across the ‘soul’ that goes into the wine. Nice looking minimal layout, each section is different and interesting, and the homepage is really quite unusual – a scene from outside of the vineyard  which shows a timelapse according on the position of your cursor. This all adds up to give a real ambience of the site, I love the ‘without compromise’ section – really interesting way of labelling where you are on the page, nice offset type and so on.

Created by Sons & Co.

Website here…

 

Here At Home

By | @thenfb | No Comments

Here At Home

Here At Home

Here At Home

Site from the National Film Board of Canada – highlighting the plight of homeless people in Canadian cities – an starting an experiment to home thousands of homeless people to see how much this costs vs not homing them and then treating them in drug clinics / shelters and so on. A brave experiment from the Canadian government. On top of being a fascinating story – the site is beautiful. Lots of cool transitions and lovely attention to detail. The homepage is a visual treat of swirling balls of colour and video clips. Exploring the cities we see a more infographic approach to the layout and design. The way things move around the screen and the way text animates is really nice as is the art direction – all in all a nicely rounded experience.

Created by National Film Board of Canada (@thenfb).

Site here…

 

Jam With Chrome

By | @google | No Comments

Pretty amazing feat from Google – Jam With Chrome. A multi-user musical jam session! The level of detail and complexity visually simplified here is incredible (It’s all created in javascript and so on too). Mind-blowing really… Really fun to play with and nice angular art-direction, loads of nice animation and transitions. Love the ‘pro’ and ‘easy’ ways to play, loads of little customisable features such as bpm, key, distortion and so on. Really really cool, looks great, and fun to play with.

Created by Google Creative LabTool (@ToolofNA), and Rob Bailey (@RobJamesBailey).

Site here…

 

Chrome Experiment #500

By | @google | No Comments

500 of the best Chrome experiments – a mixture of the latest WebGL / CSS3 / Javascript experiments. Love the interface – a swirling mass of shapes colour coded by subject, for example 3d, physics, and so on – which by itself is fun to play with. Rolling over the dots gives more info about that project, clicking through will take you to the example. Clean, clear, fun – what more could you want – loads of great experiments to discover.

Created by Google Creative Labs.

Site here…

Denon Visualiser

By | @jam3, WEBSITES | No Comments

Promoting the launch of a range of Denon headphones this campaign site visualises how it might feel in an interesting way. Using the frequency analyser to map the range and volume of frequencies animating to music – all applied to faces wearing the headphones. Love the approach and the detailed view of the headphones, again the 3d parallax comes into effect.

Created by BBDO New York (@BBDONY) and Jam3 (@jam3).

Site here…

Clouds over Cuba

By | @MartinTweets, WEBSITES | No Comments

Fantastic documentary site about the Cuban Missile Crisis. Highlighting the context for what happened, using videos and images – and interesting interviews – even with a section for ‘what if?’ an alternative ending for what might have happened. Lots of really nice user design, transitions and animations  – the line is really getting blurred now between what you can achieve with the latest CSS and HTML when compared with Flash. Love the minimal design and smooth animations and interactivity. Also happens to be a fascinating subject – brought to life in a fun and interesting way.

Created by The Martin Agency, @MartinTweets.

Site here…