Design for Developers

What you will learn

• Organize content by user goals and establish visual hierarchies.
• Guide users with type, ensure readability, and build scales.
• Use colors meaningfully, check contrast, and maintain accessibility.
• Apply consistent spacing systems, grids, and responsive hierarchies.
• Make interfaces intuitively usable through states, forms, and motion.
• Synthesize a complete project from conception through debugging to the final design review.

Course content

1. Chapter 1 Purpose and Hierarchy

   Organize content by user goals and establish visual hierarchies.

   1. User Goal and Primary Action
   2. Balancing Visual Weights
   3. Fixing Hierarchy Errors
   4. Scannability and Structure
   5. Hierarchy Challenge
   6. Mini Project: Dashboard Entry

2. Chapter 2 Typography

   Guide users with type, ensure readability, and build scales.

   1. Typefaces and Pairings
   2. Applying a Typographic Scale
   3. Fixing Line Length and Height
   4. Font Weights and Styling
   5. Typography Challenge
   6. Mini Project: Article View

3. Chapter 3 Color and Contrast

   Use colors meaningfully, check contrast, and maintain accessibility.

   1. Color Roles and Semantics
   2. Calculating Contrast Ratios
   3. Fixing Accessible Color Errors
   4. Dark Mode and Color Palettes
   5. Color and Contrast Challenge
   6. Mini Project: Status Dashboard

4. Chapter 4 Layout and Spacing

   Apply consistent spacing systems, grids, and responsive hierarchies.

   1. Spacing Systems and Scales
   2. Applying the Law of Proximity
   3. Fixing Layout Chaos and Spacing Errors
   4. Responsive Columns and Flexbox Spaces
   5. Layout and Spacing Challenge
   6. Mini Project: Product Catalog Layout

5. Chapter 5 Interaction and Feedback

   Make interfaces intuitively usable through states, forms, and motion.

   1. Interactive States and Affordance
   2. Forms and Inline Validation
   3. Fixing Ambiguous Interaction Errors
   4. Micro-Animations and Purposeful Motion Design
   5. Interaction and Feedback Challenge
   6. Mini Project: Interactive Settings Form

6. Chapter 6 Design Synthesis and Review

   Synthesize a complete project from conception through debugging to the final design review.

   1. Design Audit and Checklist
   2. Cumulative Design Fixes
   3. Code Refactoring for UI Systems
   4. Documenting Design Decisions
   5. Final Design Challenge
   6. Mini Project: Complete Application

How each lesson works

No hour-long videos. Each lesson is a short loop you complete yourself, until the idea sits.

1. Read

   A short explanation and one clear task. Just enough to get going.

2. Write

   You type the code yourself, in a real editor right in the browser.

3. Run

   Run it and see what your program actually does, straight away.

4. Check

   Check tells you whether the task is solved, and what is missing if not.

Good to know

• Nothing to install: editor, output and checks run in your browser tab.
• Start as a guest without an account; your progress stays on this device.
• A free Ostrae account syncs progress and settings across devices and unlocks the MICA coach.

More courses

• C# Fundamentals
• HTML: Structuring Websites
• CSS: Styling Websites
• JavaScript
• Python Fundamentals and Automation
• Git, GitHub and Hosting
• GSAP Animations