Atmosphere

How to contain content, build depth and use colour

Principals

  • Lead the eye
  • Create focus
  • Consider the space between

Containing content

Containers create a visual hierarchy on the page and help give contrast to content areas. We use various styles to define areas of content and lead the user through the content of a page.

Content container types

The core content of your page should always be on a white background

Asymmetric block

  • Used for create a signature Jisc focal style for your primary content or main call to action
  • Should be the largest thing in your layout
  • Used with subtle drop shadow to lift away from the page background
  • Used with cards to define secondary or tertiary areas of content

Example: Domain registry

Full block

  • Full-width white block which is the main body of your page
  • Reserved for task-focused UI pages to minimise distractions and maximise screen real estate
  • Used in conjunction with UI toolbar
  • Can be used with cards to define secondary or tertiary areas of content

Cards

  • Generally used for secondary or tertiary content that relates to primary content
  • Used singularly to draw attention to a key piece of information such as an alert
  • Used in multiples where there is a relationship between the content in each

In the main body

  • When using cards inside the main body to block areas of content colour, shape and proportion should be carefully considered so that the user isn’t overwhelmed by the design

Example: Domain registry

On background

  • When used on grey background add subtle drop shadow to lift them away from the background
  • Work well in odd numbers
  • Primarily used as drivers on landing pages or for related content underneath an asymmetric block

Examples: Hairdressing Training, Jisc about page.

Negative space

Building depth

To bring a sense of depth to your design explore overlapping content blocks or background elements – such as images and text blocks. You can also use shadows sparingly to lift overlaid blocks of content or cards away from their background. See Google’s material properties for more further information about creating a sense of depth using shadow.

How to use

  • Ovelap content areas or background elements
  • Use shadow on layout containers are positioned on a grey background
  • Use shadow on buttons

Using colour

Jisc’s visual style is bold yet light, and uses colour sparingly to highlight key areas of interest or calls to action.

The bulk of any design should be kept light and neutral, supporting the brand value ‘light not dark’. Use subtle layering, background gradient and/or imagery to give a sense of depth – ‘deep, not flat’.

Considerations

  • Make sure your layout has a generous amount of clear space:
    • Our websites should look airy and considered
    • Avoid filling a layout with too much content, always leave space for your design to breathe
  • At least 80% of your design should feature neutral colours
  • Use accent colours sparingly for emphasis, (eg header, call-out boxes, quotes, and calls-to-action)
  • Orange is Jisc’s brand colour – it should not be used outside of the link hover and logo