I have been working on Lambeth Council’s new website design since October last year (2013) and then applying the SASS/CSS for the design in Drupal. The process had involved an extensive public consultation period and a lot of User Experience work which was being carried out skilfully by the very talented Kat Flint and had started quite some time before I got involved. The site was live and continually in Beta phase during development and was structurally influenced by the recently redesigned gov.uk site.
My design process involved mood boards, personas and colour ways which were researched taking into account that the new site needed to reach high accessibility standards. This meant high contrasts, clear fonts, good use of white space. I also had to consider a look and feel that would not only be modern but last longer than a couple of years without looking tired. I spent a bit of time looking at landmarks in the borough and gathering a Pinterest board of Lambeth related images that I could draw from.
I worked on 3 sets of colour ways using Lambeth’s logo as a starting point. It became clear which ones would work well with the brief and the general tone I wanted. There was an element of 1920s public transport influence in the choice of fonts, dark greens and reds.
The project aspires to be as open source as possible and so I chose Raleway as the open source font. I hugely enjoy making iconography and so was very happy to draw a mammoth amount of icons for the services section of the site along with other way finding icons.
The site is also responsive and the SASS/CSS was complied using Compass and the grid was written using Susy which had been expertly set up by Tim Maughan who had been working on the Drupal config development . This afforded a quick way of setting rules about the grid and write shorthand responsive design instructions.
I’m not a huge fan of Drupal’s ability to churn out excessive and unnecessary HTML. I didn’t have much control over this and so I couldn’t write the leanest CSS I would have wanted. However using SASS and a variety of mixins allowed me to reuse recurring style patterns. I’m currently writing a pattern library for Lambeth’s style guide to conclude and tidy up the development work so that it could be reused by anyone. This is an enjoyable but time consuming pursuit but its importance should not to be underestimated.
Overall the project has been intensive but rewarding and I’ve written a post about my design influences throughout the whole process.
Go to the live version >
Leave me a message.