605 Wiki.jpgby Anabel Damstrom


What is Emphasis or Focal Point?

"Something that is singled out or made more prominent has emphasis. An element of a design that dominates or becomes the center of interest has emphasis." (Bear Focus on This • Emphasis and the Principles and Elements of Design) The goal of emphasis is to draw more attention to an element than it would have on its own. The range of emphasis is based in contrast. The greater the contrast one element has to the surrounding elements, the greater the emphasis (Porter).


Developing Emphasis

Dominance and Subordination

Dominance: the state of being dominant: as a dominant position especially in a social hierarchy (Merriam-Webster Dictionary).

Dominance of one or more particular elements creates a focal point in website design. It is where your eyes would instinctively go when you first view the website. It then leads the user to other parts of the site's page (Bradley). Designers use dominance to get the user to accomplish what the designer wants them to. All other elements should be subordinate (Cox).

Dominance is the creation of elements within a website that command attention and prevail over other elements. Every website should have a focal point that serves as a gateway into the design that catches the user's attention and keeps them engaged to move through the website, design flow, which can be achieved by creating elements with secondary and tertiary dominance (Bradley).

Dominance relies on contrast. Therefore, it is the varying degree of emphasis in your design elements (see Figure 1).

dominance-size.png
Figure 1: In the left image the larger square dominates the smaller square.However, not to the extent that the larger square in the image to the right dominates its smaller sibling (Bradley.)


Website designers can create 3 levels of dominance in their designs:
  1. Dominant: The element given the most visual weight. The dominant element will advance into the foreground in the design (Bradley).
  2. Sub-dominant: The element(s) of secondary emphasis that becomes the middle ground of the composition. It should capture some of the user's attention or guide the user to the dominant element. It is there to support the dominant element (Cox).
  3. Subordinate: The elements with tertiary emphasis, given the least visual weight. They diminish into the background of the design (Bradley). "The most important elements in any web design is the subordinate elements that work to build the foundation for the message to be heard" (Cox).

Dominance is important because of the focal/entry point it helps create in a website. This entry point can be any element such as the logo, the title page or an image. It helps create visual hierarchy.

Without a dominant element on the website, the users would have to work to find the entry point of the website. It take the user only 6 to 7 seconds to become engaged or move on to another site.

How to Create Dominance

Generally, more visual weight = more dominance in the element. Designers add more visual weight through the use of the following factors (see Figure 2):
  • Size: larger elements carry more weight
  • Color: Some colors are viewed as weighing more than others. For example, red is heavier than yellow
  • 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

visual-weight.png
Figure 2: Steven Bradley's "19 Factors that Impact Compositional Balance"


Visual weight is a combination of all of the above. Your biggest element on the page may also have the lightest color and value, causing it to diminish into the background.
light color and value.jpg
Notice that even though the overlapping hearts carry more weight, the single red heart over powers or balances it due to the color choice. Had the color choice been stronger the this cluster would not diminish into the background and would not be considered subordinate.



Three Main Components

Proportion

Proportion is the size and scale relationship of two or more elements on a page. Therefore, it would make sense that putting a larger size object next to a smaller element will instantly grab the attention of the user. However, this is not always true if you have a lot more elements that are competing with the larger element. It is important to ensure that you use a combination of visual weight in order to gain emphasis or focal point (Cox).

war child proportion.png
War Child: emphasis gets users attention to what the site is about and also to the donate button



Contrast

Emphasis is closely associated with the principle of contrast. The greater the contrast one element has to its surrounding elements, the greater the emphasis (Porter). Some examples of contrast between elements include the use of bold typography, shapes, and repetition.

Bold typography

Are when words stand out from the words not in bold type.


Postmachina bold words.png
Postmachina: emphasis placed on words through contrast


Repetition

Repetition in print design is much more common than it is in web design. Repeating design elements helps create emphasis, a consistent look and improves branding. In web design, a great way to achieve this is by repeating elements in the header and footer (Houle). A great way to make something stand out is for it to break the repetition, causing a disruption in the overall flow (Creative Beacon).

This idea of breaking the pattern calls extra attention to the focal point of this design.
This idea of breaking the pattern calls extra attention to the focal point of this design.


Shapes

Shapes The eye is drawn first to a photo cropped into a round shape when all the others on the page are square.

Sven Kils circle crop with images.png
Sven Kils: emphasis on circular shape against black and white squared images

Sven Kils.png
Sven Kils: emphasis on circular shape against colored squared images











Physical Relationship

Every object has a gravitational pole to the other objects that are around it, and **proportion** and **contrast** have an influence in decreasing or increasing on the element's gravity. The position of elements change the weight of elements, as well (Cox).

Physical factors that help create emphasis are as follows:

Isolation

Designers can create emphasis by isolating an element on a page with no other elements surround it. This factor works regardless of your contrast or proportion (Cox).

isolation.png
James Garner: Emphasis the title and menu through isolation. Also notice the moon image isolated to the left, which leads the user to read the title and menu creating a great design flow.

Proximity

When elements touch and overlap, the overlapping elements will always get the attention. However, contrast plays a big role in the proximity between objects. If objects are all really close to each other, the higher contrasting objects will stand out even if objects overlap (Cox).

proximity.png
Grind: Uses proximity factor to help emphasize the text. The text are placed in close proximity to one another with good use of whitespace and color contrast for emphasis.

Similarity

Similarity is the amount of focal power similar objects have with each other. When two or more objects work almost the same, they build a visual link with each other and depending on their proximity, they combine forces and grab the user's attention.

Similarity.png
Ignacio Macri: Groups similar elements to create a great physical relationship between the images on the right side and the menu to the left side.

Eye Direction or Continuance

