Limited time offer - 50% off Uxcel Pro!
Get Uxcel Pro Yearly!
Expires in:
00
:
00
:
00
:
00
Interested in hiring qualified designers? Check out Uxcel Hire
Hand
Welcome Product Hunters!
Improve your design skills! Get Uxcel Pro — 50% off for Life.

The basic visual design elements

The basic visual design elements

The basic visual design elements are the building blocks of every aspect of UX design. Once you know what the most basic elements are and the purpose each one serves, you’ll be able to more effectively use those elements to create products that delight users.

Basic Visual Elements

You might be familiar with some of these terms from geometry classes. In the world of design terminology, though, some of these terms are defined much more loosely.

The most basic visual design element is the point. A point—not to be confused with the unit of measure—can exist on its own or as part of another design element, like a line, shape, pattern. 

Think of a point as a dot that appears anywhere within another element, or on its own. Increasing the size of a point, for example, can give us the larger dots (generally three) that make up kebab menus.

Lines are the next basic visual design element. A line is an actual or imaginary path between two points. They come in all shapes and sizes, and can be stretched, bent, or curved to form all kinds of angles. 

Lines can be solid, dashed, dotted, or otherwise stylized. Grouping lines together is also a popular design choice. Three short lines stacked on top of each other, for example, create a hamburger menu. 

Shapes are created when we connect one or more lines. They can be geometric (such as squares, triangles, circles, or rectangles) or more organic, natural shapes (including things like clouds, leaves, and rocks). Shapes can be used to organize layouts and keep them balanced.

Shapes can be used for specific design elements, too. Rectangles are the most commonly seen, in everything from images to buttons. Circles have grown in popularity as more sites include some kind of profile images. While shapes are useful in distinguishing visual hierarchy, they can be overdone. Don’t allow too many shapes to take away from the purpose and function of your designs.

If we move a shape into the three-dimensional space, we get a form. For example, we can add several more lines to a square to end up with a cube. Forms can be geometric in nature (cylinders, cones, spheres, prisms, etc.) or more organic and natural with no restrictions. Forms can include combinations of tone, texture, and color to become more realistic or visually striking. 

Balancing space within your designs is important, specifically negative space. Negative space is the “empty” area inside or around layout elements. Within product design, we usually work with two-dimensional space, but we can also use tricks like elevation, stacking, shadows, and gradients to create illusions of depth and reinforce visual hierarchy.

Negative space around elements is vital to making a design look clean and balanced. But leaving sufficient space around elements also makes them more legible and usable.

More Elements of Visual Design

While the above basic elements of visual design are vital to understand, they’d potentially be a little boring in an interface without the use of color and texture. 

In 1666, Sir Isaac Newton figured out that without light, color would not exist after noticing that when a ray of sunlight passes through a prism, the sunlight disperses into a rainbow of colors. To further understand the relationships between primary, secondary, and tertiary colors, Newton invented the first color wheel.

We see different colors when various surfaces reflect some light back to our eyes while absorbing other light. Different wavelengths of light are interpreted as different colors by our brains. Red has a long wavelength, while violet has a short wavelength (with all of the other colors—or hues—falling somewhere in between). We can use different hues to create particular moods or messages for users.

Besides hue, we also measure color in value. Value refers to the degree of perceptible lightness of the colors in an image. The difference between two values is called contrast in design. Even two colors that are opposites on the color wheel (such as blue and orange) may not have sufficient contrast in UX design unless one is significantly lighter than the other.  

Besides color, we can also apply texture to various design elements to add visual interest and improve usability. Think of a lemon. You’re probably picturing its yellow color, but also its bumpy skin—its texture (tactile in this case). 

Visual texture is two-dimensional and implies an imaginary surface. Textures can grab a user’s attention, add emphasis to an element, and even make users perceive an element as more interactive. 

Some textures make us immediately relate to physical surfaces, mimicking tactile feelings. Consider how we perceive those tactile feelings when considering which textures to use on a site. If you’re trying to create a design that’s calming or soft, don’t use a texture of a rough wall, for example. 

Conclusion

These visual design elements are the basic building blocks of good UX design. Knowing the terminology lets you effectively communicate with other stakeholders on a project, as well as describe the way a design should look. 

Understanding how points combine to form lines, which combine to form shapes, etc. allows you to better consider the composition of individual elements within a product design. When you start viewing elements as the specific parts that they’re made up of, you’ll find new ways of effectively combining them and using them to your users’ advantage.

FacebookLinkedinTwitter
Author

Are you a design educator?

Enrich your educational experience with Uxcel's interactive and gamified learning platform.

Contact sales
Are you a design educator?
HIRE DESIGNERS

Hire qualified designers, guaranteed

Learn more
Skip the job hunt.
Uxcel Verified
VERIFIED TALENT NETWORK BETA

Skip the job hunt

Join Uxcel’s verified talent network. Get matched & hired by the top companies around the world.

Learn more
Skip the job hunt.