Page templates

Page templates

These templates for a landing page and a documentation page are built from some of the components of the U.S. Web Design System. Each of these pages is flexible; you can add or remove components or sub-components to suit your needs. These templates are great starting point for prototyping or for trying the Design System to see if they’re a good fit for you.

Template 1: Landing page

A landing page is intended to provide someone’s first impression of your agency or program. Often, they’ll arrive from somewhere else without much context, like a search result or a colleague’s email. So a landing page needs to be clear, engaging, and contextualizing.

When to use

  • If you are introducing a new program to the public through a marketing or publicity campaign, a landing page is a good place to point links at. It can build on the minimal copy of a campaign without overwhelming readers.
  • The landing page can be a good model for a homepage. But do some research first. What do you have to say? What do your users need to know? Figure these things out. It’s important to know what you have to say about your organization before you settle on a homepage design.

When to avoid

  • Don’t use a landing page for standard internal page content. The same things that help people understand basics quickly can become distracting for people who are looking for more depth.
  • Don’t try to include forms or side navigation in a page like this. Those are visually complex components, and a landing page works best without too much complexity.

Guidance

  • If you are using the landing page to encourage users to follow a primary call to action, consider getting rid of the header. The less there is to distract people from the most important task, the more often they will do it.
  • For guidance on specific components, see the pages for the individual components.
  • Do not create extra content just to fill the template. You can remove individual components (such as the media block) or sub-components (such as individual menu items in the header) from the template as you implement it. This version gives you a broad idea of the number of things your landing page could include. But never make a page more complex than you need to. If you’re unsure, interview users to find out what they need to know.

Components used in this template

  • Extended header
  • Hero feature
  • Typography — Merriweather headings and Source Sans Pro body
  • Graphic list
  • Media block
  • Grid
  • Headings
  • Buttons
  • Medium footer

Component definitions

  • Hero feature: Hero features are used at the top of your landing page to help set the tone for the content of your site and to help users understand what your brand is all about. The Hero feature offers a callout which provides a high-level overview of the content on the site and will often reference the Hero image that sits behind it.
  • Graphic list: The Graphic list is used to showcase a number of related items and their respective images in a grid pattern.

Template 2: Documentation page

A documentation page presents information on a certain theme, topic, or idea. People often arrive here after visiting the landing page or after searching for a specific piece of information, so documentation pages don’t need to provide as much contextualizing information as more introductory pages would. The copy should be clear, focused, and concise.

When to use

  • If you’re presenting detailed information on a specific topic or theme that has already been contextualized by a landing page. Some topics that can be nicely represented on this type of page include guides or how-tos, technical documentation, and program descriptions — in short, any subject that requires in-depth explanation.

When to avoid

  • Don’t use a documentation page to introduce your users to your agency or organization — the landing page is better suited to that purpose. The level of detail present on documentation pages can overwhelm users who are just becoming acquainted with your organization.

Guidance

  • Use a precise headline to quickly communicate your page’s purpose. If the page content is especially complex, you may consider using a subheadline to further clarify its meaning.
  • Write concise copy. Favor short sentences (and paragraphs) over longer ones, and use straightforward language, avoiding jargon. Remember, copy blocks don’t need to be long to be comprehensive.
  • For guidance on specific components, see the page for the individual components.

Components used in this template

  • Basic header
  • Typography — Merriweather headings and Source Sans Pro body
  • Grid
  • Headings
  • Side navigation
  • Documentation layout
  • Medium footer