Loading ...

Responses by Danica Wilson, principal; Cat Hyland, creative director; and Keith Rodri, motion designer and developer, Plastic Sunshine.

Background: Color High is a vibrant, interactive lookbook that celebrates the bold and bright hues of clean beauty brand Olio E Osso’s new lip color collection. Inspired by brand founder Paola LaMorticella’s origin story, Color High—translated to Colore Alto in Italian—is framed as a journey through color, honoring the brand’s ties between Italy and the Pacific Northwest. Each of the seven new lip shades are represented as unique worlds to explore on colorhigh.world.

Beauty consumers appreciate creativity, and when looking for a product, they consider where it can take them in both imagination and self-expression. Makeup is about having fun and highlighting our individual and unique beauty; lip color is an expression of those empowered and delightful feelings. Literally and metaphorically, the site is meant to be a journey through color. It’s an experimental take on how beauty products can be debuted and perceived.

Much of Olio E Osso’s brand story is rooted in heritage, and Color High reflects the importance of tying products to their place and ingredients of origin. The lookbook is part of a 360-degree marketing campaign launching Olio E Osso’s new lip colors. The campaign includes Italian-inspired product names, a new look and feel for social content, and relies heavily on influencers and brand fans posting videos and reviewing products from around the globe.

Design core: As a high-hued interactive lookbook, Color High transports visitors to another world with strong visuals, abstract messaging and immersive motion. Our goal was to celebrate the fun vibrancy of each lip color, which came through in delightful imagery, whimsical ingredient stories, and poetic reflections that capture the essence of the line and elevated the brand story.

Replacing traditional product descriptions with poems created a playful tone. While the copy takes cues from Italian Renaissance poetry and the arts, the language is juxtaposed with modes of design from today.

For the photography, we collaborated with our favorite beauty crew: photographer Mindy Byrd, wardrobe stylist Pauline Kim, and hair and makeup artist Kylie Sallee. Though the lip sheens and lipsticks are focal point, we wanted each image to paint a full, expressive scene with a tonal wardrobe and striking backgrounds. This direction carried through to the product photography—shot by Brian Lincoln and styled by Margo Latka—where each product existed within a world of its own.

To cast a diverse range of models, we partnered with Super Talent Co. We were careful to consider the impact beauty content has on society, and commit to showing authentic and confident expressions of self. The photography was complemented with contemporary typography from foundry Boulevard LAB.

Process: We were tasked with creating a web experience that was aesthetically pleasing but also user friendly across different devices. In designing and coding the navigation, we were careful to troubleshoot and predict outcomes that would look great on both desktop and mobile. Because our studio is multidisciplinary, we are able to integrate art direction, copywriting and motion design, with writing and editing code in real-time. The project—as many websites are—was on a short timeline, with just under four weeks from photoshoot to launch.

Navigation structure: Our goal was to communicate the allure of exploration. Influenced by unique design elements, the navigation is full of opportunities to discover the unexpected. As visitors scroll, they don’t know what will happen on screen—they just have to follow prompts.

Technology: HTML5, JavaScript, and SASS, along with the libraries ScrollMagic and GSAP. To achieve the navigation experienced throughout the site, the back-end design relied heavily on scroll-based animation. For this, we used ScrollMagic and GSAP in tandem to create smooth animations efficiently. Key features in developing this project seamlessly included detecting when elements were entering the viewport while controlling the scroll duration.


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