LayoutThink about your audience!

Devine ProportionThe Golden Ratio

It does exist…

Rule of Thirds

Consider your users

Consider your usersPeople are attracted to faces

Users have expectations

Place elements where users expect to find them Jomc.unc.edu

Text should be easy to read

Not too wide Not too narrow

Old Web layouts: 960 grid

New models

1 column or fluid center

2 column fluid

3 column fluid

Standard Web layouts1 col2 col3 col

The problem

What’s wrong with this?

Responsive web designDesigning in a way that automatically adjusts the layout of a web site for different screen sizes by using fluid, proportion-based grids.

General Layout tips

Successful designers Consider their users

Sketch layout on paper before going to Illustrator

Get feedback

Follow design principles

End up with a clean, aesthetically pleasing, usable website

Unsuccessful designers Don’t consider their users

Design without intention

Don’t get feedback

Don’t consider design principles

End up with a site that is cluttered, confusing, and not pleasant on the eye

Layouts can define a brand

Guess the website based on its layout

Design template for project 1Mobile screen and desktop screen

“Above the fold”Commonly 1024px by 768px

Homework

Work on wireframes and color comprehensive layouts

Read articles posted on class website

Read Beautiful Web Design Ch. 5

Get started!Assignment: Website redesign