SlideShare a Scribd company logo
1 of 16
C.R.A.P. Design Principles Adapted from http://bit.ly/sjnw & Robin Williams “Non-Designers Design Book”
Contrast Elements that aren’t the same should be very different so they stand out.Making them “slightly different” confuses the user into seeing a relation that doesn’t exist.
Repetition Repeat visual elements of the design throughout the piece. You can repeat color, shape, texture, spatial relationships, line thicknesses, sizes, etc. This helps develop the organization and strengthens the unity. 1. Headings and subheadings.  2. Colors 3. Rules 4. Images 5. Graphical elements & logos
Before  After Repetition
Repetition
Alignment Nothing should be placed on the page arbitrarily. Every element should have some visual connection with another element on the page.
Alignment Examples Left alignment No alignment
More alignments Centered alignment Right alignment
Proximity Elements that are related should be grouped together, whereas separate design elements should have enough space in between to communicate they are different.
Before  After
Before  After
Fonts
Activity: rebuild this page Instructor information Lisa Dawley, Ph.D. lisadawley@boisestate.edu My hobbies include raising koi, playing World of Warcraft, traveling, and imagining the impossible. *Classes: EdTech 512, EdTech 597

More Related Content

What's hot

Asas rekaan grafik
Asas rekaan grafikAsas rekaan grafik
Asas rekaan grafikSMK Zainab 2
 
A crash course in typography
A crash course in typographyA crash course in typography
A crash course in typographyMigle Migle
 
Pengenalan asas lukisan
Pengenalan asas lukisanPengenalan asas lukisan
Pengenalan asas lukisanilaazmil2
 
Page Layout Techniques: Proximity
Page Layout Techniques: ProximityPage Layout Techniques: Proximity
Page Layout Techniques: Proximityclewis86
 
Graphic Design Elements&Principles
Graphic Design Elements&PrinciplesGraphic Design Elements&Principles
Graphic Design Elements&PrinciplesASM2O
 
Proximity - Graphic Design Principles
Proximity - Graphic Design PrinciplesProximity - Graphic Design Principles
Proximity - Graphic Design PrinciplesReza Moosavi
 
Graphic design composition
Graphic design compositionGraphic design composition
Graphic design compositionsuniltalekar1
 
Rgd modul 5.1 identiti korporat
Rgd modul 5.1 identiti korporat Rgd modul 5.1 identiti korporat
Rgd modul 5.1 identiti korporat SMK Zainab 2
 
Design Principles for All the Designers
Design Principles for All the DesignersDesign Principles for All the Designers
Design Principles for All the DesignersRavi Bhadauria
 
Principles of Design (part I) Gestalt Laws-Unity and Harmony
Principles of Design (part I) Gestalt Laws-Unity and Harmony Principles of Design (part I) Gestalt Laws-Unity and Harmony
Principles of Design (part I) Gestalt Laws-Unity and Harmony SAAD ALZAROONI, CM
 
KESATUAN TINGKATAN 1 PSV (KSSM)
KESATUAN TINGKATAN 1 PSV (KSSM)KESATUAN TINGKATAN 1 PSV (KSSM)
KESATUAN TINGKATAN 1 PSV (KSSM)NURFITRAH ZAINAL
 

What's hot (20)

Nota seni
Nota seniNota seni
Nota seni
 
Asas rekaan grafik
Asas rekaan grafikAsas rekaan grafik
Asas rekaan grafik
 
A crash course in typography
A crash course in typographyA crash course in typography
A crash course in typography
 
Pengenalan asas lukisan
Pengenalan asas lukisanPengenalan asas lukisan
Pengenalan asas lukisan
 
Page Layout Techniques: Proximity
Page Layout Techniques: ProximityPage Layout Techniques: Proximity
Page Layout Techniques: Proximity
 
Garisan ppt
Garisan pptGarisan ppt
Garisan ppt
 
Web Typography
Web TypographyWeb Typography
Web Typography
 
Asas grafik
Asas grafikAsas grafik
Asas grafik
 
