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.
- 01Visual foundationsHierarchy, color, typography, and visual rhythm.35 min practice
- Layout and flowBox model, normal flow, and structure.35 min practice
- FlexboxAxes, alignment, gap, and distribution.35 min practice
- Grid and responsive designRows, columns, and adapting across screen sizes.35 min practice
- Components and design systemsReuse, variants, and semantic tokens.35 min practice
- Prototyping and final projectStates, actions, and a flow you can try.35 min practice
What you will learn
Practice with the real editor: visual composition, box model, flex, responsive grid, components, tokens, and prototyping.
Visual foundations
Build a hierarchy that makes the screen easy to understand at a glance.
Layout and flow
Structure a page with the editor’s flow and box model.
Flexbox
Use Flexbox to distribute a row of items with rhythm and alignment.
Grid and responsive design
Create a readable grid and adapt it to a mobile screen.
Components and design systems
Turn a repeated element into a component and apply a color token.
Prototyping and final project
Add an interaction and check that the prototype has a start and destination.