Emphasis as a Web Design Principle

Emphasis in a web page design creates an area or object that is the focal point for the page. It is a way to make one element stand out in the design. The focal point may be larger than other elements of the design or brightly colored — both of which tend to draw the eye. When you're designing a webpage, you may add emphasis by choosing a word or phrase and assigning it a color, font, or size that makes it stand out, but there are many other ways to use emphasis in your design.

Use of Emphasis in Design

One of the biggest mistakes web designers can make is to attempt to make everything in the design stand out. When everything has equal emphasis, the design appears busy and confusing or worse — boring and unappealing. To create a focal point in a web design, don't overlook the use of:

• Lines: Create emphasis by contrast. If several elements are horizontal, one vertical element becomes the focal point.
• Color: If most elements in the design are dark or muted, any object with color attracts the eye.
• Shapes: When most shapes are irregular, a geometric shape stands out.
• Proximity: When several items are grouped, and one is separate from the group, the eye goes to the single item.
• Placement: Although there are exceptions, an element placed in the center of a design usually draws the eye.
• Weight: A heavy element attracts the attention of the viewer.
• Repetition: When a simple graphic to type element is repeated, the eye follows the repeated element to the focal point.
• Contrast: In addition to contrasts created by color and lines, contrast can be generated by size, texture or font changes. The change causes the focal element, or emphasis, to stand out.
• White Space: An element surrounded by white (or empty) space becomes the focal point.

Hierarchy in Web Designs

Hierarchy is the visual arrangement of design elements that indicate importance by size. The largest element is the most important; the less important elements are smaller. Focus on creating a visual hierarchy in your web designs. If you've worked to create a semantic flow to your HTML markup, this is easy because your web page already has a hierarchy. All your design needs to do is emphasize the correct element — such as an H1 headline — for the most emphasis.

Along with hierarchy in markup, recognize that a visitor's eye views a webpage in a Z pattern beginning at the upper left corner of the screen. That makes the upper left corner of the page a good place for an important item such as a company logo. The top right corner is the second-best placement position for important information.

How to Include Emphasis in Web Designs

Emphasis in web design can be implemented in many ways:

• Use semantic markup to provide emphasis even without any styles.
• Change the size of fonts or images to emphasize or de-emphasize them in the design.
• Use contrasting colors to provide emphasis.
• Size counts. A huge word on the page or screen gets immediate attention.
• Surround the focal point with white space.
• Repeat a word or image to draw attention.

Where Does Subordination Fit In?

Subordination occurs when you tone down other elements in a design to make the focal point pop. One example is a brightly colored graphic positioned against a black and white background photo. The same effect occurs when you use muted colors or colors that blend with the background behind the focal point, causing it to stand out.