Come the Renaissance

posted on August 8th, 2007 by Anthony

It’s been a while since I’ve had the inclination to post, so I thought I’d end the drought to show a bit of work I’ve done recently for the proper day job.

the chester renaissance logo

Chester is about to undergo a massive period of redevelopment, with hundreds of millions of pounds being invested in to knocking down mainly shonky 60’s buildings across the city and replacing them with nice modern new ones. All of this is being branded as the Chester Renaissance.

You may remember a nice tutorial I put together about Google Maps and integrating them on your site? Well that came about from a need of using them on the site I’ve produced to cover the scheme – www.chesterrenaissance.co.uk

The Brief

The brief was to produce a site that strongly reflected the Chester Renaissance brand, so the design elements had to be strong and to a high quality. They wanted it to be a place for the public to get information about the various projects, and also to provide information about traffic problems. It was to be more of a ‘signpost’ site that directs people to more detailed information – but as usual this is already started changing and more things are lined up to be crammed in.

I’d mentioned Google Maps in a meeting a while back, and it was decided that they should also feature heavily as the nature of the project lends itself quite nicely to maps.

The branding of the Chester Renaissance was developed by an agency. The font was developed for the Chester and Cheshire tourist boards a few years back – called Exclusively Cheshire – and features heavily along with a quatrefoil. The colour scheme comes in two flavours – with black and grey being heavily favoured.

A sample hoarding

The logo and brand were also backed up by a range of proposed hoardings promoting the work of the Chester Renaissance that will surround the construction sites.

Despite being sick of the sight of that font, and not being a fan of black sites, I was looking forward to getting stuck in.

Swamp Thing (The Grid)

When embarking on the design I had just finished reading a lot about grids, mainly thanks to Khoi Vin’s excellent Subtraction – more specifically his dissection of the Times new grid layout, then his Yeeaah! grid write up, and his and Mark Boulton’s excellent Grids are Good SxSW slides.

It had gotten me thinking and, having toyed with the idea for a while, after reading Mark Boulton’s Simple Steps series a while back I thought it was time to break my grid virginity.

I’ve held back from designing a fixed site larger that 800 pixels for a long time. I won’t even bother going through the age old arguments. I just decided that on balance this project demanded achieving a certain look, with a certain quality… and a fixed site approaching 1024 was the best way to go.

And what a revelation it was.

The grid in action

After a bit of experimentation I drew up a twelve column, 69px (oo-er) wide grid with 10px gutters giving me a generous canvass of 958px. It worked pretty well – I think – but in projects since I’ve modified it slightly (mostly thanks to Matthew Pennell’s grid calculator – which was released after knocking this together with my dashboard calculator, a lot of trial and error, and a fair amount of head scratching).

For this project I also used the built in guides in Fireworks to layout the grid – it works but it can get really fiddly. I now put together a layer of semi-transparent rectangles that can be turned on and off easily (again Matthew’s little app really helps with that).

The Design

I had a good starting place with the brand guide, and the hoardings gave a lot of indications as to the way the brand was being pointed. Very early on I knew images were going to play a prominent role in the visual impact the site had to make. Black sites can really help in this way as colours get a bit of intensity kick from a dark background.

Instead of banging on about it, here are a few images of the designs evolution (well the front page anyway):

Rough line

Renaissance sketch 1

A very early roughing out of the direction I wanted to go in… apart from the logo I don’t think much survived. Except the orange link colour which came from the ING who are the biggest investors…

Blind Alley

Renaissance sketch 2

Here I was exploring some of the ideas from the first sketch. I was still struggling to get to grips with the grid concept too.

Dead End

Renaissance sketch 3

A more fully fleshed out concept sketch. Most people quite liked it… I didn’t.

Start Again

Renaissance sketch 4

There’s a few stages missing here, but you can see the evolution as it’s taken a more recognisable look to the finished product. I thought the news had to be more prominent, and the banner image at the top wasn’t working for me. It still need tweaking, but it wasn’t long after this stage of mock ups that I headed into hard code.

Content Pages

The front page was where I started with the grid, and I found it helped immensely. It wasn’t until the content pages, however, that their true goodness came through.

Here’s a selection of the different pages on the grid…

The railands project page on the grid The projects page grid The Traffic page on the grid The Vision page on the grid A news page on the grid

I tried hard to create the banner images to fall into the grid as much as possible. These banner images on the main content pages are really important, and really lift the site up a level.

Taking in to account a few browser discrepancies and a few compromises for IE I think the grid has worked pretty well, especially for my first go. It’s a different way of thinking about web design for me – but that’s what it’s all about and the change has given me lot’s of new ideas and techniques.

I certainly find that I’m looking at old work and really noticing the lack of gridness and thinking it would look much better with the techniques applied. I think the majority of my future work will be on the grid.

Overall

Even though there’s lots more I could say – especially about the google Maps – I think that will do you for now.

The sites gone down pretty well with the right people, and it’s been getting a lot of good feedback. I’m pretty pleased with it, but there are a few elements I would do differently.

I’ve already mentioned the grid was laid out using Fireworks’ guides. I don’t do it like that any more and for good reason.

I became aware of the vertical flow design concept halfway through the build. The thought had never really crossed my mind… I’ve tried to implement elements of it, but I would love to do it properly.

The front page has a few areas I don’t like – mainly the partners bit – it looks tacked on… that’s because it is really. In the future I’ll try and morph this into something else… but politics… you know.

Well that ends my post drought… let me know what you think.