Contrast is one of the basic principles of design. Two elements that are opposed within the same space, and the tension that is produced between that difference. In fact, our eyes like contrast. To be able to differentiate between elements, to break the monotony, is always something that attracts. And obviously both graphic and web design make use of contrast to their advantage.
When we use it correctly, we create a focal point that attracts the attention of everyone who looks at it. As important as this is. Because it is useless to create a visually attractive design if the person who looks at it, or who navigates through it, is distracted by superfluous elements and does not get where we want him to go. Contrast allows us to create visual hierarchies that always play in our favour, and that efficiently and subtly guide us to where we want.
Some of the most obvious types of contrast, but not for that reason known by everyone, which will allow us to enhance our projects, and to use these tools in different ways. Surely many of you already knew some of them, but it is never wrong to review them and perhaps discover new ones.
Contrast and Color
We start with the use we can make of color to improve the contrast in our designs. The first thing that comes to mind is the contrast between black and white. Or the light and dark tones. But we don’t have to focus only on this use of contrast, as we will be limiting our own tools.
One of the most basic uses is the contrast between warm, cold and neutral colors. Among the warm colours we have yellows, oranges and reds. For the cold ones, blues, purples and greens. And for the neutral ones, white, black, grey and brown. By making combinations between these groups, we will create a contrast between the elements of our design effective enough to differentiate them from each other.
Also mention the use we can make between saturated and desaturated tones. This strategy is very good when we want our design to make use of only one color and, in spite of this, we want to enhance certain parts. For example, use the elements of the background or with little importance with very desaturated colors, so that the view is focused on the saturated colors.
Contrast and Shape
Contrast is just a way of being able to differentiate elements in a simple way. And if we look at nature, in all its extension, one of the most evident contrasts we find is between geometric and organic forms. With geometric forms we refer to rectangles, circles, triangles, etc. These forms allow us to have a better order in our design, or to pile up and create structures with greater ease.
The organic forms are inspired by nature, and give us an impression of fluidity and closeness. You can use them in illustrations if the elements of your web have organic forms, as they provide a certain dynamism, and will help you to differentiate the illustrative part from the one that contains information.
Contrast and Size
If you want to make an element that draws attention, your first thought will be to make it bigger. It is clear that the bigger it is, the more visual importance we want to give it. It is useless to work on the important element of our design, and that ultimately we want it to be an attention grabber, if we place it next to another large one that is going to capture all the interest.
Contrast and Typography
And speaking of sizes, it’s something we can extrapolate to typographies and texts. It is clear that titles, subtitles and bodies of text must be differentiated by their size. If all our typographies are the same size, the reader cannot clearly know where a text begins and ends, or the intermediate titles that separate the different parts of a text.
In addition, the use of different serif or sans-serif fonts depending on the title or body of text helps us to emphasize this contrast. This type of combination is one of the basic aspects that designers always take into account when choosing typographies.
Contrast and White Space
The contrast that occurs between the content and the white spaces (which do not have to be literally white) has functions on several levels. Firstly, we let our design breathe, and the person looking at it does not encounter a large amount of information in a very small space. This can lead to a certain amount of visual fatigue and tiredness, which is counterproductive to our purpose.
Contrast and Alignment
If you use different types of alignments in your design, there is one basic rule: our eyes will always be directed to those elements located in the center of the screen. And that’s where you should place the information of interest or that you want your visitors to see first. Of course, a clear differentiation will be created between this central piece, and others organized in columns, or aligned on the sides.
As we have seen, there are many ways in which we can use contrast to our advantage, and make it a reliable ally when we are designing. Having these guidelines in mind, we can even make combinations between them to enhance them even more, and get incredible results. Play with sizes, and colors, or with shapes and alignments. It’s up to you to discover which ones fit best with your design.