The document discusses website layout design and provides tips for successful layouts. It recommends considering the audience and users when designing layouts by following principles like the golden ratio, rule of thirds, and placing elements where users expect to find them. Successful designers sketch layouts on paper, get feedback, and follow design principles to create clean, usable sites, while unsuccessful designers do not consider users or principles and produce cluttered, confusing sites. Layouts can define a brand, and the document provides layout templates and homework assignments related to layout design.

1. Layout
Think about your audience!

2. Devine Proportion
The Golden Ratio

3. It does exist…

4. Rule of Thirds

5. Consider your users

6. Consider your users
People are attracted to faces

7. Users have expectations
 Place elements where users expect to find them
 Jomc.unc.edu

9. Text should be easy to read
Not too wide Not too narrow

10. Old Web layouts: 960 grid

11. New models

12. 1 column or fluid center

13. 2 column fluid

14. 3 column fluid

15. Standard Web layouts
1 col
2 col
3 col

16. The problem
 What’s wrong with this?

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

20. 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

21. Layouts can define a brand
 Guess the website based on its layout

22. Design template for project 1
Mobile screen and desktop screen

23. “Above the fold”
Commonly 1024px by 768px

25. Homework
Work on wireframes and color comprehensive layouts
Read articles posted on class website
Read Beautiful Web Design Ch. 5

26. Get started!
Assignment: Website redesign