Cara Mia | Communication Arts



Responses by Jaro Quastenburg, digital designer and creative developer.

Background: The incredibly talented photographer Cara Mia wanders Earth’s most offbeat locations to capture otherworldly images. Her work speaks its own language of intimacy, warmth and adventure, which truly comes through every photograph. I completed this project in partnership with Soul Twin Studio, who created a dreamy and magical design that I was delighted to bring to life.

I’m incredibly grateful for this project because everything clicked between Soul Twin and me from the start, both personally and professionally. There was a kind of unspoken understanding between us at all times, so I hit the right note on the first try.

Design core: A major part of my work involved the conception and implementation of all page transitions, interactions and animations on the site. Both Cara and Soul Twin basically let me run wild here, and this kind of blind trust felt incredibly good and was so much fun.

Cara’s work embraces an organic, natural character. One of my ambitions was for every animation to feel unique in some way, just as no two movements in nature ever repeat exactly the same. So, a theme emerged that now runs through the entire site: randomization. If you look closely, you’ll notice that no two page transitions are the same. With each run, the order of all animated elements shuffles.

To bring the randomization theme to life, with each transition, the whole page is broken down into individual pieces: words into letters, frames into lines. Per page, between 50 and 100 individual elements are extracted and animated sequentially using a combination of fade, scale and blur effects.

Challenges: From the very start with this mind-blowing design, it was clear that this could not just be a simple website—it would become an experience. I was almost bursting with ideas, and it made me happy to see how many little details made it into the final build.

Building the Courses page for Cara’s photography classes proved to be slightly tricky, as the slider, accordion and hover interactions needed to be combined into a single component. However, these kinds of tasks hold tremendous potential for growth. Experiencing something in full function that previously only existed conceptually is such an amazing thing.

Technology: The website’s design was created by Soul Twin Studio in Figma. After that, I built the front end in Webflow and linked it to the Webflow CMS. I coded all the interactive elements and page transitions from scratch, mainly using the JavaScript library GSAP. Furthermore, the site uses the Locomotive Scroll smooth-scrolling library.

Browse Projects

Click on an image to view more from each project



Source link

Next Post

Fantastic Beasts in Chinese Culture and Where to Find Them | by Cleveland Museum of Art | CMA Thinker | Jul, 2022

By Yiwen Liu, CMA Curatorial Research Assistant As a series of prequels to the Harry Potter movies, a third movie in the world of wizardry was recently released in the Fantastic Beasts series. Despite the new movie’s mixed reviews, it still provides a delightful new variety of cute and imaginative […]