Professional designers use an array of different terms to describe the relationships between elements in a design. From connection and separation to similarity and contrast or grouping and ungrouping, they all communicate how the elements within a design cooperate to provide the best possible effect.

In every design, some elements should be connected, or similar to one another, to show a clear relationship, while other elements should remain separated to stand out or signal different meanings and actions. The solid execution of this principle plays a major role in the overall success of any design.

Separation and Contrast

As human beings, we are all distinctly wired to detect contrast. It is a trait our ancestors developed to rapidly differentiate friends from things that wanted to eat them. The power of contrast and separation in design is directly related to this innate ability.

Contrast catches the eye and draws immediate attention. Many professional designers agree that it is the most effective tool for establishing points of emphasis in a design. However, it also serves as a great way to separate different elements.

Consider the difference between normal, bold and italicised text. Each type stands out as different from the rest. An article with randomly mixed bold, italicised and normal text would flow terribly, but when these contrasting features are used correctly, they can improve the readability of a design.

Connection and Similarity

The survival trait that allows humans to quickly determine contrast and separation also allows us to promptly group connected and similar elements. In turn, this ability represents the key to why humans are so exceptional at finding patterns, which offer context in the world around us and speed up our learning process.

When two elements are visually similar in a design, the viewer assumes that they are connected. The importance of one element signals the equal importance of the similar element. This principle shows why it is so easy for viewers to instantly distinguish and utilise links within blocks of text. While visual contrast separates the links from the other text, visual similarity connects their meaning to all the other links the viewer has clicked in the past.

The connection created by the use of similarity adds consistency and familiarity to a design. By making the process of grouping information as simple as possible, similarity makes the overall design more readable and aids in clearly communicating the intended message.

The Relationship between Connection and Separation

No matter how hard a designer might try, nothing can have meaning in isolation. Every element relies on context to communicate its message. Every technique or principle that applies to the connection of elements also applies to the separation of elements. These two design basics simply represent opposite ends of the scale of similarity.

Too much connection within a design makes it dull and unappealing, while too much separation creates information overload and general noise. Professional designers use a careful mix of these two principles to clearly convey the intended message to the target audience.