Layout

Layout carefully places individual parts in relationship to the whole and holds them firmly in space.

Let it breathe

A clean layout is approachable and opens up mental space to get into the flow. It clears clutter and removes the guesswork from a user’s gaze.

Image of a wireframe with boxes fading in and out inside of it. Image of a wireframe with boxes fading in and out inside of it.

Principles

The following principles describe many ways of positioning content in order to achieve aesthetically pleasing layouts. Think of the screen as a frame that elements are placed within. Arrange elements to provide people with an understanding of what is most important, what their choices are and how to make the best use of their information.

Balance

Balance creates harmony that comes from human ideals as they relate to physical structure, visual weight and arrangement of a composition. An unbalanced layout can create feelings of instability and tension. Balance can be symmetrical or asymmetrical, an even or uneven distribution of elements around a central axis, respectively.

Three equal columns containing similar amounts of content on the same level Three equal columns containing similar amounts of content on the same level

Symmetrical balance

Three unequal columns containing different amounts of content at different levels Three unequal columns containing different amounts of content at different levels

Asymmetrical balance

Rhythm

Rhythm is the repetition or alternation of elements that establish a visual texture or pattern. Rhythm provides users with a consistent pattern for how they visually consume content. Depending on the kind of movement and pacing, rhythm can feel consistent (regular), organic (flowing) or sequenced (progressive).

Regular rhythm created by three equal short blocks of content side by side Regular rhythm created by three equal short blocks of content side by side

Regular Rhythm

Flowing rhythm created by a long column of content on the left and another on the right Flowing rhythm created by a long column of content on the left and another on the right

Flowing Rhythm

Progressive rhythm created by a row of content on the top and another below Progressive rhythm created by a row of content on the top and another below

Progressive Rhythm

Proportion

Proportion is the scale relationship between elements that creates visual weight, depth and foreground/background relationships. Proportion compares the size of forms as it relates to the amount of space between them. Moderate proportions (objects with similar scale) can feel static or provide a sense of harmony. Exaggerated proportions (objects with stark differences in scale) can make a layout feel out of balance or give primary focus to one area.

A mock-up of a webpage animating to show foreground, middle ground, and background

Dominance

Dominance gives emphasis to the element with the most visual weight and leads the eye where to look first. Elements can be dominant in the foreground, subdominant in the middle ground or subordinate in the background.

A mock-up of a webpage animating to show the subordinate, the dominant, and the subdominant

Unity

Unity is the relationship between parts of a whole in the composition. It ties elements and spaces together to create a sense of cohesion or completeness based on how the brain pattern-matches and categorizes information.

An example web page with a very unified layout, with the main content as three purple boxes of the same size on the page in a pleasing format An example web page with a very unified layout, with the main content as three purple boxes of the same size on the page in a pleasing format

Unified

An example web page with an isolated format, with the main content spread all over the page, looking very messy An example web page with an isolated format, with the main content spread all over the page, looking very messy

Isolated

Composition

A well-composed layout guides a user in understanding the relationship between the way things look and how they function. Compositions with a consistent layout scheme help people navigate a product and direct the eye on when to focus and take a break.

Z Layout

Z layouts account for the natural direction eyes travel when they scan content. The pattern looks like a Z, where eyes wander from left to right, right to lower left and left to right again. Z layouts are ideal for helping people scan content quickly. The Z layout concept clearly demonstrates the left to right directionality of Western Latin language readers, but may be advised against for people who read from right to left, such as those speaking Hebrew or Arabic.

A sample webpage with a clean layout, over the top of the page is a purple Z, showing how a user's eyes move A sample webpage with a clean layout, over the top of the page is a purple Z, showing how a user's eyes move

Rule of Thirds

The rule of thirds splits a composition into three parts, both vertically and horizontally, creating a grid of rectangles. Elements in the composition should align to the edges of each equal part. This type of layout achieves more dynamism, energy and intrigue than simply centering content.

A sample webpage with a clean layout, over the top of the page are three equally sized purple columns illustrating the rule of thirds A sample webpage with a clean layout, over the top of the page are three equally sized purple columns illustrating the rule of thirds

Golden Ratio

The golden ratio is a mathematical relationship (approximately 1.618) often spotted in nature and valued for its familiar and visually pleasing proportions. It creates a harmonious balance and defines where secondary and tertiary information, such as sidebars, live and what size they should be. Like typography, this ratio helps reinforce a modular scale for your design.

A sample webpage with a clean layout, over the top of the page is an example of how a page can be broken into different sections according to the rule of thirds A sample webpage with a clean layout, over the top of the page is an example of how a page can be broken into different sections according to the rule of thirds

Example: If you want to split an area, measure the width of the available area, let’s say 1080 pixels by 1.618, to get a rounded-down 667 pixels.

Subtract 667 from 1080 to get 413 pixels. The two numbers 667 and 413 are the sizes you will want to use for your main content and sidebar, respectively.

We promote the use of classic proportions and traditional compositions so our products feel timeless. There are many different types of composition strategies for a layout and it’s important to keep in mind the kind of content you are working with and what your user wants to do with it.

Three arrows with an eye overlayed, visually explaining leading with the eye Three arrows with an eye overlayed, visually explaining leading with the eye

Lead the eye

A clean layout is approachable and opens up mental space to get into the flow. It clears clutter and removes the guesswork from a user’s gaze.

