Loading ...

Responses by Ross Anderson and Stuart Ross, cofounders, off brand.

Design core: Obviously, the core object in the site is the totem and the drag interactions that drive it, but the atmosphere comes from the smoke and lighting. We wanted the site to be an immersive experience, and the smoke blurs the lines between you and the content, giving the site a retro ’80s-movie vibe. Honorable mention to the XOiDs—the spacemen NFTs.

Favorite details: The interactivity on the totem. We worked with our lead experience developer Valentin M to produce the model’s rigging, animation and movement on the site. We’re proud of the outcome; we haven’t seen many other sites like this, and it tells the story the team wanted it to tell. Honorable mention to Totem’s 3-D designer Nick Hildebrandt, who built the original 3-D model (and many of the other 3-D assets that live on the site.)

Challenges: Time zones. The team at Totem is brilliant, and they had an amazing base of IP assets and a vision for us to work with, but they’re based in Hawai‘i and the continental United States, whereas we’re based in Glasgow and London. Furthermore, our lead experience designer lives in Taiwan. It meant a lot of late nights and early mornings to align on ideas, but we got there.

Time constraints: We had a pretty tight turnaround time on this one—about one to two weeks from receiving the models to go live. It did force us to be creative when optimizing the totem and avoiding slow page-load speeds. Making something beautiful is hard, but making beautiful without slowing everything down is on another level. We always prioritize site speeds, SEO and proper structure when we build out websites, and all of this takes time and structured thinking.

Navigation structure: The structure is straightforward because the site is complex. We didn’t want to layer a complicated nav bar alongside the heavy interactivity on the page.

Technology: Our usual process would be Figma, iteration, build, iteration. However, since we were supplied with everything so late on, we had to take the very rough word-based wireframe Totem provided and build it straight onto Webflow, making design decisions as we went. In the background, we had storyboarded what we wanted to happen on a section basis and sent that to our experience developer, who built the interactive totem with three.js and WebGL. Using this workflow and technology stack, we can build out amazing experiences in a matter of weeks—but more time always helps.

totem.earth

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