SlideShare a Scribd company logo
P
A
R
C
Using CRAP web design for eLearning
Design Matters
CRAP is a set of principles for visual web design
Improve your eLearning design by applying these basic principles
Adapted from https://elearningindustry.com/using-crap-web-design-for-elearning
Williams R. 2008. The non-designers design book.
Design Matters
Contrast
Alignment Proximity
Repetition
Use contrast in shapes and colours to draw attention to different elements Repetition creates a consistency in your design
Using alignment organises and connects your content Elements that are related should be placed in close proximity to each other
Contrast
Use contrast in shapes and colours to draw attention to different elements
Size
Shape
Colour
Fonts
Elements include:
Repetition creates a consistency in your design
Repetition
Repeat elements such as:
Shapes and Sizes
Colours
Spatial Relationships
Lines
Alignment
Using alignment organises and connects your content
Edge Alignment - elements are aligned on the side
Center Alignment - elements are aligned at the top
Alignment creates an invisible margin
Bottom Alignment - elements are aligned at the bottom
Proximity
Elements that are related should be placed in close proximity to each other
Organise Information
Reduce Clutter
Increase Learner Understanding
Design Matters
Typography
White Space Colours
Layout
FontFont
use only two styles of
size highlights importance
remember colour contrast
FOCUS ON POSITIONING
make it easy to scan
Make use of open space to
keep your design balanced
Use two or three complimentary colours
Other design principles to keep in mind include:

More Related Content

Similar to Crap design for e learning

Group7 elements-of-design-97-03
Group7 elements-of-design-97-03Group7 elements-of-design-97-03
Group7 elements-of-design-97-03
Christopher
 
Designing for Discoverability
Designing for DiscoverabilityDesigning for Discoverability
Designing for Discoverability
Molecular Inc
 
ET_lESSON_6.pptx
ET_lESSON_6.pptxET_lESSON_6.pptx
ET_lESSON_6.pptx
Rhoan4
 
How to select and create an effective visual for your business presentation
How to select and create an effective visual for your business presentationHow to select and create an effective visual for your business presentation
How to select and create an effective visual for your business presentation
Dave Paradi
 
Fourdesignprinciples
FourdesignprinciplesFourdesignprinciples
Fourdesignprinciples
Julie Lemley
 
Introducing the CRAP Design Principles
Introducing the CRAP Design PrinciplesIntroducing the CRAP Design Principles
Introducing the CRAP Design Principles
Ka Ni Kanichihk Inc
 
How to use Canva to effectively promote your brand?
How to use Canva to effectively promote your brand?How to use Canva to effectively promote your brand?
How to use Canva to effectively promote your brand?
Evelyn Jara
 
Pattern
PatternPattern
Pattern
Alpha Natial
 
Pattern (report)
Pattern (report)Pattern (report)
Pattern (report)
Alpha Natial
 
Pattern- report
Pattern- reportPattern- report
Pattern- report
Alpha Natial
 
Pattern
PatternPattern
Pattern
Alpha Natial
 
Basic design
Basic designBasic design
Principles and elements of design
Principles and elements of designPrinciples and elements of design
Principles and elements of design
smizener
 
Front end UI with React online training | Front end UI with React training | ...
Front end UI with React online training | Front end UI with React training | ...Front end UI with React online training | Front end UI with React training | ...
Front end UI with React online training | Front end UI with React training | ...
Selfpaced
 
Web Design Concepts - Coding for Communicators
Web Design Concepts - Coding for CommunicatorsWeb Design Concepts - Coding for Communicators
Web Design Concepts - Coding for Communicators
Cindy Royal
 
Data visualization data sources data types- visual design
Data visualization   data sources   data types- visual designData visualization   data sources   data types- visual design
Data visualization data sources data types- visual design
ManokamnaKochar1
 
Design Overview
Design OverviewDesign Overview
Design Overview
Sam Georgi
 
Layouting.pptx
Layouting.pptxLayouting.pptx
Layouting.pptx
jamesnickseramines1
 
Ninghua Ch3
Ninghua Ch3Ninghua Ch3
Ninghua Ch3
ninghua
 
Mems Graphic Design Philosophy
Mems Graphic Design PhilosophyMems Graphic Design Philosophy
Mems Graphic Design Philosophy
Marisa Tapia
 

Similar to Crap design for e learning (20)

