Web design concept concept for architecture studio ZUZANA&NICHOLAS displaying the young architecture studio’s uniquely playful but pragmatic approach to design as a new independent practice.
Interface: Web Browser
Program: Portfolio
Scope: UI, UX, Branding
Client: Zuzana Kovar and Nicholas Skepper
Zuzana and Nicholas are architects who design with accessible materials in playful and pleasurable ways. Three values were outlined to ensure the website best represented their work:
- It should be distilled to essentials.
- It should be playful.
- It should be organized not only according to project but also project typology.
I opted for a design with a singular page that groups project images depending on the location of the image selected. Images assemble by individual projects or by typology.
When a client clicks on an image, the scattered images rearrange and self-assemble to show the associated project images and text. This creates an interface that is minimal, playful, and can be organized across multiple different categories of architectural projects.
The initial set of wireframes explored where project groupings could gather and how surrounding images should move out of the way.
The final layout uses three dimensions of images which are flexible for both horizontally and vertically formatted images. The studio name is scattered across the full length of the page and provides background information when selected.
Images and text move quickly.
Project images also assemble to assist potential clients looking to develop specific project types (commercial, cultural, residential, etc).
The graphics follow similar rules to Zuzana and Nicholas’s architecture: use reliable and accessible materials playfully and well. Karla and Robot Mono are used for Heading and Body texts. Architectural linework is used to create the UI elements needed for the photo gallery. Text in lavender purple is used for elements that link to typology organization.