Continuance is the factors using multiple elements together to move the user's eye across the page. This helps guide the users through the page to where the designer wants them to go.

Eye direction.png
Power of One: emphasizes through the use isolating their logo. The user is driven to the middle of the page with this element, after which he/she is guided to the content. This creates a smooth visual flow and intended message.


Emphasis Applied in Web Design

Emphasis can be applied or found on individual components or elements such as menus, icons, logo, footer, header, "submit" button, etc.(Levinson and Schlatter "Defining a Hierarchy") of a web design page or web design application. This can be accomplished by creating a focal point by manipulating elements through visual usability tools (layout, color, type, imagery, and controls and affordance) to communicate messages and functionality (Levinson and Schlatter "Introduction").

Emphasis and the elements of design create a focal point by making one element more eye-catching than the others through the use of line, shape, mass, texture, and color (Bear).

Line

In a web page design composed of vertical lines, the horizontal line becomes the focal point.

Neverbland horizontalvertical line.png
Never Bland: emphasis on line. Notice how the horizontal lines on this design draw attention to the vertical line

Shape

Shape facilitates emphasis through the combination of different shapes and other element manipulations. Shapes need to be very well balanced in order to be successful in visual hierarchy.

Shape.png
Gonzalves: Once again this website's emphasis is not through the use of color but rather through the form of shape elements. This site's unique use of shape grabs the users attention and creates an effective continuance and flow.


Mass

The physical or visually heavier elements or piece command more attention.


apple mass.png
Apple: Emphasis on mass. Apple's iPhone 6 image is commanding more attention than any other element on the page.


Texture

Different textures add tactile interest and emphasis.

Copywriters_of_Distinction___Rule_of_Three_– The_Copywriting_Studio.jpg
Rule of Three: Although does not use color for emphasis, it does a magnificent job with the use of grey, texture and typography to create emphasis and draw the eye to continuance.

Color

A splash of color or a strong change in value in an otherwise gray piece will draw the eye.


Urban edge black and white.png
Urban Edge Design: emphasis in color value (before hover image is in black and white).
urban edge color.png
Urban Edge Design: emphasis in color value (after hover image is in color).














Subject Author Replies Views Last Message
Good Header Red Contrast mlapugot mlapugot 2 50 Sep 24, 2014 by mlapugot mlapugot
Comment added: Placed anchor of "Emphasis or Fo... Anabeldamstrom1 Anabeldamstrom1 0 47 Sep 21, 2014 by Anabeldamstrom1 Anabeldamstrom1


Resources
  1. Bear, Jacci. "Focus on This: Emphasis and the Principles and Elements of Design." About Technology. Web. 17 Sept. 2014. <http://desktoppub.about.com/cs/designprinciples/a/emphasis.htm>.
  2. Bear, Jacci. "Emphasis: Create a Focal Point, Establish a Visual Hierarchy." About Technology. Web. 15 Sept. 2014. <http://desktoppub.about.com/od/glossary/g/Emphasis.htm>.
  3. Bradley, Steven. "Dominance: Creating Focal Points In Your Design." Vanseo Design. 1 Feb. 2010. Web. 15 Sept. 2014. <http://www.vanseodesign.com/web-design/dominance/>.
  4. Bradley, Steven. "19 Factors That Impact Compositional Balance - Vanseo Design." Vanseo Design. 20 Dec. 2010. Web. 20 Sept. 2014. <http://www.vanseodesign.com/web-design/visual-balance/>.
    Cox, Patrick. "Developing Emphasis in Web Design." Codrops. 30 Sept. 2011. Web. 15 Sept. 2014. <http://tympanus.net/codrops/2011/09/30/developing-emphasis-in-web-design/>.
  5. Houle, Andrew. "4 Principles of Good Design for Websites." MyInkBlog. Web. 19 Sept. 2014. <http://www.myinkblog.com/4-principles-of-good-design-for-websites/>.
    Kyrnin, Jennifer. "Emphasis - Basic Principles of Design." About Technology. Web. 15 Sept. 2014. <http://webdesign.about.com/od/webdesignbasics/p/aaemphasis.htm>.
  6. Levinson, Deborah A., and Tania Schlatter. "Defining a Hierarchy." //Visual Usability Principles and Practices for Designing Digital Applications//. Amsterdam: Morgan Kaufmann Is an Imprint of Elsevier, 2013. 45-46. Print.
  7. Levinson, Deborah A., and Tania Schlatter. "Introduction." Visual Usability Principles and Practices for Designing Digital Applications. Amsterdam: Morgan Kaufmann Is an Imprint of Elsevier, 2013. xvi. Print.
  8. Merriam-Websters. http://www.merriam-webster.com/dictionary/dominance
    Mueller, Gisele. "25 Examples of Emphasis Applied in Web Design." Codrops. 8 Oct. 2011. Web. 17 Sept. 2014. <http://tympanus.net/codrops/2011/10/08/25-examples-of-emphasis-applied-in-web-design/>.
  9. Porter, Dave. "Hierarchy & Web Site Design." Wood Street, Inc. 21 Sept. 2010. Web. 18 Sept. 2014. <http://www.woodst.com/web-design-development/hierarchy-web-site-design/>.
  10. Schlatter, Tania. "Visual Design Tips for Web Apps: 
#4 – Visual Hierarchy and Why It Matters." Nimble Partners: Seen & Learned. 6 Jan. 2011. Web. 17 Sept. 2014. <http://blog.nimblepartners.com/2011/01/visual-design-tips-for-web-apps-4.html>.
  11. "Why Random Designs Are So Compelling to Customers - Creative Beacon." Creative Beacon. Web. 19 Sept. 2014. <http://www.creativebeacon.com/why-random-designs-are-so-compelling-to-customers/>.