Emphasis+or+Focal+Point


 * [[image:605 Wiki.jpg]]by 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). toc = =

=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).



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 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.

=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).



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.

**<span style="font-family: Arial,Helvetica,sans-serif;">Bold typography **
<span style="font-family: Arial,Helvetica,sans-serif;">Are when words stand out from the words not in bold type.



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).

**<span style="font-family: Arial,Helvetica,sans-serif; font-size: 1.1em; line-height: 1.5;">Shapes **
<span style="font-family: Arial,Helvetica,sans-serif; line-height: 1.5;">@Shapes The eye is drawn first to a photo cropped into a round shape when all the others on the page are square.



<span style="color: #ff0000; font-family: Arial,Helvetica,sans-serif;">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: **

I**solation**
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).



<span style="font-family: Arial,Helvetica,sans-serif;">Proximity
<span style="font-family: Arial,Helvetica,sans-serif;">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).



<span style="font-family: Arial,Helvetica,sans-serif;">Similarity
<span style="font-family: Arial,Helvetica,sans-serif;">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.



<span style="font-family: Arial,Helvetica,sans-serif;">Eye Direction or Continuance
<span style="font-family: Arial,Helvetica,sans-serif;">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.



=<span style="font-family: Arial,Helvetica,sans-serif;">Emphasis Applied in Web Design = <span style="font-family: Arial,Helvetica,sans-serif;">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").

<span style="font-family: Arial,Helvetica,sans-serif;">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).

<span style="color: #ff0000; font-family: Arial,Helvetica,sans-serif; font-size: 1.3em; line-height: 1.5;">**Line**
In a web page design composed of vertical lines, the horizontal line becomes the focal point.



<span style="color: #ff0000; font-family: Arial,Helvetica,sans-serif; font-size: 1.3em; line-height: 1.5;">**Shape**
<span style="font-family: Arial,Helvetica,sans-serif; font-size: 12px; line-height: 1.5;">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.



<span style="color: #ff0000; font-family: Arial,Helvetica,sans-serif; font-size: 1.3em; line-height: 1.5;">**Mass**
<span style="font-family: Arial,Helvetica,sans-serif; line-height: 1.5;">The physical or visually heavier elements or piece command more attention.



<span style="color: #ff0000; font-family: Arial,Helvetica,sans-serif; font-size: 1.3em; line-height: 1.5;">**Texture**
<span style="font-family: Arial,Helvetica,sans-serif; line-height: 1.5;">Different textures add tactile interest and emphasis.



<span style="color: #ff0000; font-family: Arial,Helvetica,sans-serif; font-size: 1.3em; line-height: 1.5;">**Color**
<span style="font-family: Arial,Helvetica,sans-serif; line-height: 1.5;">A splash of @color or a strong change in value in an otherwise gray piece will draw the eye.



include component="comments" page="page:Emphasis or Focal Point" limit="10"

** Resources **
> 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/>. > Kyrnin, Jennifer. "Emphasis - Basic Principles of Design." // About Technology //. Web. 15 Sept. 2014. <http://webdesign.about.com/od/webdesignbasics/p/aaemphasis.htm>. > 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/>.
 * 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/>.
 * 1) 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/>.
 * 1) 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.
 * 2) 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.
 * 3) Merriam-Websters. http://www.merriam-webster.com/dictionary/dominance
 * 1) 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/>.
 * 2) 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>.
 * 3) "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/>.