Design your panel pages to provide visual impact and help users understand the purpose of your page or site.

A panel page can be used as either:

  • a promotional landing page
  • a top-level landing page to assist with site navigation.

The design of your panel page will vary depending on your goals.

    Promotional landing 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

    Top of page

    Navigational landing pages

    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

    Top of page

    Designing your 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

    Top of page

    Best practice

    • 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.
    Top of page