We’ve all had that experience. You’re watching a new show on Netflix, and you are just blown away by the cinematography. It’s gripping, it’s vibrant, it’s revealing. Each frame, so well crafted, it’s like a punch in the (eye)balls. It’s likely that the next time you have that sensation and peep the credits, you’ll find the name Erin Wesley. She might not yet be a household name, but she’s about to be.
Who is Erin Wesley?
Erin G. Wesley is a renowned Cinematographer from Los Angeles, California. Her portfolio includes work for projects you’ve probably seen, like Netflix’s Colin in Black & White, Nike, NBA and Snoop. She’s also an accomplished photographer and regularly travels the world in search of new visual inspiration. We partnered with her to give her vast creative portfolio a new digital home — something she can leverage to help find that next great production project.
The Design
The focus for the entire experience is Erin’s incredible videography catalog. Everything else is relegated to a support role visually for visitors that want to dig deeper into Erin’s unique world view. The main gallery creates a fluid and easy to navigate structure - built for speed so the user can cycle through multiple projects in a quick, dynamic fashion. Also, the team added in-motion assets within the thumbnails and micro interactions to add visual interest.
There are so many easter eggs and little experiences within this seemingly simple portfolio site — but you have to dig around to find them. Our little hamburger menu item in the upper right corner hides what is truly a quite deep digital experience, custom-built for a one of a kind friend & creator.
The Z-Space gallery is probably our most unique element on the site, allowing you to zoom into Erin’s creative catalog in an unexpected way. This element was incredibly complex for our dev team to build, but the end result is beautiful and fun to play around with. Easily the most talked-about section of the site, for those that stumble upon it.
It’s a pleasure to not only work with Erin, but to just be in her orbit. She inspires us every day. Her work is distinctive, and she creates with purpose. The design had to try to do justice to her incredibly strong portfolio.
Brandon Levesque, Partner & Art Director
Technologies
From the technical perspective, the most challenging part was the video gallery on the Home page. To make this gallery work seamless, we needed to combine several technologies at once. We connected our custom scroll and DOM elements with Pixi.js and added shaders. The focus of the work was really on revising and optimizing the experience working with videos. We had to make them load quickly and play smoothly on any device, anywhere. Erin reaches a global audience with her professional work, so we had to plan for a wide variety of devices, connections and experiences.
An interesting issue was found while we were working with videos: the first frame of the video was a black rectangle. It happened because Pixi.js renders videos in a specific way. We needed to optimize a frame rate and animation of switching between video and image textures that allowed us to fix the issue and make videos work smoothly.
The next challenging part of this gallery was the custom scroll inside it. We wanted to achieve mathematically correct behavior of this inner scroll to make the users experience flawless. We had to open our math books and check out some of the long-forgotten chapters.
For performance improvements we needed to revise chunks of the project until there was no excess code. It allowed us to achieve really high scores in Google Lighthouse and Performance in Chrome DevTools.
Our team really dialled in the performance on this site, to make it stand out and be smooth and seamless.
Anton K, Head of Creative Development
There are two special features we’re most proud of on this project. The first is the incredible Z-Space Easter Egg, providing a very dynamic tour through some of Erin’s favorite photographs from her various journeys around the world. It’s a visually interesting way to view all of Erin’s work in one place, and is just a lot of fun to play around with. The gallery reacts to cursor position, and can be scrolled forward and backwards through ‘time’ offering a unique glimpse into the mind of Erin Wesley.
The second feature is a really small detail we’re really proud of at a micro-interaction level, is the aspect ratio change for the homepage thumbnails. It’s a subtle element to make the homepage view feel slightly cinematic in a way, and we thought it was a lot of fun.
Lastly, we had to give Erin the ability to manage all the new content she was generating. Not only is she very busy in production, but she’s also finding time for personal projects that she shares via the blog. For content management we used Strapi, which was completely customizable and allowed us to build it specifically for Erin’s day-to-day site management needs. We’re building most projects these days on Strapi, and really appreciate both its flexibility and its minimalist vibe within the dashboard.
Conclusion
This site was a creative and technical challenge for us to develop and launch. But the entire team pulled together to make this happen. Thank you to Erin for her partnership and support throughout the process. It was a privilege to work together.
Client
Erin’s aim is to create visual experiences that inspire purpose and imagination. She values connectedness and firmly believes that through storytelling, our shared experiences emerge. Her commitments are to provide inclusive, boundless imagery that represents who she is and depicts the world we share.
Company
CUSP is a global team of specialists, focused on crafting world-class digital solutions for today’s modern creators and companies. Our team of strategists, designers and developers are driven by passion and fuelled by curiosity. We aim to balance innovation with aspiration, emotion with logic, and create an original experience every time. Always fresh, always challenging what’s possible.
This project was developed in partnership with Salt & Pepper Germany.