Designing For The Internet

Monday

Week 16

Evaluation
Overall I feel the outcome of my website has worked out well, I believe this site shows what I intended it to, and relates back to McLuhans ideas based around advertising. I feel my website appeal's to it target audience through the advertisements I decided to include as well as the use of muti- media and social networking sites which the younger generation use so often.

If I was to create a similar site again I would ensure from the start to create the general central layout of my page, although it was not a major problem, it just made the website appear less proffesional.
Generally I feel I have learnt a lot from this module and in creating this website, including how to physically create a webpage as well as finding out the general rules for what designs, colour combinations, content and layouts are suitable within web design and sites themselves.

From the final product and after hours of research the outcome shows how advertising doesn't merly exists to sell the product or idea. It as if advertsing has became its own form of communication, but ultimatly it is the combination of the advert and the brand that create something successful. It's McLuhan idea which sums up this sites perpose, 'the medium is not more importent than the message, then medium is the message' and therefore 'all advertising advertises advertising.'

http://www.all-advertising-advertises-advertising.com/

Week 15

After I had presented my website I recieved some feedback which they felt would help improve my website. Fortunatly most of the feedback was positive and there were only a few minor additions that were recomended.

First they mentioned I should change the colour of the audio player from white to light grey to blend in with the background.

Then they recommended I move the titles on some of the pages up higher so they are in the header and inline with the logo and music player.
And my lecturer said to ensure that somewhere I include all the sources I have used.

Week 14

With my website nearly complete all that was left to do was to upload the site to a server.When I tried to upload my website using the University server I found I had a problem as my site was over the 10mb the server can allow.
This was because of the size of the survey, therefore I had to upload my site on a private server by perchasing a domain.
I felt it was right to name my website all advertising advertises advertising, but together it was unreadable so I seperated each word with a dash, and decided upon all-advertising-advertises-advertising.com which fortunatly was available.

The site I used is called FreeZone and after giving me a username and password I was able to upload my files using Filezilla.

This week I have my presentation of the site, and I plan to run through the basic idea of each of my pages, presenting some of the videos and maybe the quizz to highlight how my site is interactive, and hopefully I will recieve some feedback.

Week 13

For my final page I have produced a contact page so that users of the site can contact me in numerous ways. It seems everybody today especially in my target age range, uses social networking sites, therefore I felt it was relevent to give users the option to contact me through them.
Furthermore I have included a link to my Blog and Youtube account which will have a more frequent update than the site, and also users can see what advertisement I have favourited and viewed in my account. Then at the bottom I have also added my email address so users can contact me if they would like any further information.

I felt it was importent to keep this page visual aswell so I included logos of the websites, which act as links to my pages.

Comment box

At this point I thought of another way in which users could contact me through a comment box added on each of the pages, so users could contact me quickly as well as discussing subject between one an other. I manged to find online a widget which allowed users to comment by simpley writing there name and no other details.

http://www.facebook.com/racheljp21

http://www.youtube.com/user/racheljp21

http://twitter.com/#!/racheljp21

Week 12

The 5th page of my website is called Your Guess, and as I mentioned previously I want to make this website interactive, to make it more interesting for the users, as in a way viewers of advertsing near to think and interact in order to realise the product.

Therefore I decided to create a mutiple choice questionairre which will involve the viewers seeing a series of images and videos and then selecting what they thought it was advertising.

The first problem was trying to find how I could create this multiple choice servey, site such as Surveymonkey and a Google account allows you to create multiple choice questionairres but images and video can not be included, without paying a high price.
Fortunatly after a long time researching I was able to find this program that could be downloaded to my desktop called iSpring Quizzmaker, which allows me to create a multi- media quiz for free.

To find adverts to use in my questionairre, I typed in sentences like strange advertisements, weird adverts or confusing advertisements. I managed to gather 8 images and two videos, and then made my survey using the program, every question envolved the user simple identifiying what is being advertised out of the 4 mutiple choice answers.

