Your SlideShare is downloading. ×
0
C R A P On The  Web
C R A P On The  Web
C R A P On The  Web
C R A P On The  Web
C R A P On The  Web
C R A P On The  Web
C R A P On The  Web
C R A P On The  Web
C R A P On The  Web
C R A P On The  Web
C R A P On The  Web
C R A P On The  Web
C R A P On The  Web
C R A P On The  Web
C R A P On The  Web
C R A P On The  Web
C R A P On The  Web
C R A P On The  Web
C R A P On The  Web
C R A P On The  Web
C R A P On The  Web
C R A P On The  Web
C R A P On The  Web
C R A P On The  Web
C R A P On The  Web
C R A P On The  Web
C R A P On The  Web
C R A P On The  Web
C R A P On The  Web
C R A P On The  Web
C R A P On The  Web
C R A P On The  Web
C R A P On The  Web
C R A P On The  Web
C R A P On The  Web
C R A P On The  Web
C R A P On The  Web
C R A P On The  Web
C R A P On The  Web
C R A P On The  Web
C R A P On The  Web
C R A P On The  Web
C R A P On The  Web
C R A P On The  Web
C R A P On The  Web
C R A P On The  Web
C R A P On The  Web
C R A P On The  Web
C R A P On The  Web
C R A P On The  Web
C R A P On The  Web
C R A P On The  Web
C R A P On The  Web
C R A P On The  Web
C R A P On The  Web
C R A P On The  Web
C R A P On The  Web
C R A P On The  Web
C R A P On The  Web
C R A P On The  Web
C R A P On The  Web
C R A P On The  Web
C R A P On The  Web
C R A P On The  Web
C R A P On The  Web
C R A P On The  Web
C R A P On The  Web
C R A P On The  Web
C R A P On The  Web
C R A P On The  Web
C R A P On The  Web
C R A P On The  Web
C R A P On The  Web
C R A P On The  Web
C R A P On The  Web
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

C R A P On The Web

2,566

Published on

Contrast | Repetition | Alignment | Proximity

Contrast | Repetition | Alignment | Proximity

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