Group7 elements-of-design-97-03
Group7 elements-of-design-97-03Group7 elements-of-design-97-03
Group7 elements-of-design-97-03
 
Designing for Discoverability
Designing for DiscoverabilityDesigning for Discoverability
Designing for Discoverability
 
ET_lESSON_6.pptx
ET_lESSON_6.pptxET_lESSON_6.pptx
ET_lESSON_6.pptx
 
How to select and create an effective visual for your business presentation
How to select and create an effective visual for your business presentationHow to select and create an effective visual for your business presentation
How to select and create an effective visual for your business presentation
 
Fourdesignprinciples
FourdesignprinciplesFourdesignprinciples
Fourdesignprinciples
 
Introducing the CRAP Design Principles
Introducing the CRAP Design PrinciplesIntroducing the CRAP Design Principles
Introducing the CRAP Design Principles
 
How to use Canva to effectively promote your brand?
How to use Canva to effectively promote your brand?How to use Canva to effectively promote your brand?
How to use Canva to effectively promote your brand?
 
Pattern
PatternPattern
Pattern
 
Pattern (report)
Pattern (report)Pattern (report)
Pattern (report)
 
Pattern- report
Pattern- reportPattern- report
Pattern- report
 
Pattern
PatternPattern
Pattern
 
Basic design
Basic designBasic design
Basic design
 
Principles and elements of design
Principles and elements of designPrinciples and elements of design
Principles and elements of design
 
Front end UI with React online training | Front end UI with React training | ...
Front end UI with React online training | Front end UI with React training | ...Front end UI with React online training | Front end UI with React training | ...
Front end UI with React online training | Front end UI with React training | ...
 
Web Design Concepts - Coding for Communicators
Web Design Concepts - Coding for CommunicatorsWeb Design Concepts - Coding for Communicators
Web Design Concepts - Coding for Communicators
 
Data visualization data sources data types- visual design
Data visualization   data sources   data types- visual designData visualization   data sources   data types- visual design
Data visualization data sources data types- visual design
 
Design Overview
Design OverviewDesign Overview
Design Overview
 
Layouting.pptx
Layouting.pptxLayouting.pptx
Layouting.pptx
 
Ninghua Ch3
Ninghua Ch3Ninghua Ch3
Ninghua Ch3
 
Mems Graphic Design Philosophy
Mems Graphic Design PhilosophyMems Graphic Design Philosophy
Mems Graphic Design Philosophy
 

Recently uploaded

مصحف القراءات العشر أعد أحرف الخلاف سمير بسيوني.pdf
مصحف القراءات العشر   أعد أحرف الخلاف سمير بسيوني.pdfمصحف القراءات العشر   أعد أحرف الخلاف سمير بسيوني.pdf
مصحف القراءات العشر أعد أحرف الخلاف سمير بسيوني.pdf
سمير بسيوني
 
Skimbleshanks-The-Railway-Cat by T S Eliot
Skimbleshanks-The-Railway-Cat by T S EliotSkimbleshanks-The-Railway-Cat by T S Eliot
Skimbleshanks-The-Railway-Cat by T S Eliot
nitinpv4ai
 
CHUYÊN ĐỀ ÔN TẬP VÀ PHÁT TRIỂN CÂU HỎI TRONG ĐỀ MINH HỌA THI TỐT NGHIỆP THPT ...
CHUYÊN ĐỀ ÔN TẬP VÀ PHÁT TRIỂN CÂU HỎI TRONG ĐỀ MINH HỌA THI TỐT NGHIỆP THPT ...CHUYÊN ĐỀ ÔN TẬP VÀ PHÁT TRIỂN CÂU HỎI TRONG ĐỀ MINH HỌA THI TỐT NGHIỆP THPT ...
CHUYÊN ĐỀ ÔN TẬP VÀ PHÁT TRIỂN CÂU HỎI TRONG ĐỀ MINH HỌA THI TỐT NGHIỆP THPT ...
Nguyen Thanh Tu Collection
 
Geography as a Discipline Chapter 1 __ Class 11 Geography NCERT _ Class Notes...
Geography as a Discipline Chapter 1 __ Class 11 Geography NCERT _ Class Notes...Geography as a Discipline Chapter 1 __ Class 11 Geography NCERT _ Class Notes...
Geography as a Discipline Chapter 1 __ Class 11 Geography NCERT _ Class Notes...
ImMuslim
 
