Templates
Templates, also called page layouts, define the structural blueprint of a single web page. They serve as standardized, reusable containers for arranging and organizing content.
A template takes the individual building blocks of our website—components—and composes them within a single page. For example, a template can combine a Header component, a Footer component and a Navigation component with various text inputs to create a form. A single template can hold multiple variations of a component, depending on the context of the content.
Templates are an essential tool for maintaining consistency in structure and visual presentation across InsureKidsNow.gov.
How Are Templates Useful?
Templates allow teams to accelerate design and development by providing a reliable starting point for page construction.
Instead of building the fundamental structure of every page from scratch, teams can pull a pre-approved template and customize it to meet specific user needs.
Templates are valuable because they:
- Ensure Consistency: Templates utilize common layout grid combinations and leverage design system utilities and default settings to maintain a cohesive experience across all pages.
- Guide Content Structure: They provide structure and context for the content displayed on the page, helping users find what they need.
- Support Prototyping: They are excellent resources for quickly creating wireframes and prototypes, especially when introducing new pages or features.
- Show Implementation: Templates demonstrate how components (sometimes modified) and utilities can be mixed together in a real-world, mobile-friendly application.
Examples of templates often documented in design systems include landing pages, 404 error pages, documentation pages, and specific form structures.
The Work Involved
Defining templates requires understanding how various components and layout elements come together on a page to create an intuitive experience. The goal is to build an accurate style guide reflecting the current state of InsureKidsNow.gov for our entire team.
The work involves significant Human Centered Design/Business Analyst (HCD/BA) effort, including research, writing documentation and designing the corresponding layouts in Figma. This effort is tracked using Jira “design stories,” which then serve as the basis for development stories.
The style guide development is being built from the ground up, starting with foundational page elements like typography and the global page layout. While the need for a dedicated Templates section is documented, thorough development and detailed documentation for this section is currently pending future prioritization.