The Brewing Process: Part 1

posted on November 7th, 2007 by Anthony

So here we go with what will hopefully be an enjoyable mini series of posts that will give you an idea of how I came to finally settle on the design you see before you.

I’ve been investigating the actual length of the process a bit further and I think my two year estimation was perhaps a little over. By a complete coincidence I launched this new design almost exactly two years after the last one, which was for the 2005 Reboot. So I’m going to round down my estimation to probably something more like 18ish months.

When I say 18ish months, I’m including everything in that time-scale – right from when the seeds of this look were sown, through to the finished product. (This includes huge amounts of non-activity – especially as I got married this year…)

The Seeds

I briefly mentioned this in my introductory post…

The Birkenhead Brewery Co. Shield

This shield/crest is mounted on the wall literally around the corner from our flat. I’m not entirely sure why, but I really like it. It got me thinking. Which is always a dangerous thing. People familiar with my last design will know I like to take inspiration from my surroundings.

I wasn’t in a hurry to change my design… but I’m a web designer, leaving things alone is always difficult. Despite the fact I was really happy with my Reboot design I already had half a design eye on the future.

The Crest

The Birkenhead Web Brewery - Escape Crate

What I really had in mind when I first started was to make my own version of that Birkenhead Brewery Co. Crest. In fact I spent quite a bit of time doing just that…

That’s it on the left there. I lovingly created my own vector version in Fireworks, everything there is original – even the funnel (which was a reference to my old ferry). It took me a long while to get it right.

You’ll notice that it didn’t make it to this design.

It’s not that I don’t like it. I tried really hard to use it – probably too hard. It just wouldn’t fit… but more on that later!


My early ideas where to use the whole building as the inspiration for the design. I even took some more shots of it to get some basis for other design features…

Snapshots of the building I used for inspiration early on

A nice idea in theory, but I took it a bit too literally.

Design path one

Urgh. It was a rubbish idea… but instead of condemning it to the trash can I pressed ahead and ‘evolved’ it by adding more of the local surroundings…

Design mock 3


It wasn’t working, and I was trying to force a rubbish idea into a design.

Other Sources of Inspiration

I needed something else to inspire me. I liked the whole Birkenhead Brewery thing, so I started digging around to find out more about it.

And that’s when I started finding these…

Birkenhead Brewery Co. Beer Mats

Birkenhead Brewery Co. Beer Mats

Birkenhead Brewery Co. Beer Label

Ooooh now you’re talking! How nice are these! Ebay is a great place. (I have so far resisted actually buying anything…).

So the design started moving in another, much better, direction.

Starting to look a bit more familiar…

OK that is a really rough sketch… but it marked the start of the path that led here.

That looks familiar…

By this time I know I’m on to something!

Actual HTML

So much so that the image above isn’t a mock up. That was a full, fully functioning HTML and CSS prototype. It was liquid, it was quite nice and I liked it… but I didn’t love it.

And so it went on

That was during the summer of 2006 by the looks of it – around June perhaps?

Other events in my life, quite rightly, started taking priority after this – but this was still only design revision 8 out of 13(c).

So there’s a bit more of the story to go – I still have that crest for one thing – but it’s getting late and I’ve given you enough of an idea for now.

I’ll carry it on further in the next post.