Structure and layout overview

Structure and layout components manage the placement and spacing of key page elements. They help organize the page composition and are responsive for consistency across platforms, environments and screen sizes. This way, users recognize the brand continuity within your site and are able to learn or memorize interactive patterns.

Considerations and cautions

Structure and layout should create a clear visual and sequential hierarchy to help users scan or locate information quickly. North American readers, particularly assistive devices, tend to read from left to right and top to bottom, so it's important that your content flows in the right order, regardless of the layout.

Structure and layout components

  • Footer

    Offers quick access to rarely visited areas of the site.

  • Grid

    Helps create a clean user flow and reduce visual clutter.

  • Header

    Establishes for the user what digital space they find themselves in.

  • Page title block

    Gives users context of the current page and options for actions.

  • Wordmark

    Used as a visual label for a section of pages on a website.