Web Development: The Basic Elements of Design

The Basic Elements of Design

Understanding the fundamentals of design is the first step to creating cohesive and harmonious visuals. When we look at a design piece, our eyes are looking at a composition. By carefully and thoughtfully arranging elements on a page, you are able to portray more than just visuals.

Design is made up of basic elements built into a structure that communicates a message. These elements are the building blocks you need to construct your design. These objects can be arranged in any way as part of your composition; we call this the principles of design. These principles are important concepts that can help you organise the basic structural elements on a page.

In this first article, we’ll dive into seven of the most basic elements in design that can help you improve your content creation skills and ability to communicate through design. Don’t forget to follow this article series on the principles of design to learn how to successfully arrange the basic elements of design we learn today.

What Are the Elements of Design?

Think of the elements of design as the ingredients you need for a recipe. These basic components are essential in art and design and how you can visually construct pieces. Each element is a crucial part of a visual message, and the combination of these has an impact on how the design is perceived. You can use these elements alone or in combination with each other, depending on what you're looking to achieve.

The main elements are:

Line
Color
Shape
Form
Value
Space
Texture

A solid understanding of these concepts gives you the ability to understand your design pieces and others you come across. You’ll be able to dissect a design piece and see the behind-the-scenes process. Let’s take a closer look at each element to have a better understanding of how they work and how to use them.

Elements of Design: Line

Lines are the most basic elements of design. They come in all shapes, sizes, and colors. Once you start noticing them, you’ll see grids all around you. Lines have direction; they can be visible or invisible and can help direct the eye to a specific spot. The thickness of a line can also communicate certain cues. Bold and thick lines can draw attention, while thin lines are the opposite.

Most if not all layouts contain invisible lines. Grids are made of multiple lines and lend structure to a page. Lines can be used to create demarcation on a specific section of a design. Depending on the form of the line, you can convey different moods. A simple line can carry so much—for instance, a squiggly line is perceived as young and fun compared to a straight line.

Lines don't necessarily have to be solid. Dashed and dotted lines can also be used and have a friendlier feel than a solid line. Straight lines usually come across as a steady and static element. On the other hand, curved lines are dynamic and give energy to your design.

Hand illustrated patterns — Hand Illustrated Patterns

Elements of Design: Shape

A shape is the result of enclosed lines to form a boundary. Shapes are two-dimensional and can be described as geometric, organic, and abstract.

Geometric shapes have structure and are often mathematical and precise (squares, circles, triangles). You’ll notice that the Swiss graphic design movement from the 1950s used mostly geometric shapes in their designs. Shapes can add emphasis to a layout.
Organic shapes lack well-defined edges and often feel natural and smooth. Shapes add emphasis to a layout.
Abstract shapes are a minimalist representation of reality. For instance, a stick figure of a person is an abstract shape. Logos are mostly represented by abstract figures to show the type of business. The icon pack below is a great example of abstract shapes conveying real-life objects and situations.

Depending on the color, form, and size of shapes, we can determine particular moods and send messages. For instance, triangles direct the eyes to a specific point and can also represent stability.

We are surrounded by shapes that we may not think about much; we usually think of shapes as the main geometric structures. For designers, shape is one of the most important elements when it comes to branding development. These figures are at the root of logos and illustrations.

Elements of Design: Form (Positive Space)

On a page, form is the positive element over the space, the negative element. A dot, line, or shape is a form when placed on a page. Unfortunately, form and shape are mostly used interchangeably. A form can be either two-dimensional or three-dimensional. Many also believe that form is a shape that acquires three-dimensional values, but the correct term is volume.

Form and shape are mutually dependent because changing one would affect the other. The spatial relationship between form and space can create tension and add 3D qualities to your design. Form and space will lend the design lots of visual activity that can help keep viewers engaged. To create a 3D effect in your design, you can add shadows, stack multiple elements, or play with color.

Elements of Design: Space (Negative Space)

Space is the area that surrounds a shape; it creates a form within the space. Think of it as music: space is the silence between the notes of a song. If all the notes were played together, that would turn into noise.

