Aparelho Studio gives Osklen’s digital expression a glow up with a considered, layered website — The Brand Identity – Home of the Greatest in Graphic & Brand Design

Osklen, a Brazilian fashion brand, is known for two things primarily – avante-garde fashion and its commitment to sustainability and responsible practices in the fashion industry. The brand, which needed to pump life into its digital expression, reached out to Aparelho Studio to reimagine its website and shopping experience. For Aparelho, the work didn’t start exactly with the website, but with the identity. The team tweaked the identity to better meet the demands of a digital-first environment, swapped the brand typeface – taking it from an obscure version of Helvetica to a combination of Neue Haas Grotesk and Suisse Int’l – and redefined their brand imagery, providing a major update to product photography, stills, and lookbook imagery.

Once these elements were set in place, the team began crafting the website, bringing in a sense of quiet luxury with its considered layout and swathes of white space. “Our design approach was rooted in Osklen’s ethos – a fusion of urban sophistication and strong environmental consciousness,” Creative Director Guilherme Boavista tells us. “While honouring the brand’s 30-year legacy was important, our focus was on creating a forward-looking digital presence that resonates with current brand ambassadors while also engaging a younger audience entering the luxury market, a key demographic where the brand was seeing poor performance.” 

In designing the website, the team sought to create a fine balance between storytelling and functionality. Not only did the website have to communicate a lot with a little when it came to allowing Osklen’s essence to take the lead, but also provide a seamless, friction-free experience for its shoppers. “E-commerce structures are known to be among the most rigid web architectures, as users of large high-performance stores need to follow a well-defined path in order to prevent conversion rates from dropping,” says Founder & Design Director Felipe N. Pinto. “This was also the guiding principle behind our decision to spend more time refining micro-interactions and detailed components, enhancing the sense of design quality and attention to detail, especially given the somewhat narrow canvas we were working with.” There was an equal effort to maximise the screen real estate for Osklen’s updated brand imagery, letting the products do the talking.

Across the website, Aparelho decided to use transparent cards and tabs not just as a graphic element, but also as a functional one. From the get-go, the team designed the experience to consist of three layers – the first, representing the ethos and the history of the company (which is still in development), the second showcasing the content, such as the products, imagery and storytelling, and finally, the third layer as the interactive one, containing all the menus, buttons, modals, and pop-ups that users engage with directly. “The transparency in the interactive layer was a deliberate choice to emphasise that sense of depth and layering. It also creates a visual hierarchy that keeps the content and brand narrative visible while ensuring the interactive elements remain intuitive and accessible,” adds Boavista.

Creating a meaningful digital experience also meant working around the limitations of the medium. The video carousel on the homepage, for example, threw a challenge. “The Brazilian e-commerce design market is very mature, but also quite predictable. Most online stores rely on carousels, and while we aren’t the biggest fans of them, we knew we needed one to keep users on their expected flow,” says Pinto. “The challenge then became – How can we make this interesting? Using video instead of static imagery was a good solution, but it came with a few technical challenges. For example, full-resolution videos would be too demanding for users on older computers and devices.” So, the team decided to layer a smaller video over a larger blurred one, which allows users to experience the videos in full-screen, while enabling the brand to upload much lighter, lower-resolution videos to their CMS. “The smaller video is then duplicated and blurred in the background,” says Pinto, “creating an immersive first interaction with the website.”