Background
40MUSTAQEL is an independent design studio based in Cairo. Their fluid identity has 5 interchangable logos and their visual language is identifiable by their unique layered grid systems and bilingual typography.
40MUSTAQEL focus on cultural graphic design within the Arab SWANA region. Their identity and work is experimental and have a heavy emphasis on editorial and typographical elements for both Latin and Arabic design work. They wanted a website to match their identity and experimental approach.
Design Strategy
The website was designed using an experimental on-the-go approach.
To create a non-traditional experience, I opted for a non-traditional approach where I designed the website as I built it. This allowed me to explore different and engaging characteristics within the technicalities of the visual builder I was using. By experimenting with different code properties within the platform framework, I was able to create a unique and engaging design.
By limiting grid columns and typography sizes, I achieved a unique visual structure similar to the studio’s editorial work.
The design strategy came as a result of technical exploration using 40MUSTAQEL’s identity and editorial work as a framework. This approach also allowed for simple yet engaging interactive elements within the website experience. It also allowed for a more laid-back and collaborative design approach with the team who offered their own valuable feedback many times throughout the process.
Site architecture
The site architecture was visualized through a minimal 3-column header and footer fixed to the top and bottom of the viewport.
Grid
I incorporated their visual identity by experimenting with a limited grid-range of 1 - 3 columns.
I was inspired by the studio’s visual language and their editorial posters and branding identities. By limiting the website grid range to 3 columns instead of a traditional 12, I created a unique visual system that highlights the typographical elements of their identity.
1-column (home page)
2-columns (work page)
3-columns (shop page)
Typography
Only one-size of one typeface was used, with the exception of one serif for headlines. I relied on different visual forms such as borders, font weights, and text decoration to create framing and visual hierarchy.
I created a custom icon font with their logos to redirect attention in large text spaces.
The webfont allows their icon logo to seamlessly blend in within text paragraphs without interfering with its size or formatting.
Interaction
The homepage creates positive user friction where it allows visitors to move the logo around to be able to read the text behind it.
When hiding text behind a large obstacle, the natural reaction is to try and move it away. Once the user hovers over the large logo, the browsing cursor turns into a moving cursor which creates an affordance that the visitor can recognize.
This level of harmless friction can create engagement and allow visitors to intentionally and mindfully browse the website.
This level of harmless friction can create engagement and allow visitors to intentionally and mindfully browse the website.
The icon logo was used as a mouse-interactive element pinned towards the bottom of the viewport.
The icon logo responds and rotates according to the moving mouse positions. The motion creates a 360 degree dynamic element to visually contrast against the perfect horizontal placements of other elements on the x and y axes.
The about page creates interactivity with 2-column grids with each scrolling independently.
The left side features information about the team, their services, and their clients. While the right side contains a sliding gallery with visuals to put faces to the names.
Project page accordions create positive and purposeful user friction which allows the visitor to slow down and intentionally read project information.
Results
The result was a fully-fledged portfolio website with a sustainable system for easy adding and removing of projects, articles, and shop items.
I gave a small training workshop to teach the team how to use the system I built. I was also around for maintenance and support for the 3 months that followed as they added more projects. After the launch, the website was a great success and was met with many positive reviews from mutual designers.