Oliver Asks for More by Charles Dickens (9)
Oliver Asks for More by Charles Dickens (9)Oliver Asks for More by Charles Dickens (9)
Oliver Asks for More by Charles Dickens (9)
nitinpv4ai
 
RHEOLOGY Physical pharmaceutics-II notes for B.pharm 4th sem students
RHEOLOGY Physical pharmaceutics-II notes for B.pharm 4th sem studentsRHEOLOGY Physical pharmaceutics-II notes for B.pharm 4th sem students
RHEOLOGY Physical pharmaceutics-II notes for B.pharm 4th sem students
Himanshu Rai
 
Accounting for Restricted Grants When and How To Record Properly
Accounting for Restricted Grants  When and How To Record ProperlyAccounting for Restricted Grants  When and How To Record Properly
Accounting for Restricted Grants When and How To Record Properly
TechSoup
 
Elevate Your Nonprofit's Online Presence_ A Guide to Effective SEO Strategies...
Elevate Your Nonprofit's Online Presence_ A Guide to Effective SEO Strategies...Elevate Your Nonprofit's Online Presence_ A Guide to Effective SEO Strategies...
Elevate Your Nonprofit's Online Presence_ A Guide to Effective SEO Strategies...
TechSoup
 
spot a liar (Haiqa 146).pptx Technical writhing and presentation skills
spot a liar (Haiqa 146).pptx Technical writhing and presentation skillsspot a liar (Haiqa 146).pptx Technical writhing and presentation skills
spot a liar (Haiqa 146).pptx Technical writhing and presentation skills
haiqairshad
 
Level 3 NCEA - NZ: A Nation In the Making 1872 - 1900 SML.ppt
Level 3 NCEA - NZ: A  Nation In the Making 1872 - 1900 SML.pptLevel 3 NCEA - NZ: A  Nation In the Making 1872 - 1900 SML.ppt
Level 3 NCEA - NZ: A Nation In the Making 1872 - 1900 SML.ppt
Henry Hollis
 
Leveraging Generative AI to Drive Nonprofit Innovation
Leveraging Generative AI to Drive Nonprofit InnovationLeveraging Generative AI to Drive Nonprofit Innovation
Leveraging Generative AI to Drive Nonprofit Innovation
TechSoup
 
SWOT analysis in the project Keeping the Memory @live.pptx
SWOT analysis in the project Keeping the Memory @live.pptxSWOT analysis in the project Keeping the Memory @live.pptx
SWOT analysis in the project Keeping the Memory @live.pptx
zuzanka
 
RESULTS OF THE EVALUATION QUESTIONNAIRE.pptx
RESULTS OF THE EVALUATION QUESTIONNAIRE.pptxRESULTS OF THE EVALUATION QUESTIONNAIRE.pptx
RESULTS OF THE EVALUATION QUESTIONNAIRE.pptx
zuzanka
 
Standardized tool for Intelligence test.
Standardized tool for Intelligence test.Standardized tool for Intelligence test.
Standardized tool for Intelligence test.
deepaannamalai16
 
Pharmaceutics Pharmaceuticals best of brub
Pharmaceutics Pharmaceuticals best of brubPharmaceutics Pharmaceuticals best of brub
Pharmaceutics Pharmaceuticals best of brub
danielkiash986
 
Benner "Expanding Pathways to Publishing Careers"
Benner "Expanding Pathways to Publishing Careers"Benner "Expanding Pathways to Publishing Careers"
Benner "Expanding Pathways to Publishing Careers"
National Information Standards Organization (NISO)
 
Educational Technology in the Health Sciences
Educational Technology in the Health SciencesEducational Technology in the Health Sciences
Educational Technology in the Health Sciences
Iris Thiele Isip-Tan
 
skeleton System.pdf (skeleton system wow)
skeleton System.pdf (skeleton system wow)skeleton System.pdf (skeleton system wow)
skeleton System.pdf (skeleton system wow)
Mohammad Al-Dhahabi
 
