Contrast is not just black and white or big and small
Contrast is an important principle in virtually every design, because it organizes the design and builds the layers of the design, that is, it tells the audience what is most important. The right use of contrast not only emphasizes focus, but also adds visual interest. If everything in a design is the same size, the same shape and color, it can look boring, but adding a little contrast makes all the difference.
However, as with most design concepts, balance must be kept in mind when using contrast. Too much contrast can lead to confusion and even dissonance, and if you use it in every design element, it will miss the point and might as well not have used it in the first place.
So how can we appropriately use contrast to improve design quality? Unfortunately, there is no universal formula, because it is implicit in the design process. You might think this sounds like some sort of magic formula, but it’s not. Contrast is a design tool that anyone can learn to organize and add visual interest. Read on to learn the tricks.
How do you incorporate contrast into your design
01. Contrast between light and dark colors
Color value is a unit used to indicate how dark or bright a color is. Pure white and black are limits. But you don’t have to use black and white to create strong contrast, a little bit of contrast can make certain parts of a design stand out.
Take a simple example, such as dark text with a light background, or light text with a dark background, as in the design below. The text on the image is so small that it should be hard to read, but by cleverly making the text bright white and the background dark blue-purple, it pops out at once.
02. Hue contrast
Hue is the term painters use for a particular color, one of the twelve colors on the color ring. This color theory is also useful in graphic and web design, where we can learn from the way artists create sharp contrast. Here are some classic color rings.
• Complementary: A complementary color on a color ring, such as red and green or blue and orange; Complementary colors have high contrast and high density
The emblem below uses simple contrasting colors to create a striking visual effect, while also dividing the design into several different parts.
• Split-complementary: A color ring consists of a base color and two adjacent colors to the base color’s Complementary color. This color system still has strong visual contrast, but not so exaggerated as complementary color collocation.
• Triadic: Any three colors evenly distributed across the color ring.
Keep in mind that you don’t have to use the purest colors of these hues, as we found in the color loop that some colors don’t really match. Choosing darker, lighter, and softer colors may be more practical for real life designs, but you can also use some of the best combinations.
03. Contrast of color temperature
Colors can be divided into several types based on color temperature: warm, cool, and neutral. Red, orange and yellow are warm colors; Blue and green are cool colors; Black, white, and gray are neutral colors (in some cases light brown and brown are also neutral colors). Adding color combinations of different color temperatures to a design can create a strong contrast, especially between cool and warm colors.
For example, this web design uses light blue and bright yellow, two colors of different color temperatures, for contrast. This arouses the consumer’s desire for action and also makes the main picture stand out. Since both colors are cold and slightly green, the whole design has strong contrast and cohesion.
04. Contrast of color intensity
Color intensity is also called color saturation. When a color is at its purest and brightest, it is said to be 100% saturated, while the grayer a color is, the less saturated it is. Bright and dark colors, either individually or in combination, can effectively create high and low contrast in a design. Bright colors always draw attention, especially if they have a black background, so you can use bright colors to emphasize important parts of your design.
The page design below does just that, with the salmon text standing out against a gray-green background. Not only do they use bold complementary colors, but different levels of saturation are added to enhance the contrast.
05. Contrast of shapes — organic and geometric
Most shapes can be divided into geometric shapes (ovals, triangles, circles, etc.) and organic shapes (liquid shapes and nature-inspired shapes). The regular geometry provides a good contrast to the organic shape of the curve and other asymmetric lines.
The logo design below incorporates a large number of organic abstract shapes to complement and highlight the neat typography.
06. Contrast of shapes: edges and angles
Another way to compare shapes is to use a little shape in the edges of a design element such as a font or border. Rounded shapes make designs look softer and more casual, while sharp shapes look neat and crisp. You can combine the two to create a contrast, as shown below with text.
07. Texture contrast
Just like shape contrast, textures with different properties can be used to create contrast, such as rough and smooth, hard and soft, solid and flat. Any texture is visual (unless a special printing effect or other physical device is used), and you can create a lot of contrast by combining various materials found on the Internet with different design themes.
In the case below, the matte texture adds a bit of a retro feel to the neat logo. A matte texture or damage treatment can add a bit of vintage or scuff to your design.
08. Comparison of dimensions and layers
In addition to adding visual interest to a design, contrast provides a hierarchy of different design elements. If all elements in the design are the same size, there is no hierarchy. How does the audience know what’s important? Obviously layers are an effective and easy way to create dynamic, fun, and dramatic effects.
The large image on the cover accentuates the magazine’s theme, but at the same time doesn’t drown out other elements. It is actually the combination of font size, shape and color that accentuates the main focus of the image.
09. Visual weight contrast
Like hierarchy, visual weight is another way to emphasize the importance of design elements. Visual weight refers to design techniques that make one element stand out from others — in other words, high contrast. The element that has the most visual weight in your design (usually the main focus of your design) doesn’t have to be the biggest element on the page. You can use features like color, texture, shape, etc., to distinguish or highlight an element.
Let’s take a look at a series of postcards released by the city of Cincinnati to promote local cultural venues. The architectural illustrations are the biggest element on each postcard, but the “Enjoy More” slogan stands out because it’s the darkest element in the picture.
10. Margin comparison
Many people try to cram as much space as possible into a layout, but remember that margins play a very important role in creating a balanced layout and organizing various design elements. When working on a complex layout, leave some margins around important elements (not necessarily white, of course) to draw the viewer’s attention to those elements and contrast them with the rest of the layout.
This web design uses white space and subdivision boundaries to organize information effectively. The left and right columns of the page surround a circle of white space, and the white space around the product image is larger, making it the center of attention for consumers.
11. Comparison of proportion segmentation
To some extent, every design needs to strike a balance. How to make your design harmonious but not boring, lively but not impetuous? A good way to find a balance between the two is to split the ratio. A good way to master this technique is to learn the classical proportions of an artist’s work.
• One-third method: Create a dynamic layout by dividing the design page in three equal parts, vertically and horizontally, and then focusing on one of the points where the lines intersect. Stacking everything in the middle of the page without thinking makes for a very boring design.
The headline and picture of the roses on the site’s front page are located approximately at the first two tri-junction points, creating a balanced and eye-catching layout. The principle of Groups of Three (another method of proportion) is also reflected in the design.
12. An unexpected contrast
Part of the reason the previously mentioned method of proportion works is that it is unexpected and does not achieve the typical uniformity. The use of surprise elements is a great way to create contrast, such as adding bright colors to a flat design to break up the sense of uniformity and draw the viewer’s interest.
The way the text interacts with the image on this landing page is different, adding a bit of life to an otherwise simple and straightforward design.
13. Contrast repetitive elements and patterns
The clever use of repeating elements and patterns can create focus and visual interest just like scaling, and repeating visual themes can make a design more effective.
The following graphic designer’s business card uses patterns to balance and organize the text so that it becomes a focal point. And this pattern design also cleverly combines some personal elements for the brand.
14. Comparison of position and direction
Every design requires a certain organizational structure. Text needs to be arranged in a way, elements need to be placed in specific places in the layout, and the distribution of white space needs to be carefully defined. While consistency is key to a unified design, purposefully and appropriately messing up elements can create interesting contrasts.
The logo below uses italics in neatly arranged text to highlight the most important information, while writing is another great contrast to formal sans serif fonts.
15. Contrast of spacing
Purposefully organizing elements can show the audience the relationships between elements, and it can also give the design a level of content that makes it easier to understand. In addition, comparisons can be made by numbers, such as adding a single element between or within groups of elements to bring this or this group of elements into focus.
Good structure is key to a text-based design such as a resume, with proper spacing, arrangement and use of color to make it clear.
16. Contrast of visual cues
Studies show that humans can remember 80 percent of what they see, which is one reason design is so important. But people’s attention spans are sometimes limited, and readers sometimes need a hint of where to focus their attention next, which is when visual cues come in handy. You can use shapes like arrows or highlighted circles to directly point out the design elements you want to emphasize; If it is in a text block, it is underlined, bullet points, symbols, etc. as visual cues (see picture below).
17. Contrast complex and simple elements
Mixing simple and complex personalized elements can enhance the contrast effect of the design. Here is another example of using contrast to highlight design elements. This collection of convenient notes combines ornate and complex patterns with simple fonts, two strongly contrasting elements to create a dramatic effect.
18. Font contrast
Text is a necessary part of most designs, but it also provides more possibilities for creating contrast. Most of the methods of creating contrast we mentioned earlier can be applied to text design, but there are still many special considerations in the selection and use or design of fonts.
The first is choosing a different font. If you choose more than one font in your design, make sure they contrast well. Effective means that the fonts are visually distinct from each other first, and that their differences serve different functions. For example, one font might be used for heading and another font for text. But don’t choose a similar font, as this can give the impression of a misprint.
As a rule of thumb, it is best to choose a serif font and a non-serif font for contrast, as in general, two complementary elements produce a good contrast.
The contrast between non-serif and thick serif (as well as written) of the logo below perfectly balances the design.
19. Precautions for using font contrast
When you choose to use different fonts, it is to create contrast, not conflict. Most conflicts don’t seem to work well unless you deliberately pursue an individual style. While there is no set standard for how well you compare and contrast, it often comes down to intuition. Trust your own judgment, use some great typography combinations, and keep practicing until you make the skill a habit.
The design below shows the different fonts in a lively and lively way (in keeping with the humorous theme of the design), while at the same time, there is nothing too flashy to cause conflict, and all the elements work together to serve the design purpose.
20. Contrast font style and weight
Many fonts are available in a range of versions, such as fine, bold, italic, long, and so on. These options greatly reduce the workload, and even if you choose only one font, the alternative versions of that font are enough to organize the text and create effective contrast. And you can also try adjusting the font size or color to set up additional contrasts.
The design below uses two weights of the same sans serif font to create a glossy effect. In addition, the use of serif fonts also gives an embossed effect, creating another contrast.
