12 BASIC DESIGN PRINCIPLES

One of the most common complaints designers have about client feedback often revolves around clients who say a design needs to “pop” more. While that sounds like a completely arbitrary term, what the client generally means is that the design needs more contrast. Contrast refers to how different elements are in a design, particularly adjacent elements. These differences make various elements stand out. Contrast is also a very important aspect of creating accessible designs. Insufficient contrast can make text content in particular very difficult to read, especially for people with visual impairments.

Every element of a design—typography, colors, images, shapes, patterns, etc.—carries a visual weight. Some elements are heavy and draw the eye, while other elements are lighter. The way these elements are laid out on a page should create a feeling of balance. There are two basic types of balance: symmetrical and asymmetrical. Symmetrical designs layout elements of equal weight on either side of an imaginary center line. Asymmetrical balance uses elements of differing weights, often laid out in relation to a line that is not centered within the overall design.

Emphasis deals with the parts of a design that are meant to stand out. In most cases, this means the most important information the design is meant to convey. Emphasis can also be used to reduce the impact of certain information. This is most apparent in instances where “fine print” is used for ancillary information in a design. Tiny typography tucked away at the bottom of a page carries much less weight than almost anything else in a design, and is therefore deemphasized.

Proportion is one of the easier design principles to understand. Simply put, it’s the size of elements in relation to one another. Proportion signals what’s important in a design and what isn’t. Larger elements are more important, smaller elements less.

Hierarchy is another principle of design that directly relates to how well content can be processed by people using a website. It refers to the importance of elements within a design. The most important elements (or content) should appear to be the most important. Hierarchy is most easily illustrated through the use of titles and headings in a design. The title of a page should be given the most importance, and therefore should be immediately recognizable as the most important element on a page. Headings and subheadings should be formatted in a way that shows their importance in relation to each other as well as in relation to the title and body copy.

Repetition is a great way to reinforce an idea. It’s also a great way to unify a design that brings together a lot of different elements. Repetition can be done in a number of ways: via repeating the same colors, typefaces, shapes, or other elements of a design. This article, for example, uses repetition in the format of the headings. Each design principle is formatted the same as the others in this section, signaling to readers that they’re all of equal importance and that they’re all related. Consistent headings unify these elements across the page.

The spaces between repeating elements can cause a sense of rhythm to form, similar to the way the space between notes in a musical composition create a rhythm. There are five basic types of visual rhythm that designers can create: random, regular, alternating, flowing, and progressive. Random rhythms have no discernable pattern. Regular rhythms follow the same spacing between each element with no variation. Alternating rhythms follow a set pattern that repeats, but there is variation between the actual elements (such as a 1-2-3-1-2-3 pattern). Flowing rhythms follow bends and curves, similar to the way sand dunes undulate or waves flow. Progressive rhythms change as they go along, with each change adding to the previous iterations. Rhythms can be used to create a number of feelings. They can create excitement (particularly flowing and progressive rhythms) or create reassurance and consistency. It all depends on the way they are implemented.

Patterns are nothing more than a repetition of multiple design elements working together. Wallpaper patterns are the most ubiquitous example of patterns that virtually everyone is familiar with. In design, however, patterns can also refer to set standards for how certain elements are designed. For example, top navigation is a design pattern that the majority of internet users have interacted with.

White space—also referred to as “negative space”— is the areas of a design that do not include any design elements. The space is, effectively, empty. Many beginning designers feel the need to pack every pixel with some type of “design” and overlook the value of white space. But white space serves many important purposes in a design, foremost being giving elements of the design room to breathe. Negative space can also help highlight specific content or specific parts of a design. It can also make elements of a design easier to discern. This is why typography is more legible when upper and lowercase letters are used since negative space is more varied around lowercase letters, which allows people to interpret them more quickly. In some cases, negative space is used to create secondary images that may not be immediately apparent to the viewer. This can be a valuable part of branding that can delight customers. Take the hidden arrow in the FedEx logo, for just one example.

Movement refers to the way the eye travels over a design. The most important element should lead to the next most important and so on. This is done through positioning (the eye naturally falls on certain areas of a design first), emphasis, and other design elements already mentioned.

Variety in design is used to create visual interest. Without variety, a design can very quickly become monotonous, causing the user to lose interest. Variety can be created in a variety of ways, through color, typography, images, shapes, and virtually any other design element. However, variety for the sake of variety is pointless. Variety should reinforce the other elements of a design and be used alongside them to create a more interesting and aesthetically pleasing outcome that improves the user’s experience.

Everyone has seen a website or other design out there that seemed to just throw elements on a page with no regard for how they worked together. Newspaper ads that use ten different fonts come to mind almost immediately. Unity refers to how well the elements of a design work together. Visual elements should have clear relationships with each other in a design. Unity also helps ensure concepts are being communicated in a clear, cohesive fashion. Designs with good unity also appear to be more organized and of higher quality and authority than designs with poor unity.