Design for Everyone: Lesson 1 - Proximity

Proximity – important in life and design :)

The principle of proximity is the foundation of clear and intuitive visual communication. As we mentioned earlier, it involves deliberately grouping elements that are related to each other. This simple action has a huge impact on how the viewer perceives information. Instead of treating each element as a separate unit, our brain naturally connects those that are close together, creating logical groups and making it easier to understand their relationships.

Let's look at these two illustrations:

In the left illustration, the distance between the figures prevents us from clearly determining the relationship between them. However, looking at the second illustration, their proximity makes us assume that something connects them.

The same happens with the elements we design. If they have a close relationship, it's good for them to be close together so that the viewer immediately notices this and doesn't have to guess.

Let's imagine a few specific situations:

• On a website: The navigation menu usually groups related links together (e.g., "About Us," "Products," "Contact"). This allows the user to immediately know where to look for specific information. Similarly, in a product description block, the photo, name, price, and "Add to Cart" button are close together, forming a logical whole.
• On a business card: Name and surname, job title, phone number, email address, and website are placed close together, creating a contact information block for one person. If this data were scattered all over the business card, reading it would be much more difficult.
• In a brochure: Sections of text describing a particular product or service are usually placed near their corresponding photos or illustrations. This makes it easier for the reader to connect the text with the visual and better understand the message.
• In a presentation: The slide title, bullet points, and any charts or diagrams are grouped together to present a coherent thought or piece of information. This makes it easier for the audience to follow the flow of the presentation.
• In a mobile app interface: Icons and their descriptions are usually placed close together so that the user knows what function a given icon performs.

I have given a few examples verbally, but nothing replaces a visual representation. Let's illustrate this with a business card example.

In the example above, you probably first looked at the logo in the center, but what next? The eye doesn't know where to go because everything is spread out evenly, and all the texts are the same size.

Now let's see what happens when we group the information.

Here we have three groups:

• Logo
• Business card owner's details and their position
• Contact details

Now it's easier to remember whose business card it is because our brain sees the hierarchy and knows where to direct its gaze.

Why is proximity so important?

Grouping elements using proximity:

• Facilitates understanding: The viewer immediately sees which elements belong together, without the need for extra effort.
• Creates order: Even complex information becomes more organized and readable.
• Builds hierarchy: We can visually separate different sections of information from each other, which helps in determining what is most important.
• Improves aesthetics: Well-applied proximity makes the design look more professional and cohesive.

What happens if we ignore the principle of proximity?

Lack of proper proximity can lead to chaos, disorientation, and difficulty in understanding the message. Elements that should be related may appear separate and unconnected, which negatively affects the perception of the design. The viewer will be lost, and thus we will fail to convey our message.

Therefore, let's avoid:

• Too many separate elements.
• Combining elements that have nothing in common; let's maintain a clear separation.
• Stuffing elements into corners or the center of the page just because there is space. Let's give our groups of elements room to breathe.
• Leaving equal spacing between elements; let's always try to clearly separate groups of elements that have relationships with each other.

Let's summarize

Proximity is a simple but powerful tool that allows us to organize information in a logical and intuitive way. By remembering to group related elements, we can significantly improve the readability, clarity, and professionalism of our designs, whether we are creating a website, a flyer, a presentation, or any other visual material. This principle alone will make it easier for us to guide the viewer's eye and tell them a story the way we want. Because even the simplest flyer tells a story, and we should take care of its presentation ;)

In the next lesson, we will look at Alignment.

See you soon! :)