Designing panel pages

When designing a promotional landing page, it's important to ensure the page clearly communicates your message and the action you want your users to take (e.g. register for an event or attend a seminar).

A good promotional landing page includes:

• a hero banner that introduces the primary focus of the page
• a single call to action near the top of the page
• only information that relates to the call to action.

See an example of a promotional panel page

As navigational landing pages are designed to direct users to further information, they can be shorter and include less text. Navigational landing pages should include relevant links to help users find more information.

A good navigational landing page includes:

• a logical, clear navigation structure
• clear calls to action, so users can easily find the information they need to.

See an example of a navigational panel page

Whichever type of panel page you are designing, make sure to design it carefully. An ineffective panel page can obscure the purpose of your content and weaken the user experience.

Every panel page needs:

• a clear heading
• quality, relevant images
• succinct, clear and useful information.

Make sure the purpose of your panel page is obvious, and keep it focused on a few essential tasks.

Drafting your page

To plan the design of a panel page before building it on your site, you can build in your sandbox site.

Create a Sandbox

Structuring your page

Your panel page should follow a general structure:

• include a hero banner with a H1 as the first panel on the page
• include important information at the top of the page
• include remaining information in order of relevance.

Your page shouldn't be too long — make sure you only include the information that you need.

Using panels

When you build your page, make sure you use a variety of panels. While too many components may make a page look overwhelming, a sensible mix of different panels will stop the page from looking plain. Use your judgement to find a balance.

Learn how to use different landing page panels

• Only use images that relate to the content in your panel page design.
• To help direct users' attention, only include one call to action on a promotional landing page.
• Use white space to break up the page, so it is visually easier to follow.
• Try to keep a balance of panels on the left and right of the page. Avoid creating 'zebra' pages, which occur when there is too much similar content creating stripes down the page.
• Ensure the content and functionality of your page is focused to meet your target audience's needs – don't distract users by trying to create a broad page that does everything.