intro to visual design workshop
TRANSCRIPT
![Page 1: Intro to visual design workshop](https://reader033.vdocuments.net/reader033/viewer/2022042908/58ebb2b51a28ab1c0a8b4647/html5/thumbnails/1.jpg)
Intro to Visual DesignBY NICOLE SAIDY
![Page 3: Intro to visual design workshop](https://reader033.vdocuments.net/reader033/viewer/2022042908/58ebb2b51a28ab1c0a8b4647/html5/thumbnails/3.jpg)
@nicolesaidy Intro to Visual Design
What is visual design?
![Page 4: Intro to visual design workshop](https://reader033.vdocuments.net/reader033/viewer/2022042908/58ebb2b51a28ab1c0a8b4647/html5/thumbnails/4.jpg)
@nicolesaidy Intro to Visual Design
Visual design focuses on the aesthetics of a site by strategically
implementing images, colors, fonts, and other elements
![Page 5: Intro to visual design workshop](https://reader033.vdocuments.net/reader033/viewer/2022042908/58ebb2b51a28ab1c0a8b4647/html5/thumbnails/5.jpg)
@nicolesaidy Intro to Visual Design
The principles of design
![Page 6: Intro to visual design workshop](https://reader033.vdocuments.net/reader033/viewer/2022042908/58ebb2b51a28ab1c0a8b4647/html5/thumbnails/6.jpg)
@nicolesaidy Intro to Visual Design
1. Color
2.Typography
3. Imagery
4. Minimalism
5.Consistency
![Page 7: Intro to visual design workshop](https://reader033.vdocuments.net/reader033/viewer/2022042908/58ebb2b51a28ab1c0a8b4647/html5/thumbnails/7.jpg)
1. Color
![Page 8: Intro to visual design workshop](https://reader033.vdocuments.net/reader033/viewer/2022042908/58ebb2b51a28ab1c0a8b4647/html5/thumbnails/8.jpg)
@nicolesaidy Intro to Visual Design
Color vocabulary
![Page 9: Intro to visual design workshop](https://reader033.vdocuments.net/reader033/viewer/2022042908/58ebb2b51a28ab1c0a8b4647/html5/thumbnails/9.jpg)
@nicolesaidy Intro to Visual Design
![Page 10: Intro to visual design workshop](https://reader033.vdocuments.net/reader033/viewer/2022042908/58ebb2b51a28ab1c0a8b4647/html5/thumbnails/10.jpg)
@nicolesaidy Intro to Visual Design
rgb(59, 89, 145)
#3B599B
![Page 11: Intro to visual design workshop](https://reader033.vdocuments.net/reader033/viewer/2022042908/58ebb2b51a28ab1c0a8b4647/html5/thumbnails/11.jpg)
@nicolesaidy Intro to Visual Design
Color wheel
![Page 12: Intro to visual design workshop](https://reader033.vdocuments.net/reader033/viewer/2022042908/58ebb2b51a28ab1c0a8b4647/html5/thumbnails/12.jpg)
@nicolesaidy Intro to Visual Design
![Page 13: Intro to visual design workshop](https://reader033.vdocuments.net/reader033/viewer/2022042908/58ebb2b51a28ab1c0a8b4647/html5/thumbnails/13.jpg)
@nicolesaidy Intro to Visual Design
Color schemes
![Page 14: Intro to visual design workshop](https://reader033.vdocuments.net/reader033/viewer/2022042908/58ebb2b51a28ab1c0a8b4647/html5/thumbnails/14.jpg)
Monochrome
![Page 15: Intro to visual design workshop](https://reader033.vdocuments.net/reader033/viewer/2022042908/58ebb2b51a28ab1c0a8b4647/html5/thumbnails/15.jpg)
Complementary
![Page 16: Intro to visual design workshop](https://reader033.vdocuments.net/reader033/viewer/2022042908/58ebb2b51a28ab1c0a8b4647/html5/thumbnails/16.jpg)
Analogous
![Page 17: Intro to visual design workshop](https://reader033.vdocuments.net/reader033/viewer/2022042908/58ebb2b51a28ab1c0a8b4647/html5/thumbnails/17.jpg)
@nicolesaidy Intro to Visual Design
Color psychology
![Page 18: Intro to visual design workshop](https://reader033.vdocuments.net/reader033/viewer/2022042908/58ebb2b51a28ab1c0a8b4647/html5/thumbnails/18.jpg)
@nicolesaidy Intro to Visual Design
Energy, danger,
attractive, passion
sRed
![Page 19: Intro to visual design workshop](https://reader033.vdocuments.net/reader033/viewer/2022042908/58ebb2b51a28ab1c0a8b4647/html5/thumbnails/19.jpg)
@nicolesaidy Intro to Visual Design
sOrangeWarm, less agressive,
fun, energy
![Page 20: Intro to visual design workshop](https://reader033.vdocuments.net/reader033/viewer/2022042908/58ebb2b51a28ab1c0a8b4647/html5/thumbnails/20.jpg)
@nicolesaidy Intro to Visual Design
YellowWarm, summertime, eye-
catching, concentration
![Page 21: Intro to visual design workshop](https://reader033.vdocuments.net/reader033/viewer/2022042908/58ebb2b51a28ab1c0a8b4647/html5/thumbnails/21.jpg)
@nicolesaidy Intro to Visual Design
GreenGrowth, health, peace,
nature, environment
![Page 22: Intro to visual design workshop](https://reader033.vdocuments.net/reader033/viewer/2022042908/58ebb2b51a28ab1c0a8b4647/html5/thumbnails/22.jpg)
@nicolesaidy Intro to Visual Design
BlueTrustworthy, professional,
refreshing, calm
![Page 23: Intro to visual design workshop](https://reader033.vdocuments.net/reader033/viewer/2022042908/58ebb2b51a28ab1c0a8b4647/html5/thumbnails/23.jpg)
@nicolesaidy Intro to Visual Design
PurpleRomance, luxury,
intimacy, success
![Page 24: Intro to visual design workshop](https://reader033.vdocuments.net/reader033/viewer/2022042908/58ebb2b51a28ab1c0a8b4647/html5/thumbnails/24.jpg)
@nicolesaidy Intro to Visual Design
BrownEarthy, dirty, luxury,
fashion
![Page 25: Intro to visual design workshop](https://reader033.vdocuments.net/reader033/viewer/2022042908/58ebb2b51a28ab1c0a8b4647/html5/thumbnails/25.jpg)
@nicolesaidy Intro to Visual Design
BlackLuxury, prestige, evil,
strength
![Page 26: Intro to visual design workshop](https://reader033.vdocuments.net/reader033/viewer/2022042908/58ebb2b51a28ab1c0a8b4647/html5/thumbnails/26.jpg)
@nicolesaidy Intro to Visual Design
WhiteInnocence, spirituality,
science, pureness
![Page 27: Intro to visual design workshop](https://reader033.vdocuments.net/reader033/viewer/2022042908/58ebb2b51a28ab1c0a8b4647/html5/thumbnails/27.jpg)
@nicolesaidy Intro to Visual Design
Tools and resources
![Page 28: Intro to visual design workshop](https://reader033.vdocuments.net/reader033/viewer/2022042908/58ebb2b51a28ab1c0a8b4647/html5/thumbnails/28.jpg)
Adobe Color CC
![Page 29: Intro to visual design workshop](https://reader033.vdocuments.net/reader033/viewer/2022042908/58ebb2b51a28ab1c0a8b4647/html5/thumbnails/29.jpg)
Coolors.co
![Page 31: Intro to visual design workshop](https://reader033.vdocuments.net/reader033/viewer/2022042908/58ebb2b51a28ab1c0a8b4647/html5/thumbnails/31.jpg)
@nicolesaidy Intro to Visual Design
Do’s and don’ts
![Page 32: Intro to visual design workshop](https://reader033.vdocuments.net/reader033/viewer/2022042908/58ebb2b51a28ab1c0a8b4647/html5/thumbnails/32.jpg)
@nicolesaidy Intro to Visual Design
Don’t: use pure black
Pure black Almost black
![Page 33: Intro to visual design workshop](https://reader033.vdocuments.net/reader033/viewer/2022042908/58ebb2b51a28ab1c0a8b4647/html5/thumbnails/33.jpg)
@nicolesaidy Intro to Visual Design
Don’t: pair red and green
![Page 34: Intro to visual design workshop](https://reader033.vdocuments.net/reader033/viewer/2022042908/58ebb2b51a28ab1c0a8b4647/html5/thumbnails/34.jpg)
@nicolesaidy Intro to Visual Design
Don’t: use neon colors
This is annoying That’s better
![Page 35: Intro to visual design workshop](https://reader033.vdocuments.net/reader033/viewer/2022042908/58ebb2b51a28ab1c0a8b4647/html5/thumbnails/35.jpg)
Do: use colors for actions
![Page 36: Intro to visual design workshop](https://reader033.vdocuments.net/reader033/viewer/2022042908/58ebb2b51a28ab1c0a8b4647/html5/thumbnails/36.jpg)
2. Typography
![Page 37: Intro to visual design workshop](https://reader033.vdocuments.net/reader033/viewer/2022042908/58ebb2b51a28ab1c0a8b4647/html5/thumbnails/37.jpg)
@nicolesaidy Intro to Visual Design
The basics
![Page 38: Intro to visual design workshop](https://reader033.vdocuments.net/reader033/viewer/2022042908/58ebb2b51a28ab1c0a8b4647/html5/thumbnails/38.jpg)
@nicolesaidy Intro to Visual Design
SerifFancy, elegant, classy, refined
![Page 39: Intro to visual design workshop](https://reader033.vdocuments.net/reader033/viewer/2022042908/58ebb2b51a28ab1c0a8b4647/html5/thumbnails/39.jpg)
@nicolesaidy Intro to Visual Design
Sans-serifMinimal, clean, modern, fresh
![Page 40: Intro to visual design workshop](https://reader033.vdocuments.net/reader033/viewer/2022042908/58ebb2b51a28ab1c0a8b4647/html5/thumbnails/40.jpg)
@nicolesaidy Intro to Visual Design
ScriptHandwriting, display, handwritten, fancy
![Page 41: Intro to visual design workshop](https://reader033.vdocuments.net/reader033/viewer/2022042908/58ebb2b51a28ab1c0a8b4647/html5/thumbnails/41.jpg)
@nicolesaidy Intro to Visual Design
Shyletter spacing (tracking)
font sizeline height
(leading)
![Page 42: Intro to visual design workshop](https://reader033.vdocuments.net/reader033/viewer/2022042908/58ebb2b51a28ab1c0a8b4647/html5/thumbnails/42.jpg)
@nicolesaidy Intro to Visual Design
Font pairing
![Page 43: Intro to visual design workshop](https://reader033.vdocuments.net/reader033/viewer/2022042908/58ebb2b51a28ab1c0a8b4647/html5/thumbnails/43.jpg)
@nicolesaidy Intro to Visual Design
![Page 45: Intro to visual design workshop](https://reader033.vdocuments.net/reader033/viewer/2022042908/58ebb2b51a28ab1c0a8b4647/html5/thumbnails/45.jpg)
@nicolesaidy Intro to Visual Design
Do’s and don’ts
![Page 46: Intro to visual design workshop](https://reader033.vdocuments.net/reader033/viewer/2022042908/58ebb2b51a28ab1c0a8b4647/html5/thumbnails/46.jpg)
@nicolesaidy Intro to Visual Design
Big & Bold TitleSecondary subtitle Secondary subtitle
Big & Bold Title
Do: apply contrast
![Page 47: Intro to visual design workshop](https://reader033.vdocuments.net/reader033/viewer/2022042908/58ebb2b51a28ab1c0a8b4647/html5/thumbnails/47.jpg)
@nicolesaidy Intro to Visual Design
No white space applied Lorem ipsum donec facilisis tortor ut augue lacinia, at viverra est semper. Sed sapien metus, scelerisque nec pharetra id, tempor a tortor. Pellentesque non dignissim neque.
White space applied
Lorem ipsum donec facilisis tortor ut
augue lacinia, at viverra est semper.
Sed sapien metus, scelerisque nec
pharetra id, tempor a tortor.
Pellentesque non dignissim neque.
Do: space things out
![Page 48: Intro to visual design workshop](https://reader033.vdocuments.net/reader033/viewer/2022042908/58ebb2b51a28ab1c0a8b4647/html5/thumbnails/48.jpg)
@nicolesaidy Intro to Visual Design
Don’t: use too many fonts
![Page 49: Intro to visual design workshop](https://reader033.vdocuments.net/reader033/viewer/2022042908/58ebb2b51a28ab1c0a8b4647/html5/thumbnails/49.jpg)
@nicolesaidy Intro to Visual Design
Don’t: put text over a busy image
![Page 50: Intro to visual design workshop](https://reader033.vdocuments.net/reader033/viewer/2022042908/58ebb2b51a28ab1c0a8b4647/html5/thumbnails/50.jpg)
3. Imagery
![Page 51: Intro to visual design workshop](https://reader033.vdocuments.net/reader033/viewer/2022042908/58ebb2b51a28ab1c0a8b4647/html5/thumbnails/51.jpg)
@nicolesaidy Intro to Visual Design
People prefer images over text37% of the population are visual learners
![Page 52: Intro to visual design workshop](https://reader033.vdocuments.net/reader033/viewer/2022042908/58ebb2b51a28ab1c0a8b4647/html5/thumbnails/52.jpg)
@nicolesaidy Intro to Visual Design
Shows how something is done
![Page 53: Intro to visual design workshop](https://reader033.vdocuments.net/reader033/viewer/2022042908/58ebb2b51a28ab1c0a8b4647/html5/thumbnails/53.jpg)
@nicolesaidy Intro to Visual Design
Conveys emotion
![Page 54: Intro to visual design workshop](https://reader033.vdocuments.net/reader033/viewer/2022042908/58ebb2b51a28ab1c0a8b4647/html5/thumbnails/54.jpg)
@nicolesaidy Intro to Visual Design
Helps better understand the idea
![Page 55: Intro to visual design workshop](https://reader033.vdocuments.net/reader033/viewer/2022042908/58ebb2b51a28ab1c0a8b4647/html5/thumbnails/55.jpg)
Make it come alive with background videos
![Page 56: Intro to visual design workshop](https://reader033.vdocuments.net/reader033/viewer/2022042908/58ebb2b51a28ab1c0a8b4647/html5/thumbnails/56.jpg)
@nicolesaidy Intro to Visual Design
Do’s and don’ts
![Page 57: Intro to visual design workshop](https://reader033.vdocuments.net/reader033/viewer/2022042908/58ebb2b51a28ab1c0a8b4647/html5/thumbnails/57.jpg)
@nicolesaidy Intro to Visual Design
Do: show face expressions
![Page 58: Intro to visual design workshop](https://reader033.vdocuments.net/reader033/viewer/2022042908/58ebb2b51a28ab1c0a8b4647/html5/thumbnails/58.jpg)
@nicolesaidy Intro to Visual Design
Don’t: use blurred backgrounds
![Page 59: Intro to visual design workshop](https://reader033.vdocuments.net/reader033/viewer/2022042908/58ebb2b51a28ab1c0a8b4647/html5/thumbnails/59.jpg)
@nicolesaidy Intro to Visual Design
Don’t: use stock photos
pexels.comistock.com
![Page 60: Intro to visual design workshop](https://reader033.vdocuments.net/reader033/viewer/2022042908/58ebb2b51a28ab1c0a8b4647/html5/thumbnails/60.jpg)
4. Minimalism
![Page 61: Intro to visual design workshop](https://reader033.vdocuments.net/reader033/viewer/2022042908/58ebb2b51a28ab1c0a8b4647/html5/thumbnails/61.jpg)
@nicolesaidy Intro to Visual Design
LESS is MORE
![Page 62: Intro to visual design workshop](https://reader033.vdocuments.net/reader033/viewer/2022042908/58ebb2b51a28ab1c0a8b4647/html5/thumbnails/62.jpg)
@nicolesaidy Intro to Visual Design
White space
![Page 63: Intro to visual design workshop](https://reader033.vdocuments.net/reader033/viewer/2022042908/58ebb2b51a28ab1c0a8b4647/html5/thumbnails/63.jpg)
![Page 64: Intro to visual design workshop](https://reader033.vdocuments.net/reader033/viewer/2022042908/58ebb2b51a28ab1c0a8b4647/html5/thumbnails/64.jpg)
Increases focus
![Page 65: Intro to visual design workshop](https://reader033.vdocuments.net/reader033/viewer/2022042908/58ebb2b51a28ab1c0a8b4647/html5/thumbnails/65.jpg)
Organizes elements
![Page 66: Intro to visual design workshop](https://reader033.vdocuments.net/reader033/viewer/2022042908/58ebb2b51a28ab1c0a8b4647/html5/thumbnails/66.jpg)
Helps elements stand out
![Page 67: Intro to visual design workshop](https://reader033.vdocuments.net/reader033/viewer/2022042908/58ebb2b51a28ab1c0a8b4647/html5/thumbnails/67.jpg)
It doesn’t have to be white
![Page 68: Intro to visual design workshop](https://reader033.vdocuments.net/reader033/viewer/2022042908/58ebb2b51a28ab1c0a8b4647/html5/thumbnails/68.jpg)
@nicolesaidy Intro to Visual Design
Contrast
![Page 69: Intro to visual design workshop](https://reader033.vdocuments.net/reader033/viewer/2022042908/58ebb2b51a28ab1c0a8b4647/html5/thumbnails/69.jpg)
Size
![Page 70: Intro to visual design workshop](https://reader033.vdocuments.net/reader033/viewer/2022042908/58ebb2b51a28ab1c0a8b4647/html5/thumbnails/70.jpg)
Typography
![Page 72: Intro to visual design workshop](https://reader033.vdocuments.net/reader033/viewer/2022042908/58ebb2b51a28ab1c0a8b4647/html5/thumbnails/72.jpg)
Color
![Page 73: Intro to visual design workshop](https://reader033.vdocuments.net/reader033/viewer/2022042908/58ebb2b51a28ab1c0a8b4647/html5/thumbnails/73.jpg)
6. Consistency
![Page 74: Intro to visual design workshop](https://reader033.vdocuments.net/reader033/viewer/2022042908/58ebb2b51a28ab1c0a8b4647/html5/thumbnails/74.jpg)
@nicolesaidy Intro to Visual Design
It only takes 50 milliseconds for users to judge your website
![Page 75: Intro to visual design workshop](https://reader033.vdocuments.net/reader033/viewer/2022042908/58ebb2b51a28ab1c0a8b4647/html5/thumbnails/75.jpg)
Consistent interaction
![Page 76: Intro to visual design workshop](https://reader033.vdocuments.net/reader033/viewer/2022042908/58ebb2b51a28ab1c0a8b4647/html5/thumbnails/76.jpg)
Consistent language
![Page 77: Intro to visual design workshop](https://reader033.vdocuments.net/reader033/viewer/2022042908/58ebb2b51a28ab1c0a8b4647/html5/thumbnails/77.jpg)
Consistent UI elements
![Page 78: Intro to visual design workshop](https://reader033.vdocuments.net/reader033/viewer/2022042908/58ebb2b51a28ab1c0a8b4647/html5/thumbnails/78.jpg)
@nicolesaidy Intro to Visual Design
• Eliminates confusion
• Reduces learning
• Creates the brand
![Page 79: Intro to visual design workshop](https://reader033.vdocuments.net/reader033/viewer/2022042908/58ebb2b51a28ab1c0a8b4647/html5/thumbnails/79.jpg)
@nicolesaidy Intro to Visual Design
We’re not designing pages, we’re designing systems of components.
Stephen Hay
![Page 80: Intro to visual design workshop](https://reader033.vdocuments.net/reader033/viewer/2022042908/58ebb2b51a28ab1c0a8b4647/html5/thumbnails/80.jpg)
@nicolesaidy Intro to Visual Design
“A set of guidelines to the design
language of a digital product.”
Style guide
![Page 81: Intro to visual design workshop](https://reader033.vdocuments.net/reader033/viewer/2022042908/58ebb2b51a28ab1c0a8b4647/html5/thumbnails/81.jpg)
@nicolesaidy Intro to Visual Design
![Page 82: Intro to visual design workshop](https://reader033.vdocuments.net/reader033/viewer/2022042908/58ebb2b51a28ab1c0a8b4647/html5/thumbnails/82.jpg)
Create your own style guide
![Page 83: Intro to visual design workshop](https://reader033.vdocuments.net/reader033/viewer/2022042908/58ebb2b51a28ab1c0a8b4647/html5/thumbnails/83.jpg)
@nicolesaidy Intro to Visual Design
1. Create a color palette (use coolors.co)
2. Choose your font(s) (browse fonts.google.com)
3. Set your font styles (headings, paragraph..)
4. Design other UI components (buttons, inputs)
Intro to Visual Design
![Page 85: Intro to visual design workshop](https://reader033.vdocuments.net/reader033/viewer/2022042908/58ebb2b51a28ab1c0a8b4647/html5/thumbnails/85.jpg)
Thanks!@nicolesaidy