Design-process
Preview#
A governed design process
The process turns observed needs into reusable, verified decisions. It is iterative: evidence from later stages can return work to an earlier one.
Observe
Audit the existing experience, content, constraints, and accessibility needs before choosing a solution.
Evidence Existing-site audit and documented needs
AccessibilityFrame
Set information architecture, ownership, durable constraints, and the decisions that need an ADR.
Evidence Information architecture and decision record
Decision recordsDesign
Shape foundations, token roles, page layouts, and component behavior as one connected system.
Evidence Token architecture and design-system overview
Design system overviewSpecify
Record component contracts, authoring APIs, variants, accessibility expectations, and source ownership.
Evidence Interface manifests and component reference
ComponentsBuild
Implement Hugo partials, generated CSS tokens, and only the JavaScript needed for a clear interaction.
Evidence Implementation architecture and generated outputs
Token architectureVerify and govern
Prove the contract with builds, checks, responsive review, and maintained guidance; then feed the result back into the next decision.
Evidence Quality model, changelog, and current guidance
Quality model
Example
{{< design-process >}}When to use
A data-driven cycle linking design-process stages to their governing evidence and documentation.
Implementation
layouts/shortcodes/design-process.htmlOptions
This shortcode has no named parameters in its template.
Interface manifest
- Kind
- Shortcode
- Category
- Data
- Status
- Implemented
- Implementation
- Shortcode:
layouts/shortcodes/design-process.html