Visual Design Fundamentals
Visual Design Fundamentals Visual Design Fundamentals
Visual Design Fundamentals
 
Rupa
RupaRupa
Rupa
 
Graphic Design Elements&Principles
Graphic Design Elements&PrinciplesGraphic Design Elements&Principles
Graphic Design Elements&Principles
 
Proximity - Graphic Design Principles
Proximity - Graphic Design PrinciplesProximity - Graphic Design Principles
Proximity - Graphic Design Principles
 
Understanding Color
Understanding ColorUnderstanding Color
Understanding Color
 
Graphic design composition
Graphic design compositionGraphic design composition
Graphic design composition
 
Lesson Study in Malaysia
Lesson Study in MalaysiaLesson Study in Malaysia
Lesson Study in Malaysia
 
Rgd modul 5.1 identiti korporat
Rgd modul 5.1 identiti korporat Rgd modul 5.1 identiti korporat
Rgd modul 5.1 identiti korporat
 
Design Principles for All the Designers
Design Principles for All the DesignersDesign Principles for All the Designers
Design Principles for All the Designers
 
Contoh rubrik psv
Contoh rubrik psvContoh rubrik psv
Contoh rubrik psv
 
Principles of Design (part I) Gestalt Laws-Unity and Harmony
Principles of Design (part I) Gestalt Laws-Unity and Harmony Principles of Design (part I) Gestalt Laws-Unity and Harmony
Principles of Design (part I) Gestalt Laws-Unity and Harmony
 
KESATUAN TINGKATAN 1 PSV (KSSM)
KESATUAN TINGKATAN 1 PSV (KSSM)KESATUAN TINGKATAN 1 PSV (KSSM)
KESATUAN TINGKATAN 1 PSV (KSSM)
 

Similar to Crap design

Principles of Design
Principles of DesignPrinciples of Design
Principles of Designasholst
 
Pubs chap 1 5
Pubs chap 1 5Pubs chap 1 5
Pubs chap 1 5yh00061
 
Group7 elements-of-design-97-03
Group7 elements-of-design-97-03Group7 elements-of-design-97-03
Group7 elements-of-design-97-03Christopher
 
Fourdesignprinciples
FourdesignprinciplesFourdesignprinciples
FourdesignprinciplesJulie Lemley
 
Basic Principles of Graphic Design
Basic Principles of Graphic DesignBasic Principles of Graphic Design
Basic Principles of Graphic DesignAnnie Zaharieva
 
Web Designer Gurugram |Web Designer in Gurugram
Web Designer Gurugram |Web Designer in GurugramWeb Designer Gurugram |Web Designer in Gurugram
Web Designer Gurugram |Web Designer in Gurugramshailenra
 
Fourdesignprinciples
FourdesignprinciplesFourdesignprinciples
FourdesignprinciplesJulie Lemley
 
The Four Design Principles
The Four Design PrinciplesThe Four Design Principles
The Four Design PrinciplesSherif Amin
 
Good And Bad Design Overview
Good And Bad Design OverviewGood And Bad Design Overview
Good And Bad Design Overviewrebachin
 
Chapter 1 Class PP Notes
Chapter 1 Class PP NotesChapter 1 Class PP Notes
Chapter 1 Class PP Notescmurphysvhs
 
Introduction to Design (Yearbook Class)
Introduction to Design (Yearbook Class)Introduction to Design (Yearbook Class)
Introduction to Design (Yearbook Class)Sam Georgi
 
Elements and Principles of Design
Elements and Principles of DesignElements and Principles of Design
Elements and Principles of DesignSam Georgi
 
WDD Chapter 1 class pp notes
WDD Chapter 1 class pp notesWDD Chapter 1 class pp notes
WDD Chapter 1 class pp notescmurphysvhs
 
Design Overview
Design OverviewDesign Overview
Design OverviewSam Georgi
 
Principles of good web design no1- unity
Principles of good web design no1- unityPrinciples of good web design no1- unity
Principles of good web design no1- unityUrsula Zajkowska
 
