Good and Bad website design

I was asked to research websites to find which ones were designed well.

I like the design of this one, I like the reflections and the way it's laid out so you can drag across the panes to make them rotate. The background is quite subtle, which draws the attention to the bright colours in the foreground.

This website has a straightforward design that is logically laid out and is easy to navigate. This site has a tan background and the panels are dark red and brown, which draws attention to the text and pictures within them.

Here on this site there are three columns of text. It feels like an old, cheap design. The font used for the title looks like a graffiti tag and is hard to read. I feel this is a mediocre design.

 The designer of this site tried to incorporate 3D effects, it's hard to say how the effect looks as I didn't have any 3d glasses with me when I found it. It looks like a floating land mass with various features upon it.

Even though this site looks fancy, it doesn't make it clear who's site it is or what they do. When the sections of the brain are moused over they flip to show the other side but then nothing happens.

This website is the worst site I found during my research; there aren't any links, the photos are poor and the tiled background is distracting. It's generally ugly, especially the way the red colouring bleeds into everything else. This is a site about ambulances.

Mock web page for ipad.

I made the background first, I used a few pictures from google images of a fictional band from a game called 'Left4Dead'. I re-sizes them to fit the template I had, and changed them from 300dpi to 72dpi. I used the slice tool to make the area, and then I used the slice select tool to make it into a button, I had to make an HTML link, which sends the user to a non-existent website.

Imagination

We were asked to take rubbings from around the college, and then scan them in. I chose the design I liked best that came from the perforations on the staircase. I put it in Photoshop, and adjusted the colour from graphite to purple. I duplicated the layer and then flipped one layer to make a symmetrical shape, and then joined them into one layer and then duplicated and mirrored it. Then I repeated the process, alternating the orientation, before using the perspective tool to stretch some areas and pinch to constrict others. Then I copied and pasted it three times, after shrinking it so all four images would fit the same page.

Photos 2

I like the bottom three pictures of the tunnel. The mugging that is part of my comic will be staged here. I have taken each of the shots in both landscape and portrait. This is so I can decide, depending on how the images look when edited with the characters in, which orientation will work best on the screen of the iphone. I like the angle of the picture of the bus stop; it has a nice vanishing point inferred, which suggests a frustrated commuter waiting for a bus that's late.

Photos

These photos will be used for my interactive iphone comic. I particularly like the ones of the entrance to the station, of the platform, the ticket gate/turnstile and of the bus stops. These tie in well with my story board. I was hoping to get some models to come down and pose for the shots but no-one was available. However, as it was an overcast day, the light was very diffuse, meaning no shadows. This will make it easier to take pictures of models later and photoshop them in. I've been thinking about creating characters using photoshop and adding them to the photos. This could tie in well with the comic feel that I want for my finished piece. 

Panoramic photography using photoshop.

In photoshop we had to quickly make a panorama. First we took some suitable photographs and then use photomerge, then automerge, then selected the pictures we wanted and clicked 'go'.

Snooker balls

In photoshop we had to make a snooker ball that had shadow and shine on it so it looked spherical. The first attempt was done without being shown how. First I drew a circle and coloured it red. Then I used the elipse tool to draw the white circle in the centre, and added a number using the text tool. Then I used lens-flare to make it look 3D. Lastly, I made a third circle and coloured it black and used the motion tool to blur it.

Then we were given a demo on another technique. Firstly, I made a background with the gradient tool, then a circle with the marquee tool. I held shift to form a perfect circle, and then shift and space bar, which allowed me to place the circle where I wanted it. Using the same technique I made a smaller red circle that fitted into the original white one. Next I used dodge to brighten up the highlights, and burn to darken the areas that were in shadow. Then I used add to selection to draw three ovals in an H shape, and laid this over the centre of the ball. Then I de-selected and loaded them separately so I could merge them.

Research and Proposal

