Website Evaluation

Standard

 Good website:

Hugh Fox: http://hughfox.co.uk

The reason I find this site to be an example of good design is because of the following:

The site is well laid-out and it is easy to navigate around.

The images are clear and of a good quality. Clicking on an image brings up an enlargement. This is excellent especially on a photographer’s website.

The navigation bar is clear and concise. It is easy to find everything on the site, despite the placement being in the footer (an unusual choice, but not one which causes any difficulty.

All the links work and there is nothing distracting on the site.

Hugh1

Hugh2

 

Bad Website:

Studio 27: http://www.studio27.co.uk/home/

The reason I find this site a bad example of design is because of the following:

Music plays on every page opened, even after turning off. Comes on again whenever a new page is reached. Music is really annoying, especially this music.

The page is tiny, all the images are tiny and it is all written in Flash, which is now fairly obsolete as it doesn’t run properly on many platforms.

None of the images is really big enough to see and they don’t grow on clicking/ This could have been achieved easily in flash and can be done without as well.

The navigation bar animation in my opinion is rather distracting.

The site looks dated and unprofessional, which is a shame as the company have a good reputation. As a site it doesn’t instill confidence. It is very basic and doesn’t appear to have been updated in a while.

The Myspace link works, (as do all the links) but the last entry on the MySpace page was 3 years ago, so that clearly hasn’t been updated in a while either.

Time for a redesign, so I’m choosing this as my redesign site.

Studio1Studio2

Grunge Designs

Standard

To Create This:

Hysteria

 

I used these Eyes: http://www.haveabettergolfgame.com/wp-content/uploads/2011/11/eyes_pictures.jpg

Then used Screen Layer Blend with Leaf: http://www.atria-associates.co.uk/images/leaf_1509b.jpg

Then Lighten Layer Blend with Clouds: http://extremechasing.com/wp-content/uploads/2011/06/storm-clouds.jpg

I used Vivid Light with Lightening: http://api.ning.com/files/oxLLOzbnoNHHl-KBzgM3W6CI7x2pOuUjvVkCDYzKwsRMh2zKgCe0yfkixtDvMXd3uGKcMHMTbU53swQm*nzLa0vz93LNrEbm/Lightning_1.jpg

Wrote the Text in Porcelain.

Finally added Texture with Scratches: http://www.unsigneddesign.com/Scratched/12.JPG

 

 

I used similar techniques to create these images:

Skateboard Sussex

SkateboardSite

I used this Skateboard image: http://rlv.zcache.co.uk/create_a_custom_skateboard-p186466805280336822envdg_400.jpg

Applied Text in “Cracked”

Then textured with Concrete crack: http://farm4.static.flickr.com/3544/3406903520_eda54eb80b.jpg

 

For the background image:

SkateboardBody

 

For background (body) image I used brushes from http://www.misprintedtype.com/v4/

And textured the background: http://texturezine.com/wp-content/uploads/2009/10/grunge_texture.JPG

The body is very large to accommodate any size of screen. The main site page will enlarge to fit the screen used.

SkateboardSussex

 

 

 

 

 

 

 

 

Water Project – Banner Ads

Standard

Banner Ads

As part of my project “Water: The Source of Life” I have created two banner ads for the website.

For the first, I was supplied with the text and the dimensions.

I made a gradient background, added the text and logo and added drop shadow around the text to give depth and texture. I think it gives the impression of clouds, although this was not my intention.

The second banner came straight from my imagination:

I was given the dimensions and used a photograph of a water droplet as the background. I created the text and centred it all on the page. The text, read downwards, is intended to mirror the drop of water.

In both banner ads, I made a “call to action” button. Although the whole ad would probably be ‘live’ (ie: you click anywhere on it and it takes you to the link,) it is psychologically inticing to press something that looks like a 3D button. We instinctively are drawn to such objects, so it is a good idea to add one, to let the viewer know that this (the ad)  is something clickable.

To make it, I simply drew a ’rounded rectangle’ with the draw tool, gave it a slight drop shadow and bevel, then added text on top, which I also gave a slight shadow, to make it all stand out a bit.

I am particularly pleased with my Saving Water ad, but I prefer the button on the Blue Planet ad.

 

Photo Reference:

Water Droplet

 

Water Project – The Background Graphics

Standard

Background Graphics

As part of my project “Water: The Source of Life” for the National Geographic website, I need to produce at least 2 background images.

These images will sit behind the main body of the site, so only the left and right edges will be visible most of the time.

I wanted to create something in keeping with the theme of my project – the melting of the polar ice caps and flooding of main continets and capital cities.

I developed header images of five of the biggest cities in the world underwater and added text, but the background images do not need text so they were easier to make.

First Background Image

I combined two images in the first image:

I found a picture of some Arctic Ice

Then added a photograph of some stones under water

By using a layer mask, I created a gradient between the two images.

Here it is with a Screen Grab of the National Geographic website, to see what it could look like.

Second Background Image

I did a similar thing with this background image.

Starting with an image of some an icey terraine.

I added an image of some storm clouds.

Again, by using a gradient mask I combined the two.

I then added a colour wash to bring out the colours.

And added a screen grab to see what it would look like.

I’m quite please with my images and the new techniques I have learned. I just have one more part of my submission to do and that’s Banner Ads, which I’ll cover in my next post.

Image References

Arctic Ice

Stones under Water

National Geographic

Icey Terraine

Storm Clouds

Water Project – The Header Graphics

Standard

Header Graphics for Water: The Source of Life.

I have finally finished the header graphics for my project “Water: The Source of Life.”

Having worked on the images for the headers, I then added text.

I only need two, but I have come up with 5 alternatives:

New York under water, with text added along with National Geographic logo.

This is not one of my favourite images of the five. I don’t think the underwater effect is prominent enough. If I was more skilled in Photoshop, I would have liked to create some decay and texture to the buildings, but this is something I will hopefully learn in the future.

Paris under water with added text and National Geographic logo

This is the first image I created and conversely the one which I have tinkered with more than the others. Again, with better skill I would have liked to create more rusting and decay on the Eiffel Tower. I do like the underwater effect here and the way the city appears to have ‘fallen’ into the rocks.

Rome under water with added text and National Geographic logo.

Although I like the light and water effects here, I’m not sure I’m really happy with the way the buildings have come out. I fiddled (that’s the technical term!) with the  foliage in the foreground to try to create more depth and texture, but I don’t think I was very successful.

I do like the way the title text came out on this one though.

San Francisco under water with added text and National Geographic logo.

I was surprised at how well this one came out. I was lucky with a good image of San Francisco to start with and the water fitted very well with the overall look.

Sydney under water with added text and National Geographic logo.

Although I made this image as an afterthought, having created the others and deciding that I ought to represent Australia too, I actually like this one best of them all.

I like the way the water has affected the buildings and I think it is the most underwater-looking one of the set. I also like the text on this, as it stands out just right.

Image References

Underwater Image 1

Underwater Image 2

New York

Paris

Rome

San Francisco

Sydney