Magazine for designers and web developers
3 Collect me

Case Study: Hello We Are Impero

Article by Awwwards Team in Web Design - August 22

Introduction

We wanted a website that reflected what we can do, and who we are. So, we made one. Strong, bold and to the point – just like Impero. For the www.weareimpero.com landing page we used a combination of mediums, including photography and Cinema 4D to created a surreal atmosphere.

Weareimpero_Landing_Page
The landing page

A very personal project

Personal projects are the hardest jobs for any agency. We spent years trying to design and build weareimpero.com. We would gather steam and then end up parking the project when things got too busy. Months later it would be picked up again and often a decision would be made to just scrap the whole thing and start over again. It was a project that was so personal to us as an agency that we collectively could not agree on what we really wanted to get out of it.

Weareimpero_Glory_Flag
Film of our Fame & Glory flag, Using Cinema 4D we created a flag to identify Impero’s motto.

Finally getting to the point

Three years later, we decided enough was enough. We pulled together a small team and cut everyone else out, we sat our arses down and got to work on it. We decided to shed a lot of projects from our portfolio. We focused on the ones that we really loved and put all our energy into showcasing their stories.


Weareimpero_Hammer
Film of a Hammer smashing a light bulb filled with gold glitter. Using the Sony PXW-FS7 in slow motion mode we managed to capture all the magic.

Weareimpero.com has been our blood, sweat and tears, it has become a living and breathing entity. We are constantly changing it, growing it and improving it, and if you asked anyone at Impero, we'd say it was not finished. But what we can say is, this website is wholeheartedly us.

– Michael Scantlebury, Founder and Creative Director, Impero.

Building a little bit of magic

All of the website's content was created in-house, building crazy make-shift rigs to get the right shots. The creative process was a strange tie in the office, it was covered in glitter and staff would be walking around with black, white and yellow painted arms. A lot of clever tricks were pulled for this website, such as the use of high speed cameras, green screens, 3D modelling and some clever code.

Technologies behind the build

The site stack is NodeJS on the back-end coupled React Server Side Rendering. We used threeJS for the coins and React Transitions for the smoke effect which is an animated sprite. We also added our own custom CSS animations on certain pages along with ScrollMagic for on-scroll animation events.

Weareimpero_Dog_Barking
Animated dog barking: With the help of a slow-motion camera (Sony PXW-FS7) we managed to capture the raw moment and intensity needed for that specific are of the website.

Front-end Frameworks and Libraries: React, ScrollMagic, ThreeJS.
Backend Technologies: Babel / Babelify, Browserify.
Server Architecture: NodeJS, Dokku / Docker, Google Cloud Platform.
Tools: Gulp.

Company Info

Hello We Are Impero. Impero is designed to do one thing and one thing only – return tired brands to fame and glory. We are an independent creative, digital and social agency based in London and Buenos Aires. Intrigued? Visit us our website, find us on Twitter or see our latest work and inspiration on Instagram.

Specialties: Digital & Brand Strategy, Content Creation, Digital Design & Build, Digital Innovation, Social Media Strategy, Campaign ideation & analytics, and Community Management.