Skip to main content

Introduction

Clear layouts allow users to understand and navigate content quickly and easily. Use these guidelines to create intuitive web layouts.

Overview​

Understanding some basic principles of web layout, informed by an understanding of human perception and cognitive processing, will help you create web pages that are intuitive and easy to use, regardless of domain or user task.

Create hierarchy​

Determine what’s most important to your users and make that content prominent.

Best practices​

Image of a page with a clean hierarchy.
Image of a page with disorganized content.
check_circle_outlineDo

Reduce elements on the screen and use spacing and size to create focus in your design.

cancelDon't.

Avoid inconsistent spacing and visual clutter as it makes information difficult to process.

Guide the eye​

Lay out your content in a way that guides the user through the content.

If your app will support additional languages, consider bi-directional text support. This is the ability to input and display text layout in either right to left (RTL; used in Arabic, Hebrew, and Farsi) or left to right order(LTR, used in English, Spanish, German). Learn more: Bidirectionality (Material), UX Best Practices for Bidirectional Languages (Medium).

Best practices​

Image of a page with a clean hierarchy.
Image of a page with disorganized content where the eye bounces around.
check_circle_outlineDo

Reduce elements on the screen and use spacing and size to create focus in your design.

cancelDon't.

Avoid inconsistent spacing and visual clutter as it makes information difficult to process.

Use white space​

Allow your design to breathe with white space.

Best practices​

Image of a grid with comfortable white space around the elements.
Image of a dense grid without enough white space around the elements.
check_circle_outlineDo

Use sufficient white space around elements for easier mental processing.

cancelDon't.

Avoid tight designs as they increase the perceived cognitive load of information.

Proximity​

According to laws of Gestalt, objects that are close to each other are perceived to be related.

Best practices​

#
#
check_circle_outlineDo

Placing lines of text close together creates relationships among elements.

check_circle_outlineDo

Spacing creates relationships among elements.

Similarity​

According to laws of Gestalt, elements that have visual similarities will be viewed as related. The principle can be applied to identify items that belong to categories while maintaining a consistent pattern across experiences.

Best practices​

#
#
check_circle_outlineDo

Elements may be grouped by consistent icons.

check_circle_outlineDo

Elements may also be grouped by consistent coloring.