intro to visual design workshop
TRANSCRIPT
Intro to Visual DesignBY NICOLE SAIDY
@nicolesaidy Intro to Visual Design
What is visual design?
@nicolesaidy Intro to Visual Design
Visual design focuses on the aesthetics of a site by strategically
implementing images, colors, fonts, and other elements
@nicolesaidy Intro to Visual Design
The principles of design
@nicolesaidy Intro to Visual Design
1. Color
2.Typography
3. Imagery
4. Minimalism
5.Consistency
1. Color
@nicolesaidy Intro to Visual Design
Color vocabulary
@nicolesaidy Intro to Visual Design
@nicolesaidy Intro to Visual Design
rgb(59, 89, 145)
#3B599B
@nicolesaidy Intro to Visual Design
Color wheel
@nicolesaidy Intro to Visual Design
@nicolesaidy Intro to Visual Design
Color schemes
Monochrome
Complementary
Analogous
@nicolesaidy Intro to Visual Design
Color psychology
@nicolesaidy Intro to Visual Design
Energy, danger,
attractive, passion
sRed
@nicolesaidy Intro to Visual Design
sOrangeWarm, less agressive,
fun, energy
@nicolesaidy Intro to Visual Design
YellowWarm, summertime, eye-
catching, concentration
@nicolesaidy Intro to Visual Design
GreenGrowth, health, peace,
nature, environment
@nicolesaidy Intro to Visual Design
BlueTrustworthy, professional,
refreshing, calm
@nicolesaidy Intro to Visual Design
PurpleRomance, luxury,
intimacy, success
@nicolesaidy Intro to Visual Design
BrownEarthy, dirty, luxury,
fashion
@nicolesaidy Intro to Visual Design
BlackLuxury, prestige, evil,
strength
@nicolesaidy Intro to Visual Design
WhiteInnocence, spirituality,
science, pureness
@nicolesaidy Intro to Visual Design
Tools and resources
Adobe Color CC
Coolors.co
@nicolesaidy Intro to Visual Design
Do’s and don’ts
@nicolesaidy Intro to Visual Design
Don’t: use pure black
Pure black Almost black
@nicolesaidy Intro to Visual Design
Don’t: pair red and green
@nicolesaidy Intro to Visual Design
Don’t: use neon colors
This is annoying That’s better
Do: use colors for actions
2. Typography
@nicolesaidy Intro to Visual Design
The basics
@nicolesaidy Intro to Visual Design
SerifFancy, elegant, classy, refined
@nicolesaidy Intro to Visual Design
Sans-serifMinimal, clean, modern, fresh
@nicolesaidy Intro to Visual Design
ScriptHandwriting, display, handwritten, fancy
@nicolesaidy Intro to Visual Design
Shyletter spacing (tracking)
font sizeline height
(leading)
@nicolesaidy Intro to Visual Design
Font pairing
@nicolesaidy Intro to Visual Design
@nicolesaidy Intro to Visual Design
Do’s and don’ts
@nicolesaidy Intro to Visual Design
Big & Bold TitleSecondary subtitle Secondary subtitle
Big & Bold Title
Do: apply contrast
@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
@nicolesaidy Intro to Visual Design
Don’t: use too many fonts
@nicolesaidy Intro to Visual Design
Don’t: put text over a busy image
3. Imagery
@nicolesaidy Intro to Visual Design
People prefer images over text37% of the population are visual learners
@nicolesaidy Intro to Visual Design
Shows how something is done
@nicolesaidy Intro to Visual Design
Conveys emotion
@nicolesaidy Intro to Visual Design
Helps better understand the idea
Make it come alive with background videos
@nicolesaidy Intro to Visual Design
Do’s and don’ts
@nicolesaidy Intro to Visual Design
Do: show face expressions
@nicolesaidy Intro to Visual Design
Don’t: use blurred backgrounds
@nicolesaidy Intro to Visual Design
Don’t: use stock photos
pexels.comistock.com
4. Minimalism
@nicolesaidy Intro to Visual Design
LESS is MORE
@nicolesaidy Intro to Visual Design
White space
Increases focus
Organizes elements
Helps elements stand out
It doesn’t have to be white
@nicolesaidy Intro to Visual Design
Contrast
Size
Typography
Color
6. Consistency
@nicolesaidy Intro to Visual Design
It only takes 50 milliseconds for users to judge your website
Consistent interaction
Consistent language
Consistent UI elements
@nicolesaidy Intro to Visual Design
• Eliminates confusion
• Reduces learning
• Creates the brand
@nicolesaidy Intro to Visual Design
We’re not designing pages, we’re designing systems of components.
Stephen Hay
@nicolesaidy Intro to Visual Design
“A set of guidelines to the design
language of a digital product.”
Style guide
@nicolesaidy Intro to Visual Design
Create your own style guide
@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
Thanks!@nicolesaidy