After looking at several different company logos, I decided upon using Subway Sandwiches to develop. I decided this as the present logo appealed with its suggestion of graffiti in the arrows at either end – this is a classic graffiti motif. My idea is to create a new logo in the form of a subway train with the carriages represented by ‘sub’ sandwiches, perhaps with wheels made from pepperoni or salami, windows represented by slices of cheese, passengers by olives and graffiti formed from the tomato and brown sauces they use, as well as mustard, relish and pickle, etc. The logo itself can be developed into a more classical graffiti style, ‘blockbuster’ comes to mind as it is more easily legible than many other styles. An idea I’ve had is to have this sandwich train going into an underground tunnel formed from a human mouth taking a bite from it, reminiscent of the way a parent persuades a child to eat – ‘here comes the choo-choo train, open the tunnel.’

Other companies logos I considered include Sony, EA Games, and Steam, an online games retailer and gaming community. Having looked at these other companies, I found that they didn’t inspire as much as Subway did; nothing came to mind as strongly as the idea of an underground train made from sandwich ingredients.

The existing logo for Subway only reflects the idea of a subway train system by hinting at graffiti, as mentioned above. However, the logo and company name on their own do not immediately suggest that the business sells food – they could just as easily sell sub-woofer speakers for cars, for example. I think that my concept of forming a logo from food will immediately inform a potential customer that food is what they sell.

I’m planning on sourcing my images by buying some bread rolls and using food items from my house to take photographs of, as well as sourcing images of trains and train tunnels from the internet.  I could also go down to the train station to take photographs and capture sounds of trains. I could manipulate the photographs I take using, for example, the liquefy tool in Photoshop to fit a picture of a train to fit a roll, or vice-versa. I could also make the image almost entirely by forming the train, graffiti and surroundings from food, attached together with sauces, cocktail sticks, etc, and then photographing them. This will tie in well with my research as the logo has to represent a company that sells food.

During this research process, I have found that my ideas have developed and grown from the original concept I had. An example of this is the idea of forming the logo from condiments.


For my website, I'm planning on using photographs of the train station. One idea I've had is to make the home page out of a photograph of the signs and information boards from the station and photoshopping them so I can change the original text, and replace it with the links to the different pages of the site. Examples of the links could include where the ingredients are sourced from, what products are available and how much they cost, any special offers and locations of the shops.

I like this logo as it clearly shows their product - burgers, represented by the lettering being sandwiched between two buns.

This logo is self-explanatory it clearly shows an apple..

The sphere suggests the planet earth, and the colours used are similar to the Olympic rings. This suggests a global idea, fitting for a global telecommunications company.

This is quite a well-known brand logo. The lettering and the shape of the bottle are easily recognisable.

Here is another example of a globe representing the whole world connected together. It also makes use of the famous Playstation buttons.

The Colonel is easily recognisable, and the red and white colouring stands out.

The 'Golden Arches' are instantly recognisable on their own around the world. 

The colours in this logo draw the eye, and suggest that the console has bright colours in the games. It also makes you think about light reflecting off a CD, and this was the first console to use CDs to store the games on.

This logo again is a sphere used by a telecommunications company, and has a stylised representation of both the letters 'e' and 's'.

This logo is round, which keeps it self-contained, and the unusual green, white and black colouring makes it stand out.

The piston arm clearly calls to mind the workings of a steam train.

http://www.dafont.com/theme.php?cat=606&page=1

Today (11/11/2010) I went to the train station and took some photographs to use for my website and to use for my logo. I'm planning on taking some more photos, of graffiti in and around Plymouth, and shooting some video and recording some sound for the website.

Shatter

In photoshop we were learning how to shatter text. First I used the text tool to add the text I wanted to use, next I changed the texture to satin, which gave it a metallic look. Afterwards I used the polygonal tool to select triangular areas that I wanted to move, and then used the move tool to drag it away a little bit.After, I used the lasso tool to draw a rough circle around the text, which I then filled with the cloud texture from the filter section. Then I used the feather tool set to 50 to soften the edges. After this I used the radial blur tool to smudge the cloud layer. Then I selected the text layer, and added a 50% fill of grey. I used an adjustment layer - hue and saturation - to change the colour of the cloud layer to red. Finally, to add the black outline I added a new layer, clicked effects, then drop shadow, followed by stroke.

The Final Result