C R A P On The  Web
Upcoming SlideShare
Loading in...5
×
 

C R A P On The Web

on

  • 2,750 views

Contrast | Repetition | Alignment | Proximity

Contrast | Repetition | Alignment | Proximity

Statistics

Views

Total Views
2,750
Views on SlideShare
2,124
Embed Views
626

Actions

Likes
5
Downloads
58
Comments
0

7 Embeds 626

http://wwwi.mcpherson.edu 376
http://claudiajacques.org 139
http://nownewmedia.wordpress.com 86
http://digtech.wikispaces.com 19
http://www.slideshare.net 2
http://gimpkompozeraudacity.wikispaces.com 2
https://nownewmedia.wordpress.com 2
More...

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-ShareAlike LicenseCC Attribution-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

C R A P On The  Web C R A P On The Web Presentation Transcript

  • CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION CRAP on the Web The Good, the Bad, and the Ugly Bruce Clary, McPherson College, McPherson, Kansas
  • 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
  • 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
  • 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
  • CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION Principles of design
  • CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION Principles of design • • • Unity Dominance/emphasis Scale & proportion • • • Harmony Balance Rhythm
  • CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION CRAP
  • CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION CRAP Contrast
  • CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION CRAP Contrast Repetition
  • CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION CRAP Contrast Repetition Alignment
  • CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION CRAP Contrast Repetition Alignment Proximity
  • CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
  • CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
  • CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION Contrast, Repetition, Alignment, Proximity
  • CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION Contrast, Repetition, Alignment, Proximity • Distinguishes different content
  • CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION Contrast, Repetition, Alignment, Proximity • • Distinguishes different content Brings out dominant elements and establishes focal points
  • CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION Contrast, Repetition, Alignment, Proximity • • Distinguishes different content • Creates interest & energy Brings out dominant elements and establishes focal points
  • 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
  • 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
  • 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
  • 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
  • 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
  • AR340 WEB-BASED DESIGN ● FALL 2010
  • AR340 WEB-BASED DESIGN ● FALL 2010
  • CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION Contrast, Repetition, Alignment, Proximity
  • CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION Contrast, Repetition, Alignment, Proximity • Connects related or equivalent content
  • CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION Contrast, Repetition, Alignment, Proximity • • Connects related or equivalent content Provides consistency
  • CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION Contrast, Repetition, Alignment, Proximity • • • Connects related or equivalent content Provides consistency Creates unity
  • CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION Contrast, Repetition, Alignment, Proximity • • • Connects related or equivalent content Provides consistency Creates unity 1
  • CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION Contrast, Repetition, Alignment, Proximity • • • Connects related or equivalent content Provides consistency Creates unity 1 2
  • CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION Contrast, Repetition, Alignment, Proximity • • • Connects related or equivalent content Provides consistency Creates unity 1 3 2
  • CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION Contrast, Repetition, Alignment, Proximity • • • Connects related or equivalent content Provides consistency Creates unity 1 3 2 4
  • AR340 WEB-BASED DESIGN ● FALL 2010
  • AR340 WEB-BASED DESIGN ● FALL 2010
  • AR340 WEB-BASED DESIGN ● FALL 2010
  • CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION Contrast, Repetition, Alignment, Proximity
  • CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION Contrast, Repetition, Alignment, Proximity • Creates a visual flow
  • CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION Contrast, Repetition, Alignment, Proximity • • Creates a visual flow Connects elements
  • CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION Contrast, Repetition, Alignment, Proximity • • • Creates a visual flow Connects elements Imposes order & control
  • CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION Contrast, Repetition, Alignment, Proximity • • • Creates a visual flow Connects elements Imposes order & control 1
  • CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION Contrast, Repetition, Alignment, Proximity • • • Creates a visual flow Connects elements 1 Imposes order & control 2
  • CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION Contrast, Repetition, Alignment, Proximity • • • Creates a visual flow Connects elements 1 Imposes order & control 2 3
  • CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION Contrast, Repetition, Alignment, Proximity • • • Creates a visual flow Connects elements 1 Imposes order & control 2 3 4
  • CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION Contrast, Repetition, Alignment, Proximity • • • Creates a visual flow Connects elements 1 Imposes order & control 2 3 4 5
  • 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
  • CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION Contrast, Repetition, Alignment, Proximity
  • CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION Contrast, Repetition, Alignment, Proximity • Connects elements
  • CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION Contrast, Repetition, Alignment, Proximity • • Connects elements Creates visual order and logic
  • CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION Contrast, Repetition, Alignment, Proximity • • Connects elements Creates visual order and logic 1
  • CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION Contrast, Repetition, Alignment, Proximity • • Connects elements Creates visual order and logic 1 2
  • CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION 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
  • 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.
  • 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.
  • 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