You Are Reading

OUGD504 - Design for Web - Introduction

The internet was created in 1991 by Sir Tim Berners-Lee, a British computer scientist. Whilst working in Switzerland at CERN, the European Organisation for Nuclear Research, they needed a way in which they could share information online; thus leading to the creation of the world wide web. 

- Steve Jobs created the first ever NeXT computer which was the worlds first web server. These are used to store the information for websites and are still used today, although they are much larger and capable of much more.

The first image on the internet was in 1992 and was an image promoting the band 'Les Horribles Cernettes'. This is the image:



After we now knew the origins of the web, we began learning the correct terminology that we would need to be aware of in order to create design for web.

HTTP - Hyper Text Transfer Protocol: The process of transferring code into website.

URL - Uniform Resource Locator

- HTML - Hyper Text Markup Language

- CSS - Cascading Style Sheets: Allow you to 'design' website

- FTP - File Transfer Protocol - For once you've finished

- CMS - Content Management System: Allows you to manage and change the site making the content dynamic, as opposed to 'static' sites


We then looked at the term 'Skeuomorphism' which refers to design that imitates something that it isn't. Examples of this include when reading books online; when the pages turns it imitates the way in which a real book page would turn. Johnny Ive, the designer for Apple Computers, still uses skeuomorphic design, as shown below:

Newsstand shows E - Books on a shelf, something which does not physical exist. 
Below is the IOS 7 Update, where this has now been removed: 



We then moved onto 'responsive' design, or 'reactive' design as it is sometimes referred to. This is where the content responds i.e. it can be adapted to a variety of media using screens of various sizes. We spoke about the way in which the grid system, a characteristic of Massimo Vignelli's work, can be applied to almost every website. 'Responsive grids' is where the grid adapts to the size screen it is viewed on. 

Before designing, there are 3 main considerations that need to be taken into account:

  • What is the purpose?
  • Who is the target audience?
  • What do the target audience need?


We were then given a list of various different types of resources that will aid us in learning about design for web and guide us throughout our brief.



Books:

  • HTML & CSS, Design and Build Websites
  • Design for Non-Profit Organisations - Massimo Vignelli
  • Scratching The Surface - Erik Speakermann

Websites:

  • www.awwwards.com
  • www.piccsy.com/everything-design
  • www.aisleone.com
  • www.fivesimplesteps.com

We then were asked to look at certain websites and to give our initial thoughts and feelings. It generally takes around 2.5 seconds in order for someone to make their mind up about a website, so by not thinking and just giving our honest reactions we could see which sites worked and which didn't.

Ideas By Music: 

Reactions - Innovative, Clever, Appropriate, Insightful, Modern


Apple: 

Reactions - Slick, clean, bright, modern, fun



Leeds College of Art: 

Reactions - Thin, busy, confusing, dated




My Own Bike: 

Reactions - Shiney, Minimalist, Clean, Modern, Grey, Functional



Slavery Footprint: 

Reactions - Engaging, colourful, interactive, confusing



LingsCars: 

Reactions - Busy, colourful, confusing, sickly



Evangel Cathedral: 

Reactions - Epic, Game show, American, dated



Arcade: 

Reactions - Crazy, confusing, scary, bright, dated



BBC: 

Reactions - Busy, white, arrows





TASK

Find examples of websites and note initial ideas and reactions towards them. Think about the three considerations and whether it is successful.

PLEASE SEE MY POST ON MY DESIGN 

CONTEXT POST (CLICK THIS LINK)








Comments for this entry

 

Copyright 2010. All rights reserved.

RSS Feed. This blog is proudly powered by Blogger and uses Modern Clix, a theme by Rodrigo Galindez. Modern Clix blogger template by Introblogger.