Wednesday, 24 October 2012

Design for Web// Workshop ONE


Simon firstly did a quick exercise to get out brains in action. He had a selection of websites lined up and within the first few seconds of viewing it, we had to shout out words that most suited that website. 

Olly Moss - ollymoss
  • 'Black'
  • 'Dull'
  • 'I like it'
  • 'Empty' 
  • 'Boring'
Mailika Favre - malikafavre
  • 'lipstick'
  • 'Hectic' 
  • 'Nipple'
  • 'Busy'
  • 'Colourful' 
360 Langstrasse Zurich - 360langstrasse
  • 'German' 
  • 'Sausage...?'
  • 'Google Maps' 
  • 'Photo'
  • 'Full on'
Mercertavern - mercertavern
  • 'Hipster'
  • 'Clean'
  • 'Fresh'
  • 'Black & White'
  • 'Boxes' 
Noble Design - nobledesign
  • 'Vector'
  • 'Girly'
  • 'Sharp'
  • 'Clean'
Caava Design - caavadesign
  • 'Cd'
  • 'Photoshop'
  • 'Hipster'
  • 'Bold'
  • 'Photo'
  • 'Circle'
When on Olly Moss's website, once clicking on one of the links to the website completely changed. Simon says that the website design should be simple, its the content that should really make the websiteOne of the corrent trends in webdesign is having a full bleed photo image as the background, not sure if this is a good trend at the moment. We then went on to show websites as a group, a volunteer would go to the front and type in a website we liked and our job was to shout out words that popped into our head. To be able to create these websites, we have to ask ourselves 3 QUESTIONS :
  • What is the purpose of this website?
  • Who is the target audience?
  • What do the target audience need?
How can we go about getting the answers to these? 
  • SURVEYS are always the best way to get TARGET AUDIENCE feedback. Very similar to people on the streets wanting you to take part in a Focus Group. This has to be the most effective way of getting raw feedback from an audeince or indeed you target audience. 
  • Look at similar websites that have the same target audience. This is probably the best way to answer these 'questions'
The three main things in a website are : 
  • Images 
  • Vectors 
  • Navigation
The important thing is the respect the rules, make sure your website shows the audience what its trying to sell, make sure you show them the purpose . Make it conventional, not unconventional. 

There are four main limitations to websites :
  • Fonts (Web fonts or Standard fonts) - YOU HAVE TO PAY to use fonts such as Helvetica if you intend to make money from your website. 99% of the time, a font you have on your website won't appear on the users browser because that font isn't installed on their computer. UN-STANDARD FONTS mean you can avoid this problem, this just follows the family of serifs of sans serifs. WEBKIT- You have to pay a license though if you install a font on to your website
  • Colour- RGB. Next session we will start making a website, and its all to do with code, even the colour is a code. There is a very limited range of colours on the website. 
  • Size - Screens are all different but you have standard web sized that you have to follow. Back way back when computer pages were the same size so you didn't really have to worry about how your website looked on other computers. Today however, we have to I-phone, I-pad etc which have a massive difference in screen size, the new mission is to create a website that can work on a variation of screens.
  • PPI (Resolution) -72% PPI is correct, but not correct, but is correct. Where has this number come from? All apple make screen had 72 Pixels per inich. Today, screens have 92% PER INCH. Retina display is high HD. So what do we do to make sure our website works? You can design different websites to suit different screens. MOBY : Mobile website (website on your mobile...)
The Language
  • HTML ( HYPER TEXT MARKUP LANGUAGE
  • URL (UNIFORM RESOURCE LOCATOR)
  • CSS (CASCADING STYLE SHEETS- an add on to HTML)
  • FTP (FILE TRANSFER PROTOCOL)
  • CMS (CONTENT MANAGEMENT SYSTEM)
  • WYSIWYG (WHAT YOU SEE IS WHAT YOU GET) 
Below is a quick diagram I made from a group decisions to the dimensions of the website will will end up creating. TASK FOR NEXT WEEK: Make a mock up of your website (paper and pen) do 10.


No comments:

Post a Comment