SlideShare a Scribd company logo
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
C R A P On The  Web
C R A P On The  Web
C R A P On The  Web

More Related Content

Similar to C R A P On The Web

The Challenges of Web Design
The Challenges of Web DesignThe Challenges of Web Design
The Challenges of Web DesignBruce Clary
 
The Batman Guide to Internal Linking
The Batman Guide to Internal LinkingThe Batman Guide to Internal Linking
The Batman Guide to Internal Linking
Grant Simmons
 
Web Technology and Terminology
Web Technology and TerminologyWeb Technology and Terminology
Web Technology and TerminologyBruce Clary
 
ReMix Keynote (Vienna, Austria)
ReMix Keynote (Vienna, Austria)ReMix Keynote (Vienna, Austria)
ReMix Keynote (Vienna, Austria)
Simon Guest
 
Lightning Components for Admins by Farhan Carter, LeeAnne Templeman, & Michae...
Lightning Components for Admins by Farhan Carter, LeeAnne Templeman, & Michae...Lightning Components for Admins by Farhan Carter, LeeAnne Templeman, & Michae...
Lightning Components for Admins by Farhan Carter, LeeAnne Templeman, & Michae...
Salesforce Admins
 
How Write & Design Landing Pages That Increase Conversion Rates, Orders and S...
How Write & Design Landing Pages That Increase Conversion Rates, Orders and S...How Write & Design Landing Pages That Increase Conversion Rates, Orders and S...
How Write & Design Landing Pages That Increase Conversion Rates, Orders and S...
Pinpointe On-Demand
 
Jennifer Robbins: ARTIFACT Conference Keynote
Jennifer Robbins: ARTIFACT Conference KeynoteJennifer Robbins: ARTIFACT Conference Keynote
Jennifer Robbins: ARTIFACT Conference Keynote
JenRobbins
 
How to remove rust from bumpers
How to remove rust from bumpersHow to remove rust from bumpers
How to remove rust from bumpersclayewi
 
Slingshot SEO Client presentation Dec 21 2011
Slingshot SEO Client presentation Dec 21 2011Slingshot SEO Client presentation Dec 21 2011
Slingshot SEO Client presentation Dec 21 2011
Jesse Laffen
 
Majestic Workshop on Backlinks and Link Building
Majestic Workshop on Backlinks and Link BuildingMajestic Workshop on Backlinks and Link Building
Majestic Workshop on Backlinks and Link Building
Sante J. Achille
 
From Chance to Choice - Tactical Link Building for International SEO
From Chance to Choice - Tactical Link Building for International SEOFrom Chance to Choice - Tactical Link Building for International SEO
From Chance to Choice - Tactical Link Building for International SEO
Szymon Słowik
 
Minimum Viable Web workshop
Minimum Viable Web workshopMinimum Viable Web workshop
Minimum Viable Web workshop
Kristofer Layon
 
Design concepts
Design conceptsDesign concepts
A quick information guide on UI/UX Design
A quick information guide on UI/UX DesignA quick information guide on UI/UX Design
A quick information guide on UI/UX Design
Kiran Poudel
 
SEO Crash Course: Website Rebuild
SEO Crash Course: Website RebuildSEO Crash Course: Website Rebuild
SEO Crash Course: Website Rebuild
Stoney deGeyter
 
Planning Your Web Build - The Blueprint for Digital Performance
Planning Your Web Build - The Blueprint for Digital PerformancePlanning Your Web Build - The Blueprint for Digital Performance
Planning Your Web Build - The Blueprint for Digital Performance
Gareth Cartman
 
Creating the blueprint for digital performance
Creating the blueprint for digital performanceCreating the blueprint for digital performance
Creating the blueprint for digital performance
semrush_webinars
 
Crash Course in Wireframing
Crash Course in WireframingCrash Course in Wireframing
Crash Course in Wireframing
Marcel
 
Basic Principles of website designing
Basic Principles of website designing Basic Principles of website designing
Basic Principles of website designing
Gulbir Chaudhary
 
Navigating Excellence Seattle's Top 10 Web Design Services Spotlighting Tatia...
Navigating Excellence Seattle's Top 10 Web Design Services Spotlighting Tatia...Navigating Excellence Seattle's Top 10 Web Design Services Spotlighting Tatia...
Navigating Excellence Seattle's Top 10 Web Design Services Spotlighting Tatia...
Tatiana Designs
 

