대비(Contrast) 효과 적용 UI 원칙
UX 디자인 배우기 #109
Today UX 아티클
Prototypr.io에 올라온 Wojciech Zieliński의 글 How to use contrast in UI Design을 원저자의 허락을 받아 번역한 글입니다.
차이(difference)는 눈길을 끌며, 대비(contrast)는 차이를 강조할 수 있게 해줍니다. 디자이너가 특정 부분에 가치를 부여하거나 다른 부분에 비해 상대적으로 우선순위를 매길 수 있게 해주는 핵심 디자인 요소가 바로 ‘대비’이기도 합니다.
"대비는 디자인에서 다양한 영역에 사용되지만, 마스터하기 너무 어려워 보이기도 한다 – Helga B"
대비는 어디에나 있다
사람들은 자주 대비를 컬러에 대한 것으로만 생각합니다. 하지만 대비는 그 이상으로 사용되는 툴입니다. 이번 글에서는 제가 한 작업물과 다른 디자이너들의 작업물을 통해 몇 가지 대비 사례를 들어보겠습니다.
폐쇄와 개방
이미지 섹션이 깔끔하고, 심플하고, 개방적인 텍스트 섹션에 얼마나 도움이 되는지 보세요.
Ueno : Soho sublease by ueno.채우기와 비우기
왼쪽은 콘텐츠로 꽉 차있지만 오른쪽은 좀 더 개방적이고 비어있습니다.
Aitneal by me대칭과 비대칭
내용은 대칭적으로 배열했지만, 이전 화면으로 돌아갈 수 있음을 표현하기 위해 비대칭적으로 왼쪽 간격을 좀 더 크게 넣었습니다.
avsc. 4 by me크게 만든 요소와 작게 만든 요소
크기가 작고 은은한 색상의 UI 요소들이 중앙의 큰 타이머와 대비됩니다. 이렇게 하면 이목을 끌 수 있으며 콘텐츠의 구조를 훌륭하게 보여줄 수 있으며 유쾌한 시각적 경험을 제공할 수 있습니다.
Training — concept by Renat Muratshin채우기와 테두리만 그리기
버튼 간의 우선순위를 정해서 보여줄 수 있는 쉬운 방법입니다.
세리프체와 산세리프체
하나의 서체만 고집할 필요는 없습니다.
Article Cards Alternate by Oliur정돈과 혼돈
명확하고 잘 정돈된 타이포그래픽을 무질서하게 배열된 이미지 옆에 배치합니다.
Famous :Pixar by ueno.질감이 느껴지는 영역과 플랫 디자인으로 만든 영역
이렇게 그라데이션을 넣은 사진과 깔끔한 하얀 배경을 조합할 수도 있습니다. 아름답죠.
Invision theme redesign by Divan Raj가능성은 무한하다
위에서 소개한 사례는 일부에 불과합니다. 더 궁금하시다면 아래 목록을 살펴보세요.
다른 사례
자간 넓히기와 좁히기
직사각형과 모서리가 둥근 사각형
채우기와 투명하게 만들기
거칠게와 매끄럽게
가로와 세로
오래된 것과 새 것
낯선 것과 익숙한 것
선과 점
상세한 것과 깔끔한 것
대비는 그래픽 디자인의 기초와 같습니다. 대비가 멋져 보이는 색상 조합과 텍스트 사이즈 조합만을 뜻하는 게 아니라는 점을 안다면, 수백만 가지 방식으로 대비를 표현할 수 있습니다.
라이브 클래스 PM VOD 패키지(리서치/분석/전략/설계)
178여개 UX 강좌(총 300시간) PM VOD 패키지 98% 할인 이벤트!!!! 매일 하루에 딱 한명만!!!! 선착순 1명!!!!
