Research for Project 2 – Task 2 – Website Re-design

Yesterday in class we learned about ‘Grunge Design’, which is basically using a subtle amount textures in your design (being careful that it is NOT cheesy). As I was listening, I suddenly got lots of ideas for a Grunge design for my re-design project (using the website we used as the ‘bad design’ from our evaluation), which is Joe’s Travel Blog and started jotting down the idea’s:

  • a table for background
  • a notebook for the body
  • polaroids on pegs as the header
  • a thin scroll of old paper with maps of continents on the scroll for the navigation
  • As soon as we were put to work I started researching for images I could use to do this and came up with these images I used:

    The table top

    The table top

    pegs on a washing line

    pegs on a washing line

    a polaroid image

    a polaroid image

    a notebook

    a notebook

    The scroll of paper

    The scroll of paper

    The world map I am using as a base for navigation buttons

    The world map I am using as a base for navigation buttons

    I used the Tabletop as my background, it was quite a small image though and stretching it made it look pixelated and too large. Luckily, I was just about to learn about ‘content aware stretch’ which was perfect for my table! I then made the header. I started off with selecting the pegs and washing line, and copying this to a transparent background of 960x300px. The washing line was also not long enough, but copying it twice and some cutting and pasting made it long enough.

    One of the finished Polaroids with scratches

    One of the finished Polaroids with scratches

    I then took the Polaroid and selected the white part only, copied it to a transparent background and used the stamp tool to erase the number.
    I then started looking through Joe’s photos and choose a few to work with. The good thing about his pictures being ridiculously large is that they were of good enough quality for me to use them. I dragged the partly transparent Polaroid on the images and resized as appropriate. I then started a new layer and used another newly learned trick: the brush tool. I wanted my Polaroids to look old, used and give it a texture. So I found a ‘scratch brush’ online, downloaded it, installed it in Photoshop and in the new layer, started scratching the Polaroids.
    The first navigation button - for Americas

    The first navigation button - for Americas

    It was done in a new layer on purpose as after this, I applied a drop shadow to the Polaroid. Had I done the scratching in the same layer, the drop shadow would have been applied to the scratching too. After I had about 5 Polaroids, I started adding them on the washing line. I decided to do a few above the line (where the peg was facing up) and a few below, I also rotated them in different directions so it didn’t look like the same Polaroid. I then added the title of the blog and found a brilliant font with arrows (Stereofedelic), which I thought was quite ‘travelley’ (think road signs). I added the whole header to the table and added the scroll of paper below it.
    I then used the world map as a starting point for a navigation button, having erased the world map to create the empty button as a base, I copied only America of the original and pasted it on the empty button. I placed the button on the scroll, with the intention of doing this for each continent. However, TIME’S UP and class was over! I couldn’t believe how quick that went!
    Looking at the whole design now, it may be a little too cluttered, so I may well loose the scroll and change the Polaroids around a little, but I am still quite happy with this first attempt:
    First attempt (not finished) of a 'Grunge Design' for Joe's website

    First attempt (not finished) of a 'Grunge Design' for Joe's website

    Research for Project 2 – Task 2 – Website Re-design

    Leave a Reply

    You can use these HTML tags

    <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>