In design, you can't group elements without putting space between those they're not related to. You should always include white space when creating a custom design website. Not having enough white space can make your content challenging to understand while affecting the overall aesthetics.
Remember, you don't need to fill in all the space on your website. Instead, you should consider how elements in close proximity to one another are perceived as being related and use white space to separate items that aren't part of these distinct groups.
Examples of the law proximity in web design
Now that you have a basic understanding of the UX law of proximity, you might wonder what it should look like in practice. Here are a few law of proximity examples and situations when you should use it:
Designers use the law of proximity to make written content more readable and scannable. For example, headlines have more space above than below to organize paragraphs and ensure readers understand that they're part of the same content grouping. In addition, line height and spaces between lines are bigger between words to create paragraphs, while letters are close enough to form words.
Effective navigation is part of good user experience design. Since many websites contain lots of content, grouping the items, including content categories and subcategories, can make navigating websites easier. Menus, whether located on the top of the website or on a side, use white space between items to group content together and help visitors understand what items are most closely related to one another.
If you use your website to generate leads, consider optimizing your forms with the UX law of proximity. Forms usually have labels to tell visitors which information you want them to share. You can clearly label each field using proximity to make your form easier to read and use.
If you sell products, you might have several items on your website, some related and some not. You can use proximity on product pages to allow visitors to find other related products easily.
For example, if you sell coffee, your product pages might recommend creamers or other blends users may enjoy. You can use recommendations in a carousel design to keep them all under the same grouping on the product page.
Every business website should have a footer consisting of basic navigational links, contact information, or short forms. In any case, proximity allows these items to be easily grouped together. For instance, you can keep your main navigational links together with any other information, such as contact information, on the other side of the page, separated by white space.
Best practices for applying the law of proximity to UI design
The Gestalt law of proximity can be used to group any content and help easily lead your customers through your website.
Here are a few best practices for applying this principle to web design:
Use white space
Many novice designers feel they need to fill a page, which can create a chaotic and confusing web design. Using white space to separate groups of content and design elements is crucial for readable, scannable, and better-looking websites. In addition, using large areas of white space can make your web pages appear more organized while helping users navigate the site.
Consider content first
Before designing your web pages, consider the content you'll need. For example, if you're creating product pages, you may have a design in mind, but it's important to consider the types of copy and how much you'll have on the page. Design should fit copy, not the other way around. Therefore, it's a good idea to plan your content before starting the website design to help you understand the types of information that will need to be grouped.
You can use the law of proximity to emphasize certain elements on the page and improve your UX and UI design. First, always consider the elements you need on the page and which are most important; the content and informational hierarchy will determine the elements that need to stand out. Still, designers can play with negative space to emphasize different areas of the web page to ensure they stand out.
Optimize UI with the law of proximity
If you want to make your website more aesthetically pleasing and improve the user experience, consider optimizing your website with the Gestalt principle of proximity.
This graphic design principle allows you to understand how perception affects your design and use it to your advantage. Playing with different elements by grouping them together and creating visual hierarchies with white space can make your website look more professional and improve your customer's first impressions of your business.
Use the law of proximity when designing your website with Mailchimp. We make creating professional websites easy with no design experience necessary. Try Mailchimp today.