Advertisement

Check out Part 1 first covering Contrast and Repetition if you missed it.

It’s good to remind ourselves as Graphic Designers that when designing for web, there is a good measure of heritage spawning from other forms of art. Art forms such as Typography, Lithography, Illustration, Industrial Design, Textures, Painting, etc.

All of these forms of fine art have provided us with collective guidance to embracing our own artistic undertakings today. When discussing different Graphic Design Principles in regards to Web Design, we are pushed to look outside of our own discipline in pursuit of a broader perception towards an enhanced user experience on the web.

Proximity

Proximity is Grouping related items together so that items are seen as one cohesive group rather than a cluster of unrelated elements.

I will be using Anthem Health as an example of what not to do in terms of Proximity. This is not meant to be an Anthem website review, its purpose is to emphasize how badly a user experience can be on the web. Just to note, The Anthem Health site made #5 on The Worst Website Navigation of 2011 on http://www.webpagesthatsuck.com/

Graphic-Design-Principles-1.png

Items or elements that are not related to each other shouldn’t be in close proximity to each other. When everything is so bunched together the eyes don’t know where to look and will miss where the important calls to action are.

When you are taking numerous non-related elements you can either intrigue and catch the reader or completely confuse and annoy them. When you group several elements in close proximity they must feel cohesive and come together to form one visual unit.

Another way to approach this is to focus on not having too many separating elements at once on the page.

Try to avoid too many separate elements on a page. Don’t rely on throwing sections into the corners of the page. Try to group elements together.

Graphic-Design-Principles-2.jpg

Example: Anthem Health
25% of the page has content shoved into the top right corner and way too many interactive features. Just to emphasize how unusable this oversaturated section is I will list every option and programming feature presented to the user in this small corner of content space:

1. Change Disability Features
2. Print
3. Zoom
4. Slider Option 1 (opens in a new layout)
5. Slider Option 2 (opens in a new layout)
6. Slider Option 3 (opens in a new layout)
7. Customer Care (which drops down as an overlay from the top)
8. Find a Doctor (right column drop down)
9. Refill a Prescription (right column drop down form)
10. View all Available Refills (Popup)
11. Check Claim Status (right column drop down)
12. View Claims (popup)
13. Other Anthem Websites
14. Member Login
15. Guided Tour
16. Learn More

I’m sure I missed some in there, but you get the point.

Make sure that the sections have appropriate white space this helps to articulate each visual building block.

Options upon options shoved into one section are not user friendly. A page is too element heavy when your eye scans a page is overwhelmed, and doesn’t know where to look or interact.

Remember, it’s good to know the rules to break them. Breaking the rule of proximity can be used as a tool for graphic design as well. Don’t be afraid to be unexpected and outside of the box. Change your pages format, or make something uneven. Sometimes this can make the page pop even more as long as it’s done right.

Alignment

Some designers will just take a blank page and just start throwing design elements all over it. This is wrong. Nothing should be placed on the page arbitrarily. Every item on your site design should have a visual correlation with something else on the piece. Have a plan. Be conscious of every single little element you put on the design.

Use your guides and line things up.

Find something else on the page to line it up with, even if the two objects are actually very distant from each other.

Graphic-Design-Principles.jpeg
- SiteNinja.com

Combine Alignment with proximity in responsive web design and you will notice the difference in the experience. Smashing Magazine’s amazing new redesign has a multitude of different layouts, ranging from the mobile to the very wide display. Each of these layouts still maintains a comfortable, readable line length for the main content.

Always create balance with text. It helps us to create a calm, collected feeling as we read. Giving the reader chaos can be bad if it’s unintentional. Otherwise, don’t be afraid to surprise the user.

Graphic-Design-Principles-3.png

Smashing Magazine has just the right breathing room in between the contents sections. Looking at the page is comfortable as a unit and moving between sections is a breeze. One of the most unpleasing things in a block of text is unbalanced text; our eyes naturally want to see order.

Contradicting the principle of alignment can be a clever design trick by breaking the users average expectations, creating something fresh and unique.

Part 3 Coming Soon!