No Downloads
Views
Total Views
2,566
On Slideshare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
63
Comments
0
Likes
5
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION CRAP on the Web The Good, the Bad, and the Ugly Bruce Clary, McPherson College, McPherson, Kansas
  • 2. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION “‘Design look’ is mentioned as a sign of Web credibility almost twice as often as the next category. Visual design is every bit as important as usability, findability, and accessibility in swaying the perception of today’s Web-savvy site visitors.” —Dirk Knemeyer
  • 3. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION “Good web design is about the character of the content rather than the character of the designer.” —Jeffrey Zeldman
  • 4. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION “Good art sends a different message to everyone. Good design sends the same message to everyone. Good art is interpreted. Good design is understood.” —John O’Nolan
  • 5. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION Principles of design
  • 6. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION Principles of design • • • Unity Dominance/emphasis Scale & proportion • • • Harmony Balance Rhythm
  • 7. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION CRAP
  • 8. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION CRAP Contrast
  • 9. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION CRAP Contrast Repetition
  • 10. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION CRAP Contrast Repetition Alignment
  • 11. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION CRAP Contrast Repetition Alignment Proximity
  • 12. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
  • 13. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
  • 14. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION Contrast, Repetition, Alignment, Proximity
  • 15. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION Contrast, Repetition, Alignment, Proximity • Distinguishes different content
  • 16. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION Contrast, Repetition, Alignment, Proximity • • Distinguishes different content Brings out dominant elements and establishes focal points
  • 17. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION Contrast, Repetition, Alignment, Proximity • • Distinguishes different content • Creates interest & energy Brings out dominant elements and establishes focal points
  • 18. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION Contrast, Repetition, Alignment, Proximity • • Distinguishes different content • Creates interest & energy Brings out dominant elements and establishes focal points 1
  • 19. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION Contrast, Repetition, Alignment, Proximity • • Distinguishes different content • Creates interest & energy Brings out dominant elements and establishes focal points 1 2
  • 20. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION Contrast, Repetition, Alignment, Proximity • • Distinguishes different content • Creates interest & energy Brings out dominant elements and establishes focal points 1 2 3
  • 21. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION Contrast, Repetition, Alignment, Proximity • • Distinguishes different content • Creates interest & energy Brings out dominant elements and establishes focal points 1 2 3 4
  • 22. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION Contrast, Repetition, Alignment, Proximity • • Distinguishes different content • Creates interest & energy Brings out dominant elements and establishes focal points 1 2 3 4 5
  • 23. AR340 WEB-BASED DESIGN ● FALL 2010
  • 24. AR340 WEB-BASED DESIGN ● FALL 2010
  • 25. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION Contrast, Repetition, Alignment, Proximity
  • 26. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION Contrast, Repetition, Alignment, Proximity • Connects related or equivalent content
  • 27. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION Contrast, Repetition, Alignment, Proximity • • Connects related or equivalent content Provides consistency
  • 28. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION Contrast, Repetition, Alignment, Proximity • • • Connects related or equivalent content Provides consistency Creates unity
  • 29. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION Contrast, Repetition, Alignment, Proximity • • • Connects related or equivalent content Provides consistency Creates unity 1
  • 30. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION Contrast, Repetition, Alignment, Proximity • • • Connects related or equivalent content Provides consistency Creates unity 1 2
  • 31. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION Contrast, Repetition, Alignment, Proximity • • • Connects related or equivalent content Provides consistency Creates unity 1 3 2
  • 32. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION Contrast, Repetition, Alignment, Proximity • • • Connects related or equivalent content Provides consistency Creates unity 1 3 2 4
  • 33. AR340 WEB-BASED DESIGN ● FALL 2010
  • 34. AR340 WEB-BASED DESIGN ● FALL 2010
  • 35. AR340 WEB-BASED DESIGN ● FALL 2010
  • 36. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION Contrast, Repetition, Alignment, Proximity
  • 37. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION Contrast, Repetition, Alignment, Proximity • Creates a visual flow
  • 38. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION Contrast, Repetition, Alignment, Proximity • • Creates a visual flow Connects elements
  • 39. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION Contrast, Repetition, Alignment, Proximity • • • Creates a visual flow Connects elements Imposes order & control
  • 40. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION Contrast, Repetition, Alignment, Proximity • • • Creates a visual flow Connects elements Imposes order & control 1
  • 41. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION Contrast, Repetition, Alignment, Proximity • • • Creates a visual flow Connects elements 1 Imposes order & control 2
  • 42. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION Contrast, Repetition, Alignment, Proximity • • • Creates a visual flow Connects elements 1 Imposes order & control 2 3
  • 43. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION Contrast, Repetition, Alignment, Proximity • • • Creates a visual flow Connects elements 1 Imposes order & control 2 3 4
  • 44. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION Contrast, Repetition, Alignment, Proximity • • • Creates a visual flow Connects elements 1 Imposes order & control 2 3 4 5
  • 45. AR340 WEB-BASED DESIGN ● FALL 2010
  • 46. AR340 WEB-BASED DESIGN ● FALL 2010
  • 47. AR340 WEB-BASED DESIGN ● FALL 2010
  • 48. AR340 WEB-BASED DESIGN ● FALL 2010
  • 49. AR340 WEB-BASED DESIGN ● FALL 2010
  • 50. AR340 WEB-BASED DESIGN ● FALL 2010
  • 51. AR340 WEB-BASED DESIGN ● FALL 2010
  • 52. AR340 WEB-BASED DESIGN ● FALL 2010
  • 53. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION Contrast, Repetition, Alignment, Proximity
  • 54. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION Contrast, Repetition, Alignment, Proximity • Connects elements
  • 55. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION Contrast, Repetition, Alignment, Proximity • • Connects elements Creates visual order and logic
  • 56. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION Contrast, Repetition, Alignment, Proximity • • Connects elements Creates visual order and logic 1
  • 57. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION Contrast, Repetition, Alignment, Proximity • • Connects elements Creates visual order and logic 1 2
  • 58. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION Contrast, Repetition, Alignment, Proximity • • Connects elements Creates visual order and logic 1 2 3
  • 59. AR340 WEB-BASED DESIGN ● FALL 2010
  • 60. AR340 WEB-BASED DESIGN ● FALL 2010
  • 61. AR340 WEB-BASED DESIGN ● FALL 2010
  • 62. AR340 WEB-BASED DESIGN ● FALL 2010
  • 63. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION OK, so here goes… CRAP is a simplified approach to design introduced by Robin Williams in the first edition of The Non-Designers Design Book, Peachpit Press, 1994.
  • 64. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION OK, so here goes… What kind of CRAP can you recognize in the following web page designs? CRAP is a simplified approach to design introduced by Robin Williams in the first edition of The Non-Designers Design Book, Peachpit Press, 1994.
  • 65. AR340 WEB-BASED DESIGN ● FALL 2010
  • 66. AR340 WEB-BASED DESIGN ● FALL 2010
  • 67. AR340 WEB-BASED DESIGN ● FALL 2010
  • 68. AR340 WEB-BASED DESIGN ● FALL 2010
  • 69. AR340 WEB-BASED DESIGN ● FALL 2010

×