This is the final segment in our four-part series on effective web design principles, concluding with the topic of proximity. The previous topics and segments in the effective web design principles series covered Contrast, Repetition, and Alignment. Guiding the user through your website with proper flow, effective use of white space, positioning similar content closer together, and providing clear structure are all facets of the proximity design standard.

Proximity, prox-im-ity, [prok-sim-i-tee] noun, nearness in space or time, order, occurrence, or relation, closeness in a series, vicinity, order.

Spacing and relationships

Proximity for web design purposes means that similar or related elements should be grouped together, while those that are unrelated or dissimilar should be separated. The physical relationships and spaces between web design elements create a level of emphasis, and include other factors such as isolation, similarity, eye movement and direction, continuance, and persistence of vision.

As elements overlap or touch, the top layer typically gets the primary attention. Did you notice the “Proximity” piece of the puzzle above? Did your eye gravitate to the purple puzzle piece first, and then move up and to the left to scan the remaining pieces? However the overlapping object suddenly becomes overshadowed if the other objects close by are in stark contrast; as objects become closer together the contrasting elements will stand out. Striking a balance between closeness and contrast, and even manipulating the two principles can achieve varied results. Take a look at Figure B below and see where your eye gravitates. Did you first notice the “Repetition” puzzle piece?

Every object or element has a gravitational pole in relation to the other objects that are nearer to its center, and the closer an object is to another also affects its weight. Just as a planet’s gravity affects its moon orbit, the positions of elements to each other on a web page can change the weight given to it and other elements on the page.

White space

An additional proximity factor is the effective use of white space on the web page, spacing elements utilizing effective margins, gutters between columns, and padding creates a balance between the content and the space between elements. In general, too much white space and the web page looks irregular and void of content, with no direction. Of course, if your web design requires a level of artistic license to accentuate open space with an undeniable void of content for dramatic effect, then go for it.

Proximity and typography

Above, I talked about the negative effects of too much white space, but too little white space can make the web page appear cluttered and cramped. As a rule of thumb, a balanced white space is generally more attractive and pleasing to the eye. Below are two examples which demonstrate both ends of the white space gamut. Figure C, for example, is too much white space, and Figure D has too little.

Figure C

Figure D

An intuitive flow of content reveals a balance of white space and the typographic elements that comprise the textual content. Take the first example of the IT Course List shown below in Figure E, and try to step through the list of courses available.

Figure E

Now, take a look at the same list below, which now has each logical grouping defined with appropriate white space, appropriate headings, and unordered lists as displayed in Figure F below.

Figure F

The second list is easily delivered and provides the reader various sections and sub-sections of the course list; each of the courses is in close proximity to the associated and related sub-section header.

Employing the proximity principle of effective web design helps to organize content elements on the web page utilizing space, order, size, relationships, color, and effective use of white space and sectioning throughout typographic elements.