Here you can see how the user simply clicks on the image/ video in the right hand corner to make it appear larger, then they simpley select which answer they think it is and click the right arrow to move on to the next question. At the end it will total up your scores and give you a percentage, and also it allows you to go back over your answers to see where you went wrong.

To test if my chosen advertisements were effective, I decided to ask a few friends to complete the questionairre and fortunatly the most anybody got right was 4 out of 10, which was pefect for my idea of how the adverts simpley advertise adverts.

Week 11

I felt it would be more constructive to create my website in order it is presented to the user. With that in mind the next page I decided to concentrate on is the advertisement page, which will include a range of advertisement examples from a variety of different media forms. I chose to have the page open with a video advert that UK users will be really aware off. The Compare the Market.com tv adverts have become so succesful that the merkat characters introduced have there own spin off website as well as a book.

Additionally I included 4 other image based adverts all of which seem to care more about the advertising than the product or idea they are selling.
Two of the examples included are physical advertisements, ones which the viewers can interact with, which is what I want user of my site to do.

Firstly I have done this by including the Doritos interactive video that was introduced last year, as part of there late night campaign. It allows viewers to feel like they are part of the music video, by allowing them to control exactly which direction they want to be looking. As shown below -

The statistics I gathered in relation to this Doritos campaign shows that they was a more positive buzz about the concept of these videos and the videos themselves instead of a buzz about the Doritos products they are advertising. This is evidence of how advertising can overshadow its product, to an extent.

Week 10

At this point I am ready to complete my 3rd page, the campaigns page. I already had a set idea to be including the United Colours Of Benetton campaigns and the Diesels Be Stupid, as both are well known and also represent the idea that McLuhan had. After some research on successful campaigns I came accross a new campaign by Wrangler which is called 'We Are Animals.'

As there is a lot to say and show for each of these campaigns I felt it was best to lead the users to seperate pages, so they can decide what the specifically want to look at. I decided to keep this page simple keeping my general layout, and just including 3 example of each campaigns with the brand logo beside it, and all the images when clicked lead you to the appropriate page.

United Colours Of Benetton

The UCOB have been known for there contraversial advertsing particularly during the 1990's, I have included some of the images that caused problems with the public additionally I have explained how these images and campaigns in general relate to what McLuhan was trying to say.

Here are a few key sites I used -

http://www.benetton.com/portal/web/guest/home

http://press.benettongroup.com/ben_en/about/campaigns/list/

http://www.facebook.com/Benetton?v=app_10442206389

Wrangler - 'We Are Animals'

Recently this campaign has created a lot of talk particulary because of Wrangler attemp to push the boundaries within advertising, by using real life stuntmen jumping through windows and running whilst on fire, its almost as if the clothes are not the focus?

At the top of this page it will have the 3 campaigns brands so users can get to the other campaigns through one click rather than 2. Underneath that I decided to continue with my multi- media theme by having a video introduce what the campaign is all about.

Here are a few of the main sites I gathered my information from -

http://www.wrangler-europe.com/

http://www.youtube.com/user/weareanimalswrangler

Diesel - Be Stupid

Simarillary on this page I also began with a video explaining the idea of the campaign as well as a combination of images and text to explain it's relationship to McLuhans ideas.

I feel like Diesel and Wrangler in particular are brands aimed at the younger generation, similar to my target group of 15 - 35 year olds, who are media savvy.

Some of the sites which I looked at are -

http://www.diesel.com/

http://storage.diesel.com/wwwdieselcom/pdf/Be_Stupid_Catalogue.pdf

http://www.youtube.com/user/DieselPlanet

I tried to ensure that the advertisements were presented in large so that users can see the image properly as well as I used a basic one collum arangment to keep the pages simple but effective

Week 9

During this week I have managed to complete the Home and McLuhan pages. I decided to keep the home page simplistic, and only have a short description of the site and what is it about.
Home page

In the header I included the quote again incase viewers missed it on the intro page. Then underneath in a slightly larger font I explained the them for this site. Also in the corner the Renult Clio advert song plays until the user pushed pause, that way they are aware of the music player.