Graphic Design Basics 4 Principles Of Page Des
Graphic  Design  Basics 4  Principles Of  Page  DesGraphic  Design  Basics 4  Principles Of  Page  Des
Graphic Design Basics 4 Principles Of Page Desdarlinga
 
Graphics Design Basics
Graphics Design BasicsGraphics Design Basics
Graphics Design BasicsBART RADKA
 
The four design principles
The four design principlesThe four design principles
The four design principleskirkpatl
 
The four design principles
The four design principlesThe four design principles
The four design principlesbohleng
 

Similar to Crap design (20)

Principles of Design
Principles of DesignPrinciples of Design
Principles of Design
 
Pubs chap 1 5
Pubs chap 1 5Pubs chap 1 5
Pubs chap 1 5
 
Group7 elements-of-design-97-03
Group7 elements-of-design-97-03Group7 elements-of-design-97-03
Group7 elements-of-design-97-03
 
Fourdesignprinciples
FourdesignprinciplesFourdesignprinciples
Fourdesignprinciples
 
Dtp Design Elements
Dtp Design ElementsDtp Design Elements
Dtp Design Elements
 
Basic Principles of Graphic Design
Basic Principles of Graphic DesignBasic Principles of Graphic Design
Basic Principles of Graphic Design
 
Web Designer Gurugram |Web Designer in Gurugram
Web Designer Gurugram |Web Designer in GurugramWeb Designer Gurugram |Web Designer in Gurugram
Web Designer Gurugram |Web Designer in Gurugram
 
Fourdesignprinciples
FourdesignprinciplesFourdesignprinciples
Fourdesignprinciples
 
The Four Design Principles
The Four Design PrinciplesThe Four Design Principles
The Four Design Principles
 
Good And Bad Design Overview
Good And Bad Design OverviewGood And Bad Design Overview
Good And Bad Design Overview
 
Chapter 1 Class PP Notes
Chapter 1 Class PP NotesChapter 1 Class PP Notes
Chapter 1 Class PP Notes
 
Introduction to Design (Yearbook Class)
Introduction to Design (Yearbook Class)Introduction to Design (Yearbook Class)
Introduction to Design (Yearbook Class)
 
Elements and Principles of Design
Elements and Principles of DesignElements and Principles of Design
Elements and Principles of Design
 
WDD Chapter 1 class pp notes
WDD Chapter 1 class pp notesWDD Chapter 1 class pp notes
WDD Chapter 1 class pp notes
 
Design Overview
Design OverviewDesign Overview
Design Overview
 
Principles of good web design no1- unity
Principles of good web design no1- unityPrinciples of good web design no1- unity
Principles of good web design no1- unity
 
Graphic Design Basics 4 Principles Of Page Des
Graphic  Design  Basics 4  Principles Of  Page  DesGraphic  Design  Basics 4  Principles Of  Page  Des
Graphic Design Basics 4 Principles Of Page Des
 
Graphics Design Basics
Graphics Design BasicsGraphics Design Basics
Graphics Design Basics
 
The four design principles
The four design principlesThe four design principles
The four design principles
 
The four design principles
The four design principlesThe four design principles
The four design principles
 

More from Lisa Dawley

iLRN21 Creating Teen & Teacher Access to Social Good Innovation
iLRN21 Creating Teen & Teacher Access to Social Good InnovationiLRN21 Creating Teen & Teacher Access to Social Good Innovation
iLRN21 Creating Teen & Teacher Access to Social Good InnovationLisa Dawley
 
Online Design Toolkit
Online Design ToolkitOnline Design Toolkit
Online Design ToolkitLisa Dawley
 
Top 10 Online Teaching Strategies
Top 10 Online Teaching StrategiesTop 10 Online Teaching Strategies
Top 10 Online Teaching StrategiesLisa Dawley
 
Minecraft for Teachers
Minecraft for TeachersMinecraft for Teachers
Minecraft for TeachersLisa Dawley
 
