C R A P On The Web

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, ﬁndability, 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 2012 Principles of design• Unity • Harmony• Dominance/emphasis • Balance• Scale & proportion • Rhythm

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 2012CRAP

AR340 WEB-BASED DESIGN ● INTERTERM 2012CRAPContrast

AR340 WEB-BASED DESIGN ● INTERTERM 2012CRAPContrastRepetition

AR340 WEB-BASED DESIGN ● INTERTERM 2012CRAPContrastRepetitionAlignment

AR340 WEB-BASED DESIGN ● INTERTERM 2012CRAPContrastRepetitionAlignmentProximity

AR340 WEB-BASED DESIGN ● INTERTERM 2012

AR340 WEB-BASED DESIGN ● INTERTERM 2012Contrast, Repetition, Alignment, Proximity

AR340 WEB-BASED DESIGN ● INTERTERM 2012 Contrast, Repetition, Alignment, Proximity• Distinguishes different content

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 ● FALL 2010

AR340 WEB-BASED DESIGN ● INTERTERM 2012 Contrast, Repetition, Alignment, Proximity• Connects related or equivalent content

AR340 WEB-BASED DESIGN ● INTERTERM 2012 Contrast, Repetition, Alignment, Proximity• Connects related or equivalent content• Provides consistency

AR340 WEB-BASED DESIGN ● INTERTERM 2012 Contrast, Repetition, Alignment, Proximity• Connects related or equivalent content• Provides consistency• Creates unity

AR340 WEB-BASED DESIGN ● INTERTERM 2012 Contrast, Repetition, Alignment, Proximity• Connects related or equivalent content• Provides consistency• Creates unity 1

AR340 WEB-BASED DESIGN ● INTERTERM 2012 Contrast, Repetition, Alignment, Proximity• Connects related or equivalent content• Provides consistency• Creates unity 1 2

AR340 WEB-BASED DESIGN ● INTERTERM 2012 Contrast, Repetition, Alignment, Proximity• Connects related or equivalent content• Provides consistency• Creates unity 1 3 2

AR340 WEB-BASED DESIGN ● INTERTERM 2012 Contrast, Repetition, Alignment, Proximity• Connects related or equivalent content• Provides consistency• Creates unity 1 3 2 4

AR340 WEB-BASED DESIGN ● INTERTERM 2012 Contrast, Repetition, Alignment, Proximity• Creates a visual flow

AR340 WEB-BASED DESIGN ● INTERTERM 2012 Contrast, Repetition, Alignment, Proximity• Creates a visual flow• Connects elements

AR340 WEB-BASED DESIGN ● INTERTERM 2012 Contrast, Repetition, Alignment, Proximity• Creates a visual flow• Connects elements• Imposes order & control

AR340 WEB-BASED DESIGN ● INTERTERM 2012 Contrast, Repetition, Alignment, Proximity• Creates a visual flow• Connects elements 1• Imposes order & control

AR340 WEB-BASED DESIGN ● INTERTERM 2012 Contrast, Repetition, Alignment, Proximity• Creates a visual flow• Connects elements 1• Imposes order & control 2

AR340 WEB-BASED DESIGN ● INTERTERM 2012 Contrast, Repetition, Alignment, Proximity• Creates a visual flow• Connects elements 1• Imposes order & control 2 3

AR340 WEB-BASED DESIGN ● INTERTERM 2012 Contrast, Repetition, Alignment, Proximity• Creates a visual flow• Connects elements 1• Imposes order & control 2 3 4

AR340 WEB-BASED DESIGN ● INTERTERM 2012 Contrast, Repetition, Alignment, Proximity• Creates a visual flow• Connects elements 1• Imposes order & control 2 3 4 5

AR340 WEB-BASED DESIGN ● INTERTERM 2012 Contrast, Repetition, Alignment, Proximity• Connects elements

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 ● 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 ● 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.

http://wwwi.mcpherson.edu	255
http://claudiajacques.org	139
http://www.slideshare.net	2

C R A P On The Web

by Bruce Clary

Accessibility

Categories

Upload Details

Usage Rights

3 Embeds 396

Statistics

C R A P On The Web Presentation Transcript

C R A P On The Web

by Bruce Clary

Accessibility

Categories

Upload Details

Usage Rights

3 Embeds 396

Statistics

C R A P On The Web Presentation Transcript

Let LinkedIn power your SlideShare experience

Let LinkedIn power your SlideShare experience

Customize SlideShare content based on your interests

Keep up to date when your LinkedIn contacts post on SlideShare