Loading ...

Responses by Marvin Schwaibold, art director; Yaël Bienenstock, motion designer; and Jesper Vos, developer.

Background: Madeleine Dalla is a New York–based photographer. We built a visual identity that frames her incredible work in an elegant new portfolio website. With this, we didn’t want to overwhelm her work with art direction and motion design but strip it free of these elements and elegantly accentuate her work.

Design core: We tried to set a general style throughout the project with a broad editorial look. We underlined this especially in the project pages with straightforward and transparent components that in their simplicity best presented Madeleine’s work.

There’s something to be said about the typography, a symbiosis of moderate and distinctive fonts that come together in harmony. Neue Haas Grotesk was used to emphasize the general quality of Madeleine’s photography in general. Used in combination with Neue Haas, Saol Display—elegant, abstract and peculiar—not only mirrors her unique style but also accentuates the complexity of her work. Therefore, both fonts were used deliberately with the same words and sentences, and paired up next to each other throughout the entire branding.

Although clean and unobstructed, some brand details we spent quite a lot of time on are the title animations and rollovers. We wanted the site to feel simple but still carry a special something. The motion for this is elegant and delicate to mirror the beautiful imagery and elevate the intricate typography. It was important to us that we showcased Madeleine’s photography in the best light we can. However, inspired by analog negatives and their development, we gave her work a second life by inverting the colors and presenting it in an optional dark mode.

Process: One thing that spoke deeply to us was the fact that we wanted to give this project a personal touch of ourselves—while keeping the client in mind. We like to think of this visual identity and website as a creative product that not only perfectly matches Madeleine’s work but also reflects us as creative professionals.

In this project, we all had an essential part to play. The four of us have different skill sets and creative perspectives. Ideas are very fragile and can easily be disregarded or forgotten, so trusting each other and having equal input was important to us. We made sure to give each other enough room and opportunity to express ourselves in this project and be proud of the final result. We tried to never separate the tasks: the design, the motion, and development all came together from start to finish, and we think that’s why the project came out the way it did.

There were no time constraints from the client at all. That being said, we were all really excited about the project and would often hang out in calls while we all worked together on different parts of the site. We did everything in our free time since we all have full-time jobs. Yael and Marvin work in the web concepts team at Squarespace in New York, and Jesper works at RESN in Amsterdam.

Navigation structure: The double navigation system enables visitors to either search Madeleine’s projects by title or visually explore her work in an infinite, scrollable carousel. For the ones who want an undisturbed view of all her photos, we made it possible to navigate linearly through all projects by adding a “next project” link at the bottom of every page. Additionally, we built an archive page that—using a randomized grid layout—gives an overview of older projects and experiments Madeleine wants to showcase.

Technology: It could be said that we mirrored the lightweight aesthetic of the website’s design in the development process. We used NuxtJS with the CMS Prismic to generate a very lightweight static website that is hosted on Netlify. Only the necessary fonts are preloaded, and for best performance, almost all animations are made with CSS.

Anything else? Although it wasn’t the main focus, we implemented many accessibility features into Madeleine’s portfolio. For example, the markup required for the text animations creates a very awkward situation for screen readers. By using the right ARIA attributes, these titles are processed like normal.


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