How Design Speaks to Us
Design is a silent language. Every time you look at an app, a poster, or a cereal box, the design is trying to make you feel something or do something.
π Information
A subway map tells you where to goβclear, functional, purposeful.
More Examples:
- πΊοΈ GPS navigation - Shows you the fastest route
- π Infographics - Makes complex data easy to understand
- π₯ Hospital signs - Directs you to Emergency, Parking, etc.
- βοΈ Airport boards - Flight times and gate numbers
π± Emotion
A horror movie poster uses dark shadows to make you feel uneasy.
More Examples:
- β€οΈ Romantic cards - Soft colors, hearts, gentle fonts
- π Party invitations - Bright colors, confetti, excitement!
- π’ Charity ads - Emotional photos that inspire action
- π Victory screens - Gold, sparkles, celebration vibes
π‘ Ideas
The Amazon arrow shows they carry everything from "A to Z."
More Examples:
- π Apple logo - Simple, clean = innovation
- βοΈ Nike swoosh - Motion = athletic performance
- π― Target bullseye - Precision, hitting the mark
- π¦ Twitter bird - Communication flying freely
π Real-Life Example: The Stop Sign
Real Stop Sign
β Creates Urgency
Octagon shape + Red color
If it were blue...
β No Urgency
Circle shape + Blue color
Think about a Stop Sign. It's RED (color of danger/importance) and an octagon (unique 8-sided shape).
If it were a soft blue circle, would you feel the same urge to hit the brakes? Probably not!
π§ Why This Works:
π΄ Red Color Psychology
Triggers alert, danger, and immediate action in our brains
⬑ Unique Octagon Shape
The ONLY road sign with 8 sidesβinstantly recognizable even from behind!
The Design Thinking Process
When designers solve a problem, they don't just start drawing. They follow a 5-step journey called Design Thinking.
1. Understand
Who are you designing for? Know your user deeply.
Example:
Interview athletes about their needs
2. Define
State the specific problem to solve.
Example:
"Need one-hand bottle opening"
3. Ideate
Brainstorm! No idea is too crazy.
Example:
Sketch 20 different bottle designs
4. Create
Build a simple prototype to test.
Example:
Make cardboard mockup
5. Test
Get feedback and improve.
Example:
Give to runnersβdoes it leak?
π Real Design Thinking Example: Athletic Water Bottle
- ποΈ Understand: Athletes need to drink while running without stopping
- π― Define: "Athletes need a bottle they can open with one hand"
- π Ideate: Sketch 20 different grip designs, flip tops, squeeze options
- π§ Create: Build a cardboard prototype with side handle
- β Test: Give it to runnersβdoes it leak? Too heavy? Easy to open?
History Bite: The First Apple Mouse
Design Thinking was popularized by IDEO, a famous design firm. They used this exact process to create the first usable "mouse" for Apple computers in the 1980s!
π±οΈ How IDEO Designed the Mouse:
- β Understood how people naturally move their hands
- β Defined the problem: needed a pointing device anyone could use
- β Tested dozens of prototypes with real users
- β Result: A device so intuitive, you don't need instructions!
The "Secret Ingredients"
How do we actually influence how people think? We use three main tools: Color, Layout, and Imagery.
A. Color β The Mood Setter
Colors trigger instant feelings in our brains. Each color has psychological associations!
Blue
Trustworthy & Calm
Used by: Facebook, Banks, Hospitals, LinkedIn
π‘ Why? Blue = Ocean, Sky = Peace, Stability
Yellow
Energetic & Hungry
Used by: McDonald's, Lay's, Snapchat, IKEA
π‘ Why? Yellow = Sun = Energy, Happiness, Attention
Red
Urgency & Passion
Used by: Sale signs, Netflix, YouTube, Coca-Cola
π‘ Why? Red = Fire, Blood = Action, Excitement, Warning
π¨ More Color Psychology Examples
Green
Growth, Nature, Health, Money
Whole Foods, Spotify, Starbucks
Purple
Luxury, Creativity, Royalty
Cadbury, Yahoo, Twitch
Orange
Fun, Adventurous, Affordable
Nickelodeon, Fanta, Home Depot
Black
Elegance, Power, Sophistication
Chanel, Nike, Apple (packaging)
π B. Layout β The Map
Layout is how you arrange things on a page. A good layout uses Hierarchyβit tells the eye what to look at first.
π Visual Hierarchy in Action
On a news website, the biggest headline is the most important story. Your eye naturally goes there first.
You wouldn't read the tiny "Copyright" text at the bottom first!
π Layout Principles:
- β Bigger = More Important
- β Position = Order (Top to Bottom)
- β Spacing = Relationship
π Real-World Layout Examples
π± Instagram Feed
Photos first (visual hierarchy), then caption, then comments
π Restaurant Menu
Dish names in large text, descriptions smaller, prices aligned right
π³ Credit Cards
Bank logo top left, card number center, name/expiry bottom
πΌοΈ C. Imagery β The Storyteller
A photo tells a much deeper story than words alone. High-quality images create a "vibe" that words can't reach.
Just a word... Not very emotional.
An image evokes deep emotion instantly!
πΈ The Power of Visual Storytelling
Food Photography
Close-up photo of melting cheese makes you hungry
vs. "This pizza has cheese on it"
Travel Ads
Sunset beach photo = instant vacation feeling
vs. "Our beach has sand and water"
Sports Brands
Athlete mid-jump = aspiration & power
vs. "These shoes are good for sports"
Charity Campaigns
Puppy's eyes looking at camera = emotional connection
vs. "Please donate to animal shelters"
π― Summary Challenge
Next time you go to a grocery store, look at two different brands of potato chips and notice the design differences:
MEGA CHIPS!
Bright β’ Bold β’ Shiny
Perception: Fun & Cheap
π¨ Design Elements:
- β’ Bright, energetic colors
- β’ Bold, loud typography
- β’ "SALE" badge creates urgency
- β’ Fire emoji = excitement
Artisan Potato Co.
Earthy β’ Matte β’ Natural
Perception: Premium & Healthy
π¨ Design Elements:
- β’ Neutral, natural colors
- β’ Classic serif font
- β’ "Organic" badge = health-conscious
- β’ Potato emoji = real ingredients
Same chips, different perception!
The design changed how you think about their quality! π€―
π§ Key Takeaways from Today's Lesson
1. Design is a Language
Every visual choice communicates somethingβcolors, shapes, and layouts all speak to us.
2. Follow the Process
Design Thinking (Understand β Define β Ideate β Create β Test) solves real problems.
3. Colors Have Power
Red creates urgency, blue builds trust, yellow energizesβuse them wisely!
4. Images Tell Stories
A single photo can communicate emotions and ideas that words cannot capture.