Proximity

• Proximity is called grouping of related items together which make more organised layout.
• Items unrelated to each other should placed further apart to show there lack of relationship.

Types of Proximity:-

There are four type of proximity

Close edge

• In this the closer items to be together like a group.The amount of space involved is relative.
• This kind of grouping is used extensively with printed type.
• Close edge relationships can form groups in any direction, left to right and top to bottom.

Touch

• When items get close enough they touch. They still are two different items but they seem to be attached together.
• These are more stronger than close edge.

Overlap

• The strongest form between two items happens when they overlap.
• When the two items are the same color they seem to form a new, more complex shape.
• When the items are different colors the overlap produces the illusion of a shallow space.

Combine

• It is grouping of various items together by using an external element that acts to combine the items regardless of what other form concepts are being used. There are many ways to combine items, underlining items, putting boxes around them and putting items against a background (such as a color or a picture).

Principle of proximity

Use of white space

• The proper use of white space is the first step in implementing the principle of proximity to make a design more effective.
• Keep in mind white space does not have to be white, it can be any empty space between elements, regardless of its color.

Visually group related elements

• Grouping related elements can make a design look less cluttered, giving it a strong effect and better appearance.
• Grouping of elements should be logical.

Creating Visual Hierarchy

• visual hierarchy can be used to show the relationships between items, and to categorize each item into a specific category.
• This hierarchy helps the user understand where they have been and where they want to go.

Understanding the layouts

• Layouts of the site should be such that it can be easily scanned or read.

Using the grid

• Grid based layout, with appropriate gutter sizes, allows for plenty of room between sections.

Leading users to the right path

• It help users of a website to navigate without unnecessary delays or obstacles.

Examples