Creating structure

Principles

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

Grid

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.

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.

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.

Margin and gutter sizes at key breakpoints

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.

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.

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.