Responses by Robbert Schefman, digital art director, Exo Ape.
Background: Exo Ape is a digital design studio based in the Netherlands. We craft white-glove digital experiences, engaging content and impactful design solutions that inspire, affect and delight. We carefully wrap emotionally rich aesthetics around strategic concepts to deliver award-winning digital design that exceeds expectations.
Design core: We wanted to create something that felt timeless in design yet contemporary through interactive details. We did this by combining great photography with Lausanne, a sophisticated sans serif font that responds to the historical Helvetica and radiates a classic look and feel. Finally, a layer of subtle microinteractions blends everything together.
Ultimately, the website is an ode to our clients, their work and the digital products we’ve created for them. Hence, we put a lot of effort into creating elaborate case studies that include custom assets and case-specific animations and traditions. We also spent countless hours easing page transitions and rewriting pieces of code to make the site run a little smoother.
The Story page tells the narrative behind our name and is part of our new branding. We collaborated with Holographik to create CGI elements that elegantly depict chapters from our story.
Favorite details: We strongly believe that every website needs a stand-out feature or element that people will remember. For our own portfolio website, it’s the large header images that are used on the homepage and case studies that have a magazine-like feel to them. In this way, we combine something traditional with a modern presentation.
We’re especially proud of our Story page, which tells the narrative behind our name through video and scrollable png sequences rendered in Canvas. Together with Holographik, we crafted a series of unique animations to tell our story.
Navigation structure: Subtle details and meaningful microinteractions were added to page transitions to provide a sense of location on the site. The animations stimulate an easier, more natural experience for the user, reduce cognitive load, and ad a premium touch to the overall look and feel of the website.
On the work page, we provided a secondary option for users to browse our projects in overview mode, which is beneficial for the usability of the website. The seamless page transitions generate a sense of direction while adding a subtle moment of delight to the user experience.
Technology: To manage our content, we use Storyblok, a user-friendly, powerful headless CMS. We created various reusable components that include multiple layout options to flexibly craft unique pages and case studies.
For the front end, we used Nuxt.js to make route-based page transitions possible and make the website feel more like a native app. With a large number of media assets, we had to keep an eye on load times and performance. Therefore, we used a combination of nuxt/image and Storyblok’s Image Servicer to serve next-gen image formats for all devices and platforms.
For the deployment, we used Vercel, which allows us to deploy fast and with almost zero-configuration effort. Publishing a new page automatically generates a new static build, which is then deployed to our live site.
For the animations, we used a mix of traditional CSS keyframes and more complex GSAP animation. Each interaction, slider and transition was carefully crafted using motion studies created in After Effects.
Special features: The exploded grid gallery, which can be found in our case studies. To spice up oftentimes dull case-study pages, we created an unexpected scroll effect that creates little moments of joy.
At the bottom of each case study, the site triggers an animation that seamlessly transitions the visitor from one case to the next—no clicks required!