1 / 24

Modern Web Design Principles for Balanced Layouts

Learn about C.R.A.P principles (Contrast, Repetition, Alignment, Proximity) for creating balanced web layouts. Discover free-form and grid design concepts to improve the organization and visual appeal of your webpage.

griffith-gray
Download Presentation

Modern Web Design Principles for Balanced Layouts

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Page Design

  2. Dec. 11, 1997

  3. October 14, 2014

  4. Dec. 1, 1998

  5. October 14, 2014

  6. Feb. 18, 1997

  7. October 14, 2014

  8. Main Design Categories • Free form • Grid

  9. Free Form • Free-flowing placement of text and other graphic elements within a design’s frame

  10. Grid • More traditional • Objective, unemotional organization to a graphic design

  11. The “formula” • 2-column, 3-column, 4-column • Banner spans columns • Sometimes elements span more than one column • Footer spans columns

  12. Examples • Two-column design:www.cnnmoney.com • Three-column design:www.nytimes.com/sports

  13. C.R.A.P. Principles of Design • Contrast • Repetition • Alignment • Proximity

  14. Contrast • If two elements are different, make them very different • Vary size, typeface, emphasis, color, texture, etc. • If everything looks the same, nothing is emphasized

  15. Repetition • Items performing same function should look very similar • Repetition gives identity • Suggest templating sysetm • Also has load time implications—reuse of graphics

  16. Alignment • Gives order to design • Looks polished and finished • Every element should align with something else on the page

  17. Proximity • Items near each other are seen as a unit

  18. Balance • Placement of elements within a design’s frame • A design is considered balanced if it equalizes the weight between the x and y axis • Symmetrical • Asymmetrical

  19. Simplicity • Minimal use of graphics • Doesn’t mean no graphics • If an element is removed, does meaning suffer?

  20. Page width • Fixed • 750-780 pixels • 950-1000 pixels • Responsive • Mobile Devices

More Related