What are the elements of visual design in UX?

Visual design aims to improve the aesthetic appeal and usability of a design/product. The elements of visual design are shown below:

Lines

Lines are one of the most basic parts of visual design. These are strokes connecting two points and can be used to make shapes and patterns to create textures.

Lines can be of different types, such as thick or thin, straight or curved, of uniform width or taper off, geometric (drawn by compass), or organic (drawn by hand).

We can use different types and connections of a line in forming logos, etc. As shown below, Slack uses a combination of different lines to make its logo:

Shapes

Shapes are self-contained areas. These are formed by lines combined. Shapes have different attributes such as length, width, etc. Objects are identified initially, at a glance, by shapes. Designers use shapes to convey effective messages. As shown below, Toyota uses a combination of shapes to make a T in its logo:

White space

White space refers to the empty area around a shape. The relation between the shape and the area around it is called figure/ground. A shape means the figure, and the area around it is the ground. While designing shapes, we should be aware that we are also designing white space, as it defines the boundaries of the shapes and maintains a good balance. As shown below, WWF uses a combination of shape and whitespace to make a panda in its logo:

Volume

Volume refers to three-dimensional visuals that have height, width, and length. Volume is rarely used in visual design, as most digital products are viewed on a 2D screen. As shown below, the shape below is an example of volume:

Value

Value describes light and dark. A design with a high contrast of values conveys clarity, whereas one with similar values conveys subtlety, as shown below:

Color

We can use color to convey contrast and effective messages in design. We can find details of color theory here.

Texture

Texture refers to the surface quality. In user interface design, the textures used are implied textures where the texture can only be seen and not felt, unlike tactile textures. Textures are used in interfaces to distinguish backgrounds from other elements while keeping the design minimalistic, and yet not too bland, as shown below:

Conclusion

The elements of visual design are the building blocks of visual design, and combining these different elements together in various ways allows for effective communication.