Emphasis in Design. How to Draw Attention

An emphasis in web page design is a way to mark an element, emphasize its importance and significance, bring it into focus. Emphasizing is directly related to the visual hierarchy.

Wise emphasizing is possible only after analyzing the content of the site and structuring its objects in order of importance.

Without a clear prioritization of objects, too many accents can be made, causing ripples in the vision. Such a design is perceived by the mind as chaotic and annoying. The lack of eye-catching focus points makes the design boring and monotonous. In both cases, the user will just leave the page.

First of all, the emphasizing should be consonant with the conceptual logic of the site and only then — with creative and artistic one.

‍

‍

So, we decided on the priority of objects, and we know what to fix the viewers eyes on. What methods help to do this most effectively?

Light and movement are physical phenomena to which humans and animals react instantly and instinctively. They have the biggest impact on us. The most attention is paid to movement.

Numerous design tools, that help to draw attention, are derived from these two physical phenomena, light and movement. Brightness and color tell us about the lighting of the object. Rhythm, direction, location, weight, distance, scaling are reflecting the dynamics. Contrast basically is a change in parameters, which means it also belongs to the category of movement.

So, our emphasis tools are as follows:

• Color

The main (dominant) color and accent color are the most important when choosing a site color palette. The accent color depends on which color scheme you choose.

Monochromatic color scheme assumes a choosing of the brightest shade from the monochromatic scale. It will be the accent color.

‍

‍

Analogous color scheme includes colors that are positioned next to each other on the color wheel. So, taking the yellow-orange palette, you can choose light yellow as the dominant color, several yellow shades — as the subdominant, and make orange working as an accent color.

‍

‍

Complementary scheme is comprised of two colors that are opposite each other on the color wheel. The contrasting color combination is very effective for emphasis (when used sparingly).

‍

‍

Split complementary scheme

A variant of a complementary combination of colors, when instead of the opposite color, two of its adjacent colors are used. This scheme looks just as contrasting, but not so intense.

‍

‍

Triadic color scheme

A triadic scheme is comprised of three colors evenly spaced on the color wheel, so they are quite difficult to combine. A dominant color has to be chosen among them.

‍

‍

When choosing an accent color, it must be kept in mind that warm tones seem heavier than cool tones that visually fade into the background. Red is considered as a heaviest color, and the lightest is yellow.

Dark elements have greater visual weight than light ones.

Regarding the main color and accent, there is recommendation 60–30–10, where 60% of the entire design is assigned to the dominating color, 30% of the web space can be filled with subdominant color, and 10% — with the accent one.

‍

Tools of movement (change):

‍

• Figures and shapes

‍

Any geometric figure can play the role of an accent. However, a circle or triangle is associated with movement, so they are more likely to attract attention than a static rectangle.

If in a series of identical figures one stands out with something, it becomes an accent.

Objects of a regular shape seem heavier than elements of the irregular shape and better serve as an accent. Elements with an irregular shape are subconsciously perceived as correct, but lacking parts of their mass.

‍

‍

• Size

Enlarging an element creates a powerful accent. Large elements have greater visual weight than small ones.

‍

• Weight

A heavier element immediately draws the eye, in other words, works as an accent.

‍

• Lines

Lines are associated with movement and attract attention. If several elements are horizontal, then one vertical becomes an accent.

‍

• Proximity

When several elements are grouped, and one of them is separated from the group, the glance goes to this element.

‍

• Contrast

Contrast always catches the eye and creates an accent. It’s achieved by changing color, lines, size, texture, typographics.

‍

‍

• Location

The element placed in the center of the design usually focuses the look. Vertical objects seem heavier than the horizontal ones. Diagonal elements have the highest weight and focus the attention.

The objects in the upper part of composition seem heavier than those in the lower part.

‍

• Rhythm

The rhythm creates movement and attracts attention. The rhythm is formed by the interchange of shapes, sizes, colors, textures, by using of scaling or typographics.

If an element is repetitive, our eye follows it to the focus.

‍

• Spacing

An element surrounded by empty space becomes an accent.

‍

• 3D images

Volume gives objects materiality and tangible weight. Three-dimensional images work as accents.

‍

‍

‍

• Texture

Objects with a texture seem heavier than smooth ones and play the role of an accent. The texture creates the illusion of three-dimensionality of the object, as if giving it mass and physical weight.

‍

• Breaking of order

If any element sticks out of the general pattern, it has no chance to remain unnoticed. This makes it an accent.

‍

• Background and foreground

Elements in the foreground have more weight than elements in the background, which means they serve as accents.

‍

• Animation

It’s the most powerful mean of attracting attention. A moving picture captures our attention much more than an illustration. The order in which objects appear on the screen, speed, duration of display — all this is determined by the hierarchy and emphasizing.

‍

‍