Having built Michael Drain Architects’ previous website ten years ago, they approached us again when it was time for a redesign: an opportunity to showcase their extensive portfolio of work to potential new clients. Michael Drain also wanted to use the website as a presentational tool for face-to-face meetings.
How we did it
As this is a portfolio website with stunning images I really wanted to make them the focus. The project feed is a take on the classic masonry grid, but is a little more complex as all of the images have different aspect ratios. I think the result looks great because it’s slightly different to the norm.
For the project pages themselves, we’ve added a slideshow effect and allowed the navigation to fade in and out, which gives us full bleed images, as well as the best use of white space for any crops. This is really useful when the site is being used in face-to face meetings as a presentation tool.
With potential users in mind, I also put a lot of effort into ensuring the site looks really good on mobile devices.
Building the website posed a number of interesting challenges; from creating a polished experience to developing a lightweight and effective content management solution. Leveraging some of the more popular JS libraries such as fullPage.js and smoothstate.js we were able to include some really nice visual interaction to enhance the existing content of the site. After some experimentation, we decided to use a lightweight or ‘really little CMS’ named Perch which provided a highly customisable, yet structured framework to manage the content whilst still retaining the simplicity which made it such an attractive option.