Layout and Composition

Web Design vs Print Design.

Resizable windows.

Client (browser) dependant.

Multidimensional.

Interactive.

Getting Started.

What is the purpose of the website?

Who is its audience?

What sort of branding, style and imagery will the website use?

What sort of navigation will allow users to move around the website?

What is the sites structure?

Guidelines.

Use templates to give consistency across pages of your site.

Use an clear menu system.

Design should be the conduit of the content of the site and should enhance its delivery.

Do not use obtrusive sounds or animations,  too many colors, or more that 4 different fonts.  

Webpage Anatomy

anatomy

Grid Theory

golden

 

 grid

960 Grid System

Divisible by 3, 4, 5, 6, 8, 10, 12, 15, and 16

http://960.gs/

http://10k.aneventapart.com/

Symetrical

http://jasongraphix.com/

Asymetrical

asymetrical

 

http://www.steinway.com/about/

 

Unity

Proximity

proximity

 

Repetition

repetition

 

Emphasis

Placement

http://learnlakenona.com/

Continuance

http://www.tearoundapp.com/

Isolation

http://www.kevin-anderson.nl/

Contrast

https://twitter.com/

 

Standard Design Layouts

Left Column

http://www.porsche.com/usa/models/911/

Right Column

http://sixrevisions.com/

Three Column

http://www.thinkgeek.com/

 

Fixed Width Vs Fluid Width

width


Fixed Width Pros; 

Gives designer more control over how an image floated within the content will look.
Allows for planned white space.
Improves readability with narrower text blocks.

Fixed Width  Cons;

Can appear dwarfed in large browser windows.
Takes control away from the user.

Liquid Width Pros

Adapts to most screen resolutions and devices.
Reduces user scrolling.

Liquid Width Cons;

Challenging to read when text is spanning a wide distance.
Harder to execute successfully.
Limits or imposes on white space.

Fixed Width Example

http://www.redenvelope.com/

Fluid width Example

http://www.designinfluences.com/fluid960gs/

 

Responsive Design

http://alistapart.com/article/responsive-web-design

Latest Inovations

http://wearepandr.com/

http://www.shoutdigital.com/

http://www.toasteddigital.com/