Web Layout

520 views
356 views

Published on

Web design layout

Published in: Design, Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
520
On SlideShare
0
From Embeds
0
Number of Embeds
19
Actions
Shares
0
Downloads
9
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Web Layout

  1. 1. Layout Think about your audience!
  2. 2. Devine Proportion The Golden Ratio
  3. 3. It does exist…
  4. 4. Rule of Thirds
  5. 5. Consider your users
  6. 6. Consider your users People are attracted to faces
  7. 7. Users have expectations  Place elements where users expect to find them  Jomc.unc.edu
  8. 8. Text should be easy to read Not too wide Not too narrow
  9. 9. Old Web layouts: 960 grid
  10. 10. New models
  11. 11. 1 column or fluid center
  12. 12. 2 column fluid
  13. 13. 3 column fluid
  14. 14. Standard Web layouts 1 col 2 col 3 col
  15. 15. The problem  What’s wrong with this?
  16. 16. 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.
  17. 17. 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
  18. 18. Layouts can define a brand  Guess the website based on its layout
  19. 19. Design template for project 1 Mobile screen and desktop screen
  20. 20. “Above the fold” Commonly 1024px by 768px
  21. 21. Homework Work on wireframes and color comprehensive layouts Read articles posted on class website Read Beautiful Web Design Ch. 5
  22. 22. Get started! Assignment: Website redesign

×