AR340 WEB-BASED DESIGN ● INTERTERM 2012CRAP on the WebThe Good, the Bad, and the Ugly Bruce Clary, McPherson College, McPherson, Kansas
AR340 WEB-BASED DESIGN ● INTERTERM 2012“‘Design look’ is mentioned as a sign of Webcredibility almost twice as often as the nextcategory. Visual design is every bit as importantas usability, findability, and accessibility inswaying the perception of today’s Web-savvy sitevisitors.” —Dirk Knemeyer
AR340 WEB-BASED DESIGN ● INTERTERM 2012“Good web design is about the character of thecontent rather than the character of the designer.” —Jeffrey Zeldman
AR340 WEB-BASED DESIGN ● INTERTERM 2012Elements of design
AR340 WEB-BASED DESIGN ● INTERTERM 2012 Elements of design• Line • Shape & form• Color • Direction/movement)• Repetition and pattern • Value• Texture
AR340 WEB-BASED DESIGN ● INTERTERM 2012Principles of design
AR340 WEB-BASED DESIGN ● INTERTERM 2012As the course proceeds, we’ll spend more timereviewing the elements and principles of design,but for today, we’ll keep it simple.
AR340 WEB-BASED DESIGN ● INTERTERM 2012 Contrast, Repetition, Alignment, Proximity• Distinguishes different content• Brings out dominant elements and establishes focal points
AR340 WEB-BASED DESIGN ● INTERTERM 2012 Contrast, Repetition, Alignment, Proximity• Distinguishes different content• Brings out dominant elements and establishes focal points• Creates interest & energy
AR340 WEB-BASED DESIGN ● INTERTERM 2012 Contrast, Repetition, Alignment, Proximity• Distinguishes different content• Brings out dominant elements and establishes focal points 1• Creates interest & energy
AR340 WEB-BASED DESIGN ● INTERTERM 2012 Contrast, Repetition, Alignment, Proximity• Distinguishes different content• Brings out dominant elements and establishes focal points 1• Creates interest & 2 energy
AR340 WEB-BASED DESIGN ● INTERTERM 2012 Contrast, Repetition, Alignment, Proximity• Distinguishes different content• Brings out dominant elements and establishes focal points 1• Creates interest & 2 energy 3
AR340 WEB-BASED DESIGN ● INTERTERM 2012 Contrast, Repetition, Alignment, Proximity• Distinguishes different content• Brings out dominant elements and establishes focal points 1• Creates interest & 2 energy 3 4
AR340 WEB-BASED DESIGN ● INTERTERM 2012 Contrast, Repetition, Alignment, Proximity• Distinguishes different content• Brings out dominant elements and establishes focal points 1• Creates interest & 2 energy 3 4 5
AR340 WEB-BASED DESIGN ● INTERTERM 2012 Contrast, Repetition, Alignment, Proximity• Connects elements• Creates visual order and logic
AR340 WEB-BASED DESIGN ● INTERTERM 2012 Contrast, Repetition, Alignment, Proximity• Connects elements• Creates visual order and logic 1
AR340 WEB-BASED DESIGN ● INTERTERM 2012 Contrast, Repetition, Alignment, Proximity• Connects elements• Creates visual order and logic 1 2
AR340 WEB-BASED DESIGN ● INTERTERM 2012 Contrast, Repetition, Alignment, Proximity• Connects elements• Creates visual order and logic 1 2 3
AR340 WEB-BASED DESIGN ● FALL 2010
AR340 WEB-BASED DESIGN ● FALL 2010
AR340 WEB-BASED DESIGN ● FALL 2010
AR340 WEB-BASED DESIGN ● FALL 2010
AR340 WEB-BASED DESIGN ● INTERTERM 2012OK, so here goes…CRAP is a simplified approach to design introduced by Robin Williams in the first edition of TheNon-Designers Design Book, Peachpit Press, 1994.
AR340 WEB-BASED DESIGN ● INTERTERM 2012OK, so here goes…What kind of CRAP can you recognizein the following web page designs?CRAP is a simplified approach to design introduced by Robin Williams in the first edition of TheNon-Designers Design Book, Peachpit Press, 1994.
AR340 WEB-BASED DESIGN ● FALL 2010
AR340 WEB-BASED DESIGN ● FALL 2010
AR340 WEB-BASED DESIGN ● FALL 2010
AR340 WEB-BASED DESIGN ● FALL 2010
AR340 WEB-BASED DESIGN ● FALL 2010
AR340 WEB-BASED DESIGN ● FALL 2010
AR340 WEB-BASED DESIGN ● FALL 2010
AR340 WEB-BASED DESIGN ● FALL 2010
AR340 WEB-BASED DESIGN ● FALL 2010
AR340 WEB-BASED DESIGN ● INTERTERM 2012The difference between art and designGood art sends a different message to everyone.Good design sends the same message toeveryone.“The Difference Between Art and Design” is a fantastic article by John O’Nolan published on WebDesigner’s Depot in September 2009. Each of the “differences” I’ve quoted here is available as a beautifuldesktop wallpaper. Get them at www.webdesignerdepot.com/2009/09/the-difference-between-art-and-design.
AR340 WEB-BASED DESIGN ● INTERTERM 2012The difference between art and designGood art is interpreted. Good design isunderstood.“The Difference Between Art and Design” is a fantastic article by John O’Nolan published on WebDesigner’s Depot in September 2009. Each of the “differences” I’ve quoted here is available as a beautifuldesktop wallpaper. Get them at www.webdesignerdepot.com/2009/09/the-difference-between-art-and-design.
AR340 WEB-BASED DESIGN ● INTERTERM 2012The difference between art and designGood art is a taste. Good design is an opinion.“The Difference Between Art and Design” is a fantastic article by John O’Nolan published on WebDesigner’s Depot in September 2009. Each of the “differences” I’ve quoted here is available as a beautifuldesktop wallpaper. Get them at www.webdesignerdepot.com/2009/09/the-difference-between-art-and-design.
AR340 WEB-BASED DESIGN ● INTERTERM 2012The difference between art and designGood art is a talent. Good design is a skill.“The Difference Between Art and Design” is a fantastic article by John O’Nolan published on WebDesigner’s Depot in September 2009. Each of the “differences” I’ve quoted here is available as a beautifuldesktop wallpaper. Get them at www.webdesignerdepot.com/2009/09/the-difference-between-art-and-design.
AR340 WEB-BASED DESIGN ● INTERTERM 2012The difference between art and designGood art inspires. Good design motivates.“The Difference Between Art and Design” is a fantastic article by John O’Nolan published on WebDesigner’s Depot in September 2009. Each of the “differences” I’ve quoted here is available as a beautifuldesktop wallpaper. Get them at www.webdesignerdepot.com/2009/09/the-difference-between-art-and-design.
Let LinkedIn power your SlideShare experience
+
Let LinkedIn power your SlideShare experience
Customize SlideShare content based on your interests
We will import your LinkedIn profile and you will be visible on SlideShare.
Keep up to date when your LinkedIn contacts post on SlideShare