PRINCIPLES OF WEB DESIGN

- Front End – What you can see:

*Colour *Shape *Texture *Composition

- Back End – How it works:

*Links etc *Programing *What makes it work

- Mock Up – Put a design together visually:

*Photoshop *Fireworks *72ppi – Resolution

- HTML – Hyper Text Mark Up Language

*HTML 5 is the version we are on now

- CSS – Cascading Style Sheets

*CSS3 is the version we are on now

- Java Script – Finds different pictures and replaces them

- PHP, Pearl, C++ - Allows websites to do things

- Servers – contains information: For example movies

Website has to have consistency and continuity:

For example headers or homepage links

Accessible for disabled people:

For example people who are partially sighted or blind would need sound

Screen size has to be adjustable:

For example screens come in different sizes, computers, mobiles, tablets, TV's etc
Mobile apps are useful in this situation

- Adobe Kuler – colour palette maker

-Hex (Hexdecimal) – colour palette code – 6 numbers

When annotating sites circle points you like or don't like, point out key features which are obvious (little details)

- Hierarchy – determines information, most important to least important.

This can be generated through visual methods such as colour, composition, space, texture and scale

-The fold – the line at the bottom of the webpage

CONTRAST

People with poor eye sight would find it difficult if there was little contrast on a website, as nothing would be clear or would stand out.
This often has an impact on the hierarchy of the page.

Types of contrast:

*Organic/Manmade

*Colour

*Texture/Flat

*Font/Images

*Scale – Big/Small

*Bright/Dark

*Messy/Clean

*Dull/Bright

*Curly/Straight

*Handmade/Computer generated

*Static/Movement

*Space – Crowded/Spacious

The top of the page is called the Header, this is normally where a title, logo and navigation bar goes

The middle is called Content, this is where the bulk of your website goes.

The bottom is called the Footer, this has little information and has the least amount of contrast so it doesn't stand out.

BALANCE

Balance impacts the stability of a page.

Balance needs space.

There are two different kinds of balance:

*Symmetrical – this is mirrored, the same of both sides.
*Asymmetrical – this doesn't really have a pattern, instead is the opposite of symmetrical

Symmetrical balance is achieved when the visual weight of each half of a page is the same but not composed of similar elements.

The weight/balance isn't just effect by the size its also effected by contrast.

- Gutter – Space between columns.