Course 1.1 — Design Fundamentals & Visual Principles
Build a rock-solid foundation in typography, color, layout, and composition. Learn to communicate visually with clarity and purpose—while weaving accessibility into your craft from day one.
Who is this for?
Beginners and career-switchers who want practical, portfolio-ready skills—without drowning in jargon.
- Choose and pair typefaces for real products
- Build accessible, on-brand color palettes
- Compose clean, scannable layouts with intent
Learning Outcomes
- Master typography, color theory, and layout principles.
- Understand visual hierarchy and composition.
- Learn accessibility basics aligned with WCAG standards.
Typography Essentials
Typography is how text looks and behaves. It shapes trust, comprehension, and brand personality.
Key Terms
- Typeface vs font — Typeface is the family (e.g., Inter); font is a specific weight/size.
- Leading — Line spacing; aim for 1.4–1.6× for body text.
- Tracking — Overall letter spacing; use subtly for headings.
- Hierarchy — Typographic scale for readable structure.
Practical Rules
- Use a type scale (e.g., 12/14/16/20/24/32/48).
- Limit to 2 families (one for headings, one for body).
- Body text: 16–18px, comfortable leading, 60–80 chars/line.
- Use weight + size (not all caps) for emphasis.
Common Pitfalls
- Too many fonts or weights
- Lines too long/short
- Low contrast on backgrounds
- Poor spacing between headings and paragraphs
Create a type scale in your tool and apply it to a mock landing page. Test readability on mobile and desktop.
Color Theory
Color communicates mood and meaning. Good palettes balance harmony, contrast, and accessibility.
Core Ideas
- Hue, saturation, value describe color’s character.
- Analogous palettes feel calm; complementary palettes pop.
- Contrast is crucial for readability and focus.
- Use color to support hierarchy—not replace it.
Accessible Contrast
- Body text vs background: aim for 4.5:1 contrast ratio (WCAG AA).
- Large text (≥24px regular or 18.66px bold): 3:1.
- Don’t use color alone to convey meaning; add icons or labels.
Build a 5-color palette: primary, secondary, success, warning, neutral. Test contrast for buttons and small text.
Layout Principles
Grids & Spacing
- Use a baseline grid (4/8px spacing) for rhythm.
- Align content to a column grid (e.g., 12-col).
- Whitespace is a design tool—let elements breathe.
Alignment & Flow
- Use consistent margins/padding.
- Group related content; separate unrelated blocks.
- Design mobile-first; scale up to tablet/desktop.
Rebuild a cluttered homepage using a 12-column grid and 8px spacing. Before/after screenshots for reflection.
Visual Hierarchy & Composition
Hierarchy directs attention. Composition arranges elements for clarity and balance.
Tools of Hierarchy
- Size: bigger = more important
- Weight: bolder draws attention
- Position: top/left is scanned first (for LTR languages)
- Contrast: color & tone differences
Composition Patterns
- Z-pattern/F-pattern for scan-heavy pages
- Rule of thirds for focal balance
- Proximity to group meaningfully
- Repetition to create cohesion
Micro-copy & Labels
- Headlines should promise value
- Buttons: concise verbs (“Start free trial”)
- Helper text for forms; avoid placeholder-only labels
Create two hero sections: one weak, one improved. Annotate what changed (size, contrast, placement, copy).
Accessibility Basics (WCAG-aligned)
Accessible design improves experience for everyone. Start simple and build habits.
Color & Contrast
- Maintain AA contrast (4.5:1 for body).
- Don’t use color alone—add icons, patterns, or text.
Structure
- Use semantic headings h1…h4 in order.
- Label form fields; ensure clear focus states.
- Provide skip links for keyboard users.
Motion & Media
- Respect prefers-reduced-motion.
- Caption videos; provide alt text for images.
- Contrast meets AA for text
- Keyboard navigable (no traps)
- Forms labeled & errors explained
- Alt text for meaningful images
Practice, Assignments & Assessments
Guided Tasks
- Type Scale & Pairing: Create a typographic scale and pair 2 families. Apply to a blog article (title, h2, h3, body, caption).
- Accessible Palette: Build a 5-color palette. Verify AA contrast for text and UI states (default/hover/disabled).
- Grid Layout: Redesign a simple landing page using a 12-column grid and 8px spacing system.
- Hierarchy Rework: Rebuild a cluttered hero into a clear, scannable section. Annotate decisions.
Portfolio Brief (1 week)
Design a 3-screen “Learn It” mini-site (Home, Course Detail, Sign-up). Emphasize typography, accessible color, and clean composition.
- Deliverables: Figma/XD file + PNG mockups + 200-word rationale.
- Scoring (100 pts): Typography 30 · Color 25 · Layout 25 · Accessibility 20.
Self-Check Quiz (sample)
- What’s the recommended contrast ratio for body text? (Answer: 4.5:1)
- How many type families should beginners typically use? (Answer: ≤ 2)
- Which layout spacing unit keeps rhythm across components? (Answer: 4/8px system)
Further Resources
- Google Material 3 — Typography & Color (concepts & scales)
- Apple HIG — Layout & Accessibility pointers
- Web Content Accessibility Guidelines (WCAG) — quick reference
Tip: Add a “contrast checker” plugin/extension to your browser and test early.