Visual elements are the foundation of art and design. There are 7 visual elements in total, they are line, shape, color, value, form, texture, and space. In this article, we’ll dive into each of these visual elements and how to use them in your designs.
No matter what you are designing, you are likely to use at least one, if not several of these visual elements. We’ll go into detail about each of these visual elements as well as examples of how you might use them in UI and web design.
From icons to illustrations, charts, and beyond, lines are an essential element in web design. Lines can be thin, bold, dashed, black, or in color. There’s so much variability you can achieve with line, let’s take a look at a few examples.
The line art or simple illustrations included in this app design mockup are simple yet highly expressive. By using a hand-drawn line with varied textures, this visual element gives the design a different vibe. If the line was a monoline with even size and no texture, it would give an entirely different mood to the design.
Notice how lines are used in this app design mockup, in contrast to the previous example. The lines are even in thickness, some are black while others are in a light shade of pink and used to add movement to the illustrated scene.
Another common and important way to use lines as a visual element in web design is for icons. Icons are vital in helping guide the user experience. With one icon, you’re able to replace words and language and simplify an action to one simple icon for a universal meeting. An example of this is a home button. When we see an icon resembling a house somewhere in the app we are using, we know that clicking on this icon will bring us back to the home or dashboard experience.
A shape is created when you use a line and connect it from one end to the other. A line can be transformed into a circle, a square, a triangle, or more complex shapes to add context to your design. You can combine shapes with lines to create more intricate illustrations and icons. In this example, notice how simply adding a square with rounded corners adds to the icon design. It’s a simple addition but it transforms the design, now they can be buttons or the heading for a blurb on a website.
In this example for an onboarding experience of an app, notice how the addition of filled shapes adds contrast and depth to the illustrations. The design would still be successful if it was only executed with line art but by adding a yellow and teal along with the black, our eye is drawn from one part of the design to another. Shapes can be filled with color, pattern, or simply be enclosed with an outline.
Color is an exciting visual element to play around with within design, there’s an infinite amount of possibilities. If you’re itching to dive into color theory and understand tints, tones, and shades or the difference between analogous and complementary color schemes, be sure to check out our post on What is color theory?
When it comes to web design, you can use color in headline text, body copy, buttons, as well as designed elements like illustration, icons, and photography. You can use color to call attention to one part of the design over another, color palettes and schemes can be used to create brand recognition (for example, a Coca-Cola website would use a lot more red while Pepsi would use a combination of blue and red). But however, you decide to use color, think about how to create hierarchy and unity within the design.
In this landing page example, the designer chose to use a limited color palette of black, white, and yellow as an accent color. We can see from the logo in the top lefthand corner that yellow is a core brand color for the company they are designed for. This design decision makes sense for the brand, it also helps to accentuate the CTA (call to action) buttons.
In this example, color is used in a utilitarian way to separate information in these charts and graphs. In the line graph, a real is used to represent the total revenue in a day while a salmon pink is used to show total expenses for the day. If the chart showed both of these variables in the same color or colors too close in contrast, it would be difficult for a user to understand the date. Color isn’t always used for brand awareness and aesthetics, sometimes it is needed to understand the content you’re communicating.
Value describes the lightness or darkness of a color. Even if your design only consisted of one color, you could vary the value of the color to create depth and contrast.
Take a look at how adding light and darkness to the main blue color in this logo creates value and adds dimension. You can transform an otherwise two-dimensional shape and turn it into a three-dimensional shape simply by varying the value of color.
But value doesn’t always have to be in color, you can also vary the value for black or gray. Take a look at this example, on the left, is a color version that uses light and dark variations of each color to create value and dimension. The version on the right achieves the same level of value by varying the light and darkness of the gray.
Form is defined as a three-dimensional object. This visual element isn’t always used in digital design in the most obvious way. Here at Flux, we happen to use a lot of 3D shapes and forms, it’s part of our branding. Recently, 3D design has taken off in popularity as it becomes more and more common to create.
Take a look at how form and 3D objects are used in this landing page example. The image on the right is a 3D depiction of an office scene. It’s not a line art illustration or a photo, it’s a visual created with 3D technology. We can see the amount of depth in this image by observing the front, top, and side views all within one angle.
Another way to add 3D form is through product mockups. Apple does this quite a bit with their branding and design aesthetic. When you take a look at the products displayed on their site, it’s hard to tell whether they are photos or 3D renderings of the product. Often it’s a better experience to show products as 3D renderings, like in the example of the Apple Watch shown in the hero image of this landing page.
Texture can add dimension to your design. Rather than using only solid colors, texture is a way to add depth and character. A quick way to add texture to your design is to use it in illustrations, like this example. By fading the clouds and adding brush textures to the oranges and flowers, we create a unique look to this illustration that would look totally different if there were no texture at all.
Adding texture doesn’t always have to be rough, hand-drawn, and inspired by paint swatches, you can achieve it in a more modern way. In this web design example, notice how large swatches of gradients and blurred shapes are added as background elements to give a sense of texture. These subtle splashes of magenta, blue, and purple help tie in the color palette and draw your eyes through the landing page experience.
Space, also referred to as whitespace or negative space, is crucial to adding breathing room to your UI designs. Without a good balance of space, all the information would be scrunched up together in one area, difficult to read and navigate through as a user.
There are tips for adding balanced spacing to your designs, such as working within a grid. If you want to dive deep into how to use grids, check out our post on How to use a grid in digital design. But essentially, a grid is how you divide up the space with columns, rows, and guidelines.
In this web design example, you can see a clear use of a grid to help divide space evenly for the design elements. In the header, the design is split almost evenly between large header text and large interior design photos. As you scroll down, there are sub-sections to help a user read through the planning, estimating, and building sections. Even the footer design is clearly divided into columns to help a user find the exact link they are looking for.
In this landing page example, we see the grid by its side and can really see how the designer used the space to divide the content and create a well-balanced design. You can see the 12-column grid underlying the design and how text boxes and images span over multiple columns.
Now you have an understanding of the 7 visual design elements, begin to notice how all of them are used in design everywhere around you. We dissected each one individually, but you may have noticed how a lot of the examples we shared, use multiple visual elements in one design. How will you use these visual elements in your next design project?
We’ve gone over quite a few design fundamentals here in this article on visual elements and shown you examples of how to use each in your UI and web design projects. But what if you’re craving more design content?
Check out other articles from the Flux blog where you can learn more about web design, Webflow, and freelancing. If you’re looking for in-depth video tutorials on design, check out our YouTube channel where we publish new videos weekly.
Want to learn more about how to create a stunning and interactive portfolio with Webflow? Check out our Webflow style guide so you can design faster.
If you want to learn more about the web design process from start to finish, consider checking out our program The $10k Website Process. You’ll discover a step-by-step process to design beautiful, high-value websites that achieve strategic goals for your clients. Master the art and strategy of website design, and increase the value of your services, as well as your rates.
