The usage of media components that are combined into a single design is what constitutes graphic design. Words, graphics, pictures, or any mix of the three, may be used. To communicate a message and capture viewers’ attention, graphic design is crucial. Typically, graphic design is utilized for marketing items like flyers, websites, and commercials. The organization and creation of the design are influenced by several graphic design concepts or aspects. Balance, alignment, white space, and design principle proximity are some of these guidelines.
In general, the “design principle proximity” refers to closeness, as in the case of a building’s proximity to other structures or the proximity of presenters in a group. Similar to this, the definition of proximity in art or graphic design refers to the proximity of objects or design elements. It speaks about how elements are situated concerning one another. In graphic design, proximity can relate to the spatial relationship between text and image as well as their spatial separation. For instance, two elements in a graphic design that are side by side would be close together.
The fundamental idea of “design principle proximity” demonstrates how similar components should be positioned closely together in a design. The creation of an organization is proximity’s main objective. A proximity principle is a tool used by graphic designers to establish a relationship between various elements in a design. By applying the proximity rule, relationships between the objects are revealed.
What is the Proximity Principle in Visual Design?
How do people determine whether or not certain components belong to a bigger group? When they gaze at objects, they perceive them as a group if they are close to one another. In an illustration, the white space that divides each object is the sole thing that sets them apart from one another. When interacting with both physical and digital things, people use the same strategy. For instance, when we look at a web page or mobile screen, we typically experience it as a compilation of elements rather than as separate items. As a result, it is feasible to group things together that have similar functionality or characteristics, providing user interface (UI) designers with an ideal opportunity.
Designers can accomplish two main objectives by using the design principle proximity concept, including making layouts appear less cluttered and assembling related pieces. One of the mistakes designers often make is to over-stuff a web page with content and useful pieces. It’s tempting to include as much information as possible and pack text and graphics into every available space in a layout. However, it’s critical to recognize that consumers have a finite attention span, thus adding excessive amounts of content and functional components risks confusing them with unnecessary details.
As a result, it becomes more difficult for them to distinguish between what is significant and what is not, which makes it difficult for users to correctly process information. Designing with the proximity in mind might help clear up visual jumble and boost comprehension. Furthermore, proximity improves the page’s organization. Designers employ the proximity principle to provide consumers with visual signals. Users are informed that certain items are related by designers when they group similar pieces. Designers can accomplish this by utilizing negative space, also known as the area between and surrounding objects. Negative space can be used to connect or divide elements by adding or removing them.
Why is Proximity in Design Important?
Here are four practical reasons why design principle proximity is important:
1. Improved Design Creation
One of the least pleasurable aspects of user interactions is filling out forms. However, forms play a crucial role in practically every product experience. It’s crucial to design forms in a way that enables consumers to easily fill out all data, whether it’s for a mobile or online design. Field labels, input fields, and input format are the three main areas where the “design principle proximity” can improve user experience.
Users’ ability to quickly scan the form is greatly influenced by field labels and their location. Because the user’s eye wanders in one direction, we know that top-aligned labels frequently result in quicker form completion (from top to bottom). But you can make it much simpler for users to scan the form by putting labels next to the appropriate form fields. Longer forms (those with seven or more fields) are especially in need of this since users must spend extra time determining which label corresponds to which field when linkages between labels and form fields are not obvious.
Long forms with numerous fields could seem challenging to complete. As a general rule, don’t include any optional options and just request the data you need from users. However, what do you do if a form calls for several input fields? The answer is straightforward: by applying the design principle proximity, you can alter how the user perceives the form.
You can make it easier for visitors to understand why they must fill out this information by grouping similar fields together. Look at the illustration below. The number of fields in both forms is the same, but the right form’s fields are divided into three groups. In both cases, there is an equal amount of user input, yet the impact on users is completely different.
Finally, the “design principle proximity” can be used in design to format data input. Chunking can be used for a variety of data formats. When asking users for their phone number, for instance, it’s far simpler to provide the number in chunks because the input data will be scanned and validated. “+18005550123” and “+1 (800) 555-0123” are comparable. The data chunking employed in the second example makes it simpler to scan, validate, and remember later on.
2. Enhancing Understanding of the Subject
The content of many goods is what first draws users to them and encourages continued use. An effective banner design must have both good readability and legibility, which make it simple for readers to grasp written texts and decode symbols. The font family, font size, and text contrast are a few elements that might affect readability and legibility.
The readability and legibility of your material are, however, strongly impacted by the way you organize it on a page. If a text is provided in its raw form, readability may diminish. You may make it easier for readers to scan and read the material by presenting it in small, easily scanned blocks—grouping sentences into paragraphs or sections and separating them with a little spacing.
3. Highlight Specific Components
One of the most crucial elements of design principle proximity and user experience (UX) design is emphasis. One of the most typical jobs for designers is to provide prominence to particular components or pieces of content on a page. While designers can employ a variety of strategies to produce effective designs, such as enlarging a piece or increasing contrast, the same effects can be obtained without changing the original element. Alternately, you might experiment with the amount of space surrounding the piece.
Users’ attention is directly correlated with negative space. The viewer will notice an element more clearly the more negative space you add around it. Because there is nothing else in the area that would normally pull the user’s attention there, they will naturally go toward an element with greater negative space.
It’s important to note that it may be challenging to determine which component on a web page draws the most attention. To validate your design using the five-second test, it is advised to use web design tools to generate a prototype of your design. What are the key components you can remember after seeing my prototype for five seconds with people who represent my target audience? If they identify the element(s) you want them to view, everything will be OK.
Source: DesignAC
4. Direct the Viewer’s Attention Through the Content
The design principle proximity concept can help you design a flow that will direct the viewer’s attention from one place to another. You may simply create focal points or places that naturally draw the user’s attention by modifying white space. Making a web design grid will enable you to consistently position design components (such as text, photos, or functional controls) within the layout, which is the first step in generating focal points.
You must arrange pieces according to the design principle proximity to lead viewers through important content areas once you have a grid. This is precisely what Evernote achieves by combining text blocks with graphics, as you can see in the example below. As a result, as they scroll over this page, the viewer’s eye moves in a zigzag pattern.
Use Proximity in a Banner Design?
When designing a banner, it’s crucial to pay attention to the distances between UI components as per the rules of design principle proximity. A design may not appear as well on small mobile screens as it does on huge desktop ones. The distance between elements can be lowered when your banner design is shrunk to fit smaller screens. As a result, when designing a banner, you must take these factors into account.
- Uphold Hierarchy
Watch your hierarchy regarding design principle proximity because effective banner ad design depends on the appropriate balance within each ad. Effective banner advertising is made to raise brand recognition and improve website traffic. They consist of three fundamental parts:
 a. Your Business’s Logo