Minecraft Winter Teacher Camp
Minecraft Winter Teacher CampMinecraft Winter Teacher Camp
Minecraft Winter Teacher CampLisa Dawley
 
QuestBoise 2015 & July Minecraft at 3D GameLab!
QuestBoise 2015 & July Minecraft at 3D GameLab!QuestBoise 2015 & July Minecraft at 3D GameLab!
QuestBoise 2015 & July Minecraft at 3D GameLab!Lisa Dawley
 
GoGo Labs Presenters Kit
GoGo Labs Presenters KitGoGo Labs Presenters Kit
GoGo Labs Presenters KitLisa Dawley
 
Idaho Teen GameLab
Idaho Teen GameLabIdaho Teen GameLab
Idaho Teen GameLabLisa Dawley
 
QuestBoise 2014 Virtual Unconference on Learning Gamification
QuestBoise 2014 Virtual Unconference on Learning GamificationQuestBoise 2014 Virtual Unconference on Learning Gamification
QuestBoise 2014 Virtual Unconference on Learning GamificationLisa Dawley
 
ISTE 2014: 3D GameLab Info
ISTE 2014: 3D GameLab InfoISTE 2014: 3D GameLab Info
ISTE 2014: 3D GameLab InfoLisa Dawley
 
Bowling & Bites, ISTE 2014
Bowling & Bites, ISTE 2014Bowling & Bites, ISTE 2014
Bowling & Bites, ISTE 2014Lisa Dawley
 
Spring 2014 Gamified Online Teacher Camps
Spring 2014 Gamified Online Teacher CampsSpring 2014 Gamified Online Teacher Camps
Spring 2014 Gamified Online Teacher CampsLisa Dawley
 
Winter Teacher Camps @3D GameLab: Game Design Camp!
Winter Teacher Camps @3D GameLab: Game Design Camp!Winter Teacher Camps @3D GameLab: Game Design Camp!
Winter Teacher Camps @3D GameLab: Game Design Camp!Lisa Dawley
 
Idaho Teen GameLab
Idaho Teen GameLabIdaho Teen GameLab
Idaho Teen GameLabLisa Dawley
 
Fall Online Teacher Camp in 3D GameLab
Fall Online Teacher Camp in 3D GameLabFall Online Teacher Camp in 3D GameLab
Fall Online Teacher Camp in 3D GameLabLisa Dawley
 
Digital Badges: Lessons Learned
Digital Badges: Lessons LearnedDigital Badges: Lessons Learned
Digital Badges: Lessons LearnedLisa Dawley
 
3D GameLab Online Teacher Camp
3D GameLab Online Teacher Camp3D GameLab Online Teacher Camp
3D GameLab Online Teacher CampLisa Dawley
 
3D GameLab Online Teacher Camp
3D GameLab Online Teacher Camp3D GameLab Online Teacher Camp
3D GameLab Online Teacher CampLisa Dawley
 
Understanding Quest Based Learning
Understanding Quest Based LearningUnderstanding Quest Based Learning
Understanding Quest Based LearningLisa Dawley
 
Attractive Quest Design
Attractive Quest DesignAttractive Quest Design
Attractive Quest DesignLisa Dawley
 

More from Lisa Dawley (20)

iLRN21 Creating Teen & Teacher Access to Social Good Innovation
iLRN21 Creating Teen & Teacher Access to Social Good InnovationiLRN21 Creating Teen & Teacher Access to Social Good Innovation
iLRN21 Creating Teen & Teacher Access to Social Good Innovation
 
Online Design Toolkit
Online Design ToolkitOnline Design Toolkit
Online Design Toolkit
 
Top 10 Online Teaching Strategies
Top 10 Online Teaching StrategiesTop 10 Online Teaching Strategies
Top 10 Online Teaching Strategies
 
Minecraft for Teachers
Minecraft for TeachersMinecraft for Teachers
Minecraft for Teachers
 
Minecraft Winter Teacher Camp
Minecraft Winter Teacher CampMinecraft Winter Teacher Camp
Minecraft Winter Teacher Camp
 
