Project Management optimize

Effective design principles for web designers: Proximity

Ryan Boudreaux finishes his series on the four basic design principles. Here, he reviews proximity and how it can be used to better please the eye.

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.

About

Ryan has performed in a broad range of technology support roles for electric-generation utilities, including nuclear power plants, and for the telecommunications industry. He has worked in web development for the restaurant industry and the Federal g...

4 comments
rickardbriggs
rickardbriggs

This has been a excellent sequence, I especially like the way you create the factors Thanks Escort website designer

bnetreader5210
bnetreader5210

A good article. I noticed an error in Figure F. "Networking & Security" should be a heading, not a course listing.

Deadly Ernest
Deadly Ernest

on white space and relative headers with Figure F. As a writer I'm very much aware of how important white space is on both the printed page and the electronic screen page, which is why I have a MAJOR issue with the way the Kindle, iPad, and e-pub systems crap all over the story presentation because they refuse to allow the sue of standard html code to present the text.

maneetpuri76
maneetpuri76

Really impressive Ryan! I am a firm believer of the fact that an effective website design has somewhat a psychological impact on the user. And by website design in this context I mean to include all the elements mentioned above in your blog. Website should be planned in a manner that all the website elements are perfectly balanced and nothing overshadows the other. I really loved the 'white space' utilization part as it is one of the most neglected website areas that we have today. I hope your blog throws enough light on website space planning and utilization.