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.

Aitneal by me

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.

avsc. 4 by me

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.