Similar to C R A P On The Web (20)

The Challenges of Web Design
The Challenges of Web DesignThe Challenges of Web Design
The Challenges of Web Design
 
The Batman Guide to Internal Linking
The Batman Guide to Internal LinkingThe Batman Guide to Internal Linking
The Batman Guide to Internal Linking
 
Web Technology and Terminology
Web Technology and TerminologyWeb Technology and Terminology
Web Technology and Terminology
 
ReMix Keynote (Vienna, Austria)
ReMix Keynote (Vienna, Austria)ReMix Keynote (Vienna, Austria)
ReMix Keynote (Vienna, Austria)
 
Lightning Components for Admins by Farhan Carter, LeeAnne Templeman, & Michae...
Lightning Components for Admins by Farhan Carter, LeeAnne Templeman, & Michae...Lightning Components for Admins by Farhan Carter, LeeAnne Templeman, & Michae...
Lightning Components for Admins by Farhan Carter, LeeAnne Templeman, & Michae...
 
How Write & Design Landing Pages That Increase Conversion Rates, Orders and S...
How Write & Design Landing Pages That Increase Conversion Rates, Orders and S...How Write & Design Landing Pages That Increase Conversion Rates, Orders and S...
How Write & Design Landing Pages That Increase Conversion Rates, Orders and S...
 
Jennifer Robbins: ARTIFACT Conference Keynote
Jennifer Robbins: ARTIFACT Conference KeynoteJennifer Robbins: ARTIFACT Conference Keynote
Jennifer Robbins: ARTIFACT Conference Keynote
 
How to remove rust from bumpers
How to remove rust from bumpersHow to remove rust from bumpers
How to remove rust from bumpers
 
Slingshot SEO Client presentation Dec 21 2011
Slingshot SEO Client presentation Dec 21 2011Slingshot SEO Client presentation Dec 21 2011
Slingshot SEO Client presentation Dec 21 2011
 
Majestic Workshop on Backlinks and Link Building
Majestic Workshop on Backlinks and Link BuildingMajestic Workshop on Backlinks and Link Building
Majestic Workshop on Backlinks and Link Building
 
From Chance to Choice - Tactical Link Building for International SEO
From Chance to Choice - Tactical Link Building for International SEOFrom Chance to Choice - Tactical Link Building for International SEO
From Chance to Choice - Tactical Link Building for International SEO
 
Minimum Viable Web workshop
Minimum Viable Web workshopMinimum Viable Web workshop
Minimum Viable Web workshop
 
Design concepts
Design conceptsDesign concepts
Design concepts
 
A quick information guide on UI/UX Design
A quick information guide on UI/UX DesignA quick information guide on UI/UX Design
A quick information guide on UI/UX Design
 
SEO Crash Course: Website Rebuild
SEO Crash Course: Website RebuildSEO Crash Course: Website Rebuild
SEO Crash Course: Website Rebuild
 
Planning Your Web Build - The Blueprint for Digital Performance
Planning Your Web Build - The Blueprint for Digital PerformancePlanning Your Web Build - The Blueprint for Digital Performance
Planning Your Web Build - The Blueprint for Digital Performance
 
Creating the blueprint for digital performance
Creating the blueprint for digital performanceCreating the blueprint for digital performance
Creating the blueprint for digital performance
 
Crash Course in Wireframing
Crash Course in WireframingCrash Course in Wireframing
Crash Course in Wireframing
 
Basic Principles of website designing
Basic Principles of website designing Basic Principles of website designing
Basic Principles of website designing
 
Navigating Excellence Seattle's Top 10 Web Design Services Spotlighting Tatia...
Navigating Excellence Seattle's Top 10 Web Design Services Spotlighting Tatia...Navigating Excellence Seattle's Top 10 Web Design Services Spotlighting Tatia...
Navigating Excellence Seattle's Top 10 Web Design Services Spotlighting Tatia...
 

More from Bruce Clary

Athletic Orientation-2015
Athletic Orientation-2015Athletic Orientation-2015
Athletic Orientation-2015
Bruce Clary
 
WPD Training
WPD TrainingWPD Training
WPD Training
Bruce Clary
 
Writing the Self-Study Report
Writing the Self-Study ReportWriting the Self-Study Report
Writing the Self-Study Report
Bruce Clary
 
