A NSW Government website
NSW Government
Design System v3.18.2

You are here

Help a user orientate themselves in your product or service.

When to use

Users may come to you from a number of sources (ie. search engine, related links etc), so any page could be the first one they land on. Therefore it's important that each page not only shows them where they are, but what else is available. This can be achieved through content and visual cues to make it easy for users to identify who is speaking, where they are and where they can go.

How it works

Who is speaking

The masthead identifies your site as part of the NSW Government, located in a prominent and consistent position for users. The brand logo also shows ownership of the content and has a consistent placement based on your brand classification.

A site descriptor is the title or name of your site, product or service. It can also communicate the agency or department from which the content is coming from within NSW Government. A secondary descriptor can be used where further context is required by the user to identify the associated department or agency.

Building the experience:

  • Masthead: must be displayed on all NSW Government masterbrand and co-brand digital products and services, with pre-built variants based on your classification.

  • Header: helps you meet logo and site descriptor requirements, with brand approved spacing and typography styles. Header layouts can be adapted, and in some cases combined with the main navigation. In all cases the logo and descriptor requirements must be met.

Where am I

Page titles and introduction text identify a users location and summarise the content. This should be short, descriptive, and distinct from the page content.

Elements like breadcrumbs expose the hierarchy prior to the current location to help a user understand where they are within a website's structure.

Building the experience:

  • Typography styles: applies hierarchy to page titles and can be used alongside other UI elements (such as background colours and borders) to create visual separation.
  • Hero banner: help draw attention and give context to a product, service or page. Homepages can utilise a larger area, where landing or category pages should only utilise a small area as not to over use the component or create banner-blindness.
  • Breadcrumbs: display in the top left of the main content area above the page title exposing the parent-level page titles allowing users to move between the multiple levels of a website.

Where can I go

Your site navigation surfaces available levels of content for users to explore and navigate through. You can also feature functions of the site or additional actions within your navigation that can be taken by the user (ie. Login, Language etc) to further customise their experience.

Search allows users another way to explore and find desired content.

Building the experience:

  • Main navigation: shows users the top level of your IA and access to deeper levels via the mega menu. Smaller navigation that doesn't require its own section can also be displayed in the header if spacing allows. Be sure to test your navigation across multiple viewports to ensure options are readable and accessible on small devices.
  • Side navigation: use to show sibling pages or expand to expose deeper levels of content.