NIPER 2024 MEMORY BASED QUESTIONS.ANSWERS TO NIPER 2024 QUESTIONS.NIPER JEE 2...
NIPER 2024 MEMORY BASED QUESTIONS.ANSWERS TO NIPER 2024 QUESTIONS.NIPER JEE 2...NIPER 2024 MEMORY BASED QUESTIONS.ANSWERS TO NIPER 2024 QUESTIONS.NIPER JEE 2...
NIPER 2024 MEMORY BASED QUESTIONS.ANSWERS TO NIPER 2024 QUESTIONS.NIPER JEE 2...
Payaamvohra1
 
REASIGNACION 2024 UGEL CHUPACA 2024 UGEL CHUPACA.pdf
REASIGNACION 2024 UGEL CHUPACA 2024 UGEL CHUPACA.pdfREASIGNACION 2024 UGEL CHUPACA 2024 UGEL CHUPACA.pdf
REASIGNACION 2024 UGEL CHUPACA 2024 UGEL CHUPACA.pdf
giancarloi8888
 

Recently uploaded (20)

مصحف القراءات العشر أعد أحرف الخلاف سمير بسيوني.pdf
مصحف القراءات العشر   أعد أحرف الخلاف سمير بسيوني.pdfمصحف القراءات العشر   أعد أحرف الخلاف سمير بسيوني.pdf
مصحف القراءات العشر أعد أحرف الخلاف سمير بسيوني.pdf
 
Skimbleshanks-The-Railway-Cat by T S Eliot
Skimbleshanks-The-Railway-Cat by T S EliotSkimbleshanks-The-Railway-Cat by T S Eliot
Skimbleshanks-The-Railway-Cat by T S Eliot
 
CHUYÊN ĐỀ ÔN TẬP VÀ PHÁT TRIỂN CÂU HỎI TRONG ĐỀ MINH HỌA THI TỐT NGHIỆP THPT ...
CHUYÊN ĐỀ ÔN TẬP VÀ PHÁT TRIỂN CÂU HỎI TRONG ĐỀ MINH HỌA THI TỐT NGHIỆP THPT ...CHUYÊN ĐỀ ÔN TẬP VÀ PHÁT TRIỂN CÂU HỎI TRONG ĐỀ MINH HỌA THI TỐT NGHIỆP THPT ...
CHUYÊN ĐỀ ÔN TẬP VÀ PHÁT TRIỂN CÂU HỎI TRONG ĐỀ MINH HỌA THI TỐT NGHIỆP THPT ...
 
Geography as a Discipline Chapter 1 __ Class 11 Geography NCERT _ Class Notes...
Geography as a Discipline Chapter 1 __ Class 11 Geography NCERT _ Class Notes...Geography as a Discipline Chapter 1 __ Class 11 Geography NCERT _ Class Notes...
Geography as a Discipline Chapter 1 __ Class 11 Geography NCERT _ Class Notes...
 
Oliver Asks for More by Charles Dickens (9)
Oliver Asks for More by Charles Dickens (9)Oliver Asks for More by Charles Dickens (9)
Oliver Asks for More by Charles Dickens (9)
 
RHEOLOGY Physical pharmaceutics-II notes for B.pharm 4th sem students
RHEOLOGY Physical pharmaceutics-II notes for B.pharm 4th sem studentsRHEOLOGY Physical pharmaceutics-II notes for B.pharm 4th sem students
RHEOLOGY Physical pharmaceutics-II notes for B.pharm 4th sem students
 
Accounting for Restricted Grants When and How To Record Properly
Accounting for Restricted Grants  When and How To Record ProperlyAccounting for Restricted Grants  When and How To Record Properly
Accounting for Restricted Grants When and How To Record Properly
 
Elevate Your Nonprofit's Online Presence_ A Guide to Effective SEO Strategies...
Elevate Your Nonprofit's Online Presence_ A Guide to Effective SEO Strategies...Elevate Your Nonprofit's Online Presence_ A Guide to Effective SEO Strategies...
Elevate Your Nonprofit's Online Presence_ A Guide to Effective SEO Strategies...
 
spot a liar (Haiqa 146).pptx Technical writhing and presentation skills
spot a liar (Haiqa 146).pptx Technical writhing and presentation skillsspot a liar (Haiqa 146).pptx Technical writhing and presentation skills
spot a liar (Haiqa 146).pptx Technical writhing and presentation skills
 
Level 3 NCEA - NZ: A Nation In the Making 1872 - 1900 SML.ppt
Level 3 NCEA - NZ: A  Nation In the Making 1872 - 1900 SML.pptLevel 3 NCEA - NZ: A  Nation In the Making 1872 - 1900 SML.ppt
Level 3 NCEA - NZ: A Nation In the Making 1872 - 1900 SML.ppt
 
