Ever wonder what makes a design truly great? This exploration will guide you through the six core elements of design, and even propose a seventh for the digital age. We'll break down the fundamentals and show you how to use them effectively in your own work.
What are the Elements of Design?
Design elements influence how a piece is seen, made, and used - and they're present in every design, no matter the skill, taste, or style of the creator. Everything artists and designers produce has a significant impact on people's daily lives.
Everything has form. We're not talking about a form's content, but the form itself. Forms are three-dimensional, coming in two types: geometric (man-made) and natural (organic). Whether digital or physical, a form can be measured by height, width, and depth. Forms can be created by combining shapes and enhanced with color or texture. They can be ornate or utilitarian, depending on their purpose. In digital design, think of form as the object you're designing for. For example, if you're designing for a mobile device, the phone itself is your form.
Every object is made up of shapes, and all design elements are, in some way, shapes themselves. Shapes exist within forms. A website button, for example, is a shape within the computer (the form). A shape is a two- or three-dimensional object that stands out from its surrounding space due to a defined or implied boundary. Shapes can occupy different areas in space and incorporate other elements like line, color, texture, or movement. Like forms, shapes are either geometric or organic.
Geometric shapes, like those in architectural renderings, are precise and can be drawn with tools like rulers, compasses, or digital instruments. They're typically created in CAD or by hand, exhibiting control and order. Organic shapes, on the other hand, are found in nature or drawn freehand. They're the antithesis of geometric shapes, often feeling natural and smooth. However, their natural origin doesn't necessarily mean they're less complex—consider the intricate grain of a tree stump. While the rise of computer-aided design has blurred the lines of what "hand-drawn" means, organic shapes created with a mouse, digital pen, or tablet still qualify as long as they're executed freehand.
Line
Often the foundation of artistic expression, the line is a core design element. It's defined by having greater length than thickness and can be unbroken, broken, or implied. Lines can be vertical, diagonal, horizontal, or curved, and can vary in width, size, shape, position, direction, interval, and density.
Lines are created from points, and shapes are formed from lines. Lines can incorporate elements like color, texture, and movement. Despite their seemingly simple nature, lines can powerfully influence a viewer's thoughts and emotions, guiding their eyes through a composition. In digital design, lines are often used to visually separate or contain areas—think of a navigation bar separated from the main content by a line.
Texture
Texture refers to the way a surface feels, or appears to feel. It can draw the viewer's eye in or push it away, and can be applied to lines, shapes, and forms. There are two types of texture: tactile and visual. Tactile textures are three-dimensional and can be physically touched, like the rough and smooth bumps and ridges of tree bark. A photograph of that same bark, however, would be a visual texture you can see it, but you can't feel it.
Color
Color, while one of the most challenging design elements to master, is relatively easy to understand at its core. It can help organize a design and emphasize specific areas or actions. Like other elements, color has properties: hue, saturation, and lightness. However, unlike other elements, color isn't always necessary. A design can effectively use the absence of color (and yes, black and white are still considered colors). Whether used sparingly or in a vibrant array, color often works best with a dominant hue and a supporting one.
Hue refers to a specific wavelength of light within the color spectrum, typically created by blending the primary colors red, green, and blue (RGB). A hue can have varying levels of saturation, from vibrant to dull. For example, cyan, baby blue, navy blue, and royal blue are all blue hues with different intensities. Colors also range from light to dark. It's important to remember that while color is universal, its connotations vary across cultures. White, for example, can represent purity in some cultures and death in others.
Space
Every shape and form occupies space. In design, "space" refers to the area surrounding, above, below, or behind an object. Objects exist in both two and three dimensions. In two-dimensional design, space involves creating the illusion of depth on a flat surface. Techniques like shadows, shading, overlap, and variations in size help define an object's position in this implied three-dimensional space. For example, a button with a shadow appears closer to the user. Like color, space is an optional element, but its effective use can add significant emphasis to a design.
Movement
Traditional, static UI design implies movement, but objects themselves remain stationary. Movement can be applied to lines, shapes, forms, and textures, and can even suggest the movement of objects through space. This is particularly useful for giving forms or shapes personality or telling a story. A classic example in static media is a cartoon where action lines or blurred areas create the illusion of motion. Movement can also be a part of physical user experiences where people interact with their environment.
Movement has become a popular feature in apps and interfaces, allowing designers to create timelines or sequences of events that seamlessly mask transitions or loading screens. For example, when a user taps a button, it can animate off-screen as the next page slides into view. This keeps users engaged through animation and provides feedback for their interactions with the interface.
A well-rounded designer possesses a strong understanding of which design elements to use and when. This foundation also enables you to evaluate and deconstruct existing designs. Analyzing a design by breaking it down into its core elements reveals the reasoning behind the designer's choices.
