![Page 1: Psychology of Design MAT122 Introduction to Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062301/5697c0151a28abf838ccdfff/html5/thumbnails/1.jpg)
Psychology of Psychology of DesignDesign
MAT122MAT122
Introduction to Web Introduction to Web DesignDesign
![Page 2: Psychology of Design MAT122 Introduction to Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062301/5697c0151a28abf838ccdfff/html5/thumbnails/2.jpg)
Elements of Web DesignElements of Web Design
ColorsColors ShapesShapes FontsFonts
![Page 3: Psychology of Design MAT122 Introduction to Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062301/5697c0151a28abf838ccdfff/html5/thumbnails/3.jpg)
Guess the ColorGuess the Color
PowerPower PassionPassion LoveLove AggressionAggression DangerDanger
![Page 4: Psychology of Design MAT122 Introduction to Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062301/5697c0151a28abf838ccdfff/html5/thumbnails/4.jpg)
RedRed
![Page 5: Psychology of Design MAT122 Introduction to Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062301/5697c0151a28abf838ccdfff/html5/thumbnails/5.jpg)
Guess the ColorGuess the Color
EnergyEnergy BalanceBalance WarmthWarmth
![Page 6: Psychology of Design MAT122 Introduction to Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062301/5697c0151a28abf838ccdfff/html5/thumbnails/6.jpg)
OrangeOrange
![Page 7: Psychology of Design MAT122 Introduction to Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062301/5697c0151a28abf838ccdfff/html5/thumbnails/7.jpg)
Guess the ColorGuess the Color
OptimismOptimism HopeHope PhilosophyPhilosophy CowardiceCowardice
![Page 8: Psychology of Design MAT122 Introduction to Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062301/5697c0151a28abf838ccdfff/html5/thumbnails/8.jpg)
YellowYellow
![Page 9: Psychology of Design MAT122 Introduction to Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062301/5697c0151a28abf838ccdfff/html5/thumbnails/9.jpg)
Guess the ColorGuess the Color
NatureNature HealthHealth Good LuckGood Luck
![Page 10: Psychology of Design MAT122 Introduction to Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062301/5697c0151a28abf838ccdfff/html5/thumbnails/10.jpg)
GreenGreen
![Page 11: Psychology of Design MAT122 Introduction to Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062301/5697c0151a28abf838ccdfff/html5/thumbnails/11.jpg)
Guess the ColorGuess the Color
TrustTrust ConservativeConservative SecuritySecurity TechnologyTechnology
![Page 12: Psychology of Design MAT122 Introduction to Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062301/5697c0151a28abf838ccdfff/html5/thumbnails/12.jpg)
BlueBlue
![Page 13: Psychology of Design MAT122 Introduction to Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062301/5697c0151a28abf838ccdfff/html5/thumbnails/13.jpg)
Guess the ColorGuess the Color
Spirituality Spirituality RoyaltyRoyalty MysteryMystery
![Page 14: Psychology of Design MAT122 Introduction to Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062301/5697c0151a28abf838ccdfff/html5/thumbnails/14.jpg)
PurplePurple
![Page 15: Psychology of Design MAT122 Introduction to Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062301/5697c0151a28abf838ccdfff/html5/thumbnails/15.jpg)
Guess the ColorGuess the Color
PowerPower SophisticationSophistication DeathDeath
![Page 16: Psychology of Design MAT122 Introduction to Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062301/5697c0151a28abf838ccdfff/html5/thumbnails/16.jpg)
BlackBlack
![Page 17: Psychology of Design MAT122 Introduction to Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062301/5697c0151a28abf838ccdfff/html5/thumbnails/17.jpg)
Guess the ColorGuess the Color
PurityPurity InnocenceInnocence CleanlinessCleanliness PrecisionPrecision
![Page 18: Psychology of Design MAT122 Introduction to Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062301/5697c0151a28abf838ccdfff/html5/thumbnails/18.jpg)
WhiteWhite
![Page 19: Psychology of Design MAT122 Introduction to Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062301/5697c0151a28abf838ccdfff/html5/thumbnails/19.jpg)
Guess the ShapeGuess the Shape
ConnectionConnection CommunityCommunity WholenessWholeness MovementMovement SafetySafety
![Page 20: Psychology of Design MAT122 Introduction to Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062301/5697c0151a28abf838ccdfff/html5/thumbnails/20.jpg)
CircleCircle
![Page 21: Psychology of Design MAT122 Introduction to Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062301/5697c0151a28abf838ccdfff/html5/thumbnails/21.jpg)
Guess the ShapeGuess the Shape
OrderOrder LogicLogic SecuritySecurity
![Page 22: Psychology of Design MAT122 Introduction to Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062301/5697c0151a28abf838ccdfff/html5/thumbnails/22.jpg)
RectangleRectangle
![Page 23: Psychology of Design MAT122 Introduction to Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062301/5697c0151a28abf838ccdfff/html5/thumbnails/23.jpg)
Guess the ShapeGuess the Shape
EnergyEnergy StrengthStrength BalanceBalance LawLaw ScienceScience
![Page 24: Psychology of Design MAT122 Introduction to Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062301/5697c0151a28abf838ccdfff/html5/thumbnails/24.jpg)
TriangleTriangle
![Page 25: Psychology of Design MAT122 Introduction to Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062301/5697c0151a28abf838ccdfff/html5/thumbnails/25.jpg)
Guess the FontGuess the Font
FormalFormal OrganizationOrganization IntellectIntellect
![Page 26: Psychology of Design MAT122 Introduction to Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062301/5697c0151a28abf838ccdfff/html5/thumbnails/26.jpg)
SerifSerif
Times New RomanTimes New RomanCentury SchoolbookCentury SchoolbookGaramondGaramond
![Page 27: Psychology of Design MAT122 Introduction to Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062301/5697c0151a28abf838ccdfff/html5/thumbnails/27.jpg)
Guess the FontGuess the Font
Less-FormalLess-Formal WarmWarm FriendlyFriendly
![Page 28: Psychology of Design MAT122 Introduction to Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062301/5697c0151a28abf838ccdfff/html5/thumbnails/28.jpg)
Sans-SerifSans-Serif
ArialArialVerdanaVerdanaImpactImpact
![Page 29: Psychology of Design MAT122 Introduction to Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062301/5697c0151a28abf838ccdfff/html5/thumbnails/29.jpg)
Guess the FontGuess the Font
TypewrittenTypewritten OldOld RetroRetro
![Page 30: Psychology of Design MAT122 Introduction to Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062301/5697c0151a28abf838ccdfff/html5/thumbnails/30.jpg)
Mono-spaceMono-space
Courier NewCourier New
![Page 31: Psychology of Design MAT122 Introduction to Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062301/5697c0151a28abf838ccdfff/html5/thumbnails/31.jpg)
Guess the FontGuess the Font
Character to its OwnCharacter to its Own Wide Range of EmotionsWide Range of Emotions
![Page 32: Psychology of Design MAT122 Introduction to Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062301/5697c0151a28abf838ccdfff/html5/thumbnails/32.jpg)
DecorativeDecorative
Space ToasterSpace ToasterCreepyCreepyOrbus MultiserifOrbus Multiserif
![Page 33: Psychology of Design MAT122 Introduction to Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062301/5697c0151a28abf838ccdfff/html5/thumbnails/33.jpg)
Guess the FontGuess the Font
EleganceElegance SophisticationSophistication PersonalPersonal
![Page 34: Psychology of Design MAT122 Introduction to Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062301/5697c0151a28abf838ccdfff/html5/thumbnails/34.jpg)
ScriptScript
Shelley VolanteShelley VolanteBrush ScriptBrush ScriptFrench ScriptFrench Script
![Page 35: Psychology of Design MAT122 Introduction to Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062301/5697c0151a28abf838ccdfff/html5/thumbnails/35.jpg)
Putting it TogetherPutting it Together
ContrastContrast ConsistencyConsistency AlignmentAlignment GroupingGrouping