Small Yet Mighty Elements of Website Design: Dots

1) Dots

Points are the simplest elements of a visual design. However, by definition, we cannot actually draw a point since to see it, one would require it to have dimensions.

What we can draw is a dot! In fact, dots are the building blocks of any other design. (Add image)

When asked to imagine a dot, what comes to your mind first?

A figure that is circular in nature?

While we often think of dots as circular in nature, they are not. A dot could be of any shape or form regardless of its size. Any mark could be perceived as a dot (or line) or a series of dots. Dots are points of focused attention. They are the focal points in our composition. They anchor themselves in the space and provide a reference point to the other forms around it.

Dots establish relationships with the space around them. The two most important of these are:

● Proportion – As a dot increases in size, we begin to perceive them as shapes, however, they still retain their fundamental dot-like qualities and characteristics. A square placed in the whitespace is still a dot. It still attracts visual attention which is a dot’s defining characteristic.

● Position – Once placed on a page, dots create symmetry or asymmetry. When aligned in a particular position on the screen, they immediately start to form a composition. For example, Dots in the scale (right) and a single dot (left) creates an asymmetric composition through its position.

This observation turns more interesting when multiple dots are present. When two dots are placed in proximity, the emphasis is shifted from the space between them to the relationship that the dots share. The second dot following the first dot implies structure.

But, as the space between the dots decreases, the tension between them increases. However, when it approaches almost zero (a tiny bit of space that is still present), the space overpowers them and becomes much more important than the dots. The tiny space holds all the tension.

Wonder how our visual system suddenly emphasises space than the dots?

Eventually as the dots move closer and have minimal proximity, they are perceived as a single object. Rather than being perceived as two different circles, they are perceived as a single altogether different shape. This leads to the formation of a more complex shape than either do individually. This occurs because the new tension is based on the appearance of depth. The space that existed between them in 2-dimensions has now been moved to 3-dimension. This occurs because that is the only way we can perceive the overlapping dots.

They create a new figure-ground relationship where one dot is perceived as a figure (foreground) and the other is perceived as the ground (background).

When the dots are far apart and they are well spaced, the human visual system emphasises the structure that is created by them instead of the individual dots.

In combination, dots can form an endless variety of structures. They can become lines or curves when placed adjacent to each other or can be perceived as patterns or objects when combined and placed in a particular form that may imply both – movement and direction.

2) How to use dots in website designing?

Single Page websites are trending and exponentially increasing day by day. One way to navigate this type of design is by dot navigation. It entails a series of dots in the right or left sidebar that indicate the number of pages on the website.

Apart from navigation, dots as ellipsis (…) have been widely used to communicate vital information to the users. They are often used to initiate action and increase users’ engagement with the webpage. Let’s understand this by considering some examples

An ellipses adds visual prominence to the text field and draws attention of the user. It also aids in minimising the words and nudging the user to fill in the blank by entering their own words thus enhancing engagement.

With just about 10 seconds available for creating that visually appealing impression on site visitors, it is vital to pay attention to each individual graphic or textual element that needs to go into a website.

The fundamental characteristic of a dot draws the user’s attention. Whenever the designer wants a user to look in a particular direction, or they want to emphasise important information, a dot stands ready.

Designers have also utilised dots to create minimalistic designs and logos that eases the user to interpret the design / logos with slightest cognitive load and increase in engagement in pleasure after decoding the design / logo; since our minds tend to fill the gaps between the dots and perceive the structure as a whole.

Conclusion

While we often consider dots as being circular in nature, they could be of any shape or form regardless of its size. Any mark could be perceived as a dot. Dots are points of focused attention and designers can effectively use them to enhance user experience by:

• Leveraging dot navigation on single websites.
• Adding an ellipses to enhance the visual prominence and draw the user’s attention.
• Aligning the dots in such a way that guides the user’s eyes in the desired direction.
• Create minimalistic designs / logos by using dots that eases the user to interpret it by reducing the cognitive load.

Just like white space is a building block for abstract points, dots are an elementary unit for other website elements like lines, shapes, volume etc.

In the next blog, we will consider the easiest element to build from a dot- a line.

Do follow our LinkedIn page for updates: [ Myraah IO on LinkedIn ]