.svg){kind=small}
The seven elements of design are lines, shapes, space, color, texture, typography, and motion. They're the building blocks of any composition, and you can decompose even the most complex design back into them. Russian painter Wassily Kandinsky used to say that everything starts from a dot, and in digital design a dot is simply an intersection of lines. Before you learn the principles and techniques, it helps to know your toolkit and understand how each element affects your design.
Key takeaways
- The seven elements are lines, shapes, space, color, texture, typography, and motion.
- Elements are the building blocks. Principles like balance and contrast are the rules for arranging them.
- Counts vary between five and eight. Art lists value and form, digital design lists typography and motion.
- Space is the element beginners skip most often, and it does the most work.
- Each element has a purpose. Naming that purpose is what turns vague feedback into useful critique.
How many elements of design are there?
It depends who's counting, which is why you'll see five, seven, and eight quoted in different places.
Traditional art education lists seven elements of art: line, shape, form, space, value, color, and texture. Digital design keeps most of that list. It also swaps in what screens actually need. Form matters less in two dimensions. Value folds into color. Typography and motion get added, because text and movement are core to interfaces in a way they never were to painting.
This article covers the seven that matter for digital product work. If a course you're taking lists five, it's usually collapsing typography into shape and dropping motion, so the names differ more than the ideas do. Understanding them early makes the rest of a UX design learning path easier to follow.
1. Lines
A line is a basic design element 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 to form squares and triangles.
In design, lines are often used as dividers or to outline something like an image. They can be straight, curved, wavy, thick, or thin. Dotted or dashed lines create a less visually impactful divider.
The purpose of lines
Simple at first sight, lines play an important role in establishing design composition and hierarchy. Dividers, meaning horizontal or vertical straight lines, separate different content groups. Lines also help direct attention toward specific information or focal points.
Take the design elements quiz to learn more about using lines, dots, and planes in composition.
2. Shapes
When a two-dimensional line encloses, you get a shape, another basic element of design. There are two types: geometric and organic. Geometric shapes are the ones you studied in math class, such as squares and circles. Whether simple or complex, they create a feeling of order and control.
Organic shapes can be drawn freehand or with a mouse or digital pen. They're often found in nature, like leaves or clouds, and they produce a natural feel.
The purpose of shapes
Every element of design is a shape in some way. Using recognizable shapes for particular functions maintains visual consistency. Users know that rectangles are for buttons, cards, images, or videos, circles for avatars or badges, and arrows for navigation or the play button. If you want people to intuitively know how to use your interface, stick to common shapes.
3. Space
Space refers to the area between, around, and even inside design elements. Any space taken up by design elements is called positive. Negative space, or white space, refers to the area surrounding the element.
The purpose of space
White space is important for design success, and it does four jobs:
- Improved readability. White space makes content easier to follow and scan. It creates breathing room for elements and content groups, and it makes designs look neat and clutter-free.
- Increased discoverability. Empty space guides the eye and makes an element stand out against less important content. Negative space can emphasize key objects in logos, illustrations, posters, and creative lettering.
- A more elegant, minimalistic look. Large areas of white space make a design look clear and spacious.
- Balance. White space balances the other elements in a design, creating harmony and visual stability.
Practicing this is what the design composition course is built around.
4. Color
Color is a visual property of objects, determined by the wavelengths of light they reflect, emit, or transmit. People commonly associate color with the visible spectrum, made up of the rainbow colors: red, orange, yellow, green, blue, indigo, and violet. It's a somewhat amorphous term, described using words like hue, tint, tone, saturation, value, and brightness.
The purpose of color
Color fills several core functions in design:
- Communicating the states of elements
- Highlighting important components
- Alerting users when something goes wrong
- Conveying mood
- Establishing hierarchy
- Evoking emotion
One rule holds everywhere: text has to stay legible against its background, and that outranks any aesthetic preference. Discover the psychological side of color, and how to use it for a more delightful experience, with the color psychology course.
5. Texture
Textures are about how surfaces feel to the touch. In the physical world you can touch a flower and feel the texture of its petals: smooth, thin, and veined. In design you simulate that tactile feeling with visual patterns, lines, and color. The better the texture, the easier it is to imagine how it would feel.
The purpose of texture
Texture creates visual interest, adds depth, and makes designs feel more realistic and alive. On screen it's always implied rather than real, built from shadows, gradients, noise, blur, and layering.
Restraint matters more here than with the other elements. Texture is the fastest way to make an interface look dated, because texture trends move quickly while lines and shapes don't.
6. Typography
Typography can be viewed from two angles. One is the style and appearance of printed text. The other is the art and process of arranging text so it's readable and legible for print or digital design.
Typography covers a number of activities, namely selecting and adjusting:
- Typefaces
- Point sizes
- Line lengths
- Line spacing
- Letter spacing
- Kerning
When selecting and arranging typefaces, designers weigh legibility, readability, hierarchy, contrast, and alignment.
The purpose of typography
Typography is one of the most important components of design. It's not just a way to convey text but a way to communicate brand image and influence how people feel. Typography helps designers:
- Establish a strong visual hierarchy that helps users navigate content
- Improve legibility and readability, making products more accessible
- Set the mood
- Convey the personality of a brand and build recognition
Learn the history, concepts, and craft of working with type in the typography course.
7. Motion
Motion refers to movement and animation that help improve user experience and communicate information about a product or service. A few key principles apply when adding motion to a design:
- Function. Don't use motion without a specific purpose. It should improve the experience, not harm it.
- Consistency. Motion should match the visual style and brand personality.
- Simplicity. Avoid motion that distracts from the content or functionality.
The purpose of motion
Motion earns its place when it does one of four things:
- Indicates state and gives feedback. An animated spinner shows that a page is loading.
- Attracts attention, since our eyes are drawn to moving objects. A radiating halo on a button encourages a click.
- Guides users on a page. Smooth animation of accordions and anchor links helps people understand where they are.
- Signals interaction, especially on mobile, where a short animation confirms a tap registered.
Duration is the usual thing people get wrong. Most interface transitions want 200 to 300 milliseconds rather than a full second.
Elements and principles of design: what's the difference?
The elements described above are the building blocks of any composition. Don't confuse them with the principles of design: unity, balance, proximity, alignment, contrast, emphasis, repetition, proportion, hierarchy, movement, and figure-ground. Principles help designers arrange elements on a page in the most logical, functional, and appealing way.
A worked example makes the split obvious. Contrast is a principle. You achieve it using elements: a dark shape against light space, or a heavy type weight beside a light one. The principle names the goal, and the elements are how you hit it.
That's also why critique gets easier once you know both. "This feels off" becomes "the hierarchy is weak, because every heading uses the same weight."
Elements of design in art vs digital product design
The vocabulary overlaps, but the emphasis shifts.
Art and drawing courses stress form and value, because rendering a three-dimensional object on paper depends on both. Digital product design largely drops them, since screens are flat and value gets handled as part of color.
What digital design adds is interaction. Motion only exists because interfaces respond, and typography carries far more weight than in fine art, since most products are mostly text. Space also stops being composition alone and becomes a functional tool for grouping controls.
So if you learned the elements in an art class, you already have most of the list. Expect to add motion, promote typography, and treat space as a way to communicate structure.
How to apply the elements of design
Naming the elements is the easy part, and using them deliberately takes practice.
Start with one element per critique. Judge a screen only on its use of space. Then only its typography. Isolating them stops you giving vague feedback.
Work the other way when you build. Choose your type scale before you pick colors, because hierarchy usually comes from typography and space rather than hue. Add texture last, if at all.
A quick self-check on any layout:
| Element | Question to ask | Common mistake |
|---|---|---|
| Lines | Does every divider earn its place? | Boxes drawn where space would do |
| Shapes | Do shapes signal what's interactive? | Tappable things that look static |
| Space | Does grouping match the content's logic? | Even spacing that hides relationships |
| Color | Is there one clear accent? | Several competing brights |
| Texture | Does depth support hierarchy? | Shadows applied for decoration |
| Typography | Can a reader scan headings alone? | One weight used everywhere |
| Motion | Does each animation say something? | Transitions that only add delay |
When you can answer all seven for a design that isn't yours, you've learned the elements.
Start with space. It's the element that changes a layout most, and the one almost nobody adjusts first.
