Imagination is our power

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.

Advertisements

Comments on: "Effective design principles for web designers: Proximity" (10)

  1. Thank you for the sensible critique. Me & my neighbor were just preparing to do some research on this. We got a grab a book from our local library but I think I learned more from this post. I am very glad to see such magnificent info being shared freely out there.

  2. I will immediately take hold of your rss as I can’t to find your e-mail subscription hyperlink or e-newsletter service. Do you have any? Kindly permit me recognise so that I could subscribe. Thanks.

  3. the need to give them a personal and artistic touch, even when we’re not normally the artistic kind. Go through MoreThis link is submitted to our Design News, send your Weblink here!Share This:Digg Adhere to Leaflette.org

  4. You put your pals information for shipping address.

  5. If you want entice your online customers first of all you’ll must give an attractive shape to your internet site. So defiantly web page design and style plays an important role in any online business.We should more conscious on our net look.

  6. I just want to tell you that I’m all new to blogs and certainly savored your blog site. Likely I’m want to bookmark your site . You actually have awesome writings. Kudos for sharing with us your website page.

  7. Third Flower…

    My spouse and that i are now delighted that Albert could execute his studies as a consequence of the tips he had by way of your web content. It can be now and again perplexing to simply often be giving away actions which lots of people could have been …

  8. The Slave of the Husband…

    Trying to get in advance to learning further from you afterward!……

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: