Email iconarrow-down-circleGroup 8Path 3arrow-rightGroup 4Combined Shapearrow-rightGroup 4Combined ShapeUntitled 2Untitled 2Path 3ozFill 166crosscupcake-icondribbble iconGroupPage 1GitHamburgerPage 1Page 1LinkedInOval 1Page 1Email iconphone iconPodcast ctaPodcast ctaPodcastpushpinblog icon copy 2 + Bitmap Copy 2Fill 1medal copy 3Group 7twitter icontwitter iconPage 1
Michael Drain Architects hero image of a staircase

Michael Drain Architects

The opportunity

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.

The solution

We created a responsive website with a focus on the high quality imagery available for each project. The website is underpinned by a content management system tailored to manage a large number of high-resolution images.

Michael Drain on an iPad

How we did it

Design

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.

Rachael Grocott
MDA mobile

Tech

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.

James Dowell
UVD took careful note of every detail of the performance requirement for our website and produced a website which was exactly in tune with what we had requested, with the end result looking even better than we had hoped. They also developed the concept to work seamlessly on other formats and media. All of this was delivered on time and in a friendly manner.

- Michael Drain, Founder of Michael Drain Architects

More projects

Hotwire hero img

Hotwire

read case study
Vote for Policies hero img

Vote for Policies

read case study

Want to chat?

Whether you’re a startup or established business, we can help you to innovate, compete and grow. The first step is easy: contact us.