Design Fundamentals

In This Section, You Will Learn:

• • Core design principles
• • Typography basics
• • Color theory essentials
• • Layout and composition
• • White space and hierarchy

Core Design Principles

• The 5 Principles:
• 1. Alignment: Everything has a place
• 2. Contrast: Make differences clear
• 3. Repetition: Create consistency
• 4. Proximity: Group related items
• 5. Balance: Visual equilibrium
• Why Principles Matter:
• • Separate amateur from professional
• • Create visual harmony
• • Guide viewer's eye
• • Communicate effectively
• Golden Rule:
• When in doubt, simplify

Typography Basics

• What is Typography?
• The art and technique of arranging type (text).
• Type Categories:
• • Serif: Traditional, trustworthy (Times, Georgia)
• • Sans-Serif: Modern, clean (Helvetica, Inter)
• • Display: Decorative, for headlines
• • Script: Handwritten look, use sparingly
• Typography Rules:
• • Use 2-3 fonts maximum
• • Create clear hierarchy (heading > subheading > body)
• • Readable size (16px minimum for body)
• • Consistent spacing
• Font Pairing:
• • One display/heading font
• • One body font
• • Usually serif + sans-serif or two sans-serifs

Color Theory Essentials

• Color Wheel Basics:
• • Primary: Red, Yellow, Blue
• • Secondary: Orange, Green, Purple
• • Tertiary: Blends of primary + secondary
• Color Harmonies:
• • Complementary: Opposite on wheel (high contrast)
• • Analogous: Next to each other (harmonious)
• • Triadic: Three evenly spaced (vibrant)
• Color Psychology:
• • Red: Energy, urgency, passion
• • Blue: Trust, calm, professional
• • Yellow: Optimism, attention
• • Green: Growth, nature, money
• • Black: Luxury, elegance, power
• Color Tips:
• • 60% primary, 30% secondary, 10% accent
• • Use tools like Coolors.co for palettes

Layout and Composition

• What is Layout?
• How elements are arranged on the page/screen.
• Key Concepts:
• • Grid system: Invisible structure for alignment
• • Visual hierarchy: Most important = most prominent
• • Focal point: Where eyes go first
• • Rule of thirds: Divide space for interest
• Creating Hierarchy:
• • Size (bigger = more important)
• • Color (bold color draws eye)
• • Position (top > bottom, left > right)
• • Contrast (stands out from surroundings)
• Common Layouts:
• • Centered/symmetrical
• • Z-pattern (web)
• • F-pattern (text-heavy)

White Space & Simplicity

• What is White Space?
• Empty space between design elements (not always white!).
• Why White Space Matters:
• • Improves readability
• • Creates breathing room
• • Looks professional
• • Highlights important elements
• The Amateur Mistake:
• Filling every pixel with something
• The Pro Approach:
• Less is more – let elements breathe
• Simplicity Rules:
• • Remove anything unnecessary
• • If in doubt, leave it out
• • Clean > cluttered always