When attempting the re-design of the clocktower site I decided as the company was in the business of selling and servicing vintage equipment that it would be only natural to go for a retro feel to the website. I started out by looking at a few examples of existing retro design.
I noticed that a lot of them have really nice sort of washed out neutral colour schemes and mix of fonts and use a lot of textures especially paper. There’s also a use of bold geometric shapes like circles that have that sort of 1950’s badge look to them. So I then went off and started the long uphill struggle to teach myself illustrator. As previously posted with several tutorials eventually after a lot of hair pulling I managed to scrape this logo together which i figured would make a nice sort of hero image/header element.
This has a nice retro feel to it, sort of 1950’s ish so I decided to expand upon that with the primary font and reused the League Gothic font from the banner. It’s a nice open source font available here. (OK so its not a font from the 1950’s but hopefully we’ll get away with it)
Then I quickly wireframed a layout using Photoshop, with a large header and several windows for highlighting the various pages within the site.
For a colour scheme i decided on a mix of browns, reds and cream to keep the retro feel going. And added some stippled masking to the log to give it a more weathered appearance.
I also added a perforated edge to the header section and a few grungey lines using photoshop brushes. Then added a drop shadow to lift the header from the web body. I then to bring some drama and colour to the header I added huge sunburst, hopefully drawing more attention to the logo. For the body background I decided to go with some graphic line elements reflecting the sites palette . I drew these out in Photoshop as shapes using the pen tool then cut into them using circles set to delete from shape area to get the corners right. (I later found a much easier way to do this in illustrator, but live and learn eh :P)
I masked out a fade for the sunburst, arranged the line elements in the body background and added a low opacity vignette. Then it was time to make some windows for the page links at the bottom of the page. I used the same delete from shape area technique to cut out the corners of a rectangle to make a sort of ornate back ground then added text and images in separate windows on top. Then added drop shadows between the layer and saved the whole lot as a smart object to allow me to duplicate and edit the whole thing easier.
To add some extra texture to the background I used two two paper textures overlayed and multiplied at low opacity. One a blank watercolour paper the other a more distressed postcard back. I also added some extra information advertising the services of the business as part of the header which could link to the relevant pages.
For the second page of the site I decided on one of the shop pages. For this layout I would have to get rid of the large banner and include a sidebar for product searches so the sort of horizontal layout of the home page couldn’t really be reproduced. Trying to keep the visual theme on the site I decided to reproduce the perforated edges, logo and sunburst on the sidebar.
I also experimented with some background images, and quite liked the idea of integrating some vintage photographs as that sort of fits thematically with the shop. I hassled my dad for some he had lying around in the loft and scanned a few in at high rez. Eventually I decided on this old image of Shoreham by sea port.
And fit that into the background, I used it at a really high magnification as I didn’t really want the background to be a picture of anything in particular but more of a textural, abstract thing. But the old photo thing gave me the further idea of making the windows look like old photos or paper themselves. So I got some stock images of old postcards and stacked them up with some drop shadows to hopefully look like a sheaf of scattered documents with the window itself made from an old songbook page resting on top. The smaller page link images underneath the main window were reproduced from this element.
Which I suppose I was quite happy with, I suppose those background lines from the home page don’t make an appearance so perhaps the theme gets lost a bit. So for the sake of comparison here’s the homepage with the vintage photo look.