To get back to this page viewers simply click on the logo in the corner and it will take you to the intro page, I chose to do this as most viewers of my site will be internet savvy and aware of this normal process.

McLuhan

For the second page I wanted to concentrate on McLuhan and his idea that 'all advertising advertises advertising' On this page the user is introduced to a variety of media including a video, which is a key factor of my site, user interaction. Also for this page I decided to include a slight bit of colour on the quotes to make the page more appealing.

One thing that I realised is that there are not that many websites assosiated with McLuhan and 'the medium is the message' or advertising, making a space in the market for a website like mine.

Week 8

As i mentioned before I decided to change the general layout of my website by having the page links on the left hand side. I have chosen to keep the pages simple like most of the websites ive looked at which include this theme of advertising. Therefore the logo is in the top left hand corner and music player in the right hand corner.
For the page links I wanted to have a different font to Verdana to make the tabs stand out, like the logo. Using the program Fireworks I created each of the tabs using the slicing tool after creating a table with 1 row and 5 colums. I then exported each of the files seperatly and re-opened them in Dreamweaver.

For the tabs I have used a slightly darker grey with white font and a dashed border, which I felt looked effective to break up the grey colours. The font is called Lithos Pro, I chose it because of its wide characters and simple style with a slight curve for the letters.

Here is another general site I found on advertising, which includes the latest campaigns, news and even statistics. - http://www.campaignlive.co.uk/

Additionally I completed some research for the McLuhan page by looking on a few sites including -

From these sites I found out general information about Marshal McLuhan and his ideas based around 'the medium is the message.'

Week 7

After deciding to put the rollover image on an index page, I started by collecting 37 logos accross all brands all over the world.
There was a slight difficulty to find square shaped logos, as well astrying to find logo which are colourful and ideally not black and white.
Fortunatly after hours of research I managed to find 37 and the next step was to edit the images using Photoshop to ensure they're all the same size and put them in a suitable order in terms of colour.

I made each of the logos and letters 43px by 43px

Using Fireworks I created a table with 4 boxes by 10 and then, used the create a rollover option to create this rollover. First I added all the logos in the boxes and then added the 2nd state (when the user rolls over the image) which is the letters. Then I was able to transfer this whole image to Dreamweaver.

Firstly I had to create my Cascating Style Sheet (CSS) so that all my pages have the same properties. I entered my already decided background colour and my font style and also selected font size 14px; and margin 0px; then I attached this CSS to my first index page.

At this point I also decided to put the sites logo above the quote and also the name Marshall McLuhan underneath, to make it clear it is a quote.

This screen shot shows how the rollover works as the curser is over the logo revealing the letter 'G'

Sound

As my site is all about advertisments I felt it was right to include sound to my my site through music used in TV adverts. Most of the ones I have chosen are recognisable because of the advert itself, which ties in with my theme of adverts simple advertising advertising.

At first I intended to have just one music player on every page that the user could then select which song to listen to but then i thought to make each page unique by having a different song on each page

The 5 songs I narrowed it down to was -

Phil Collins - In The Air Tonight (Cadburys) - McLuhan page
Sugar Hill Gang - Rapper's Delight (Evian) - Your Guess page
Jose Gonzalez - Heartbeat (Sony Bravia) - Campaigns page
Joss Stone - Love (Channel) - Advertisements page
Claire Maguire - Aint Nobody Breakage Remix (Renult Clio) - Home page

Using Flash I created 5 swf files for each of the pages of my website, I created the player so that the user has to physically push the play button to start the song and pause to stop it. Apart from with the home page I decided to have the music start as soon as the page loads, that way the user is then aware of the music player in the right hand corner.

Sunday

Week 6

From looking at similar websites and blogs which are about advertising, I decided on a monochrome colour theme as well, with a the background colour being light grey #999D98, as shown below -

I tried a variety of different fonts to use for my site but a few of them were just not right. I was looking for fonts that are simple, readable in all sizes, fairly wide in spacing and characters, and overall appropriate for an online website, here are a few I considered -

Myriad Pro - was good but the lettering was too squished or compact
Ariel - is another simple font but I didn't want to use it because of it's typical use

