Intro to Design Elements

Designers combine basic building blocks — elements — to create their products. The most basic of these elements are dots, lines, and planes, all of which can be affected by the volume property. When working with these, artists and designers can create images, icons, textures, patterns, diagrams, animations, and typographic systems, among others.

Points form the basis of every other design element. In math, a point is a set of coordinates indicating a position. It has no height, width, or depth — it’s invisible. In design, we use dots to indicate a point.^[1] These dots direct and focus attention or create emphasis. We can combine dots to create interface elements (such as kebab menus).

Technically speaking, all other elements are created by combining dots and points. A line, for example, is simply a series of tightly overlapping dots connecting two points.

A line is one of the most basic design elements consisting of two connected points (in geometry, this would be called a line segment, but in design, we just call it a line). Lines can be used on their own or to form other shapes, such as a circle, or combined together to form shapes like a square or triangle. 

In design, lines are often used as dividers or to outline something like an image. Lines don’t have to be straight; they can curve or wave. Sometimes, we use dotted or dashed lines to create a less visually impactful divider.

In design, planes are flat enclosed areas created through lines, textures, and colors. They can be made in any shape you choose. 

Planes are excellent compositional tools for clustering elements into visual fields or, on the contrary, separating unrelated information.

Three-dimensional objects occupy space — they have volume. For rectangular objects, volume is a product of their length, width, and height. 

Adding a third dimension to your designs can create visual interest and make elements stand out. You’ll need to have a good understanding of perspective to create these objects (or rely on 3D compositing software), but they help achieve amazing results.

Dots are one of the simplest design elements, and simplicity often creates better products. That’s one reason the kebab menu (consisting of three vertically-aligned dots) has endured across countless products. Companies like Google, Microsoft, Atlassian, and many others use this icon often thanks to its simplicity. 

Linear elements consist of lines only with no internal fill. Examples include Like or Comment icons on Instagram, the Bookmarks icon on many web browsers, and any other icon that consists of only an outline. Linear elements can also be used for things like borders around specific content.

Solid shapes — planes — can be faster to recognize than outlined ones, as they appear more like physical objects. That said, you may want to use outlined versus solid icons depending on the use case, such as an icon button’s default and hover or active states.

Volume assists with visual hierarchy in your designs. It can also help users determine which elements are interactive. With buttons, it gives the impression of something that can be pressed. Use shadows, angles, and highlights to give volume to elements.^[2]

Dot elements are an excellent way to attract just the right amount of attention. Showing a green dot to indicate that a user is online is immediately noticeable and recognizable without cluttering up your interface. Dots used in radio buttons help us immediately identify which control is selected. 

Lines can be used for a variety of purposes in design. They can help us structure a composition, direct attention, divide content blocks, and help frame various pieces of information.^[3] Using lines to create shapes looks lighter than using solid shapes. They can add a sophisticated look to minimalist design projects.

Combining various planes, each in different colors, shapes, and orientations, can add a ton of visual interest to a simple design. Use planes to create images, to differentiate between design components, or to draw users’ eyes to particular parts of your interface. 

Volume isn’t just for interactive elements. Adding a 3D background to your designs can make for a whimsical experience for users. A sphere instead of a flat circle, for example, is more eye-catching.

3D backgrounds can even add a futuristic vibe to your designs. Just be sure not to go overboard, as 3D shapes can get overwhelming if used too much.