Understanding the English Sentence: Lesson 1
Understanding the English Sentence: Lesson 1Understanding the English Sentence: Lesson 1
Understanding the English Sentence: Lesson 1
Bruce Clary
 
The Pierless Bridge: Emily Dickinson's Poems of Faith and Doubt
The Pierless Bridge: Emily Dickinson's Poems of Faith and DoubtThe Pierless Bridge: Emily Dickinson's Poems of Faith and Doubt
The Pierless Bridge: Emily Dickinson's Poems of Faith and Doubt
Bruce Clary
 
"You didn't build that": Copyright, Fair Use, and the Creative Commons Movement
"You didn't build that": Copyright, Fair Use, and the Creative Commons Movement"You didn't build that": Copyright, Fair Use, and the Creative Commons Movement
"You didn't build that": Copyright, Fair Use, and the Creative Commons Movement
Bruce Clary
 
African Americans in the Civil War
African Americans in the Civil WarAfrican Americans in the Civil War
African Americans in the Civil WarBruce Clary
 
The Civil War in the Age of Civil Rights
The Civil War in the Age of Civil RightsThe Civil War in the Age of Civil Rights
The Civil War in the Age of Civil RightsBruce Clary
 
Gone with the Wind: High Water Mark of the Lost Cause
Gone with the Wind: High Water Mark of the Lost CauseGone with the Wind: High Water Mark of the Lost Cause
Gone with the Wind: High Water Mark of the Lost CauseBruce Clary
 
Southern Honor
Southern HonorSouthern Honor
Southern Honor
Bruce Clary
 
Journey to Gettysburg
Journey to GettysburgJourney to Gettysburg
Journey to Gettysburg
Bruce Clary
 
Four Major Interpretive Tradition of the American Civil War
Four Major Interpretive Tradition of the American Civil WarFour Major Interpretive Tradition of the American Civil War
Four Major Interpretive Tradition of the American Civil War
Bruce Clary
 
Still Fighting the Civil War
Still Fighting the Civil WarStill Fighting the Civil War
Still Fighting the Civil War
Bruce Clary
 
Student Use of Multimedia: What You Need to Know
Student Use of Multimedia: What You Need to KnowStudent Use of Multimedia: What You Need to Know
Student Use of Multimedia: What You Need to Know
Bruce Clary
 
Editing stills
Editing stillsEditing stills
Editing stills
Bruce Clary
 
Puritan Essentials
Puritan EssentialsPuritan Essentials
Puritan EssentialsBruce Clary
 
Elements of Journalism, Chap 1
Elements of Journalism, Chap 1Elements of Journalism, Chap 1
Elements of Journalism, Chap 1Bruce Clary
 
Preparing the Persuasive Speech
Preparing the Persuasive SpeechPreparing the Persuasive Speech
Preparing the Persuasive Speech
Bruce Clary
 

More from Bruce Clary (20)

Athletic Orientation-2015
Athletic Orientation-2015Athletic Orientation-2015
Athletic Orientation-2015
 
WPD Training
WPD TrainingWPD Training
WPD Training
 
Writing the Self-Study Report
Writing the Self-Study ReportWriting the Self-Study Report
Writing the Self-Study Report
 
Understanding the English Sentence: Lesson 1
Understanding the English Sentence: Lesson 1Understanding the English Sentence: Lesson 1
Understanding the English Sentence: Lesson 1
 
The Pierless Bridge: Emily Dickinson's Poems of Faith and Doubt
The Pierless Bridge: Emily Dickinson's Poems of Faith and DoubtThe Pierless Bridge: Emily Dickinson's Poems of Faith and Doubt
The Pierless Bridge: Emily Dickinson's Poems of Faith and Doubt
 
"You didn't build that": Copyright, Fair Use, and the Creative Commons Movement
"You didn't build that": Copyright, Fair Use, and the Creative Commons Movement"You didn't build that": Copyright, Fair Use, and the Creative Commons Movement
"You didn't build that": Copyright, Fair Use, and the Creative Commons Movement
 
African Americans in the Civil War
African Americans in the Civil WarAfrican Americans in the Civil War
African Americans in the Civil War
 
The Civil War in the Age of Civil Rights
The Civil War in the Age of Civil RightsThe Civil War in the Age of Civil Rights
The Civil War in the Age of Civil Rights
 
Gone with the Wind: High Water Mark of the Lost Cause
Gone with the Wind: High Water Mark of the Lost CauseGone with the Wind: High Water Mark of the Lost Cause
Gone with the Wind: High Water Mark of the Lost Cause
 