The font I decided to use is Verdana as it is a simple sans-serif font and used a lot in the media industry. It was created for Microsoft and designed to be read in small sizes for computer screens making it ideal for my website.

Verdana

The font colour I decided on was a dark grey/ black #0D0D0D as shown below -

Layout

My initial idea for the layout of my site was to include the 5 tabs/ links to other pages along the top of the page, as that is how many sites I looked at had there homepage.

Although after some disscusions and feedback from my lecturer I decided having the page links on the left hand side as that is where viewers look first and also it would be suitable for users with all screen sizes.

Additionally I chose to include the quote and logo rollover on an intro page instead of the homepage, as a way for the site users to instantly become more interactive with the site.

Logo

For my logo I wanted to keep with the theme of keeping things simple, for some reason the first thing that caught my attention was that each word from the sites name begins with an 'A'. Therefore I based my logo idea on 4 'A's' positioned in a circle with arrows pointing in a clockwise direction.

This idea of going around in a circle mirrors the quote 'all advertising advertises advertising', as the advertising buisness is constantly going round and round.

I created the logo using In Design, I wanted to keep to the same colour scheme so Ive kept the same background colour and black font. I then decided to use a different font for the logo to make it stand out, a few that I considered because of there letter 'A' characters were-

Kalinga
Gautami
Mangal
Levenim MT

But the font I decided upon was Candara becuase I felt the shape of the 'A' character was unique, with a slight curve at the base of the letter. The image size is 100px by 100px so the logo looks effective in the top left hand corner.

Saturday

Week 5

At this point I decided to look at other advertisement sites, so I can get a general idea for what to include in my website in terms of layout, design and content.

One site that I found was http://adsoftheworld.com/

From this site I can see that a simple layout and design works best, so it doesn't distract the viewer from the advertisements being shown. The use of grey seems to work well with all the other colours present, and the basic font is simple but effective.

Another site I looked at was http://www.adverbox.com/

This site also had a simple layout and design, and also used a monchrome colour pallette. I also liked how these sites included both images and video advertisements and are layed out in a simplist way.

Proposal -

Concept

The aim of this project was to design a small- scale website, which in some way explores McLuhan’s ideas that “the medium is the message” or “the world is a global village.” To begin to come up with an idea for my website, I started by looking into Marshall McLuhan’s ideas surrounding the changes in society in relation to the media.

Following this thorough research on McLuhan’s dictums, I found on his official site a page titled ‘McLuhanisms,’ which summed up through quotes the majority of his ideas. Whilst looking through these quotes, I thought about how I could incorporate these statements into a website, and through the process of elimination I decided to form a website based around the quote “All advertising advertises advertising.”

When I read this quote the first thing that came to mind was to have my website include a number of advertisements and campaigns that don’t appear to be promoting the product the intend to, or show any relation to the brand there advertising. Instantly I thought of ‘The United Colours of Benetton’ campaigns, as I have previously been interested in their advertisements, so it motivated me to complete more research on similar advertisements.

Another campaign that highlights McLuhan’s ideas is Diesel’s ‘Be Stupid’ campaigns, which reaches out directly to their target audience of the younger generation, by basically telling them to do what they want and ‘be stupid,’ whilst informing them to buy their product. This campaign in particular reaches out to the target audience I am to have for my small-scale website. The target audience will be male and females aged between 15-35 from a western society, who would be familiar with these or similar types of advertisements. Firstly this younger generation spends a considerable amount of time interacting with different media forms. Therefore I intend to include on my website images, videos, music as well as interactive pages. Primarily I aim to keep this website more of a visual experience as that is how advertisers mainly reach out to their audiences (viewers), also the target audience here will most likely be interested in visual media, graphics or art in general.

In relation to McLuhan’s dictums this website revolves around the idea that “the medium is the message.” This describes how often the medium influences how the message is perceived. This is evident in so many advertisements and campaigns of today as over time advertisers have needed to push the boundaries in order to promote their products. Often, it seems that the way in which the product is advertised becomes more ‘powerful’ than the product itself, which is the idea I am to highlight through this website.

