Functional Patterns
Defining Pattern Structure
Documenting content hierarchy before visual design to align design and code
Key Insight
A pattern's structure is the set of content elements it requires and their hierarchy-separate from visual treatment. Documenting structure before visual design ensures designers and developers share understanding of what a pattern contains, which elements are required vs. optional, and how elements group. When markup reflects the documented structure, changes are predictable.
Key Points
- •Structure = required content elements + their grouping hierarchy
- •Separate structure from visual design to enable flexible implementations
- •Required vs. optional elements should be explicit in documentation
- •Shared structure understanding aligns designer intent with markup
- •Structure sketches focus on content relationships, not layout or styling
Guidelines
- ✓List core content elements before starting visual design
- ✓Define required vs. optional clearly-vague "optional" creates inconsistency
- ✓Sketch grouping hierarchy collaboratively with developers
- ✓Verify that the final markup reflects the documented structure
- ✓Test with real content variations before considering the pattern stable
Want to learn this interactively?
Experience hands-on experiments and test your understanding.
🔥
Practice this topic
Active recall - strengthens long-term retention