Module 1: Design Fundamentals

Master the core principles of visual design that make interfaces beautiful and functional.

What Are Design Fundamentals?

Design fundamentals are the building blocks of all visual design - like learning the alphabet before writing stories. They're universal principles that apply whether you're designing a website, mobile app, poster, or logo. Think of them as the grammar of visual communication.

Just like a chef needs to understand flavors, heat, and timing before creating amazing dishes, designers need to master color, typography, layout, and composition before creating stunning interfaces.

🎨 Real-World Analogy:

Imagine you're decorating a room:

Color: Choosing paint colors that work together (not clashing)
Typography: Selecting furniture styles that match (modern, vintage, etc.)
Layout: Arranging furniture so the room flows well
Balance: Not putting all heavy furniture on one side

Design fundamentals help you make these decisions intentionally, not randomly!

Color Theory & Psychology

Colors aren't just pretty - they communicate emotions, create hierarchy, and guide user attention. Understanding color theory helps you choose colors that work together and evoke the right feelings.

The Color Wheel

The color wheel shows relationships between colors. It's your map for creating harmonious color schemes:

Primary Colors

Red, Blue, Yellow - can't be created by mixing other colors

Secondary Colors

Created by mixing two primary colors

Tertiary Colors

Mix of primary and secondary colors

Color Schemes

Complementary Colors

Colors opposite on the wheel (Blue & Orange, Red & Green). High contrast, energetic.

Use for: Call-to-action buttons, important highlights

Analogous Colors

Colors next to each other (Blue, Blue-Green, Green). Harmonious, calming.

Use for: Backgrounds, creating mood, cohesive designs

Triadic Colors

Three colors evenly spaced on wheel. Vibrant, balanced.

Use for: Playful designs, children's apps, creative projects

Color Psychology

Red

Energy, passion, urgency, danger. Use for alerts, sales, food apps.

Blue

Trust, calm, professional. Use for banks, healthcare, corporate.

Green

Growth, health, nature, success. Use for eco-friendly, finance, wellness.

Yellow

Optimism, happiness, caution. Use for warnings, children's products.

💡 Pro Tip: The 60-30-10 Rule

Use 60% dominant color (backgrounds), 30% secondary color (sections), and 10% accent color (buttons, highlights). This creates visual balance without overwhelming users.

Typography & Hierarchy

Typography is the art of arranging text to make it readable, legible, and visually appealing. Good typography guides users through content effortlessly - like road signs on a highway.

Font Categories

Serif Fonts

Have small lines (serifs) at the ends of letters. Traditional, trustworthy, formal.

Examples: Times New Roman, Georgia, Merriweather

Use for: Long-form content, newspapers, legal documents

Sans-Serif Fonts

Clean, without serifs. Modern, minimal, easy to read on screens.

Examples: Arial, Helvetica, Inter, Roboto

Use for: Websites, apps, UI elements, body text

Monospace Fonts

Each character takes same width. Technical, precise.

Examples: Courier, Monaco, Fira Code

Use for: Code snippets, data tables, technical content

Typography Hierarchy

Hierarchy shows what's most important. Use size, weight, and spacing to guide attention:

Heading 1 - Main Title

48px, Bold - Used once per page

Heading 2 - Section Title

36px, Bold - Major sections

Heading 3 - Subsection

24px, Semibold - Subsections

Body Text - Regular paragraph text

16px, Regular - Main content

💡 Typography Best Practices:

• Limit to 2-3 font families per design
• Use 16px minimum for body text (mobile and desktop)
• Line height should be 1.5-1.6x font size for readability
• Paragraph width: 50-75 characters per line (optimal reading)
• Pair serif with sans-serif for contrast

Layout & Composition

Layout is how you arrange elements on a page. Good layout creates visual flow, guides attention, and makes content easy to scan - like organizing a grocery store so customers find what they need.

Grid Systems

Grids are invisible frameworks that help align elements consistently. Think of them as the skeleton that holds your design together.

12-Column Grid

Most flexible. Divide into 2, 3, 4, or 6 columns. Standard for responsive design.

8-Point Grid

All spacing in multiples of 8px (8, 16, 24, 32). Creates consistent rhythm.

White Space (Negative Space)

White space isn't wasted space - it's breathing room. It reduces cognitive load and makes designs feel premium and easy to understand.

Bad: Cramped

Text

Too tight, hard to read

Good: Spacious

Text

Comfortable, easy to scan

Core Design Principles

1. Contrast

Make different elements clearly different. Contrast creates visual interest and guides attention.

Low contrast - hard to read

High contrast - easy to read

2. Alignment

Line up elements to create visual connections and order. Nothing should be placed randomly.

❌ Misaligned

✅ Aligned

3. Proximity

Group related items together. Items close together are perceived as related.

Example: Put a label right next to its input field, not far away.

4. Repetition

Repeat visual elements (colors, fonts, shapes) to create consistency and unity.

Example: Use the same button style throughout your app.

5. Balance

Distribute visual weight evenly. Can be symmetrical (formal) or asymmetrical (dynamic).

Symmetrical

Asymmetrical

Gestalt Principles

Gestalt principles explain how humans perceive visual elements as organized patterns. Understanding these helps you design interfaces that feel intuitive.

Law of Similarity

Similar elements are perceived as part of the same group.

Pink circles feel grouped together

Law of Proximity

Objects close together are perceived as a group.

Two groups of two

Law of Continuity

Eyes follow lines and curves. Use this to guide users through your design.

🎨 Hands-On Project: Design a Landing Page

Apply everything you've learned by designing a simple landing page for a fictional coffee shop app.

Project Requirements:

✓ Choose a color scheme (complementary or analogous)
✓ Select 2 fonts (one for headings, one for body)
✓ Create clear typography hierarchy (H1, H2, body text)
✓ Use a 12-column grid for layout
✓ Apply white space generously
✓ Ensure good contrast for readability
✓ Include: Hero section, features, call-to-action button

💡 Design Checklist:

□ Is there a clear visual hierarchy?
□ Do colors work well together?
□ Is text readable (size, contrast)?
□ Are elements properly aligned?
□ Is there enough white space?
□ Does the design feel balanced?

📚 Module Summary

You've learned the fundamental building blocks of visual design:

✓ Color theory and psychology for emotional impact
✓ Typography principles for readable, hierarchical text
✓ Layout and grid systems for organized designs
✓ Core design principles (contrast, alignment, proximity, repetition, balance)
✓ Gestalt principles for intuitive visual perception

Next up: Master Figma, the industry-standard design tool!