Web design system learning path
A plain-language web design system guide: eight modules and 35 topics, from shared rules to components, pages, and maintenance.
A web design system combines shared interface rules, reusable parts, and usage guidance. Web means pages used in a browser. SaaS , or software as a service, means software accessed online, such as scheduling or customer-management tools.
This foundation guide contains eight modules and 35 topics. Each article uses short principles, a flow diagram, an illustrative table, and a concrete situation. Read in order or start with the problem you face.
How does the process fit together?
Accessibility , enabling people with different abilities and ways of using a page to access information and act, belongs throughout the process. This is a learning sequence, not a requirement to finish every foundation before testing.
Walk through an example
This is a hypothetical online booking service, not actual project data or a promise of results.
| Stage | Previous situation | Useful output |
|---|---|---|
| Understanding and audit | Saving differs across pages | Problem list and initial priorities |
| Visual rules and names | Colours and spacing chosen separately | Shared purposes and rules |
| Responsive layouts and components | Form squeezed in narrow windows | Adaptable layout and complete states |
| Pages and implementation | Static drawings only | A working booking process |
| Maintenance | Changes go unnoticed | Guidance, checking records, and adoption plans |
The team follows the booking process and finds form and saving-feedback problems. They align necessary colours, typography, spacing, and parts, then check narrow windows and keyboard operation. After implementation, they check success and failure paths and record changes and adoption instructions. For the next similar need, they reuse verified rules and check the new context.
1. Understand web design systems
Understand the problems a system solves before deciding how much to invest. Components are reusable interface parts; the system also explains their conditions and maintenance.
-
Start with tasks and existing problems rather than resource counts.
-
Audit real pages, states, and repeated work, preserving justified differences.
-
By the end, you can list initial problems to align, basic principles, and owners.
2. Establish visual foundations
Visual foundations organise colour, text, space, boundaries, and assets so a page is readable and understandable. Visual hierarchy means information priority, not making everything important very large.
-
Determine purpose before appearance. Colour and motion should communicate information.
-
Check real text on actual backgrounds; use spacing to show relationships.
-
By the end, you can explain common appearance rules and their conditions without a personal style manifesto.
-
How do you make icons, images, and illustrations consistent?
3. Organise design tokens
A design token names a reusable design decision and records its value, such as primary text colour. It lets design and development discuss the same purpose rather than simply exchange colour codes.
-
Separate raw values, purposes, and component-specific rules using appropriate layers.
-
Light and dark themes may assign different values to the same purpose; check each.
-
By the end, you can understand simple names, references, and web-variable mappings. CSS is the styling language for appearance and layout.
-
How do you organise primitive, semantic, and component tokens?
4. Responsive design and accessibility
Responsive design adapts arrangements to available space. Accessibility supports different ways of reading and operating. Both need real-browser checks.
-
Check wide and narrow windows, long text, and zoom rather than two screenshots alone.
-
Focus is the current keyboard position. Users must see it and move sensibly.
-
By the end, you can ask basic checking questions about reading, keyboards, states, and targets.
5. Build web components
A web component needs its structure, adjustable options, and interaction states explained. States describe conditions such as default, processing, and error.
-
Distinguish buttons, links, forms, navigation, and information containers by purpose.
-
Include waiting, failure, keyboard use, and long content, as well as default appearance.
-
By the end, you can explain when common parts belong, how they vary, and what needs checking.
-
How do you define component structure, variants, and states?
6. Combine pages and interaction patterns
Page patterns combine content and parts around common tasks, such as finding a service, comparing information, submitting a form, and checking results.
-
Templates preserve repeated structure; actual content serves the service and task.
-
Search and filtering should explain current conditions. Sorting changes order; filters change scope.
-
By the end, you can distinguish waiting, no content, no matches, failure, and completion and plan a next step.
7. Connect Figma and web implementation
Figma is a tool for creating interface designs and collaborating. Libraries, variables, and auto layout express rules; developers still need to implement working pages.
-
Make shared resources easy to find and explain options and purposes.
-
Test changing text and widths, then record correspondence with code.
-
By the end, you can discuss names, states, and change conditions with implementers without having to program.
-
How do you express web layouts with Figma components and auto layout?
8. Document, verify, and maintain
Maintenance keeps shared rules useful. Contributions propose changes; review assesses purpose and impact; migration helps existing pages adopt new rules.
-
Guidance covers purpose, options, states, limits, and maintenance contacts.
-
Check real pages and repeat previously working scenarios after changes.
-
By the end, you can explain ownership, feedback handling, and who an update affects.
Sources and scope
This guide explains foundational practices shared across public guidance. It does not treat one company’s complete parameter set as an industry standard.
- Practical references include Adobe Spectrum , the Figma website team’s case study , and AWS Cloudscape patterns for reuse, purpose, states, and design-development collaboration.
- Design education draws on RISD’s visual communication handout for typography, grids, and browser verification, and its Museum’s web-text guide for visual hierarchy versus page structure. RISD is the Rhode Island School of Design. Further reading includes the public introductions to Thinking with Type and Graphic Design: The New Basics , by teachers at MICA, the Maryland Institute College of Art, covering text, space, grouping, hierarchy, and grids. See author backgrounds for Ellen Lupton and Jennifer Cole Phillips . Specific web behaviour and checks follow the professional guidance cited in each article.
- Web use and accessibility refer to USWDS and W3C checking guidance . General suggestions and conditional standards requirements are explained separately.
Tables and scenarios are teaching examples; numerical choices do not represent SiteMonk’s adopted configuration. The scope is web interfaces, including phone browsers, rather than native iOS or Android apps. This English edition translates the Chinese edition; actual project materials can later be added within this structure.