Miguel Arruda asked us to design and build a new website for his studio.
The client briefing: a contemporary and clear website, fast loading speed, ability to adapt to different screen sizes and a usable back office to give his team the freedom to manage contents.
Our own briefing: this is a portfolio website for a reference architecture studio. That means to create an effortless sense of design and style, and an intelligent use of space that:
- Makes the work stand out;
- Showcases the many relevant awards the work has won;
- Provides relevant information about the studio;
Technically we created a WordPress Branded Website with Ajax requests for listings. Creatively, to draw attention to the work, minimalism was definitely the way to go.
On the homepage, we worked to display selected projects in a stylish but unobtrusive way.
Projects are presented with a set of images that appear one by one and pile on top of each other. A distinct detail is the fact that each image that appears is bigger than the previous one. This creates a subtle but effective crescendo (a gradual, steady increase in loudness or force). Also, it invites the user to revisit the previous images that stay behind with a simple mouse over or touch on mobile.
Multiple entry points, like the project title and images, link the user to the project detail page.
Cursor animations provide visual feedback and enhance visitor interaction and engagement.
To browse the work, we designed a project list inspired by a familiar object of the digital space: a system folder.
The Name, Date and Project Type columns allow users to arrange the projects list in alphabetical and most recent order, and also to group projects by type: an intuitive way to handle such an impressive list. A floating image allows previewing each project on mouse-over in desktop resolutions.
The Project Detail Page - and every other detail pages - are modular.
We created a system of different blocks for headers, texts, images and awards. This allows the studio team to easily create pages with variety and dynamics.
We also developed a dynamic grid that supports all kinds of image sizes, proportions and orientations for the project visuals.
In the inspiring conversations we had with Miguel Arruda we detected an important issue: Miguel creates ideas and concepts that materialize across multiple projects.
For instance, Miguel creates a form for a sculpture and, decades later, the same form is the foundation for a modular lighting solution, creating a completely different project.
Miguel has several of these valuable concepts that, in a standard portfolio website, would be scattered through different projects and wouldn’t have a place of their own.
So we created a Studies section: a place to tell the stories of these ideas and connect them to their projects.
The new Miguel Arruda Arquitectos Associados website was well received.
The projects are beautifully presented and stand out in a minimal design with pin-pointed animations and a sharp user experience.
The Projects, Awards and Studies sections now provide a rich compilation of internationally acclaimed work.
And with an easy-to-use back office, the studio’s team can now keep their digital presence updated while focusing on doing what they do best.
