Tuesday 22 October 2013

OUGD504 Design Production: Design For Web

OUGD504
DESIGN PRODUCTION
DESIGN FOR WEB

  • Web Standards and limitations
  • Layout 
  • Setup 
  • Basic coding
Web standards are governed by acronyms & abbreviations.
  • HTML-HYPER TEXT MARK UP LANGUAGE
  • XHTML- EXTENDED HYPER TEXT MARK UP LANGUAGE
  • CSS-CASCADING STYLE SHEETS
  • SEO-SEARCH ENGINE OPTIMIZER
  • FTP-FILE TRANSFER PROTOCOL
  • URL- UNIFORM RESEARCH LOCATOR
  • WYSIWYG- WHAT YOU SEE IS WHAT YOU GET
  • UI-USER INTERFACE
  • UX-USER EXPERIENCE
Dreamweaver is a WYSIWYG application.

Term web designer is dated, UI is the new term as user interface designers design apps as well.

LIMITATIONS FOR DESIGN FOR WEB
  • Size of screen/display
  • Size of file
  • Colour- 216 web safe colours

When colour first arrived on the web computers could only support a mximum of 256 colours on their 8-bit monitors. A list of 216 'Web Safe Colours' were identified

These colours are reproduced consistantly across the web using HTML, specifically a six or where possible a three digit hexadecimal code.

RED
#FF0000
#FF0

BLACK
#000000
#000

WHITE
#FFFFFF
#FFF

WEB SAFE FONTS

For a chosen font to display consistently across different computers a standard font must be used
Further to this a font-family is chosen giving several 'fallback' options to insure maximum compatibility between browser and systems. For example if the browser/system does not support the first font it tries the next one instead.

Some common font families:

SERIF FONTS

Georgia, serif

"palatino linotype", "book antiqua", Serif

SAN SERIF FONTS

Arial, Helvetica, Sans-serif

MONO SPACE FONTS

Courier 

CSS FONT FACE

The CSS compatible @font-face allows you to install fonts to a website meaning the font choice remains consistent regardless of the browser or system.
However using font face breaches the licensing and copyright laws related to specific font foundries 
There are many free font websites which include free licence usage for @font-face kits including Font Squirrel.

SIZE DIMENSION PIXEL RESOLUTION

640x480- First computers
800x600- By 1995
1024x768- Early 2000's
1920x1080- 5 years ago
2880x1800 (200 ppi)- New retina display computers

FILE FORMAT

Lossy file format-Compressed- Design for web
PNG
GIF
PDF
JPEG
Lossless file format- Design for print

3 potential designs for my website


DREAMWEAVER


We don't use the recent files option as uni computers are network.


Next I created a new HTML file.



We are working with coding as there are some flaws with the design mode.


This is the coding to a completely blank web page, as you can see there is a lot of coding for a web page with nothing on it.

Anything with in <> is an HTML tag. <html> all this tag means is open HTML. </html> means close HTML. For a website to work you must have an open and close tag.

<head> </head>This is where you put anything that increases the functionality of the website, it isn't something that is visible.

<meta> Search engine optimisation, these are not needed for a website to work.

<title> Not noticeable in the physical design but shows up in the search engine, also helps search engine optimisation.

<body> </body> anything that you want to be visible on the webpage must be between the open and close body tag.

FAVICON is a logo in the search engine.


You have to create the containing folder before you begin. It is called the root folder, if things aren't saved to the root folder it will show up as a broken link on the webpage.


Never use upper case letters or spaces for file name e.g Toy Story would be called 'toystory'


Next we created a sub folder with in 'root' called 'images'


We then selected site>new site...


We gave the website a name and linked it to the root folder by going to the local site folder and locating it on the hard drive.


Next we selected save and this appeared in the bottom right hand corner. We are now ready to create our webpage.


you must never delete the file extension.


Homepage must always be called 'index'








No comments:

Post a Comment