대비(Contrast) 효과 적용 UI 원칙 | 33st.co
대비(Contrast) 효과 적용 UI 원칙
Oct 31, 2017

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.

Ueno : Soho sublease by ueno.

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.

Training — concept by Renat Muratshin 🚀

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.

Article Cards Alternate by Oliur

Ordered and chaotic

Clear and well organized typographic next to chaotically arranged elements.

Famous : Pixar by ueno.

Textured and flat

Here we can see mix of gradient and photography vs simple white background on the left. Beautifull.

Invision theme redesign by Divan Raj

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.