PREQUEL

It’s the 25th January 2016, and I’m lucky enough to be going to Amsterdam for the Awwwards conference. A late addition to the already-impressive bill of speakers is Hi-ReS!, a design agency whose early work inspired me to start a career in this industry. Excited, as you can see, is an understatement.

CHAPTER 1 – PAST

I may be showing my age (a bit), but let me take you back to 1999 when the internet was in its infancy and I was trying to become a Bachelor of the (Dark) Arts at Southampton Instititute. My eyes were opened by the work of Hi-ReS! founders and designers Alexandra Jugovic and Florian Schmitt, who made their names creating memorable experiences with immersive Flash websites.

I remember very clearly the first time I experienced Soulbath, their first ‘digital art experiment’ and non-commercial website sitting in a darkened computer room in Southampton. The site was described by Hi-ReS! as: “mainly void of colour and celebrating malfunction as a source of beauty and surprise”. The interactive element resonated strongly with me, inspiring me to create my own piece of project work in homage to my own experience with the site.

Hi-Res Soulbath website

Part of my connection with Hi-ReS! was how they worked with filmmakers to expand the cinematic offering and further explore the theme online. In 2000, on the back of the success of Soulbath, they got their first commercial project working with filmmaker Darren Aronofsky on Requiem for a Dream.

At the time Hi-ReS! said of the site: “The idea was absolutely inspired by the film. We wanted to create a website that rots, falls apart and finally kicks you out”.

Hi-res! Requiem for a dream website

In 2001 Hi-ReS! created what is possibly their most well-known site for the film Donnie Darko. In an extract from the Hi-ReS! website they say: “What attracted us to Donnie Darko, was its narrative structure and the possibilities it offered for an online expansion. While the film plays over a period of 28 days, the site becomes the narrative’s prologue and epilogue and reflects the film’s puzzle-like structure in the way it is constructed and left open-ended...”

For me, this was their best work, and I have fond memories of how I felt while interacting with the site. If you haven’t seen it before or if, like me, you haven’t seen it for 15 years, it would be interesting to hear if you think it stands up over all these years and resonates in the same way.


Donne Darko gif Hi-res                                                                    

CHAPTER 2 – PRESENT

Fast-forward 15 years to 2016. I’m in The Royal Tropical Institute, a stunning neo-renaissance building, for the Awwwards Conference in Amsterdam, where Hi-ReS! are giving a talk entitled ‘Making the Internet great again’.

It’s not Alexandra or Florian at the helm, but their two colleagues, David Paul Rosser and Le Shka, who have worked and produced their latest experimental project VOID. It’s described on The FWA (where it wins cutting-edge site of the day) as “a playground for us to experiment with new visual and sonic concepts and technology … or Soulbath version 2.0 (15 years late)”.

Awwwards Amsterdam

Hi-ReS! can no longer create immersive websites using Flash technology (it is 2016), so VOID, although purely a desktop experience, was built using WebGL and web audio technologies. It’s their latest attempt at exploring how digital art can be perceived and interacted with on the internet. If you’d like to read more on the technology behind VOID, take a look at this excellent post from Hi-ReS! Creating the VOID.

Hi-Res Void Website

As luck had it, Hi-ReS! just completed the next instalment of Void Chapter 2 – Pandora, launching it the day before the Awwwards conference. For the presentation they attempted a live demo of the site, asking the audience to connect using their own devices to the multi-user experience, and explore a new dimension of sound and visuals in the auditorium.

Unlike the first chapter of VOID, VOID Chapter 2 - Pandora worked across all devices. Unfortunately, due to technical difficulties in the auditorium, it failed to work in front of hundreds of designers and developers from around the world. Hi-ReS! had a trick up their sleeve, though: simply enter the Konami Code when the site loads (Up, Up, Down, Down, Left, Right, Left, Right, B, A) and you can experience the site in retro Hi-ReS! style, putting us all right back in 1999.

Hi-Res Void 2 website

THE MACGUFFIN

I’ve already touched upon the fact that Hi-ReS! sites are full of emotion, so it was great to take part in the workshop: “A guide to designing for emotion” with Henry Daubrez from award winning Belgium design agency Dogstudio. Their site for Dragone won users’ choice Site of the Year at last year’s Awwwards conference in Barcelona.

Dragone Dogstudio website

I’ve been a long-time admirer of Henry’s work, and his workshop gave me an insight into how he creates beautiful, rich imagery with depth and emotion, all from the most basic of client-supplied assets.

The way he uses images to tell stories means he brings sites to life through a combination of illustration and graphic design. His websites are taken to a new level of emotion not currently seen in the flat design trend we have seen across digital design for the last few years. I’m looking forward to passing on a few of these techniques to the rest of the design team and bringing some of these influences into the sites we design here at e3.

CHAPTER 3 – FUTURE

It’s Friday afternoon, and after 17 talks across two days, covering the many different disciplines from the amazing industry we work in, it was time to crown the winning site of 2015. I had already voted in the user choice category prior before the conference, and I had a good idea who should win. If I were a betting man I know who would have got my last euros.

It came as no surprise (to me) that the winner of 2015 Site of the Year went to French agency 84.Paris and their site for music label Because Music. The label had just turned 10, and to mark the occasion they created Because Recollection, an interactive journey through ten years of sound and artwork.

The 84.Paris site is a pure delight, and as playful and interactive as anything I have seen recently on the web. It scored highly (obviously) in all four of the categories the Awwwards sites are judged on: Design, Usability, Creativity and Content.

If you haven’t experienced Because Recollection yet I really urge you to do so. Built using WebGL I was surprised to find the experience works across all devices, including mobile.

Because recollection 84.Paris website

The site is unlike the early days of Hi-ReS!, when part of the experience was having no real clear visual signposting to what was clickable, or no prior knowledge as to how you should interact with it. Instead, it was up to the user to explore and immerse themselves in the experience.

This approach would not be possible on a site that wins Site of the Year. Remember, one of the Awwwards categories is ‘Usability’. I’m not saying the Because Recollection site is or should be compared to the early work of Hi-ReS!, as clearly the internet has evolved. So much so that the Because Recollection site even has a clearly labelled ‘Need help?’ button. This is 2016, after all.

You can definitely say, though, that the humour, playfulness, emotion and element of surprise in the Site of the Year has all the traits from days gone by. This was even more evident seeing the team that worked on this excellent site up on the stage collecting their award. With all the Gallic flair you would expect from a French creative team, what better way to acknowledge their achievement to the rest of the world (and team back in Paris) by recording and streaming it live via Periscope.

EPILOGUE

And so to the Awwwards afterparty: an ‘open’ bar and a chance to chat to the fellas from Hi-ReS! This story can wait for another day. Today belonged to the Awwwards winners 84.Paris and their 2015 Site of the Year Because Recollection.

Magnifique!

To see some of our award-winning work, take a look at our latest for Orange and their global brand guidelines.