Project timeline

Pre-production

· Week 5 (28^th Feb) -This week the proposal will be completed, which includes a thorough description of my ideas and intentions.

· Week 6 (7^th March)- I aim to have decided on my colour themes using the Kuler website, as well as decided on which fonts to use and also the layout of the website with a rough design of the home page/ intro page completed, including selecting which logos to include.

Production

· Week 7 (14^th March) - By this week I intend to have completed the homepage (including selected the sounds a graphics) created using Dreamweaver or Flash.

· Week 8 & 9 -During these weeks I aim to have collected all the research needed and decide upon the order and exact layout of the 5 pages. I will then at this time work on the 1^st and second page, which may involve images, videos and external links and will probably be based around a well-known example.

· Week 10 (4^th April) - For this week my objective is to complete the third page which will more likely include a range of advertisement that relate to McLuhan’s idea. These will be represented in a number of forms including images and video, therefore I will incorporate the use of appropriate programs dealing with embedding and HTML for example.

· Week 11 (11^th April) - At this point I will continue to complete the 4^th page, which at the moment involves the viewers to become interactive on the site. I will have to use an appropriate program to create a series of around 5 multiple choice questions. The question for all will be along the lines of “what is being advertised?” and the viewers will have a number of answers to choose from.

· Week 12 (18^th April) - By this point I plan to complete the 5^th and final page, which includes contact details and therefore will include a number of links to other websites. At this point I will also ensure on all pages that I have included appropriate and correct links to external sites.

Post-Production

· Week 13 (25^th April) - For this final week before my hand in date my intentions is to ensure that everything is working correctly in terms of links, videos, sounds etc. I aim to make sure everything including fonts, layout and structure is easy to follow but still appeals to the computer savvy target audience that the site is aimed at.

· Week 14 (2^nd May) – At this time the project will be completed and ready to be presented and to go live on the web. I intend to have a basic plan of how I will present the website and hopefully be prepared enough to respond to any questions.

Product description

Home/ Intro page –

For the home page of this website I aim to keep it visual (though basic) as that primarily is how advertisers reach out to their audiences. For the main part of the home page or intro page, I plan to include a number of small boxes which will show advertising logos i.e. Coca Cola etc. Then to make it more interesting for the viewer and to get them involved, I have decided to underneath each image include a letter, which would then spell out McLuhan’s quote “All Advertising Advertises Advertising.” Therefore when the viewer scans the mouse across each icon from left to right it will enable them to read the phrase. Also underneath I could include a paragraph explaining my intentions for this site. Additionally this page will include the links to 5 other pages.

Page 1 (Titled ‘McLuhan’) –

For first page I intend to explain Marshall McLuhan’s ideas around advertising and how he feels generally that ‘the medium is the message.’

Page 2 (‘Benetton’) –

For this page I plan to concentrate on a specific campaign or advertisement that is recognisable, more likely the United Colours of Benetton campaigns. As they represent the idea of how the images/ advertisements have created the recognisability of the brand, and not because of the clothes of products themselves that made the brand Benetton become better known. This page will probably include images and descriptions in relation to McLuhan’s ideas.

Page 3 (‘Examples’) –

Here I most probably will have links to a few pages that will have other examples of advertisements that follow this theme. It will most likely include about 3 examples one of which will be Diesels ‘Be Stupid’ campaign, in the form of an official video clip involving a number of ‘Be Stupid’ statements.

Page 4 (Titled ‘?’ to intrigue the viewer) –

In regards to the forth page I decided to get the audience/ viewers of the site to be interactive by having them try to establish what the selected advertisement is trying to promote. The reason for this is, generally advertisements today involve the public to be interactive to an extent and to think and work out its meaning, so therefore i tried to incorporate this idea of the viewer interaction into my website.

Page 5 (‘Contact’) –

For this final page I will include ways in which users of the site can contact me, through links to sites such as Twitter and Facebook as well as my email address.

Flowchart

Wireframe

