After being impressed by my previous work and my clear initial communications, Daniel Marshall hired me to refresh his architecture practice's branding and create a new responsive website to showcase their award winning contemporary designs. I've always been a passionate architecture enthusiast and admirer of DMA's work – having been lucky enough to tour one of their Auckland projects first-hand – so this was a dream job for me. I was determined to deliver an exceptional result.
"Benek worked tirelessly to understand our core values and design sensibilities and the resultant branding and web interface is a testament to his vision."
A subtle and purposeful brand refresh
DMA's previous brand identity was a perfectly adequate and minimal Helvetica wordmark with matching "American Psycho" style business cards. It wasn't broken, but it wasn't memorable either. They were ready for a brand refresh but wanted a change subtle enough that their existing architectural documents and studio signage wouldn't feel entirely out of place with the new branding.
My initial discussions with Daniel helped me connect with their practice's core philosophy and design aesthetic, which lead to a new monogram and wordmark with a more personality while maintaining their existing cool and minimal look. The logo's new underscore device gave us a clever brand tool to help unify the branding variations and provide subtle bits of creative interaction within the website.
Encouraging exploration with unique organic grids
I started with some user experience design and a set of simple wireframes to help DMA articulate their desires for navigation and content. We all quickly agreed that a traditional layout with a series of architecture project images of the same size and shape in a strict grid was not effective at encouraging exploration. My goal became crafting more fluid and delightful ways to explore imagery – layouts with variation and rhythm that would help tell stories while respecting and highlighting the images and each design project's unique features.
We realised that a single image grid system would not suffice. Some pages demanded more fluidity and variation, while other required each element to remain roughly equal to the others, so only minimal variation would be allowed. This resulted in the creation of four unique but complimentary grid structures that would form the layout of these otherwise very minimal pages – ranging from structured and mostly uniform, to highly fluid with drastic variations in size, shape, and alignment.
Variety & editorial flexibility
To continue the theme of the fluid grids, we wanted the experience of each unique project to allow variety. Two project layouts each with two possible alignment options gives DMA's content editors the flexibility to tailor each architecture project's layout to best-suit its imagery, and also to build in variety and interest between the projects and the process of viewing them in series.
"We are extremely happy with how Benek provided a holistic design package that is adaptable to a range of platforms."
Content management: automation vs. control
I developed DMA on Craft CMS, which provided a perfect platform of customisable input methods necessary to give DMA the creative control needed to satisfy these flexible editorial requirements. The development process was a good balance of automation and control – with some parts of the sites fully automated when the layout could be determined by the content, while allowing other content types that demanded very fine-grain control allowing the options for precise image selection, placement, and ordering.
Project detail pages are a fine example of where our fluid grid systems interplay with the editorial control I've built for DMA on the backend. The project image gallery allows for image-level control over pairings, size/orientation, alignment, ordering, as well as captions and testimonials. This creates a large array of potential option and layouts available for each project, giving DMA the tools necessary to craft a rhythm and image flow unique to each project. Just as no two architecture design challenges are alike, no two project pages are presented exactly the same.
DMA's website CMS also allows for effortless interconnectedness of related data. Awards and publications are entered in a single location and automatically associated with their related projects. People exist as published team members but just as easily as news article authors, or project designers. News stories relating to a project automatically pull in a summary of that projects imagery and instantly display as further reading on the bottom of the project detail page. This creates a strong ecosystem of content types that connect and support each other as part for DMA's wider reaching digital and social media strategy.
Complexity underlying simplicy
Our unique grid structures, while appearing simple on the surface, proved to be ambitious and challenging to code and work on all screen sizes. I refused to allow the engaging layouts we'd created to disintegrate back to the boring uniformity that mobile priorities often produce but we tried so hard to avoid from the start. A lot of complex math and careful attention was given to how the image grids break down on smaller screens. Even when the opportunity for variation in size and position are reduced, we never lose that organic feel that urges you to explore more of each project and fully appreciate the spacial design work of Daniel and his team.
Daniel Marshall and his Auckland architecture team were a pleasure to collaborate with. Having the opportunity for creative oversight from branding, web design, front-end coding and CMS web development provided a rare opportunity to create a singular vision and execute it with the upmost attention to detail and quality control. We're all stoked with the award-winning result.