Skip to main content Jisc logo

User experience and design

  • About
  • Key considerations
  • Get started
  • Foundations
  • Guidance
    • Principles
    • Building your layout
    • Design patterns
    • Jisc style
    • User interaction
    • Technical considerations
    • Making resources accessible
  • Resources
  • Assets
  • User experience and design
  • Guidance
  • Building your layout
  • Creating structure

Creating structure

Build your layout from the ground up using a grid to structure your design

Contents

  • Principals
  • Grid
  • Layout and structure

Principles

  • Follow a grid and be modular
  • Content informs structure
  • Use proportion to create focus

 

Grid

grid example

Example grid setup

Baseline

A baseline grid uses horizontal alignments to arrange typography. The bottom of each line of text sits at equal vertical increments. Use a baseline grid in combination with a column grid system to structure elements on a page.

You should use a 9 px baseline.

Columns

Column grid systems use vertical alignments to define content areas of your layout. Layout elements or content can span multiple columns and not all columns need to be filled.

You should use 12 column grid.
Running text must not span more than 9 columns.

Margins and gutters

Margins are the blank space around the edges of your page and gutters are the spaces between columns in your layout. Margins and gutters share the same value as your baseline.

For smaller screen sizes use 9px margins and gutters, at larger sizes use 18px.

Margin and gutter sizes at key breakpoints

Width Margin Gutters
0 – 465px 9px 9px
465px – 756px 18px 18px
756px – 990px 18px 18px
990px+ 18px 18px
Your default max width for landing/website pages should be 990px

 

Layout and structure

Rhythm

Rhythm is the repetition or alternation of elements that establish a design or layout. It provides users with a consistent pattern for how they visually consume content.

Scrolling has become natural for users. Follow a progressive rhythm that flows down the page (from side to side), punctuating the main content with supporting information where relevant. Avoid creating large blocks that forces a user back up the page in order to understand the structure of its content.

When the primary purpose of a page is reading (for example with articles, reports or guides) use sidebar content very sparingly.

rhythm

Examples of good and bad content rhythm

Proportion and dominance

Proportion is the relationship of scale between elements in your page that creates visual weight. Dominance gives emphasis to the element with the most visual weight and leads the eye where to look first.

Proportion should be used to compare the size of elements as well as the amount of space between them
Use of exaggerated proportions to give primary focus main element of the page
Elements can be dominant in the foreground, subdominant in the middle ground or subordinate in the background.

dominance

Examples of design patterns with different levels of dominance

Placement

Hierarchy

Visual hierarchy is the arrangement or presentation of elements in a way that implies importance. The mind first recognises objects with the highest contrast to their surroundings. Visual hierarchy is based on users’ visual understanding of the environment, which is affected by past experiences, present context and future goals.

A successful design should use visual cues to help users achieve their primary task. Users hunt for visual cues that will help them achieve a task, and they tend to overlook items that are less relevant. To influence where people first look, focus on their primary task and then prioritise other elements based on what you anticipate them doing next.

Alignment

Alignment is the arrangement of elements with respect to their direction, orientation or pattern. Precise alignment should be invisible to the user, but helps to organise page elements, group items and create visual connections.

Layout

Atmosphere

How to contain content, build depth and use colour

patterns

Navigation

Primary and secondary navigation styles in use on our sites

patterns

Organising content

Using tabs and show/hides

Useful links
  • Cookies
  • Privacy and your data
Contact
  • user.experience@jisc.ac.uk
Archive
  • Looking for the old pattern library?
Jisc logo

We’re a membership organisation, providing digital solutions for UK education and research

jisc.ac.uk

Areas
  • Connectivity
  • Cyber security
  • Cloud
  • Data and analytics
  • Libraries and research
  • Student experience
  • Advice and guidance
Explore
  • Guides
  • Training
  • Consultancy
  • Events
  • R&D