Loading ...

Responses by Rens van de Wiel, creative technologist; Toby Mok, designer and partner; and Keith Kornson, designer and partner, RONIN Amsterdam.

Background: HERC is a new agency in Amsterdam that creates advertising to feel like entertainment rather than a forced message—connecting brands with popular culture. You’re probably familiar with its work for Tele2, G-Star RAW, Young Capital and HP. RONIN was asked to design HERC’s agency portfolio to introduce its work to the rest of the world.

Design core: HERC’s visual identity is very distinctive because of its bold, colorful and simplistic style, so we knew from the very beginning that we should keep those key elements on the website as well. Next to its visual identity, HERC is also famous for producing stunning video content, so it only felt natural for us to combine those two elements.

Favorite details: We think we did quite a good job of finding the right balance between HERC’s visual identity—which can sometimes feel intimidating to work with—and finding a way to showcase its projects that feels as simple as swiping through a PDF.

Challenges: Creating a smooth experience without any bumps or stops. The client wanted it to feel like scrolling through a PDF file without any visual loading. That was rather challenging considering there is a lot of video content. The solution was to preload content data of future navigational choices, and create different sized content per device and connection speed. By doing this, we nearly eliminated visual preloading all together.

Since the site needed to go live on a date where new work from the client would be launched worldwide, there were a lot of extra hours worked to get it all to work properly within the time limit. After it went live and we had some consistent feedback, we were able to tweak and smooth out the experience even more.

Lessons learned: The entire site has been custom built from scratch in JavaScript to guarantee the best and smoothest performance, even on low-end devices. Most of the UI is animated in JavaScript Canvas2D with the pixel drawing method. At first, the video data was also drawn onto the canvas, but we later found out that on certain devices this had the reverse of a smooth experience. We had to create a separate HTML layer with just the videos in it and sync up all the animations with the canvas rendering, which took a lot of time. We have already started extensively testing content setups on a wide range of devices early in development on our next projects to prevent this.

A lot of testing, early in development will prevent a lot of frustration towards the end of the project. Especially when doing things in a nonstandardized way. Nail down the idea and test it out while designs are being made. Then in collaboration with each other, use the knowledge of the early testing to tweak the design and UX so as to get the maximum out of the collaboration of design and tech.

Navigation structure: As we mentioned before, we wanted to make the experience feel smooth and simple. The website is designed as an endless loop to make it dummy proof. It doesn’t really matter which way you’re navigating, too; for example, you can view all content just by using only the right arrow key on your keyboard. As simple as that.

Technology: We’ve designed the website using Photoshop and Sketch, and prototyped/animated the website using After Effects, so our development team knew how the interactions and animations would behave before writing a single line of code. The website was created with basic JavaScript and HTML video. As the site’s design is completely custom, we started from scratch without using any frameworks, meaning the site is also completely custom-coded. In addition to that, TweenMax was used to create smooth and bold animations.

herc.agency

Browse Projects

Click on an image to view more from each project
X

With a free Commarts account, you can enjoy 50% more free content
Create an Account
Get a subscription and have unlimited access
Subscribe
Already a subscriber or have a Commarts account?
Sign In
X

Get a subscription and have unlimited access
Subscribe
Already a subscriber?
Sign In