If you look at a design piece, the negative space is the area that is not occupied by any elements. In essence, it is the background color that you are able to see. For instance, abundant negative space in a layout results in an open, airy, and light background. The lack of negative space can result in a cluttered design. Visually speaking, a layout needs space to achieve a level of clarity within the design. Negative space is a very important element to consider as you are designing a piece.

Below, we have an example of negative space. The geometric forms on the first plane have an identical duplicate as a second plane. This helps add a three-dimensional effect over the negative space. You'll notice the elements are evenly scattered over the background—the negative space.

Abstract background — Abstract Background

Elements of Design: Color

We can apply color to any of the elements we mentioned before this point. Colors create moods and can say something different depending on the connotations associated with it. Color can create an emphasis on specific areas of your design layout.

This element contains multiple characteristics:

Hue is the name of a color in its purest form. For instance, cyan, magenta, and green are pure colors.
Shade is the addition of black to a hue in order to make a darker version.
Tint is the addition of white to a color to make a lighter version.
Tone is the addition of grey to make a color muted.
Saturation refers to the purity of a color. A specific color is most intense when it is not mixed with white or black.

In design, there are two color systems, RGB and CMYK. RGB is a system dedicated to digital design. This additive system stands for red, green, and blue. The colours are produced by adding primary colours together to create various combinations. This mode should be used for designs that will only be used on a screen.

If you want to output your design as a printed piece, you need to use the CMYK system. This subtractive system stands for cyan, magenta, yellow, and black (key). CMYK reduces the light that would be reflected on a white background to create color. It is extremely important to start a file using the right color system. Converting colors between the systems can result in muted and inaccurate colors.

Elements of Design: Value

Value refers to the degree of lightness and darkness of a specific hue. Yellow has a higher value than purple because it is closer to white. Value changes create contrast on a page. The reason you can read this text is that the black content contrasts with the white background.

In design, use different tonal values to create emphasis in your design. Create the illusion of movement by overlapping multiple elements with different values. Value is also important in photography. You’ll notice that high-value images have a light and airy feel to them, while dark value images feel heavy and dramatic.

Value also defines the spatial relationship between elements. If color values are close between the elements and space, then the design will look flat. If there is a strong contrast between the elements, then the form will be extremely noticeable. The example below features multiple colors with multiple values, which helps add a sense of depth to the design.

Elements of Design: Texture

Texture adds a tactile appearance to a design layout. Imagine how a design piece would feel if you touched it. The goal of texture is to add depth to a 2D surface. Texture can be applied graphically through patterns, either digitally created or an image mimicking the desired pattern. Below is an example of an abstract geometric pattern made up of basic geometric elements.

Abstract geometric patterns — Abstract Geometric Patterns

To achieve an authentic vintage feel, you may try a rough effect as a background or a natural pattern like the wood pattern below. Highly texturized patterns like this can translate the feel of wood grains visually. Textures can also be physical—for example, laser cutters give you the ability to stack multiple shapes and intensify a tactile response.

Add real tactile texture to your design by embossing a texture to paper. This way, you have the chance to create a memorable piece that will certainly stand out from the crowd. Stylistically, it is not ideal to blend multiple textures in a design (unless necessary) as it can be overwhelming for the viewer.

Wood grain textures — Wood Grain Textures

In graphic design, texture can also refer to the elements placed on a page. Multiple layers of text placed on top of each other can lend a unique texture that can’t be mimicked by anything organic.

Different textures give off a different vibration—try thinking of different materials if you work with physical shapes. For instance, try using soft surfaces like felt for children’s books. Art book designs are the most forgiving for thinking outside the box.

That's It!

In this article, we showed you the basic elements you need to build up your design. These building blocks are essential to understand in order to create a successful design piece. Not only that—as a professional working designer, you’ll need to know how to describe design pieces for client presentations and higher-ups. Training your eyes can help you grow as a designer and achieve a higher level of design sensibility. Sometimes even the most seasoned designers need a little refresher to remember these concepts.

Now that we have a good understanding of the basic elements of design, it's time to head over to the principles of design. There, we’ll explain concepts you can apply to the elements in a design layout. These concepts are essential to making your design piece work effectively.

If you liked this article, you might like these other design pieces: