Emphasis
1st edition — by Patrick McNeil — Nov. 27, 2007
The Design Principle
(Don't miss the introduction
to Design Principles)
The first design principle we will take a look at is that of emphasis. Emphasis is defined as special importance or significance. In many ways emphasis is closely, if not the same as, related to hierarchy. Basically emphasis is the analysis of a site's content in order to determine what the hierarchy of importance the content has. Once this is determined a design can be created that carries out these goals. One great method is to list all of the elements required on a page in order of importance. Then, design with that in mind so that the visual hierarchy of the page reflects the determined importance. One reason this is so important is to avoid an attempt to emphasize everything. Remember, if you try to emphasize everything, you effectively emphasize nothing. Lets look at some samples to see what has been done.
Sample 1 - Zedmo
The
Zedmo
site is a nice example of emphasis. I have placed numbers over the elements of the page to order them in terms of the hierarchy and emphasis I perceive in the page. In this case, the order starts at the top and works its way down the page. Physical location plays into hierarchy and the elements at the top of the page have a greater weight. In this case, the top most element (the logo) has been sized such that it stands out, making it the most emphasized element on the page. The logo also has the highest contrast on the page, which further emphasizes it. But lets not get ahead of ourselves, contrast is a topic for another day!
On the Zedmo site the brand name is the most impactful element on the page. This is great in terms of stamping the name and image on the users mind. Being remembered on the web is a difficult task. The second key element of the page is the sign in & sign up section. It is of the utmost importance to sites such as this to get people to sign up. In this case the sign up link is heavily emphasized. In fact, the sign up block closely competes with the logo for the most visual dominant element of the page. It could easily be argued that this is in fact the real number one element on the page.
Finally we get to the lower section of the page to find some supporting copy and secondary tasks for the site. The designers of this site clearly understood the goals and purpose of the home page and designed it appropriately.
Sample 2 - Oaktree Creative
The
Oaktree Creative
site is a bit more complex when it comes to hierarchy and emphasis. Part of the difficulty in determining hierarchy on this site lies in the close similarity of so much content. But there is a hierarchy at play here. First and foremost the central white band of content pops out. This is the largest text on the page, it is near the top of the design, it spans the entire width of the page and it is the highest contrast section of the page. All of this makes it pop out.
The difficulty comes after this stage. My perception is that number two is the logo, and then the tabs. In terms of brand consumption this is a nice order of business. First we get a snippet of what they do, then we get the brand reinforced, and finally we are given a set of options for navigation. A nice flow in terms of visual consumption.
The bottom three columns of data come in last place. But even inside of these 3 buckets we can see a hierarchy at work. The text at the top of each is larger and creates an order.
Again, the order of emphasis on this site follows a logical progression of important brand messages to less significant clutter of content.
Sample 3 - Spine
The
Spine
site is most defiantly one of the more complex examples of this principle. In this case the large text at the top easily gets the most emphasis and therefore the number one slot in the hierarchy. The simple statement is powerful and connects with visitors on an effective level. It is a great start for sure.
Things most definitely get more complex from there. Second in the hierarchy of the page is the main chunk of content. It's close proximity to the most emphasized part of the page helps make it more dominate. The larger font size helps as well.
Clearly the third most dominant element is the image to the right. If only because it is the only image on the page and easily draws attention. From there it jumps back to the left of the page and continues down.
The order of emphasis on this page might not flow in the most common of paths, but it ultimately works. One neat thing to note about the design is how when going from 3 to 4 you can easily get caught back on number 1. This really helps to beat that message into the viewers mind.
Conclusion
I will not analyze the other three examples below, but rather let you explore them on your own. But hopefully this refresher on emphasis and hierarchy will remind us of the importance of the element. It is so easy to get lost in the design process and simply forget about the hierarchy of the page. I suggest you map out what is most relevant and use it as a checklist before you declare a design complete!
Check back tomorrow for the next chapter which will cover contrast!
Sample Usage
