Illustration by Tridib Das
Great design doesn’t just happen by chance. A great designer strategically chooses things like color, shapes, and typography—all of which have an impact on how a viewer or user perceives and engages with a piece of work.
Certain principles of design can also make a design more functional, especially when it comes to digital product design; with the right pieces in place, you can create meaningful experiences that effectively solve your user’s pain points.
So, what are these basic elements? Keep reading as we dive into each element one by one.
1. Lines
The first and most basic element of design is the line. In design, a line is any two connected points. These lines can be straight or curved, and may be smooth, rough, continuous, broken, thick, or thin. A line creates division and hierarchy within your design, helping direct the user’s eye toward specific information or a specific focal point.
In design, lines can have a variety of densities and curves. Image credit Adobe Stock Photo.Lines can also create subliminal languages in your design. A diagonal line, for example, suggests movement; a straight line is more orderly and clean.
A great example of lines showing movement is the image below, from the Virgin Hyperloop website. The Virgin Hyperloop is a high-speed transportation system set to reinvent how we travel, allowing passengers to travel from Dallas, Texas to Fort Worth, Texas in under two minutes. Take a look at the mockup below and you’ll notice that the lines that make up the shape of the tube offer a sense of motion, reinforcing the idea of speed in this new form of travel.
It’s also important to know that you can create a line in one of two ways:
- Use a pen, brush, or other digital tool to connect two points. This is called an “actual line.”
- Create an “implied line,” which appears when two shapes meet.
Designers can create lines in one of two ways: an “actual line” and an “implied line.”When you fully understand the power of the line, you are one step closer to maximizing this basic element of design.
2. Shapes
The second element of design is shape, when a two-dimensional line encloses an area. A shape can be geometric (like a circle, triangle, or square), or it can be organic (such as leaves, flowers, and animals). Boundaries—including lines and color—ultimately define shapes and can also help emphasize an area of the page.
Designers have many geographic shapes to choose from, including circles, squares, rectangles, ovals, hearts, triangles, parallelograms, hexagrams, trapeziums, pentagons, stars, and diamonds. Image credit Adobe Stock Photo.3. Colors
Color is another powerful element of design. It can stand alone, act as a background, or highlight other elements in your design.
Color is also a fantastic tool for creating and establishing a mood for your brand. For example, red typically signifies love, strength, power, and desire; green typically signifies tranquility, good luck, and health.
As you create your color palette, it’s important to understand the three properties at play. This will help you maximize the power of this principle of design. These three properties are:
- Hue refers to the name of the color. For example, “red,” “blue,” and “green” are all hues.
- Saturation refers to the intensity or purity of the color. A specific hue can have a vibrant or dull saturation (and anywhere in between).
- Value refers to the lightness or darkness of a color. Color can be “tinted” by adding white or “shaded” by adding a layer of black.
Using a color wheel, you can see the differences between hue, saturation, and value. Image credit Adobe Stock Photo.These three properties—hue, color, and value—empower a designer to use a range of colors, which all help evoke the mood and message behind a brand.
For a few examples, we can look at the financial industry. Many brands, including Bank of America and Chase, use blue in their logos. It’s probably not a fluke, either; the color blue symbolizes order, trust, loyalty, and security.
The color blue symbolizes trust and security, so it’s no wonder so many banks use it within their branding. Here, you can see examples from four major banks: Chase, Citi Citibank, Barclays, and Bank of America. Image credit 99 Designs.In the image below, you can see some other examples of color psychology in marketing.
This image shows how colors can evoke certain moods, such as yellow making people feel optimistic, and blue evoking a sense of trust. Image credit Marketing Insider Group.4. Typography
Typography is arguably the single most important part of graphic, web, and user interface design. Your text and how it looks isn’t just about conveying a message; it can also convey a mood. Are you a serious online newspaper or a playful blog? Typography can set the tone. For example, a Serif font like Times New Roman (below on the right) tends to evoke a more traditional and serious feeling, while a Sans Serif font like Open Sans (below on the left) reads as more modern.
Typography, as shown here, is important for evoking certain feelings as well as creating visual hierarchy. Image credit ImpactPlus.In addition to evoking a mood and feeling, typography can create visual hierarchy in your design. It can show people where to look and what things on the screen are most important, giving users a sense of how to read the material from beginning to end.
Larger font sizes, for example, catch the user’s eye first and signify a focal point on your page. When a smaller font is beneath it, the reader instinctually knows that it’s a subsection that will support the heading and perhaps provide more context or information. These smaller details of your font—including weight, height, and size—are all important as you consider typography in your UI design.
5. Texture
Texture refers to the way a surface feels—or in this case of a digital design, a perception of how it could feel. Texture can create a more dynamic, visually appealing experience while also adding depth to your design.
For example, a luxury linen brand that wants to imply comfort and coziness might consider a cotton textile background, like in the example below.
Textiles have the power to evoke feelings; in this example, a cotton textile background elicits feelings of softness and comfort. Image credit Adobe Stock Photo.On the contrary, if you are selling building supplies, you might consider a cement, stone, or brick background with grittier, textured typography to accompany it.
Compare the cotton textile backgrounds above to this stone textile background, which creates a more serious, sterile feeling. Image credit Adobe Stock Photo.6. Space
Space refers to the area above, below, around, or behind an object. It can be positive or negative. Positive space refers to the subject or areas of interest, such as a person’s face or furniture in a room. Negative (or “white”) space, on the other hand, refers to the background area that surrounds the subject or areas of interest.
When used correctly, negative space plays a pivotal role in the success of your design. It has the ability to:
- Enhance readability — A larger white space ensures your text doesn’t have to compete with other design elements.
- Simplify your design — White space breaks your design into chunks so that you do not overwhelm your reader’s eye.
- Complete an image — Humans naturally see closed shapes. Therefore, when a shape or element is incomplete, the white space can help your reader unconsciously fill the gaps.
- Add a sense of luxury — “Less is more” can create a sense of sophistication in your design.
Negative space, as shown in these images, allows you to maximize the area and enhance readability. Image credit Adobe Stock Photo.Applying the 6 elements
Now that we have learned the six elements of design, it is up to you as the designer to apply them correctly and effectively.
Most brands establish a design system—or a collection of reusable functional elements, components, and colors—to make this process easier. With a brand book or style guide to reference, you can easily replicate a consistent experience for your users.
Let’s recap what we have learned:
- A line is a great way to separate sections of your page or bring your reader’s attention to a certain part of the page.
- Shapes are ultimately found in everything from your logos to illustrations to countless other elements in your design.
- Color helps to evoke emotions and establish a mood behind the design.
- Typography lets your users know the tone of your page and helps establish visual hierarchy in your design.
- Texture creates a visual feel in your design.
- And finally, positive and negative space helps you maximize areas that don’t have any design elements.
Now that you have the knowledge, I hope you feel empowered to create meaningful, impactful, and successful designs!