Grids

Grids are a structure for arranging content, based on alignment with a series of horizontal and vertical lines. Grid systems can vary in column number and complexity. The goal of grids is to bring order and consistency to a layout, enabling a designer to place content efficiently.

Pixels are the base units of measurement when designing for technology. A group of horizontal pixels is a column, and column intervals are not always uniform. The spacing between columns is called the gutter. Gutters always have the same width, and they ensure that column content does not overlap. Margins are the equal vertical spaces on outer sides of the first and last columns. They frame the content with white space.

When used correctly a grid will enhance, balance and structure content, so users can read and view the information with ease. Although grids add structure, flexibility and consistency to a design, the designer should also balance the content’s rhythm as well.

Baseline

The 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 another grid type to structure elements on a page.

A visual representation of a baseline grid with horizontal lines evenly spaced going across a webpage A visual representation of a baseline grid with horizontal lines evenly spaced going across a webpage

Column

Column grid systems use vertical alignments that work well for running text and block areas. They can be single column or multi-column. More columns allow for more flexibility. Keep in mind that content can span across regions and that you do not need to fill the entire column with content.

A visual representation of a column grid with five even vertical sections on top of a sample webpage A visual representation of a column grid with five even vertical sections on top of a sample webpage

Modular

Modular grid systems use both horizontal and vertical thresholds to create subdivisions called modules. Modules work together to create spatial zones that anchor your content. Modular grids provide great consistency, but tend to be more constrained.

A visual representation of a modular grid, with small boxes of the same size evenly spaced covering a sample webpage A visual representation of a modular grid, with small boxes of the same size evenly spaced covering a sample webpage

Hierarchical

Alignments in a hierarchical grid are based on intuitive ratios or proportion. Each proportion communicates a different tone. An evenly divided layout feels resilient and permanent. Grids that are constructed utilizing the golden ratio feel natural and harmonious. Anarchical alignments can create a sense of excitement or unease.

When you understand how to create and utilize grids, you can then know when it is appropriate to break them. Breaking the grid can create a powerful visceral response. However, a designer should always have a clear purpose behind the break.

A visual representation of a hierarchical grid, with sections of different sizes evenly spaced layed out on a sample webpage A visual representation of a hierarchical grid, with sections of different sizes evenly spaced layed out on a sample webpage

Placement

Placement is how people perceive and group information together. Elements that are close to one another are usually grouped in the same category. For example, when images are placed near text, they can be perceived by users as being related. Because of this, it is important that they’re relevant to one another. When grouping is not taken into consideration, users can receive confusing, mixed messages.

Elements exist on an x, y and z axis. The x and y axis are the relative positioning on a grid and the z axis signifies the layers in space that create depth.

A sample of a 3D box on a grid, with the x, y, and z axes marked for the viewer A sample of a 3D box on a grid, with the x, y, and z axes marked for the viewer

Hierarchy

Hierarchy is the order in which the eye perceives what it sees. The mind first recognizes 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. Users hunt for visual indicators that help them achieve a task, and they tend to overlook items that are less relevant. To influence where people look, focus first on what they are doing and prioritize based on what you anticipate them doing next.

A mock-up of a webpage animating to show the primary focus and the secondary focus A mock-up of a webpage animating to show the primary focus and the secondary focus

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 organize page elements, group items and create visual connections.

A sample page with colored horizontal sections overlapping colored vertical sections, indicating how page elements line up with respect to other page elements A sample page with colored horizontal sections overlapping colored vertical sections, indicating how page elements line up with respect to other page elements

Scale

Scale is the comparative size in regard to the surface area of an element. Color and scale play off one another. Bright colors in large areas move things forward in visual space, and muted, dark colors in small areas recede.

A sample of a page with different-sized sections of different shades of purple, inviting a size comparison for the different sections A sample of a page with different-sized sections of different shades of purple, inviting a size comparison for the different sections

White Space

White space creates a visual pause between elements on the screen where the eye can rest. It sets things apart or brings them together to distinguish an element’s importance or priority. White space makes a layout feel clean and approachable while maintaining content-rich design.

To open up a layout, put the fewest possible elements on the page. Add elements only when necessary to provide opportunities for users to take the next action. The fewer elements you place, the more expressive the white space becomes. Ample spacing is also functional; it affords room for the expansion of text after translation. When a layout is cluttered, it is harder for people to know what to do and how to do it.

Application

Application design is modular to accommodate engagement with an app on any screen device. An adaptive user interface responds to any display changes with grace.

Devices in purple, some in portrait, some in landscape Devices in purple, some in portrait, some in landscape

Be aware of the screen sizes you’re designing for and the different orientations and directionality people may view your content in.

Thoughtful positioning follows how a user wants to interact. Give focus to the content users care about most. Consider the user’s most important tasks and elevate their presence. For example, main tasks feel prominent when placed near the left side or the upper half of the screen.

For all environments, keep layout components relatively similar to help users feel a sense of familiarity and control over their workspace. Keep elements that work the same looking the same to avoid distracting users with inconsistencies.

In mobile environments, use large elements where you aim to catch the user’s attention. Items that are bigger in size hold more visual weight and are easy for users to tap, making them more valuable in complex surroundings like dashboards and catalogs. At any size, give elements plenty of spacing by offering a hit target of at least 44 by 44 pixels.

Back to top