Blog

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

This is the second post in a series focusing on the basic building blocks of design. With each new post we’ll feature a different principle that will help you understand how designers do what they do. If you’re ever tasked with creating something yourself, these principles can help you make good design decisions too!

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.

 

If you have any questions about design principles or the projects mentioned above, shoot us an email and we’ll be happy to help.

 

Additional resources:

605 WikiSpaces – Hierarchy

605 WikiSpaces – What is Emphasis or Focal Point?

Smashing Magazine – Applying Interior Design Principles to the Web

NWRain.net – The Elements and Principles of Visual Design

 

 

Related Articles:

Design Principle Blog Headers-01

Design Principle Blog Headers-03