Why I Said Yes

Narges Mohammadi is a long-term collaborator whose work I deeply admire. This project provided a unique opportunity to rethink my old website design from six years ago and update it in a way that suits the need of Narges’s expansive, artistic practice.

Tech Stack

The project was built with Next.js, Sanity CMS and Tailwind CSS. I used Framer Motion for subtle animations of the menu. I'm proud of how this small animation on interaction with the menu makes the site feel more breathable.

The whole project is typed with Typescript, which helped to catch a lot of errors when dealing with localized content.

Challenges

Creating a portfolio website for Narges presented several unique challenges:

• Complex Project Structures: Narges’s art projects have complex structures that needed to be presented in an extremely clear way while maintaining a strong aesthetic of air, earth, elegance which characterises all of her work. I had to design a portfolio website that would accommodate works in various mediums and file formats, without jeopardising the essential visuality of the projects.
• Target audience: The artist performed tests with people of different generations and backgrounds to check the accessibility of the website. Afterwards, my design had to be adapted according to the findings of those feedback sessions.
• Multilingual project: The website needed to be available in two languages: English and Dutch. That required both creating a multilingual CMS and handling the language switching on the frontend.

Solutions and Process

Solution 1: Individually-Scrollable Project Pages

I created a project page that has two independently scrollable sections on desktop screen sizes. This layout allows users to explore the visual and contextual aspects of each work simultaneously, providing depth without overwhelming the visual presentation.

This "dual-scroll" format, as well as the CMS, accommodates a wide range of media formats, including video, audio and embeded PDF documents.

Solution 2: Semantic Project Relationships

Instead of a project list, the relations between different parts of one project are communicated semantically which is what has been suggested by the artist after community feedback sessions.

_{1st iteration with elements grouped on a 'Works' page in a grid with all other projects}

_{final version with a clearer structure and references on individual project pages}

The final design allows viewers to navigate projects in a way that feels more organic and reflective of Narges’s artistic practice, making each page an immersive experience.

Key Lessons

This project reinforced several key lessons:

• User-Centric Design: Listening to the community’s feedback through Narges’s testing sessions made the design more accessible and helped create a site that resonates with a wider audience. By making the site available in multiple languages, I learned how to handle language switching on the frontend, how to work and create structure in CMS for localized content.
• Elegance in Complexity: Designing for an artist like Narges, whose work is nuanced and expansive, reminded me of the importance of visual restraint, allowing each element to breathe and align with the overall aesthetic.

Final Thoughts

Working on this project gave me a lot of freedom to explore and experiment with the design. Collaborating with Narges for over 7 years comes with a built-in trust and understanding of her work and vision. This allowed me to focus on the design and implement it in a way that resonates with the artist's intentions. I could also offer her a CMS that would allow her to manage her content independently, without the need to rely on a developer.