Basics of Design Composition

Design principles are universal guidelines that, when followed, help create a "good" design. Applying these principles helps designers make informed decisions about color, typography, spacing, and placement of elements. They contribute to creating designs that are aesthetically pleasing, functional, and communicate their intended message effectively to the audience.

Design principles include Gestalt principles (like proximity, continuity, and similarity), as well as other principles such as harmony, balance, and unity.

Design patterns are reusable solutions to design problems. Take a subscription form, for example. The problem presented is allowing users to sign up for a subscription. The most widely accepted design pattern is creating a form with an input for an email address and a submit button. Some designers build on that pattern by adding additional inputs, but the basic structure remains the same.

Patterns are found throughout digital design, aiding in usability. Users recognize the most common patterns and know how to use those functions intuitively. This makes your UI more user-friendly and easier to use.

There are also platform-specific patterns that make iOS or Android applications consistent and more recognizable.

Composition refers to the deliberate arrangement of elements within a given space to create a harmonious and visually pleasing result. It involves making decisions about the placement, balance, hierarchy, and organization of various elements such as shapes, colors, text, images, and whitespace. Effective composition guides the viewer's eye, conveys a message, and elicits a particular emotional response.

Visual hierarchy refers to arranging elements to show their order of importance. It's created using a scale (the relative size of elements), color, typography, and other techniques. Successful hierarchy ensures that the parts on which you want users to focus immediately grab their attention. For instance, a large, bold headline commands attention and communicates the main message, while smaller, regular text provides additional context or details.

Alignment refers to how elements on design formats are placed in relation to one another. Applying alignment means organizing, grouping, or connecting elements to establish a scannable and elegant composition.

There are several types of alignment: center, bottom, top, left, and right alignment. When applied correctly, it helps create balanced compositions, improves readability, and reduces visual clutter.

White (or negative) space is the empty space around the elements in your design. It's not always strictly empty, as the page's background will fill the space.

White space allows elements room to breathe, helps them stand out, and makes it easier for users to scan the page. Another function of white space is to create larger touch targets for buttons and clickable elements, which improves usability.

A grid system is a way to align page elements based on sequenced columns and rows. We use it to arrange text, images, and other elements consistently throughout a product. Think of the grid system as the digital version of a print layout for magazines.

Some grids are made up of a set number of columns: 9 or 12 are fairly common. Modular grids, on the other hand, add a horizontal subdivision and consist of multiple cells. Most grids also contain gutters, empty spaces a few pixels wide, between each column to improve spacing and alignment.

The background of a composition is similar to a painter's canvas: it's the base for the rest of the elements you'll use. Backgrounds can be a solid color, a pattern or texture, or even an image or video.

The background is often used to create contrast, emphasis, and hierarchy within the design and can be adjusted to enhance the overall aesthetic appeal and readability of the composition.

Aspect ratio is the relationship between the width of an object and its height. A modern desktop digital display, for example, typically has an aspect ratio of 16:9. Older CRT displays usually had a ratio of 4:3.

When expressing an aspect ratio, the width is always the first number, and the height is always the second. This immediately tells you whether an element is in landscape or portrait format: if the first number is larger, it’s landscape; if the second number is larger, it’s portrait.