Simple/ Corporate Site Redesign

For my Simple design, I decided not to use any pictures. This was all created using text and photoshop shapes.

I wanted to create a clean corporate design. This is the Home Page.

I started with Logo creation and came up with this:

 

I thought it reminded me of maps in the Paris metro so I took a look at some.

I found a photograph of the Balard Station in Paris and this gave me the inspiration to create the interface.

I thought about animation to zoom out and in on the area of the map navigated to. Here is the Services page.

 

I would probably have found this easier to create in illustrator, especially the track map, but I found the guide lines in Photoshop useful to line everything up.

I do like the clean lines and I don’t think it looks too corporate for the subject of the website, but I prefer the designs with images for this particular website as it is a photography studio.

Different themes work well for different websites; this design would look good in another context. Eg a business offering corporate service. Something to do with transport or logistics, perhaps a shop selling sleek, stylish products.

This is a simple corporate logo I made for practice:

This was easy to make and looks very business-like and simple.

Image References:

Balard station map: http://parisbytrain.com/files/2008/07/sign_metro_line_8_balard.jpg

Grunge Site Redesign

I decided to use Lace and Fabric Textures in creating this grungy, textured interface:

Home page, using images found on the internet. The original site is made in Flash, so I was unable to use any assets. I have chosen suitable images from around the web.

Gallery page, showing a film strip of images which enlarge on clicking to showcase the work of the studio.

My decision to forgo a header was born out of a desire to showcase the photography with as few distractions as possible.

Image Resources:

Main Site:

Camera girl: http://static.guim.co.uk/Guardian/technology/gallery/2008/sep/03/1/72977636-373.jpg

Burlesque: http://static.guim.co.uk/sys-images/Film/Pix/pictures/2010/1/6/1262791333364/Burlesque-Undressed-001.jpg

Pin-up: http://pinup-fashion.net/wp-content/uploads/2011/01/pin-up-style1.jpg

Vintage Head: http://cdnimg.visualizeus.com/thumbs/76/3d/face,hair,fashion,portrait,sarah,ingle,vintage-763d37e4847106afc0cf6b1c5f946aaf_h.jpg

Film Reel: http://www.idcwebs.com/images/dance-recital/film_frame_06.jpg

Logo:

Camera: http://www.davidrichert.com/ROLLEI/My-Rollei.jpg

Gallery pictures:

Model with steering wheel: http://www.webdesignburn.com/wp-content/uploads/2011/11/Vanessa-for-pin-up-hair-salon.jpg

Model with tattoos: http://us.123rf.com/400wm/400/400/trinaestipo/trinaestipo1109/trinaestipo110900006/10554288-photo-of-beautifull-pin-up-girl-with-tattoos-and-tattoo-machine-tattoing-herself-and-looking-at-the-.jpg

Vector Site Redesign

For my Vector-based redesign, I did two different options – one traditional and the other more modern.

First the Traditional one:

The Home page, showcasing a prominent photograph (I found this photo on the web as the original site is written in Flash, preventing me from using their assets in my redesign. Of course, a photograph from the studio would be in place here.)

The Logo, Header and Navigation are all in one across the top.

Contact page, using the same interface, but substituting a map and contact form for the photograph.

In both cases, a very pale version of the logo image is just visible in the background, to give a little texture to the pages.

 

… and for the Modern interface:

 

The Home page is simple and sleek, with lots of white space around the assets.

I chose to place the navigation vertically on the right, which may present problems in Dreamweaver, but I wanted elipses to reflect the camera lens in the logo and I’m an artist, so there you go…

For the Contact page, I again used a map and contact form, keeping with the sleek, white look.

 

 

Image Resources:

Traditional:

Burlesque: http://static.guim.co.uk/sys-images/Film/Pix/pictures/2010/1/6/1262791333364/Burlesque-Undressed-001.jpg

Old Camera: http://www.geozero.com/assets/images/old_camera.gif

Pin-up: http://images2.fanpop.com/image/photos/10400000/Vintage-Pin-Up-Girls-pin-up-girls-10455336-800-600.jpg

Modern:

Modern Camera: http://upload.wikimedia.org/wikipedia/commons/a/ac/Large_format_camera_lens.jpg

Head shot: http://www.headshot-photography.com/photos/caseyg_1.jpg

Captcha: http://www.bugtreat.com/blog/wp-content/uploads/2012/06/Captcha-Image-Verification-Code-php-script.gif

 

 

Website Evaluation

 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.

 

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.

Grunge Designs

To Create This:

 

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

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:

 

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.