Gladeye

CyberBrokers

Vivid futuristic OS run amok

Best Homepage / Honoree

Gladeye

Best Homepage

Honoree

Homepage is an infinite canvas where you can move in any direction, picking up futuristic objects. Conrad Blight, Engagement Director
Gladeye

Q: Can you briefly describe your project and the concept behind it?

A: CyberBrokers is an NFT-based entertainment project from Josie Bellini set on a frozen earth where humans lead wildly creative lives inside the metaverse. We conceived of cyberbrokers.com as being a part of those stories - it’s a futuristic OS as if you are floating inside this metaverse’s database - surrounded by fantastical characters, locations and 35-meter giant robots. Our inspirations included GMUNK, Star Wars, Fallout, and Snow Crash.

Watch

Q: Once you settled on your idea, what influenced your decision on the chosen technical approach? How did it differ or go beyond approaches you’ve taken in the past?

A: CyberBrokers had incredible artwork; 10,001 SVG-based NFTs and giant mechs, and they had in their lore really fun objects we wanted to visualize as well. This led us towards our WebGL capability. We wanted an experience that had that “holy shit” feeling for new users but was flexible and could evolve to reward return visits. For instance, we built a custom interface that lets their team add new 3D objects and easily drag around positions.

Q: What were some of your biggest learning and takeaways from this project?

A: Every project we do with WebGL we refine our balance of visual impact with performance and load time. That’s often about spending the time to finesse the models; losing polycount where it’s not adding value, and using textures in smart ways. Our workflow from Blender to WebGL allowed us to build the locations within CyberBrokers to see whole 3D scenes - that were created in Blender then animated in WebGL and overlaid with CMS-driven UI elements.

Q: What web technologies, approaches, tools, or resources did you use to develop this experience (WordPress, headless, AI, Sublime Text, HTML5, Adobe XD, etc)?

A: The front-end of the site is built in React, Next.JS, with content pulling in from our headless CMS of choice Storyblok, or from SimpleHash for the Web3 data. The WebGL loads throughout the site as needed and is built in Three.JS, assets created in Blender. A hybrid approach of Tailwind and CSS modules while Framer Motion handles interactions. Design-wise we used Figma. Com Truise or Mitch Murder playlists were used extensively on this project.

Q: How did the final product meet or exceed your expectations? What results did you see?

A: We’re very proud of how rich the site experience is - see the color theming and extruded layers in the CyberBrokers section, for example. But we’re most proud of how flexible, yet brand consistent the site is and that’s something that will be seen even more over time. It’s designed to be the central content hub for a rapidly expanding creative media empire, and we can’t wait to see where it goes and continue creating experiences within it.

Q: Why is this an exciting time to create new digital experiences? How does your team fit into this?

A: We’ve always seen ourselves as bringing emotion and storytelling into digital and that different media would over time grow closer together and even merge as tech improved and barriers eroded between film, games, and websites. It’s an exciting time to be at this confluence and helping shape how humans interact with technology… and hopefully interact with humans more. Plus there’s the tidal wave called AI that we’ve grabbed our surfboard for.

Q: How did you reach a good balance of your own creative ideas and technical capabilities with a fair representation of the client’s brand?

A: Josie and her team were incredibly collaborative and gave us a great deal of freedom on brand expression. People come to Gladeye because they want something beautiful and unique that’s just right for them. Therefore we always do the work up-front to define the strategy of a digital experience before we explore creative territories that support it and find one that the client loves before layering the experience up from there.

Q: What did your initial moodboard, wireframe, or prototype look like? How did those ideas change throughout the design process?

A: We start with a combination of visual refs, sketches, and copy treatments to explore the world we are creating. We tend to go back and forth between Figma and Miro, depending on what we’re exploring. With so much content, these products were super useful. Throughout the process we were prototyping either in video or browser, to ensure we made the best, most satisfying choices, e.g. for the Homepage we explored circular vs flat vs a fully 3D space.