Sunday 23 October 2011

Web Design Assignment

Understanding common web coding protocols

The World Wide Web (WWW) is different hypertext pages linked together and can be viewed via a web browser. A Web browser is something which lets one’s computer read the hypertext language (CSS, HTML) so one is able to view the code in it’s desired format (rather than just seeing the code). The browser interprets the coding and displays it as the actual text and images.
There are three main common web coding languages, these being HTML, XHTML and CSS, which means Hypertext Markup Language, Extensive Hypertext Markup Language and Cascading Style Sheets. HTML is the main coding language, used my most websites. HTML and XHTML are very similar, however XHTML is more of a sharpened version of HTML, a lot more care needs to be involved whilst coding something in XHTML because it is less forgiving. CSS is something which can be used alongside HTML and XHTML, it is placed in the ‘head’ section.
To build a basic website you need first to do an ‘html’ tag. Inside that needs to be a ‘head’ tag, then inside that goes the ‘title’ tag which is what comes up in the tab name on the browser. Any CSS codes and Javascript also go in the ‘head’ as well as metadata and the base fonts and base links. Then the ‘head’ tag is closed and the ‘body’ tag is opened, which contains the content of the website, which is seen inside the browser window. This contains everything, images, videos, texts, etc. There are also 6 header tags which are named ‘h1’ though to ‘h6’. 
Tags are opened like <head>, but must be closed, like </head>. Anything between these two tags will be in the head section. Tags must be closed properly to ensure that the codes do not get mixed up, this is called ‘nesting’.
‘What You See Is What You Get’ (WYSIWYG for short) is software which does all the complicated coding for you. There are two types of WYSIWYG software, disc and cloud.  Disc is where the software is on the user’s hard disc instead of on an internet server. This is ‘cloud’ style software, for example ‘Moonfruit’ or ‘Wix’. They let you design your own website online for ‘free’ however they are likely to charge for the more services you require off of them. Basically What You See Is What You Get software lets you edit your website visibly and the software does the coding for you, for example, you drag the image to where you want it, and the software writes the alignment and position code.
To publish a website, one would need to first have some server space, this is basically a place for the website to sit and be stored online instead of being on your computer’s hard drive.  File Transfer Protocol (FTP) is needed in order for the files to be transferred from the server to a viewer’s browser. (FTP is used at the beginning of an address before www, it looks like this ‘ftp://’) Passive FTP is where a website is able to send files but does not expect to receive any from the website user.
Search Engine Optimisation (S.E.O.) and Social Media Optimisation (S.M.O) are the things which allows your website to be found. S.E.O is content that you place in the coding which is read by the search engine ‘spiders’ so people can find your website in a search engine search. Places that the ‘spiders’ search are the meta tags, which are tags you would add to the head of your website, they are words which relate to the your website. Misspellings are also a good thing to add to the meta tags because if the people searching misspell a word, your website will still come up. Only  5 or 6 words should ideally be used  in the meta tags or search engines may disregard your website as a spam site. Other places the ‘spiders’ will look is the page title, which is within the <title> tags, also the <h1> and <h2>.  This is why these areas should have words relating to your website in them, to give it more of a chance of being found.
Social Media Optimisation (S.M.O.) is the use of social media websites to promote your website. Two of the most effective websites to promote on are Facebook and Twitter because they are some of the most used. Promotion works a lot better if it appears that one of your ‘friends’ has reccommended something.

Evaluation.

I am very pleased with the website I created and I think that it definitely serves the purpose that I created it for. I am so happy that I would be proud to publish it and show it to people as my main site. I think that it looks professional and although it is simple it is effective, and it’s simpleness does not pose as a disadvantage in my opinion. I designed a photography website, to act as a portfolio and display my photos, and this is exactly what my website does. Admittedly I could add different things to it, such as being able to click on the photos to view them larger, and also I could have made my ‘contact’ page a bit more interesting and attractive. My links are quite small but they are like that purposely, I do not want anything to distract the website user from the photos.
If I were to do my website again I honestly would not do anything to change it. The way I would attract people back to my website is to update it with new photos every now and then to keep it interesting.

Friday 14 October 2011

ED2 Photo Mini Assignment Two

Illustrative Photography

Album Covers

Sam's Town - The Killers by Anton Corbjin

Strangeways Here We Come - The Smiths by Jo Slee

Flamingo - Brandon Flowers by Williams + Hirakawa

Album artwork is something which is very important in the music industry. It is not as important as it used to be with the new downloads and even CDs. When Vinyls were the most popular way of buying and listening to music, artwork was extremely important because it was the literal face of the album. CDs are smaller but this is still partly the case, when people are shopping for music they look at the album covers. In a way they express what sort of music the album is, for example if the music is heavy rock, there are likely to be a lot of blacks and big bold writing. If it is pop music for a girl group it is likely that the cover will feature the artists, since a lot of girl groups use their image to sell their music. 

Book Covers

Twilight - Photograph by Rodger Hagadone

The Space Between Us  - Photo by Chad Ress

Touching Darkness (Midnighters) - Photo by Jake Garn

Book covers are very important. When someone first picks up a book, there's no way they can know what that book is about without further reading. The cover has to pull them in, at least enough for them to then read the back of the book and then hopefully buy it. If the cover was boring then people are likely to just skip past it, assuming that the content of the book is as dull as the cover. 'Don't judge a book by it's cover' may be a saying, but most people do. That's why it needs to grab people's attention. 
Book covers also have to illustrate to the reader what the book is about, although in some cases, books want images which make people curious about what the book is about and compel them to read more. An example of this could be the Twilight book cover. Once you know what the book is about you can see the relevance it has to the cover artwork. But from the point of view of someone who does not know, it looks interesting, and it makes them wonder what that book would be about. 







Album Artwork - Williams & Hirakawa See their website here.

Williams and Hirakawa are two photographers who work togetheras a team to produce the shots they are commissioned to do, they are also husband and wife. Both of them grew up in New York but currently reside in LA. They do quite a lot of different types of photography such as fashion, celebrity, portraits and music. They do not design the actual album covers but they do take the photographs for them, for example this;


other examples of their work include
filed under 'people'.

filed under 'accessories'.

filed under 'ensembles'.

Going back to studying this image;

The way it has been done is very clever. For a start, if you examine the reflection in the window you can see the background instead of the reflection of the camera and photographers. The backdrop of the photo is clearly the interior of a hotel room and appears to be quite dated, the way all the colours match gives it that sort of effect. Although the colours are all very similar they still all stand out beautifully. The outside seen through the window is actually Las Vegas, however it is purposely blurry and out of focus because although the photographers want it to be included in the image, it is not the main focus. 
Space has been left above the curtains which probably would not usually be left there and again at the bottom, ready to add text. 
Brandon is stood on the right, it is clear that although he is in the photo he is not the main focus. He is dressed in black which makes him stand out and contrast from the other objects in the room, and is stood just off the right vertical third, which almost places him as another part of the hotel interior rather than the main subject in the photo.

Book Cover - Wendi Schneider Website here



Wendi Schneider was raised in Memphis. She studied art and art history at college in Missouri then transferred to Newcomb college in New Orleans and studied  drawing and painting. She began taking photos as reference for her paintings and enjoyed it, ans so began combining the two, like this.

As well as doing book covers, she also does portraits, annual reports, editorial and advertising assignments. Her work has been exhibited all over the world.


This photograph for Linda Francis Lee's 'Blue Waltz' is close up and very delicate. Book covers have to try and sum up what the book is about and stand out in order to make the reader pick it rather than the hundreds of other books which sit on the shelf in it's opposition. From this one you can instantly see that the book is aimed at females, judging by the colour and daintiness of it, as well as the writing and objects on the front. The old fashioned items and styling makes the reader think that it may be set a while ago.



Final Design



This is my final design. All my own ideas except the CD (which is a direct copy from the original CD.)
I am reasonably happy with it, I think that if I had more time and more knowledge of how to work Photoshop I'd have been able to do a much better job.

The designing of the CD album cover went okay in my opinion, I had a strong idea of what I wanted to do to begin with which helped a lot. I chose my favourite album, one I know a lot about, so this gave me a good amount of knowledge to base an idea on. 'Sam's Town' is the album cover I decided to re design. 'Sam's Town' is actually referring to Las Vegas, (The Sam mentioned being Sam Boyd, one of the men who started the casinos off in Vegas). The Killers also come from Las Vegas so I decided that it would be a good idea to do an album cover including it.
I started off by collecting pictures of the city such as these


I chose to get images from the Neon Boneyard because some of the old signs are spectacular, and they're really iconic to Las Vegas. They're also very striking and eye catching which would make a good image for a CD cover.

I decided that I wanted to do things in black and white, as you can see above the neon boneyard pictures are very multi coloured and I didn't want such random colours because I don't think it would match the style of the music.

Naturally if I was going to have Vegas signs for my album, the Welcome to Fabulous Las Vegas sign had to be on the front. Using photoshop I took the 'Las Vegas' off and replaced it with 'The Killers' to make the image relevant. Thinking back, I could also have removed 'Nevada' and put the name of the album 'Sam's Town' there instead, and even changed them so they matched the font of the original lettering on the sign, this would be something to think about if I ever did the project again.
I am not particularly happy with where I placed the title of the album. I like the font, but it does not stand out enough. I had to make the whole section underneath the sign darker in order for the lettering to stand out, and also had to put a glow on the text so it stood out more. But even now it does not have the impact I would have initially hoped. To rectify this I could change the font to a thicker and more solid font, however I believe that this would not blend so well with the album cover as it is now.

My plan for the rear and inside images was to have a large striking image and let that do the talking, with little text and other things to distract the eye from the main focus. I looked a a few images and tried to layer images  over the top of one another like this
but I decided that there was too much going on and so decided not to use the layered image.
This is the final rear of the CD cover. I cropped it differently from the last image and added the tracklisting, I wanted a small, simple font which could be easily read and does not distract too much from the image. I tilted the text slightly just to make it look a little less uniform, I wanted to avoid the very formally laid out style.

The most important information to go on the side of a case is the artist and album name, so that is what I put there. The font which 'The Killers' is in is actually their logo so it's recognisable, and the 'Sam's Town' font matches that of the one on the front, which means it matches well. I have just used contrasting black and light grey for the colours so everything stands out.

The inside image cover is just an image I cropped and made black and white, it is striking which is all I wanted, I had a look at a lot of CDs and their inside covers don't seem to have any writing on either. It is relative to the design (running along with the Las Vegas and Neon Boneyard theme).

The image beneath the CD is a close up of a bulb on an old neon sign which I have cropped and made black and white, unfortunately it is covered by the CD and so you cannot see the detail of it (and I do not have a copy of it, may update this when I am able to access a computer when I am next at college).

Overall I am happy with my design, although again it would have been nice to have had more time, I also could have put more effort into my work just to tweak it and clear up the minor mistakes I have made and points which I have mentioned about changing in this evaluation.


Extra Work

Here are some variations of the rear cover of my CD design.


Here I have tried out a more elaborate font and used centre justified text. It takes up a lot of the space and detracts from the image slightly. The size of the font may also cause problems when adding additional details and bar codes, etc.


This is similar to above except I have changed it to a simpler, easier to read font and made it smaller so there is more room for additional details.


Here I have changed the layout of the writing so it is a block of text. I have used a block font, similar to the font used on Coldplay's 'Mylo Xyloto' CD cover. I don't feel it conforms very well with the style of this particular Killers album though.


I have reverted to the elaborate font but changed the layout, I have attempted to place the writing so it does not cover much of the interesting points on the photo. I just feel that it looks cramped and unclear.

~

To get a good idea of what the text on the rear of my CD cover design should be, I looked at some other existing designs to study the style of the text and the way it has been laid out. I chose artists similar to The Killers to get the most accurate representation of what the text should look like.

(Snow Patrol's 'When It's All Over We Still Have To Clear Up)
The text is bold and clear, and laid out like a normal left justified list, complete with track numbers. The use of all lower case letters makes it all uniform and less official. The text stands out because the background it's on is very simple. This design is similar to mine regarding the fact that the text has been placed over a phorograph which covers the whole back of the CD.

(The Strokes' 'Angles')
 Again, the prominent thing about this is the boldness of the text. The designers have gone for a more conceptial design with this, not using a photograph but instead using lines to go with the 'Angles' album title. The text is all in capitals and in contrasting colours to the background that each song title falls upon, again making them stand out well. An unusual layout though, the text is spread out across the cover and is horizontal. However this correponds again with the album title, 'Angles'.


(Muse's 'Black Holes and Revelations')
This is my favourite, and the most similar CD back design to what I would like my own to look like. The design is very largely photo based, the text is prominent but does not detract from the image. Again the text is block capitals, a very clear and simple font. This is needed due to the busy background it sits upon, however is aided with the colours which contrast against each other, the white standing out from the orange/brown rocks behind. The text is justified to the left and resides in the bottom left hand corner, which is different to what I've seen in the previous two covers, although I prefer it because it promotes the viewer to look at the picture, which is far more pleasing to the eye.

(U2's 'Artificial Horizon')
This is quite a simple design with block colours, which I'm not too keen on. It illustrates the clear and contrasting text styles that I have mentioned above but does not really catch the eye at all in terms of design. This aside, the text is clear and easy to read. It is left justified but in the middle of the cover, which looks a little unbalanced. I don't feel that it is as pleasing to look at as the above designs.


I took a closer look at my own copy of Neon Trees' 'Habits' to see how the front and inside designs correspond with the rear design.

The title text is placed on a black line which runs directly through the middle of the image. It has two different colours, one for the title of the album and one for the name of the band. The album title is in white and is therefore more prominent.

The black line them runs on in the inside, appearing like a widescreen film on a normal television. Whether this was intentional or not I do not know, hoewever I feel it exentuates the images somewhat.


The black line theme is continues onto the back of the CD cover, with the track listing. It's a different layout to what I've looked at previously, however I feel it really works. It helps the text stand out but also somehow does not detract from the picture. The text itself is bold, contrasting and block capitals.

From my research on text on existing CD covers, I have concluded that the important elements are; making text which stands out, and also easily readable, so a bold, simple font. Below I have tried out these techniques on images which fit with the theme of my CD cover design.


Here I have done the back of my CD case design in the style of Neon Trees' 'Habits'. I think it looks good but the top half of the image very boring, I would need to choose an image with more going on in the top half  for this to work properly.


This was my first attempt at doing my back cover CD design in the style of Muse's 'Black Holes and Revelations' design, having the text quite small and in a corner to stop it detracting from the image. However some of the track names were not readable.


This is my second attempt; I made the text smaller so it fitted in the plain bit of the image. This makes all the track names stand out and does not cover up any of the main image.

~

I also wasn't happy with the album cover, so I re-created that. The Killers have somewhat of a formula for their album covers; their logo is always in white, in the middle of the cover, with the album title written below.




So I decided to follow this style.


I have chosen this image to fit with the theme of the rest of my design, a road through the Mojave Desert, leading to Las Vegas, or 'Sam's Town'. I have chosen a simple font so it stands out and does not distract the eye from the striking image.



On this one I have changed the font in order to give a little nod to Sam's Town Hotel & Gambling Hall in Las Vegas (below). It looks okay but I feel it is a bit to elaborate and clashes slightly with the logo.


~


I finally settled on this variation because it is clear and simple, and also conforms with the font that I've used on the rear of the cover.


This is my final front and back cover design. The rest I would keep the same. I am a lot more pleased with these images because I have studied album cover text a lot more closely and applied what I have learned to creating my own design, and I feel it has benefited my work greatly. I also prefer the images as both are more interesting and relate to the theme of the album and album name a lot more aptly.