es
Dodrawing Academy · open access

Learn interface design by creating

A hands-on path from visual foundations to prototypes. Read lessons without an account and practice on a temporary canvas using Dodrawing’s real tools.

Learning path

UI Foundations

Six progressive parts for building clear, structured, reusable interfaces. Each challenge is checked on the canvas before you move on.

18 hours6 partsPublic lessons and practice
  1. 01Visual foundationsHierarchy, color, typography, and visual rhythm.35 min practice
  2. Layout and flowBox model, normal flow, and structure.35 min practice
  3. FlexboxAxes, alignment, gap, and distribution.35 min practice
  4. Grid and responsive designRows, columns, and adapting across screen sizes.35 min practice
  5. Components and design systemsReuse, variants, and semantic tokens.35 min practice
  6. Prototyping and final projectStates, actions, and a flow you can try.35 min practice
UI Foundations

Part 1 · 35 min practice

Visual foundations

Build a hierarchy that makes the screen easy to understand at a glance.

0 / 6 completed

Lesson

A clear interface guides attention. Size, weight, contrast, position, and spacing tell people what matters first. Start with the content and task; decorative color comes later.

Key ideas

  • Hierarchy and grouping
  • Type scale
  • Contrast and semantic color
  • Consistent spacing

Practice challenge

Turn the starter content into a welcome card with three levels: title, description, and action. Make the title stand out and the button easy to find.

  • The title is at least 24 px.
  • The description is smaller than the title.
  • There is clear spacing between content and action.
Open practice canvas

Dodrawing Academy teaches UI foundations, visual hierarchy, color, typography, the box model, Flexbox, CSS Grid, responsive design, components, design tokens, and prototyping through hands-on canvas exercises.

Practice is temporary. Reset restores the starter DIL; leaving this page discards your changes.