Understanding Contrast In Design. @DebraUlrich #RecoveryRelief
Beginners books usually only touch on color contrast, but what about size and shape contrast? Often the easiest way to tell an amateur designer from a professional one is to look at their use of contrast.
Creating a structure of importance using size, shape and color is what gives a page impact and legibility to the reader.
Contrast can be defined as “the difference in visual properties that makes an object (or its representation in an image) distinguishable from other objects and the background.” In plain English that could be described at its most basic level as “things which look different from one another.”
For designers in all walks of the practice, but particularly web designers, contrast is at the root of pretty much everything. We are constantly trying to establish hierarchies of importance, draw people to certain areas of a page and communicate a clear and concise message at the very heart of our work. Creating relationships between different elements of a design is just about the most important thing that you can do. You’ve probably been doing it a great deal already, consciously or not.
Obvious examples of contrast are black and white, big and small, fast and slow, thick and thin. Opposites are the easiest way to grasp what contrast is, but when applying contrast to design work it’s never quite as black and white. If you were wondering, that’s where the saying about a situation being “black and white” comes from, which also leads to the saying of something being a “gray area”. In design we are often comparing things which are different but not opposite, for example an H1 and an h1, or an “add to cart” button and a “check out” button. This is where greater levels of contrast come into play.
Let’s take a look at the different types of contrast and some examples of how they’re used in web design.
There is so much more to contrast than just “light and dark” – it’s one of the most important principles in design and you can almost never have too much of it, provided that you use it properly.
Taking your designs to the next level isn’t about finding the next band-wagon to hop on using rounded corners and drop shadows for everything, it’s about finding better and more efficient ways of communicating the message behind the design.
Exploring contrast in detail and using it to its full potential is one of the best ways to do this.