Aterlab - rebrand

With our rebrand, we decided to also change our website - from old one to a completely new concept. This is a case study over our decisions and process.

Design system:

We wanted our website to feel both playful and proffesional, so we used shades of blue.

#292B2C - primary color, very dark blue.

#E3E7E9 - secondary color, light blue, used for buttons.

#EFF3FA - background color, very light blue.

For the font, we used Fustat Semibold and Regular. It looks professional and friendly.

Assets:

To make the website really stand out, we used 3D renders of different rooms made in Blender:

Navigation:

To let the users navigate easily, we added hotspots and arrows, redirecting to different rooms.

Responsiveness:

On mobile devices, we implemented an app-like navigation on the bottom of the screen, shown on the mobile mockup below.

Music + sounds:

To bring the experience even further, we added music and click sounds. The music can be disabled in the navigation.

Mockup preview:

Tools used:

Figma (design)

Blender (3D)

VS Code (development)

Made by Aterlab,

Mockups by wannathis.one.