Templates

Landing page

Provide someone’s first impression of your agency or program.

About the landing page template

Often, site users arrive at a landing page without much context, so a landing page needs to be clear, engaging, and contextualizing.

Demo Landing page

Guidance

When to use the landing page template

• Introducing a new program. 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. It can build on the minimal copy of a campaign without overwhelming readers.

When to consider something else

• Internal pages. 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.

Usability guidance

• Remember to do your research. 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.
• Don’t make it too complicated. Don’t try to include forms or side navigation. Those components are visually complex, and a landing page works best when content is kept simple.
• Simple pages may not need a header. 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.
• Remove unnecessary elements. 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 template 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.
• See component-specific guidance. For guidance on specific components, refer to pages on the components of interest.

Components used in this template

• Extended header
• Hero
• Graphic list
• Button
• Grid
• Medium footer

Component definitions

• Hero: Heroes 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 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.