Southern Honor
Southern HonorSouthern Honor
Southern Honor
 
Journey to Gettysburg
Journey to GettysburgJourney to Gettysburg
Journey to Gettysburg
 
Four Major Interpretive Tradition of the American Civil War
Four Major Interpretive Tradition of the American Civil WarFour Major Interpretive Tradition of the American Civil War
Four Major Interpretive Tradition of the American Civil War
 
Still Fighting the Civil War
Still Fighting the Civil WarStill Fighting the Civil War
Still Fighting the Civil War
 
Student Use of Multimedia: What You Need to Know
Student Use of Multimedia: What You Need to KnowStudent Use of Multimedia: What You Need to Know
Student Use of Multimedia: What You Need to Know
 
Editing stills
Editing stillsEditing stills
Editing stills
 
Presentation1
Presentation1Presentation1
Presentation1
 
Ex3
Ex3Ex3
Ex3
 
Puritan Essentials
Puritan EssentialsPuritan Essentials
Puritan Essentials
 
Elements of Journalism, Chap 1
Elements of Journalism, Chap 1Elements of Journalism, Chap 1
Elements of Journalism, Chap 1
 
Preparing the Persuasive Speech
Preparing the Persuasive SpeechPreparing the Persuasive Speech
Preparing the Persuasive Speech
 

Recently uploaded

Supporting (UKRI) OA monographs at Salford.pptx
Supporting (UKRI) OA monographs at Salford.pptxSupporting (UKRI) OA monographs at Salford.pptx
Supporting (UKRI) OA monographs at Salford.pptx
Jisc
 
How to Make a Field invisible in Odoo 17
How to Make a Field invisible in Odoo 17How to Make a Field invisible in Odoo 17
How to Make a Field invisible in Odoo 17
Celine George
 
1.4 modern child centered education - mahatma gandhi-2.pptx
1.4 modern child centered education - mahatma gandhi-2.pptx1.4 modern child centered education - mahatma gandhi-2.pptx
1.4 modern child centered education - mahatma gandhi-2.pptx
JosvitaDsouza2
 
CACJapan - GROUP Presentation 1- Wk 4.pdf
CACJapan - GROUP Presentation 1- Wk 4.pdfCACJapan - GROUP Presentation 1- Wk 4.pdf
CACJapan - GROUP Presentation 1- Wk 4.pdf
camakaiclarkmusic
 
How libraries can support authors with open access requirements for UKRI fund...
How libraries can support authors with open access requirements for UKRI fund...How libraries can support authors with open access requirements for UKRI fund...
How libraries can support authors with open access requirements for UKRI fund...
Jisc
 
Palestine last event orientationfvgnh .pptx
Palestine last event orientationfvgnh .pptxPalestine last event orientationfvgnh .pptx
Palestine last event orientationfvgnh .pptx
RaedMohamed3
 
