Under The Loupe #2: Hierarchy and Focal Point

This week is a 2-for-1 deal! We’ll take a quick look at two formidable bedfellows, Hierarchy and Focal Point. Hierarchy in design is simply the ranked classification of information, and Focal Point refers to a main area of visual interest.

The power these two tools hold can not be overstated. They allow us to guide viewers to the things we want them to see and help apply structure to our message(s). To not structure your information makes you look unprepared and unorganized, as though, for lack of a better idea, you decided to throw all of your content on a page without regard for how the viewer might actually digest it. Despite what font you use, how nice your pictures and writing seem to be, if you don’t give thought to how your viewers are going to consume that information, all your efforts will be in vain.

Design is communication and inherently has some sort of message, sometimes more than one. Just like when you tell someone a story, you break out the important parts (hierarchy) with emphasis (focal point) by doing things like getting excited or being very descriptive about them. This helps others to understand what’s important to you about the story and remember it as vividly as you tell it. We make use of these same kinds of tactics in design to help our message resonate with viewers. We categorize our information in terms of logical importance and spin the design outward around it. This is an identical line of thinking as the one used in semantically marking up a web page; h1, then h2, and so on. As you can see in this simple example, hierarchy is simply a matter of establishing relationships between elements.

Focal point can be achieved by using a variety of means; proportion (relative sizes of elements), color and variation (if things are all rigidly geometric, an irregular shape or color can highlight itself). Lots of times people will place an object in the center of a design because viewers eyes naturally drift there. Additionally, if elements in the design (lines, angles, even people in photos looking in the direction of the object) lead toward an area, it will help reinforce that area as a focal point. Generally, it’s best not to knock viewers over the head with your focal point. A little goes a long way, and something simple like a color change can often do more than complex visual acrobatics.

Both of these go hand-in-hand with streamlining your message to be concise and punctual. Even strong hierarchy has a rough time working on a page that’s bursting with too much information. Just because you have a lot of content, does not mean that you should load it all up on one page. When something is designed, it has a plan set forth upon it. This implies that the designer understands the most important reason for designing something: the transfer of information. It seems obvious, but these are often an overlooked means for organization and a telltale sign of an under-prepared piece of work.

I’ll close by paraphrasing a few bits from the mouth of Winter Sorbeck, the commercial design professor from Chip Kidd’s book, The Cheese Monkeys:

Left to right, top to bottom, big and small

These relationships are about as basic as you can get for the sake of organization and visual flow. They are constants in design (though the first two pairs are more geared towards the western world), not as rules, but as relationships, which can be strong guidelines to follow and just as powerful to break.

The proof is out there, attention spans (especially online) are even more scarce. Organize your info and make an impression.

Some examples of focal point and hierarchy:

• Coudal: This site bears many similarities to a broadsheet newspaper, and newspapers have been in the business of information hierarchy for a loooong time. Coudal does it right with a strong focal point, large widescreen image in the dead center, and strong hierarchy, wide left column with large headlines and type supported by thinner columns to the right full of secondary and tertiary content.
• Skulls poster: Hierarchy is pretty simple here, main band gets main billing, which typically means bigger name than everyone. But, the hierarchy gets reinforced by the remaining text being smaller and placed further down the page. The artist also makes “The Skulls” the focal point of the piece by letting it be the only type treated with that color and background, and by making the octopus’ arms visually wrap around it. This instantly makes the eyes drift there to see the action.

• Posted at 10:27 am in Design, Under The Loupe
• Commentary Closed (12)