Design Lessons & Trends

Design Principle No. 2 – Why Emphasis Matters In Web Design

Emphasis: The dominance of one or more particular elements that creates a focal point in website design. It is where your eyes instinctively go when you first view the page. Often, a focal point is larger, more colorful, or has more contrast than other elements on the page. Once you’ve established a focal point, try to complement it with other features such as color, form, and texture to guide the viewer throughout the rest of the page. Design is a form of communication. Therefore, a design without emphasis is like a joke without a punch line. (See our article on Balance)

HOW TO CREATE EMPHASIS:

  • Size – As you would expect, larger elements carry more weight
  • Color – It’s not fully understood why, but some colors are perceived as weighing more than others. Red seems to be heaviest while yellow seems to be lightest.
  • Density – Packing more elements into a given space gives more weight to that space
  • Value – A darker object will have more weight than a lighter object
  • Whitespace – Positive space weighs more than negative space or whitespace

 

THERE ARE 3 LEVELS OF DOMINANCE: Dominant, Sub-dominant, & Subordinate

Dominant – The element on the page that is given the most visual weight. In the example below the turtle photo is the dominant element. The size of the image in relation to everything else on the page grabs your attention first and foremost.

Sub-dominant – The elements on the page that become the middle ground of the composition. In the example below the portraits of the attorneys on the dark grey background are the sub-dominant elements. These elements are smaller than the focal point (turtle) and have a dark background. This makes the Meet Our Team area of the page heavier visually than the text throughout the rest of the page.

Subordinate – The elements on the page that are given the least visual weight. In the example below the black text, news and blog text is the subordinate elements. The text is smaller and placed on a white background, setting it further back in space than the colorful slider background and heavier gray band in the Meet Our Team section.

VISUAL HIERARCHY, KEY TAKE-AWAYS:

Remember: creating emphasis in web design requires a hierarchy of elements on the page. If everything is on the same level, viewers won’t know where to look first. You need to guide your audience throughout the design, making sure that they can easily get to the information they’re looking for. The internet is a place where people like to scan for information quickly. Long gone are the days of reading giant chunks of text. Think magazine layout rather than a novel when designing and writing copy for the web.

NO HIERARCHY Almost impossible for the viewer to review the information quickly and identify specific important elements.

NO VISUAL HIERARCHY
Almost impossible for the viewer to review the information quickly and identify specific important elements.

CLEAR HIERARCHY Headers, different type size and color, and spacing create a much easier way for the viewer to find the specific information they are looking for.

CLEAR VISUAL HIERARCHY
Headers, different type size and color, and spacing create a much easier way for the viewer to find the specific information they are looking for.

 

 

 

 

 

 

In Your Inbox