January 19, 2006

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.

Commentary (12):

1. Aaron Gustafson says… jan 19, 2006 | 10:51 am

Great job yet again, Jason. Keep up the great work.

2. Heiko says… jan 19, 2006 | 11:28 am

Nice article one more time. The typo of the Coudal Partners page I do really like.

3. Sean Fraser says… jan 19, 2006 | 11:48 am

Cloudal’s Cloudal. Their use of headers and negative letter spacing in the headers is legendary.

The Skulls poster is an excellent example of poster desgin. I found it of more interest when viewing it within the context of the GigPosters site.

The Skulls poster directs a viewer to the links in the “Community Sites” link section. The placement of upsidedown octopus in the center of the poster with its head (including the “nose”) pointing to the figure below which then points to the torpedo breaking the frame of the poster. The torpedo points to the fourth link (from the left) in the rotating link section.

I viewed the poster but identified that fourth link first.

Hierarchy of design elements used for Focal Point(ing).

4. n ! c k says… jan 19, 2006 | 11:59 am

Great article! I really like your samples…

5. Michael Hessling says… jan 19, 2006 | 4:40 pm

As I read this post, I kept mumbling “Crap … crap … yep, crap.”

Contrast: Two things not exactly the same? Make them different (focal point).
Repetition: Repeat some aspect of the design throughout the page (focal point).
Alignment: Everything should have a visual connection with something else (hierarchy and focal point).
Proximity: Group related items together (hierarchy).

Your post and CRAP diverge somewhat, but the newbie in me is happy to get any lessons. I’m really enjoying the Loupe.

6. Keith says… jan 19, 2006 | 4:55 pm

Thanks a ton for writing this stuff Jason. Learning something new every time!

7. Jason Santa Maria says… jan 19, 2006 | 4:59 pm

Michael: Some more great guidelines, thanks for sharing!

I’m glad you guys are enjoying these as much as I enjoy writing them ;D

8. Tom says… jan 20, 2006 | 9:34 am

Some real nice advice. Also don’t forget movement. You touched slightly on it when you talked about objects pointing toward your emphasis. Spatial relations are very important as well. We do read left to right, top to bottom…but be aware that other nationalities don’t. Also studies have shown the first place someone looks at an image is the top right and then counter-clockwise. Very true for magazine and books. Hence why ads seem to do better on a right hand page.

Thanks again for writing the article. Goes in my research database for later :)

Also, I’m quite upset about http://www.coudal.com ’s site. They don’t seem to understand kerning and leading too well for such a nice looking site. :(

9. James AkaXakA says… jan 20, 2006 | 12:01 pm

Thanks - good stuff!

10. Eric says… jan 20, 2006 | 12:53 pm

Great stuff here, Jason. Michael’s comment about CRAP reminded me of The Non-Designer’s Design Book, which has a lot of these principles in it along with great examples of it in work.

11. Joel says… jan 20, 2006 | 1:56 pm

Great piece, Jason. I think “complex visual acrobatics” unfortunately win out too often, so it’s best to remember the fundamentals.

12. Nick says… jan 24, 2006 | 10:26 am

This is interesting. It’s also supported by research done a few years back by some boffins that looked into how we process information on web pages.

They looked at it from a cognitive point of view, not a designers, and came to much the same conclusions. We’ve recently published a review of the research and it acts as a reminder of what amounts to best practice.