Web Layout

26
Layout Think about your audience!

Transcript of Web Layout

Page 1: Web Layout

LayoutThink about your audience!

Page 2: Web Layout

Devine ProportionThe Golden Ratio

Page 3: Web Layout

It does exist…

Page 4: Web Layout

Rule of Thirds

Page 5: Web Layout

Consider your users

Page 6: Web Layout

Consider your usersPeople are attracted to faces

Page 7: Web Layout

Users have expectations

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

Page 8: Web Layout
Page 9: Web Layout

Text should be easy to read

Not too wide Not too narrow

Page 10: Web Layout

Old Web layouts: 960 grid

Page 11: Web Layout

New models

Page 12: Web Layout

1 column or fluid center

Page 13: Web Layout

2 column fluid

Page 14: Web Layout

3 column fluid

Page 15: Web Layout

Standard Web layouts1 col2 col3 col

Page 16: Web Layout

The problem

What’s wrong with this?

Page 17: Web Layout

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.

Page 18: Web Layout
Page 19: Web Layout
Page 20: Web Layout

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

Page 21: Web Layout

Layouts can define a brand

Guess the website based on its layout

Page 22: Web Layout

Design template for project 1Mobile screen and desktop screen

Page 23: Web Layout

“Above the fold”Commonly 1024px by 768px

Page 24: Web Layout
Page 25: Web Layout

Homework

Work on wireframes and color comprehensive layouts

Read articles posted on class website

Read Beautiful Web Design Ch. 5

Page 26: Web Layout

Get started!Assignment: Website redesign