Website re-design – Clocktower cameras – Vector look

To follow the grungy look of the first re-design for Clocktower cameras I decided to attempt something using vector images pretty much solely created in illustrator. I figured this would also be a good way to try and get to grips with some more of the programs functions. For inspiration I had a look at some of the vector landscape websites out there, looking at the colour palettes and general feel they had, here’s a few.

I then started with the logo and started looking at the perspective grid as a way to make something with a graphic look that might give the banner some impact.

 It was a bit of a struggle getting used to the using the grid. I tried using the type tool straight onto the grid and extruding the text, but that ended up not working so well. Eventually I ended up making all the lettering from rectangles and pen drawn elements that I merged. Probably would have been better and quicker to investigate cinema 4d or Maya for something like this that would have cut down the time taken by quite a bit. Anyhow after getting the main shape I added some gradient fills and background of hills and sky I tried to make the palette a little washed out rather than play school primaries to make things a little more subtle and continued the landscape gradient down to the bottom of the site make the background.

I added a gradient mesh for the hills and popped in some clouds and used a radial gradient for the sunlight in the center. Then drew in some further landscape like hills and bits using the pen tool. After that I tried various methods of making shadows for the lettering, and failed miserably using the perspective grid eventually Ii ended up just drawing them in freehand and applying a linear gradient to transparent on them, rotating the gradient to match the angle from the light. I’m not sure if you can render and import shadows with transparency from something like Maya to illustrator (probably) but that’s something again to look into. Then to add to the perspective and make this landscape look a bit more like a landscape I drew a simple tree in illustrator and bulged and otherwise distorted it to get a few different trees which I scaled and placed around the banner area.

For the web sites various buttons I started looking into graphic style tutorials in illustrator. Starting with some text, applying gradients and then reproducing these gradients and converting them to shapes, then applying more gradients over the shapes eventually I came up with something like this.

Which reproduced the overall colour palette and had a nice pressable feel. With this saved as a graphic style I could then use it applied to some vectors of various social networking logos to make my buttons for the website footer.

I also changed the font for my buttons to something a bit more quirky, Nueva std I think. For the windows/carousel I created another graphic style using several gradients and applied  that to some rounded rectangles then dropped them in place at a low opacity. I also added a footer made from a straight line stroked with a brush made from the rainbow elements from the header. After that I added the text and photo content for the site and some more buttons for scrolling the carousel.

I then took the whole thing over to Photoshop for some finishing touches, added a slight grainy texture to the background multiplied at low opacity. Then some custom shapes and brushes blended into the footer with a gradient overlay, the product shots and some little birds for the header…aw.

For the products page I didn’t really want to change too much, most of the navigation didn’t really need to be moved and I wanted to keep the search sidebar. I added another window for the product descriptions and kept the rounded rectangles for the images to keep the whole theme constant. Hopefully the whole design although simple would be quite intuitive to navigate and understand I’m not really sure the theme supports the whole “vintage” retro camera brand for the shop but hey ho.

The original site does not allow you to buy straight from the site, I guess if I was pitching this to Clocktower I would have to check if they would want to fit this into their business model before adding functions for it. For this reason I didn’t include checkout and basket windows information on the mockups. The search sidebar is quite large really so if I wanted to include these functions I could always shrink that down and add a basket sidebar to the other side of the main product window.

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s