How to use contrast in UI Design
Definition and examples
Design System for Sketch and Figma — www. visualsystem.co
Differences attracts our eyes and contrast give us ability to intensify differences. It is the key element of design that allow designers to define values, properties and priorities of the element relatively to the other one. When done correctly, shouldn’t really be noticed.
Contrast is often used in different areas of design, but sometimes seems too complex to master— Helga B.
Contrast is everywhere
People often time narrow constrast only to colors. But constrast is the tool that goes beyond that. In this article I will give you few examples from my works and other designers.
Closed and open
Look how much work image section is doing for clean, simple and open text sections.
Full and empty
Although the left side is filled with content, the right side is more open and empty.
Symmetric and asymmetric
While content is organize in a symmetrical mix I added bigger left padding as a asymetrical element which also suggests that we can go back from this screen.
Big and small
Small and subdued UI elements compared to big timer. This way we are grabbing attention, making great content architecture and delightful visual experience.
Filled and outlined
Easy way to define priorities for the buttons.
Serif and sans-serif
You don’t need to stick to only one type.
Ordered and chaotic
Clear and well organized typographic next to chaotically arranged elements.
Textured and flat
Here we can see mix of gradient and photography vs simple white background on the left. Beautifull.
The possibilities are endless
That’s only few examples but if you still hungry I have more.
Different examples:
- Letter spacing and no spacing
- Square and round
- Filled and transparent
- Rough and smooth
- Horizontal and vertical
- Old and new
- Strange and familiar
- Lined and dotted
- Detailed and clean
- Photoshop and good soft .-.
Contrast is the foundation on which graphic design is based. When you know that contrast is not only set of good looking colors and text sizes, then you can create it in a million ways, however you want.