This is a rough guide of the layout of my website -

Week 4

After being shown briefly how to make hotspots and rollovers, I had the idea for the homepage to include a collection of 37 brand logos in small boxes, and when the viewer rolls over each logo it reveals the words 'All Advertising Advertises Advertising'.
Here is a rough idea of what it will look like -

Friday

Week 3

After collecting these quotes I decided to concentrate my site around McLuhan idea of -

"All advertising advertises advertising"

What instantly came to mind when reading this statement, was as I mentioned before, to have the website include examples of advertisements & campaigns that push the boundaries and dont nessisarily appear to be associated with the brands or ideas.

Following this here are a few example that came to mind first:

United Colours of Benetton campaigns - I have previously researched these campaigns, and many people are aware of this brand simply because of there contraversial advertisements of the 90's.

http://www.benetton.com/portal/home

Diesel's Be Stupid campaign - I was familiar with this recent Diesel campaign as a lot has talk has gone around about how unique and successful these advertisments are. This campaign includes primarily a series of quotes with the slogan 'Be Stupid' and a image senario to match the quote.

http://www.diesel.com/be-stupid/

Week 2

After my first attempt for an idea for my website was unsuccessful, I decided to simply look into McLuhan and his idea's and hope a theme for my site would evolve from my research on him.

From my research I found, Marshall McLuhan is known for his studies based around media theory and composed the expressions "the medium is the message" and "the global village." He regarded that basic visual culture; printed books, film photography etc, were to be replaced by electronic media and the institutions were fated to disappear, 30 years before even the world wide web was introduced.

Here are a few of the sites i visited:

http://marshallmcluhan.com/

http://archives.cbc.ca/arts_entertainment/media/topics/342/

http://individual.utoronto.ca/markfederman/article_mediumisthemessage.htm

Here are a few quotes of Mcluhans, I aim to base my website around one of these ideas-

"People dont actually read newspapers. They step into them every morning like a hot bath"

(For this idea I would base my website around Newspaper Headlines that mislead readers or tell a different story to what people initially think)

"The future of the book is the blurb"
(Here my site would include examples of how people judge a book from its cover, and explain how books are becoming a thing of the past)

"All advertising advertises advertising"

(For this website idea I would include a range of campaigns & advertisements where the adverts dont necessarily loook like what there advertising)

"When a thing is current, it creates currency"
(This site would revolve around all the latest trends which are doing well financially)

From Looking at these sites I realised that I was more interested in his Ideas based around 'The Medium Is The Message.' This is what Mcluhan says about it -

Thursday

Week 1

After being told what we are expected to create for this module, I began by looking at examples of good and bad sites. Were were shown a few examples and asked to look at some ourselves, here are a few websites i found that highlight some mistakes in web design -

http://www.datadial.net/blog/index.php/2009/06/09/website-fail-30-web-designs-that-will-hurt-your-eyes/

http://www.webpagesthatsuck.com/worst-websites-of-2010-contenders.html

http://www.un.org/events/workshop/dpi-unitar/2003/dreamweaver/bad-design.htm

To some up here are some of the main points I have gathered about what not to do when designing a website:

Avoid a high amount of bright or neon colours
Try not to include animated gifs
Dont use lots of different fonts
Dont have too many options on the navigation key
Leave some blank space!
Dont put the music controller at the bottom
Keep to a colour scheme
Have a similar layout/ structure for the whole site
Avoid using serifs fonts

Additionally to start thinking of what theme I can base my own site around, I decided to look up what sites people would want to see. Therefore I typed in statements such as "I wish there was a website" to see what sites the public wish were available. Here are a few examples of what people said:

"I wish there was a website where I could type in a few personal details (age, location and so forth) and my budget, and then it would just give me a huge list of really cool things I could do."
"can predict my future and turn back time to the past so i can change my mistakes"
"I wish there is a website where you could operate and do surgeries virtually"

Most of the answers people gave unfortunatly were either to far fetch and cost to much money and time to create or were simply impossible to do and unrealistic.

So my first method to come up with an idea for my site was unsuccessful.