Designing Layouts: A Visual Glossary

Consider this your crash course for the basics of layout design. 

What is layout?

Layout design involves the arrangement and efficacy of text and visuals in the realms of print, digital, and interactive design.

Elements of layout

A successful layout design requires far more than a creative eye. It also requires a familiarity of the following elements that should be considered for any layout.

A page layout describes the positioning of text, images, and other features of any page design.

A grid is a system of intersecting lines used to organize the margins, columns, and rows of a layout.

Margins refer to the space between the content and the edges of the page. Columns organize the page content vertically, while rows organize content horizontally.

Headlines are titles for the content presented, and are often specially styled for impact. Subheads offer secondary explanations for additional context.

Body text refers to the main copy on a page. Pull-quotes are high-impact excerpts, specially styled to bring the reader in. Sidebars provide supplementary information.

Images and captions add visual context and grounding to a page. Designers will often place an FPO image — “for placement only” — as a placeholder for layouts in progress.

Focal points or accents are moments of visual emphasis, created to grab the viewer’s attention.

Principles of layout

Layouts are intrinsic to graphic design and the organization of display and information, across media and platforms. While there are no hard rules to creating an impactful layout, here are a few basic principles to consider.

Alignment offers organizational guidance to ensure the elements of the layout complement one another. Right-, center-, or left-aligned content are common styles; text can also wrap around imagery.

Establishing a logical and strategic hierarchy of page elements — through scale, size, and emphasis — helps to quickly convey information and guide the reader’s actions.

Proximity refers to the amount of space between various page elements.

Repetition — or repeating elements throughout a design — is a great way to emphasize a significant feature.

Layouts convey a sense of visual clarity through balance. This can be achieved through a symmetrical placement of elements; asymmetrical arrangements can also be used to create contrast.

When it comes to layout, no space is blank. Positive space refers to the elements of interest, such as an image, video, or text. Negative space refers to the areas between or surrounding the elements.

Color choices help shape the mood and overall flow of the page.

Digital and interactive layouts

Many of the same principles apply across print and digital media, but there are a few concepts to learn if you’re working expressly in digital.

UX — short for user experience — describes the overall user journey and functionality. UI — short for user interface — focuses on visual design elements.

A responsive page refers to a digital or interactive design with visuals and text that can flexibly scale to fit various screen sizes and devices.