To increase brand recognition, you must add your company’s logo. Ensure that it commands attention visually, but not as graphically as the value proposition or the call to action.
b. The Value Statement
The value proposition draws attention to itself with alluring offers and rates while showcasing the service or product you offer. “High quality,” “50% off,” or “limited time deal” comes to mind. This should occupy the bulk of your advertisement and be the first thing that viewers notice.
Source: DesignAC
Source: DesignAC
c. The Call to Action
The phrase or button that invites users to click is known as a call to action (or CTA). Great examples include the words “Learn more,” “Get started,” and “Watch Now.” The advertisement’s main focus should be on this.
Source: DesignAC - Keep it Simple
Keep your images and information minimal as per design principle proximity. Your web banner ad will probably only catch viewers’ eyes for a brief moment. - Make Appropriate Use of Buttons
Buttons, depending on the type of banner, frequently raise your ad’s click-through rate (CTR). If you’re going to use them, put them in (tastefully) contrasting colors following your copy on the lower right side. Always maintain consistency over the entire series of advertising. - Create Text that is Immediately Readable
Make the body copy and the headline various sizes. According to the design principle proximity, four lines or less should be used for all copies. Unless it’s a disclaimer or copyright notice, avoid using cursive or script typefaces, extremely thin font weights, all uppercase material, or font sizes smaller than 10 pt.
Source: From Abdullah Al Ashif on Behance - Use Good Visuals
Select images and visuals that support your point of view and are pertinent to your offering. Nothing ethereal here. Can’t afford supermodels or professional photography? Purchase a stock photo license at a reasonable price. There are countless high-quality ones available. Even better, choose original graphics or pictures produced by a designer. Always keep in mind that including graphics in your banner advertising isn’t always necessary. Both strong writing and attractive typography can produce equally potent outcomes.
Example of the proximity principle
- White space separates circles into two individual groups which is a perfect example of design principle proximity.
2. (Left) Design principle proximity aids in skimming by defining groups of related text including different paragraphs and sections. (Right) These divisions are clear even when not looking at the text itself.
3. According to the design principle proximity, when items are physically close to one another, we see them as a group.
Conclusion
Utilizing proximity in design is mostly used to arrange information and establish a visual hierarchy that improves your product’s usability. For consumers to quickly comprehend their interface, designers should employ proximity to establish meaningful groups. And the more straightforward your product is to use, the more delightful the experience will be for the customer.