C R A P On The Web
•
5 recomendaciones•1,867 vistas
Contrast | Repetition | Alignment | Proximity
Recomendados
Recomendados
Más contenido relacionado
Similar a C R A P On The Web
Similar a C R A P On The Web (20)
Más de Bruce Clary
Más de Bruce Clary (20)
Último
Último (20)
C R A P On The Web
- 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
- 69. AR340 WEB-BASED DESIGN ● FALL 2010
- 72. AR340 WEB-BASED DESIGN ● FALL 2010