QuestBoise 2015 & July Minecraft at 3D GameLab!
QuestBoise 2015 & July Minecraft at 3D GameLab!QuestBoise 2015 & July Minecraft at 3D GameLab!
QuestBoise 2015 & July Minecraft at 3D GameLab!
 
GoGo Labs Presenters Kit
GoGo Labs Presenters KitGoGo Labs Presenters Kit
GoGo Labs Presenters Kit
 
Idaho Teen GameLab
Idaho Teen GameLabIdaho Teen GameLab
Idaho Teen GameLab
 
QuestBoise 2014 Virtual Unconference on Learning Gamification
QuestBoise 2014 Virtual Unconference on Learning GamificationQuestBoise 2014 Virtual Unconference on Learning Gamification
QuestBoise 2014 Virtual Unconference on Learning Gamification
 
ISTE 2014: 3D GameLab Info
ISTE 2014: 3D GameLab InfoISTE 2014: 3D GameLab Info
ISTE 2014: 3D GameLab Info
 
Bowling & Bites, ISTE 2014
Bowling & Bites, ISTE 2014Bowling & Bites, ISTE 2014
Bowling & Bites, ISTE 2014
 
Spring 2014 Gamified Online Teacher Camps
Spring 2014 Gamified Online Teacher CampsSpring 2014 Gamified Online Teacher Camps
Spring 2014 Gamified Online Teacher Camps
 
Winter Teacher Camps @3D GameLab: Game Design Camp!
Winter Teacher Camps @3D GameLab: Game Design Camp!Winter Teacher Camps @3D GameLab: Game Design Camp!
Winter Teacher Camps @3D GameLab: Game Design Camp!
 
Idaho Teen GameLab
Idaho Teen GameLabIdaho Teen GameLab
Idaho Teen GameLab
 
Fall Online Teacher Camp in 3D GameLab
Fall Online Teacher Camp in 3D GameLabFall Online Teacher Camp in 3D GameLab
Fall Online Teacher Camp in 3D GameLab
 
Digital Badges: Lessons Learned
Digital Badges: Lessons LearnedDigital Badges: Lessons Learned
Digital Badges: Lessons Learned
 
3D GameLab Online Teacher Camp
3D GameLab Online Teacher Camp3D GameLab Online Teacher Camp
3D GameLab Online Teacher Camp
 
3D GameLab Online Teacher Camp
3D GameLab Online Teacher Camp3D GameLab Online Teacher Camp
3D GameLab Online Teacher Camp
 
Understanding Quest Based Learning
Understanding Quest Based LearningUnderstanding Quest Based Learning
Understanding Quest Based Learning
 
Attractive Quest Design
Attractive Quest DesignAttractive Quest Design
Attractive Quest Design
 

Crap design

  • 1. C.R.A.P. Design Principles Adapted from http://bit.ly/sjnw & Robin Williams “Non-Designers Design Book”
  • 2. Contrast Elements that aren’t the same should be very different so they stand out.Making them “slightly different” confuses the user into seeing a relation that doesn’t exist.
  • 3.
  • 4.
  • 5.
  • 6. Repetition Repeat visual elements of the design throughout the piece. You can repeat color, shape, texture, spatial relationships, line thicknesses, sizes, etc. This helps develop the organization and strengthens the unity. 1. Headings and subheadings. 2. Colors 3. Rules 4. Images 5. Graphical elements & logos
  • 7. Before After Repetition
  • 9. Alignment Nothing should be placed on the page arbitrarily. Every element should have some visual connection with another element on the page.
  • 10. Alignment Examples Left alignment No alignment
  • 11. More alignments Centered alignment Right alignment
  • 12. Proximity Elements that are related should be grouped together, whereas separate design elements should have enough space in between to communicate they are different.
  • 15. Fonts
  • 16. Activity: rebuild this page Instructor information Lisa Dawley, Ph.D. lisadawley@boisestate.edu My hobbies include raising koi, playing World of Warcraft, traveling, and imagining the impossible. *Classes: EdTech 512, EdTech 597