Leveraging Generative AI to Drive Nonprofit Innovation
Leveraging Generative AI to Drive Nonprofit InnovationLeveraging Generative AI to Drive Nonprofit Innovation
Leveraging Generative AI to Drive Nonprofit Innovation
 
SWOT analysis in the project Keeping the Memory @live.pptx
SWOT analysis in the project Keeping the Memory @live.pptxSWOT analysis in the project Keeping the Memory @live.pptx
SWOT analysis in the project Keeping the Memory @live.pptx
 
RESULTS OF THE EVALUATION QUESTIONNAIRE.pptx
RESULTS OF THE EVALUATION QUESTIONNAIRE.pptxRESULTS OF THE EVALUATION QUESTIONNAIRE.pptx
RESULTS OF THE EVALUATION QUESTIONNAIRE.pptx
 
Standardized tool for Intelligence test.
Standardized tool for Intelligence test.Standardized tool for Intelligence test.
Standardized tool for Intelligence test.
 
Pharmaceutics Pharmaceuticals best of brub
Pharmaceutics Pharmaceuticals best of brubPharmaceutics Pharmaceuticals best of brub
Pharmaceutics Pharmaceuticals best of brub
 
Benner "Expanding Pathways to Publishing Careers"
Benner "Expanding Pathways to Publishing Careers"Benner "Expanding Pathways to Publishing Careers"
Benner "Expanding Pathways to Publishing Careers"
 
Educational Technology in the Health Sciences
Educational Technology in the Health SciencesEducational Technology in the Health Sciences
Educational Technology in the Health Sciences
 
skeleton System.pdf (skeleton system wow)
skeleton System.pdf (skeleton system wow)skeleton System.pdf (skeleton system wow)
skeleton System.pdf (skeleton system wow)
 
NIPER 2024 MEMORY BASED QUESTIONS.ANSWERS TO NIPER 2024 QUESTIONS.NIPER JEE 2...
NIPER 2024 MEMORY BASED QUESTIONS.ANSWERS TO NIPER 2024 QUESTIONS.NIPER JEE 2...NIPER 2024 MEMORY BASED QUESTIONS.ANSWERS TO NIPER 2024 QUESTIONS.NIPER JEE 2...
NIPER 2024 MEMORY BASED QUESTIONS.ANSWERS TO NIPER 2024 QUESTIONS.NIPER JEE 2...
 
REASIGNACION 2024 UGEL CHUPACA 2024 UGEL CHUPACA.pdf
REASIGNACION 2024 UGEL CHUPACA 2024 UGEL CHUPACA.pdfREASIGNACION 2024 UGEL CHUPACA 2024 UGEL CHUPACA.pdf
REASIGNACION 2024 UGEL CHUPACA 2024 UGEL CHUPACA.pdf
 

Crap design for e learning

  • 1. P A R C Using CRAP web design for eLearning Design Matters CRAP is a set of principles for visual web design Improve your eLearning design by applying these basic principles Adapted from https://elearningindustry.com/using-crap-web-design-for-elearning Williams R. 2008. The non-designers design book.
  • 2. Design Matters Contrast Alignment Proximity Repetition Use contrast in shapes and colours to draw attention to different elements Repetition creates a consistency in your design Using alignment organises and connects your content Elements that are related should be placed in close proximity to each other
  • 3. Contrast Use contrast in shapes and colours to draw attention to different elements Size Shape Colour Fonts Elements include:
  • 4. Repetition creates a consistency in your design Repetition Repeat elements such as: Shapes and Sizes Colours Spatial Relationships Lines
  • 5. Alignment Using alignment organises and connects your content Edge Alignment - elements are aligned on the side Center Alignment - elements are aligned at the top Alignment creates an invisible margin Bottom Alignment - elements are aligned at the bottom
  • 6. Proximity Elements that are related should be placed in close proximity to each other Organise Information Reduce Clutter Increase Learner Understanding
  • 7. Design Matters Typography White Space Colours Layout FontFont use only two styles of size highlights importance remember colour contrast FOCUS ON POSITIONING make it easy to scan Make use of open space to keep your design balanced Use two or three complimentary colours Other design principles to keep in mind include: