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.