πŸ“š Design Fundamentals

The Power of Design Thinking & Visual Communication

Learn how images, colors, and layouts tell stories without words

πŸ“–

Reference

The Non-Designer's Design Book

by Robin Williams

1

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
amazon

πŸ’‘ 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

STOP

Real Stop Sign

βœ“ Creates Urgency

Octagon shape + Red color

stop?

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!

2

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

One-hand grip!
  • πŸ‘οΈ 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!
3

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.

πŸ“° NEWS WEBSITE
BREAKING NEWS!
1st ← You read this first!
← Copyright (you read last)

πŸ‘€ 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.

sadness

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!

SALE! 50% OFF!

Bright β€’ Bold β€’ Shiny

Perception: Fun & Cheap

🎨 Design Elements:

  • β€’ Bright, energetic colors
  • β€’ Bold, loud typography
  • β€’ "SALE" badge creates urgency
  • β€’ Fire emoji = excitement
');">
πŸ₯”

Artisan Potato Co.

100% ORGANIC

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.