The Hierophant

Our Approach

Our plan was to create a journey through the logo, moving past its various elements into what felt like distinct spaces.

The circle motif at the center of the logo provided the perfect through-line for this journey, when transformed into the moon.

These shots, when combined, create a feeling of forward motion as the user scrolls down the page.

Challenges

Merging 2D and 3D

The beautiful, handdrawn 2D logo needed to blend as seamlessly as possible with a 3D environment designed to look as realisic as possible. The tension between these styles was reconciled with tricks like forced perspective and hiding collision points between scenery motifs (e.g., 2D lines terminating behind 3D rocks or geometry edges occluded by plants).

Detail

The sheer amount of detail created text legibility challenges. Putting text in opaque boxes would have covered the designs up too much, so instead we opted to darken the background behind the text using a LUT applied to the shot when text was in view.

This challenge even led us to create a new (albeit basic) LUT creation tool.

Results

The end product takes the user on a journey forward through the 3D scene while they make their way down the page. Our shot-based content approach means that even erratic scrolling behaviour or jumping down sections using the navigation options does not compromise the experience.

This project is another great example of how conventional 2D graphic design and 3D web design can work harmoniously together. We greatly enjoyed exploring the spacial possibilities of their logo and creating an engaging and themeatic journey for their users.