From brand system to informative content and beautiful digital design

Amsterdam and Wellington-based creative digital agency Resn created a digital showcase that served as a central hub for Zentry’s interconnected products. Allowing Zentry to engage and inspire its customers, partners and investors. Balancing informative content with captivating design to draw people in and encourage them to explore. The idea was to provide an overview of Zentry's innovative offering and expansive vision, as well as delivering an exceptional user experience.

About Zentry and its blockchain products

Zentry provides an ecosystem of Web3* products. With activities, content, assets, cryptocurrency and gaming experiences. It is all part of what Zentry calls the 'Play Economy'. 

The idea is to combine people’s digital and physical lives in new ways. Augmenting social interactions and uniting players from different games and platforms. Zentry realised that dedicated gamers will often play many different games, but achievements and assets earned in one game don’t usually carry over to others. They aimed to solve this with a 'Metagame Layer' that allows users to use their avatars, assets, achievements and other perks across multiple titles. 

An ambitious vision that could lead to a major shift across gaming and entertainment.

*Web3 (or Web 3.0): an idea for a new iteration of the World Wide Web which incorporates concepts such as decentralisation, blockchain** technologies and token-based economics. In contrast contrast with Web2 (or Web 2.0) where data and content are centralised in a small group of companies sometimes referred to as Big Tech. (Source: Wikipedia)

**Blockchain technology: an advanced database mechanism that allows transparent information sharing within a network. A blockchain database stores data in blocks that are linked together in a chain. The data is chronologically consistent because you cannot delete or modify the chain without consensus from the network.

About the design of the website

The content design is really beautiful, and the interactive elements are unique. Enjoying the sound effects on hover, which really enhances the general aesthetic.
Dutch Digital Design curators

The design is part of a larger strategy and brand system that Resn created for Zentry months ahead of the website itself. Collaborating with the client to design a brand system in which the digital interface is connected to the entire visual language that the brand has and represents. It creates a holistic full circle that envelops the brand. It is all about consistency.

Being part of web3, the team at Resn thought it would be interesting as a starting point to create a brand where Dimensionality and Juxtaposition were central. The main objective was to create a bold, dynamic system that allowed the brand to express itself with quick changes of perspectives, windows into this vibrant universe and that electric feeling.

With four brand pillars that functioned as the foundation for the brand and, therefore, also for the website: Culturally Connected, Vibrantly Concise, Inventively Upbeat and Broadly Inclusive. 

The website itself was relatively straightforward to create once the entire system was set: typography, colours, compositions, iconography and content were all designed at brand level. 

The agency created an enormous brand library and documented the use of each individual ingredient. Once they had all these ingredients, the effort on the website itself focused on the information hierarchy, the storytelling and the design of certain specific sections and components like the menu, the navigation bar and a set of components for the product pages (to be launched at a later date).

This way of working is something that Resn has also been putting into practice in other projects ever since: creating digital-ready brands where the site is the first and biggest output of a series of other elements.

Behind the customisation of the fonts

The biggest element in the Dimensionality and Juxtaposition-concept was the typography: distorted and centered around perspective-opposing typefaces for the display headlines. This idea could only be realised by adapting and perfecting a typeface that wouldn’t look odd when distorted. 

Resn approached type designer Florian Karsten, who designed the typeface FK Screamer. The agency adapted FK Screamer for distortion. However, they wanted to take it further. 

Since they were already modifying a typeface, they decided to make it more distinctive and ownable. Resn designed a complex glyph system that applies an alternative variation of a letter after a certain number of characters. The system only allows for either one special character per line for long headlines or once every four characters for one-word headlines. This strikes a good balance, creating recognisability with the symbol and the brand identity while still feeling elegant and special. A long process to find how to create that connection to the rest of the system. After many versions, they landed on the distinctive flash arrow that complements the Zentry symbol.

Resn didn’t stop there. The wordmark itself was also designed from the ground up. They opted for the inverse and customised six letters in a rather extended structure - also done in collaboration with Florian Karsten.

About the sound design

The Resn team meticulously curated the music to align perfectly with the user journey. Starting with a dynamic and engaging soundtrack on initial loading of the site. This initial burst of energy was then seamlessly transitioned into a more subtle, ambient background score - allowing the site to breathe and the user experience to remain fluid. 

Additionally, the sound effects were designed to complement the musical elements. By keeping them in the same key as the track, it ensured a harmonious integration.

About the motion design

During the development phase, several challenges related to motion design and its integration were encountered. 

To optimise performance, the team utilised memory-efficient web technologies to manipulate page elements directly. Avoiding the use of additional 3D graphic libraries. The focus was on creating quick-loading animations and custom solutions for complex effects, such as the 3D portal masks. This strategy enabled intricate visual effects while maintaining high performance - delivering high-quality animations, smooth transitions and interactivity across various layouts and devices.

Conclusion

Love how strongly the visual identity of Zentry translates to their website. Given the wide variety of styles within games, it is really cool to see how consistent this is implemented.
Dutch Digital Design curators

Throughout Resn refers to a brand system instead of a website only. They created systems that enveloped every touchpoint and every screen. The Zentry website was a funnel where all of these meticulously designed systems found their first practical application. Every reaction movement, animation curve and principle was laid out before the design of the website even started. Chapeau!