- Lead the eye
- Create focus
- Consider the space between
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.
The core content of your page should always be on a white background
Content container types
- 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-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
- 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
- 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.
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
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’.
- 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