BÀI TẬP BỔ TRỢ TIẾNG ANH GLOBAL SUCCESS LỚP 3 - CẢ NĂM (CÓ FILE NGHE VÀ ĐÁP Á...
BÀI TẬP BỔ TRỢ TIẾNG ANH GLOBAL SUCCESS LỚP 3 - CẢ NĂM (CÓ FILE NGHE VÀ ĐÁP Á...BÀI TẬP BỔ TRỢ TIẾNG ANH GLOBAL SUCCESS LỚP 3 - CẢ NĂM (CÓ FILE NGHE VÀ ĐÁP Á...
BÀI TẬP BỔ TRỢ TIẾNG ANH GLOBAL SUCCESS LỚP 3 - CẢ NĂM (CÓ FILE NGHE VÀ ĐÁP Á...
Nguyen Thanh Tu Collection
 
Francesca Gottschalk - How can education support child empowerment.pptx
Francesca Gottschalk - How can education support child empowerment.pptxFrancesca Gottschalk - How can education support child empowerment.pptx
Francesca Gottschalk - How can education support child empowerment.pptx
EduSkills OECD
 
Home assignment II on Spectroscopy 2024 Answers.pdf
Home assignment II on Spectroscopy 2024 Answers.pdfHome assignment II on Spectroscopy 2024 Answers.pdf
Home assignment II on Spectroscopy 2024 Answers.pdf
Tamralipta Mahavidyalaya
 
Language Across the Curriculm LAC B.Ed.
Language Across the  Curriculm LAC B.Ed.Language Across the  Curriculm LAC B.Ed.
Language Across the Curriculm LAC B.Ed.
Atul Kumar Singh
 
Lapbook sobre os Regimes Totalitários.pdf
Lapbook sobre os Regimes Totalitários.pdfLapbook sobre os Regimes Totalitários.pdf
Lapbook sobre os Regimes Totalitários.pdf
Jean Carlos Nunes Paixão
 
Embracing GenAI - A Strategic Imperative
Embracing GenAI - A Strategic ImperativeEmbracing GenAI - A Strategic Imperative
Embracing GenAI - A Strategic Imperative
Peter Windle
 
Digital Tools and AI for Teaching Learning and Research
Digital Tools and AI for Teaching Learning and ResearchDigital Tools and AI for Teaching Learning and Research
Digital Tools and AI for Teaching Learning and Research
Vikramjit Singh
 
Phrasal Verbs.XXXXXXXXXXXXXXXXXXXXXXXXXX
Phrasal Verbs.XXXXXXXXXXXXXXXXXXXXXXXXXXPhrasal Verbs.XXXXXXXXXXXXXXXXXXXXXXXXXX
Phrasal Verbs.XXXXXXXXXXXXXXXXXXXXXXXXXX
MIRIAMSALINAS13
 
Acetabularia Information For Class 9 .docx
Acetabularia Information For Class 9  .docxAcetabularia Information For Class 9  .docx
Acetabularia Information For Class 9 .docx
vaibhavrinwa19
 
CLASS 11 CBSE B.St Project AIDS TO TRADE - INSURANCE
CLASS 11 CBSE B.St Project AIDS TO TRADE - INSURANCECLASS 11 CBSE B.St Project AIDS TO TRADE - INSURANCE
CLASS 11 CBSE B.St Project AIDS TO TRADE - INSURANCE
BhavyaRajput3
 
"Protectable subject matters, Protection in biotechnology, Protection of othe...
"Protectable subject matters, Protection in biotechnology, Protection of othe..."Protectable subject matters, Protection in biotechnology, Protection of othe...
"Protectable subject matters, Protection in biotechnology, Protection of othe...
SACHIN R KONDAGURI
 
Welcome to TechSoup New Member Orientation and Q&A (May 2024).pdf
Welcome to TechSoup   New Member Orientation and Q&A (May 2024).pdfWelcome to TechSoup   New Member Orientation and Q&A (May 2024).pdf
Welcome to TechSoup New Member Orientation and Q&A (May 2024).pdf
TechSoup
 
Additional Benefits for Employee Website.pdf
Additional Benefits for Employee Website.pdfAdditional Benefits for Employee Website.pdf
Additional Benefits for Employee Website.pdf
joachimlavalley1
 
The Accursed House by Émile Gaboriau.pptx
The Accursed House by Émile Gaboriau.pptxThe Accursed House by Émile Gaboriau.pptx
The Accursed House by Émile Gaboriau.pptx
DhatriParmar
 

Recently uploaded (20)

Supporting (UKRI) OA monographs at Salford.pptx
Supporting (UKRI) OA monographs at Salford.pptxSupporting (UKRI) OA monographs at Salford.pptx
Supporting (UKRI) OA monographs at Salford.pptx
 
How to Make a Field invisible in Odoo 17
How to Make a Field invisible in Odoo 17How to Make a Field invisible in Odoo 17
How to Make a Field invisible in Odoo 17
 
1.4 modern child centered education - mahatma gandhi-2.pptx
1.4 modern child centered education - mahatma gandhi-2.pptx1.4 modern child centered education - mahatma gandhi-2.pptx
1.4 modern child centered education - mahatma gandhi-2.pptx
 
CACJapan - GROUP Presentation 1- Wk 4.pdf
CACJapan - GROUP Presentation 1- Wk 4.pdfCACJapan - GROUP Presentation 1- Wk 4.pdf
CACJapan - GROUP Presentation 1- Wk 4.pdf
 
How libraries can support authors with open access requirements for UKRI fund...
How libraries can support authors with open access requirements for UKRI fund...How libraries can support authors with open access requirements for UKRI fund...
How libraries can support authors with open access requirements for UKRI fund...
 
Palestine last event orientationfvgnh .pptx
Palestine last event orientationfvgnh .pptxPalestine last event orientationfvgnh .pptx
Palestine last event orientationfvgnh .pptx
 
BÀI TẬP BỔ TRỢ TIẾNG ANH GLOBAL SUCCESS LỚP 3 - CẢ NĂM (CÓ FILE NGHE VÀ ĐÁP Á...
BÀI TẬP BỔ TRỢ TIẾNG ANH GLOBAL SUCCESS LỚP 3 - CẢ NĂM (CÓ FILE NGHE VÀ ĐÁP Á...BÀI TẬP BỔ TRỢ TIẾNG ANH GLOBAL SUCCESS LỚP 3 - CẢ NĂM (CÓ FILE NGHE VÀ ĐÁP Á...
BÀI TẬP BỔ TRỢ TIẾNG ANH GLOBAL SUCCESS LỚP 3 - CẢ NĂM (CÓ FILE NGHE VÀ ĐÁP Á...
 
Francesca Gottschalk - How can education support child empowerment.pptx
Francesca Gottschalk - How can education support child empowerment.pptxFrancesca Gottschalk - How can education support child empowerment.pptx
Francesca Gottschalk - How can education support child empowerment.pptx
 
Home assignment II on Spectroscopy 2024 Answers.pdf
Home assignment II on Spectroscopy 2024 Answers.pdfHome assignment II on Spectroscopy 2024 Answers.pdf
Home assignment II on Spectroscopy 2024 Answers.pdf
 
Language Across the Curriculm LAC B.Ed.
Language Across the  Curriculm LAC B.Ed.Language Across the  Curriculm LAC B.Ed.
Language Across the Curriculm LAC B.Ed.
 
Lapbook sobre os Regimes Totalitários.pdf
Lapbook sobre os Regimes Totalitários.pdfLapbook sobre os Regimes Totalitários.pdf
Lapbook sobre os Regimes Totalitários.pdf
 
Embracing GenAI - A Strategic Imperative
Embracing GenAI - A Strategic ImperativeEmbracing GenAI - A Strategic Imperative
Embracing GenAI - A Strategic Imperative
 
Digital Tools and AI for Teaching Learning and Research
Digital Tools and AI for Teaching Learning and ResearchDigital Tools and AI for Teaching Learning and Research
Digital Tools and AI for Teaching Learning and Research
 
Phrasal Verbs.XXXXXXXXXXXXXXXXXXXXXXXXXX
Phrasal Verbs.XXXXXXXXXXXXXXXXXXXXXXXXXXPhrasal Verbs.XXXXXXXXXXXXXXXXXXXXXXXXXX
Phrasal Verbs.XXXXXXXXXXXXXXXXXXXXXXXXXX
 
Acetabularia Information For Class 9 .docx
Acetabularia Information For Class 9  .docxAcetabularia Information For Class 9  .docx
Acetabularia Information For Class 9 .docx
 
CLASS 11 CBSE B.St Project AIDS TO TRADE - INSURANCE
CLASS 11 CBSE B.St Project AIDS TO TRADE - INSURANCECLASS 11 CBSE B.St Project AIDS TO TRADE - INSURANCE
CLASS 11 CBSE B.St Project AIDS TO TRADE - INSURANCE
 
"Protectable subject matters, Protection in biotechnology, Protection of othe...
"Protectable subject matters, Protection in biotechnology, Protection of othe..."Protectable subject matters, Protection in biotechnology, Protection of othe...
"Protectable subject matters, Protection in biotechnology, Protection of othe...
 
Welcome to TechSoup New Member Orientation and Q&A (May 2024).pdf
Welcome to TechSoup   New Member Orientation and Q&A (May 2024).pdfWelcome to TechSoup   New Member Orientation and Q&A (May 2024).pdf
Welcome to TechSoup New Member Orientation and Q&A (May 2024).pdf
 
Additional Benefits for Employee Website.pdf
Additional Benefits for Employee Website.pdfAdditional Benefits for Employee Website.pdf
Additional Benefits for Employee Website.pdf
 
The Accursed House by Émile Gaboriau.pptx
The Accursed House by Émile Gaboriau.pptxThe Accursed House by Émile Gaboriau.pptx
The Accursed House by Émile Gaboriau.pptx
 

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
  • 68.
  • 69. AR340 WEB-BASED DESIGN ● FALL 2010
  • 70.
  • 71.
  • 72. AR340 WEB-BASED DESIGN ● FALL 2010