Loading ...

Responses by Malvah Studio.

Background: Part of a rebranding project, the new Malvah website operates as a brand home for our studio and a portfolio site of our work. This was a way for us to bring our brand to life through a digital experience that showcases who we are, some of the work we are proud of and the culture of our studio.

Design core: The website follows a minimal editorial design style informed by the twelve-column grid system at its foundation. We wanted this site to focus on the work and culture of Malvah, using simple typography, microinteractions and the occasional Easter egg throughout the site to give users a uniquely crafted experience. We wanted the site to feel light and easy to use and navigate, letting our work take center stage.

Favorite details: The ease of navigation and microinteractions; the small, unique brand moments spread throughout the site; the site load speed and smooth transitions; and our work section.

Navigation structure: We wanted the site to be as clear and simple as possible for visitors. The Menu appears on the top right side of the page at all times, giving users easy access to the entire site index on a simple hover. Page transitions are quick and simple, keeping page-to-page interaction smooth and efficient.

Special navigational features: We enjoyed creating the 404 page. It’s a fun one—check it out.

Technology: The site has been developed with Nuxt v3, a front-end framework based on Vue.js. This let us separate every piece of the site into standalone components and then build from them like LEGO bricks.

Having used Prismic previously, we agreed on keeping it for our new site as well. We had no reason to switch to a different CMS: Prismic is a really good product, and we were able to add it to the project seamlessly.

Most of the animations are handled by the GSAP library, which is a must when it comes to animations on the web. It makes creating on-scroll animations, complex timelines and many of the creative attributes easy to implement.

The preloader screen was a repurposed brand animation that forms part of the Malvah branding. In order to create it, we used TresJS, which is basically a Vue.js abstraction of the famous web library three.js.

Despite being so complex, the site was created using only four languages: HTML, CSS, JavaScript and GLSL.


Browse Projects

Click on an image to view more from each project

With a free Commarts account, you can enjoy 50% more free content
Create an Account
Get a subscription and have unlimited access
Already a subscriber or have a Commarts account?
Sign In

Get a subscription and have unlimited access
Already a subscriber?
Sign In