The Visual Design Elements and Principles That Make Good Design
What are the fundamental visual design elements and principles every designer needs to master in order to create top-quality design work? Keep reading to find out.
Stephanie Corrigan
What are the fundamental visual design elements and principles every designer needs to master in order to create top-quality design work? Keep reading to find out.
In this comprehensive guide, we're taking it back to the basics. If you're a self-taught designer, or have been out of school for a little while, it's well worth taking the time to brush up on your design knowledge so you can master the tools and techniques that'll take your work to the next level. A great place to start is with a review of the fundamental visual design elements and principles that make good design.
In no particular order, here are the top 7 visual design elements. These elements each play a role in the fundamental visual design principles that make good design.
The most basic visual design element is the line. In graphic design, a line is defined as a connection between two strokes. Lines are the building blocks of other visual design elements like shapes. They can also stand on their own to create emphasis or divide elements.
Although basic, lines can have a personality all of their own. Straight, wavy, curved, and zigzag lines each have a distinct look and feel to them. In addition, lines are smooth or textured, dotted or continuous, thick or thin, curved or straight. All in all, there are many creative ways to use lines to create an effective design.
Shapes are another basic visual design element that typically form the core of any design piece. Shapes are two-dimensional, self-contained areas. We typically think of shapes as geometric circles and rectangles, but they come in all forms imaginable.
In graphic design, there are three types of shapes: mechanical, organic, and abstract. Mechanical shapes are typically geometrical with precise edges and corners. They're used to add structure and stability to a design. Organic shapes in design are shapes that mirror the natural world. They may have texture or rounded edges to create a natural look and feel. Abstract shapes are irregular shapes that can be used to add symbolism or variety to design.
Website wireframes are a great example of how mechanical shapes are used in visual design. As shown in this example by Adam Kalin, wireframes contain clearly defined rectangles and circles.
P.S. Click here to view 20 more wireframe examples.
Color is a fundamental visual design element that needs little explanation. That said, there's a science to using color effectively in design. Color theory and color psychology provide a strategic foundation for choosing colors that create a specific mood and tone in a design.
This website design by Neil illustrates how color can be used to establish a particular look and feel. The white space in the design implies purity, while the green and soft beige colors complement the brand's natural approach to beauty and wellness.
Color choice plays several important roles in graphic design. In addition to setting a mode and tone and bringing out certain emotions, color also contributes to contrast, variety, harmony, repetition, and space. Because of these many roles, color choice can effectively make or break a design.
The above web design mockup by DStudio® is a great example of using color to make certain elements on the page "pop." The bright yellow contrasts starkly against the grey background and calls attention to important metrics and buttons.
Click here for a comprehensive guide on choosing colors for website design.
Value describes the lightness or darkness of a color. This element is important in visual design because the juxtaposition between light and dark values creates contrast.
All colors have a value. In addition to creating contrast, value can also add depth, create a pattern, or add emphasis.
Texture describes the look or feel of the surface of an object. Tactile textures are textures we can feel, such as soft fur or rough sandpaper. In visual design, we're mostly concerned with implied textures, which are textures we can see.
The texture in these landscape illustrations by Brad Hansen contributes to their natural, organic look. Although clean, flat designs are common in visual design, texture adds an extra layer of depth and intrigue.
There are many ways and reasons to add texture to a design. Texture can create a rough and organic look and feel that gives the design a human touch, even if it is completely digital. Visual texture adds depth and can make a design more diverse and interesting. However, it's best to use texture in moderation in order to prevent it from taking over the design and appearing overwhelming.
This logo design by Jesse Bowser is a beautiful example of how visual texture can contribute to a design. The texture used in this example fits well with the brand's natural and tactile essence.
Space is the area that surrounds or divides elements in a design. We often think of space as "white space" in design, but it doesn't have to be white. Space also refers to negative space, or the space in between shapes.
This clever logo design by Sava Stoic uses negative space to combine the shapes of a chameleon and a home for a brand called Homeleon.
It's imperative to have space in a design, unless the purpose of the design is pure chaos. Space allows design elements to have ample breathing room. This goes for typography as well; letters that are crammed together are difficult to read. In addition to separating elements, space can also add emphasis to elements and contribute the balance of a design.
In these poster designs, space is used to separate different shapes and sections of text. Although there are a lot of colors and elements in these designs, the ample space between them prevents the designs from looking overwhelming.
Volume, or form, refers to three-dimensional objects in a design. Since visual design is a 2D form of design, the only type of volume visual designers use in design is volumetric illusion. In other words, visual designers can create the illusion of volume through 3D shapes and graphics.
Incorporating 3D graphics is a great way to add depth and variety to a design. In fact, this is an emerging trend that has recently taken the web design world by storm. Check out this post to learn more about 3D graphics and other web design trends.
P.S. Did you know that 3D website effects, like the ones on our homepage, can be created in Webflow? Click here for a free Webflow style guide that will help you create websites faster in Webflow.
Now that we've covered the top visual design elements, let's dive into how they're related to the principles that make good design. In no particular order, here are the top 7 visual design principles every designer should know.
In design, contrast refers to when adjacent elements have differing qualities that make them stand out against each other. Contrast is created through color, size, or shape. One of the most important roles of contrast in graphic design is to improve legibility. If contrast is too low, elements can blend together and become difficult to discern.
Contrast is also used to draw attention to specific visual design elements. In web design, for example, high color contrast is often used to make important buttons stand out.
Scale refers to the relative sizing of elements in a design. When used strategically, scale can create hierarchy, balance, or emphasis.
Generally, the largest element in a design draws the eye first and signals importance. Thus, scale can speak volumes about how different elements in a design relate to each other.
Harmony creates a feeling of unity and completeness in a design. Without harmony, designs look disjointed and confusing. Since the purpose of design is to visually communicate a message, harmony is essential.
There are several different ways to create harmony in design. Repetition, which we'll talk about more later, creates a sense that elements belong together. In web design, using grids and alignment helps the overall design look consistent and harmonious.
As mentioned above, repetition contributes to harmony in a design. However, the most important role of repetition is to create consistency.
The importance of consistency in visual design cannot be overstated. In a nutshell, visual consistency creates trust. This makes repetition in design especially important for branding, the goal of which is to establish trust and customer loyalty. On a smaller scale, repetition is also used in visual design to create patterns. Patterns are a fun way to liven up a design and help it stand out.
Patterns are frequently used to create standout packaging designs, as seen in this beautiful example by Kenny Coil.
Most visual designs have a dominant element that draws and holds the viewer's attention the longest. Thus, the role of dominance in design is to tell viewers what to focus on in a design.
Dominance is established in design through hierarchy, color, scale, or texture. Generally, the greater an element contrasts with its surrounding elements, the more dominance it has. A design that doesn't incorporate dominance may fail to engage the viewer and deliver its message.
Although visual designs are 2D and static, there are several ways to effectively convey movement. Here, movement refers to both the flow of a design piece, as well as design elements that literally appear to be in motion.
In terms of flow, movement is related to hierarchy in that it directs the eye on where to look and in what order. A classic example of this kind of movement in visual design is in web design. When you first land on a website, where do you look first? According to Creative Bloq, the average user looks first at the top left corner of the page, where the logo typically sits, then scans horizontally across the navigation, and then diagonally down to the bottom left, where the main page content often begins.
The other interpretation of movement in design is more literal. In certain contexts, creating the illusion of an object in motion can be highly effective in communicating or amplifying a message. This illusion can be created through transparency, lines, and blur effects.
Variety is an important visual design principle because it helps a design look more interesting. Too much variety is chaotic, but too little is boring.
As with the other principles on this list, variety can be created multiple different ways in a design. Colors, shapes, textures, and size are all common elements that contribute to variety. Variety is most effective in design when created intentionally; otherwise, it can counter the consistency that is necessary for good design.
Check out Ran Segall’s video below on three principles for web design.
It's one thing to read about visual design elements and principles and another to actually put them into practice. With so many different elements and principles, it may seem like there's a lot to remember, which can be overwhelming. However, as with any sport or training, practice helps these techniques become intuitive over time.
If you're a web designer who wants to step up your game and create premium, high-value websites for clients, taking a vetted web design course can help you get there that much faster. Our course, The $10k Website Process, is a unique and comprehensive course for web designers of all levels that teaches both the art and strategy of design.
In The $10k Website Process, you'll learn how to put the visual design elements and principles covered in this post into practice. You'll also have the opportunity to get expert feedback on your work and network with a community of 2,000+ web designers. Click here to learn more about the course.
