Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

hci
ux
ui

What are the elements of visual design in UX?

Sheza Naveed

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

Elements of visual design

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:

Types of lines
Slack 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:

Types of shapes
Toyota 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:

Whitespace
WWF 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:

Shape

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:

Clarity and subtlety

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:

Source: Interaction Design Foundation

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.

RELATED TAGS

hci
ux
ui

CONTRIBUTOR

Sheza Naveed
Copyright ©2022 Educative, Inc. All rights reserved
RELATED COURSES

View all Courses

Keep Exploring