Website re-design – Newspaper look

After completing the vector/illustrator only version of the Clocktower site I wasn’t really happy with the theme, It was quite colourful and attractive but didn’t really reflect the services and products provided by the company. With this in mind I decided to try and make a site that featured more photographic elements in it. Perhaps old photographic manuals or instructions or an old scrapbook of ticket stubs or stamps.

I first mocked up a quick layout, I wanted to keep the side bar from the vector website on the homepage but thought perhaps I could add some more content beneath the hero image, and ended up with a rough idea like this.

For the logo this time I reproduced a sort of banknote looking badge using guilloche patterns in illustrator. Pretty handy for learning about blending and rotating objects also I used a clipping mask over several patterns for the central “C” character and some simulated drop shadows using path offset.

Got to admit when I tried shrinking this down for the header a lot of the detail got lost so I decided to reproduce it on the background, and this gave me the idea of making the whole background look like a piece of a document with a seal or stamp on it. I found some torn edge brushes online and applied these to a paper texture for the main background.

For the body showing through at the right side I tried to make it a sort of still life element with various camera manuals and equipment was resting on a table for this I sourced some plain wooden texture and some old camera manual pages, resized rotated and perspective transformed them to fit, then added some colour correction and drop shadow.

For the header I tried to make use of some large typography a bit like a newspaper headline again trying to make keep everything looking slightly vintage. I had another look at some websites like to get some ideas.

I included the main navigation as part of the header above the shop title. Hopefully this doesn’t make them too difficult to see you could always have one highlighted depending on which page is showing. For the graphic drop shadow on the main title I used a duplicated version of the text with a pattern overlay made from a custom pattern of thick diagonal lines.

For the main windows/search bar etc for the home page I wanted to keep the scrapbook look so decided to make my windows from old Polaroids that looked as if the were sort of stuck on to the background. I sourced some stock images of Polaroids from the net, deleted their images using clone stamp and spot healing replaced them with white filled windows on low opacity. To make them look stuck on I used some “old tape” brushes and a little bit of drop shadow set to very low opacity.

Then it was just a case of adding the text and photo content, I used low opacity white rectangle to help highlight the text areas and justified the text to give it a more newspaper column feel. I also tried to keep the scrollbars from looking to out of place and shiny. For the product page I scaled up one of the Polaroid backs and added the products in a grid using low opacity multiplied strokes to separate the images from the white, low opacity backgrounds.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s