brunch

You can make anything
by writing

- C.S.Lewis -

by UX 컨설턴트 전민수 Feb 03. 2017

대비(Contrast) 효과 적용 UI 원칙

UX 디자인 배우기 #109

전민수 UX 컨설턴트 소개 

안녕하세요. 전민수 UX 컨설턴트입니다. 지난 23년간 수행했던, UX 컨설팅 경험과 강의 이력을 소개합니다. 


전민수 UX 샘의 [인프런] 인터넷 강의 안내입니다 


[클럽하우스] 전민수 UX 샘의 재능 기부 UX 공개 수업 
[UI/UX/리서치/방법론] 우리 모두 함께 공부해요~ 


클럽하우스에서 [전민수 샘의 UX 공개 수업]을 진행하고 있습니다.

매주 수요일/금요일 밤 9시-11시까지 UX/리서치/방법론 등 하루에 하나의 주제를 선정하여 깊이 있는
공개 강의를 하고 있습니다. 바로 이어서, 뒷풀이방(11시-12시)은 [UX A-Z 모든 것] 고민 상담을 하고 있으니, 혹시, 궁금하거나 고민이 있으면, 저한테 무엇이든지 물어보세요~ 가능한 제가 아는 범위에서 최대한 알려 드리겠습니다.

 
여러분 모두 화이팅!!!!!  


그리고, 아래 링크를 클릭하고, 저를 팔로우 해주시면 [공개 강의] 혹은 [비정기 강의] 열릴때마다,
여러분께 알림이 갈거에요~


UI/UX 카페 소개 (카페명: 클럽하우스 UX Book Q&A Club)
국내/해외 UI&UX 10,000개 이상 아티클 공유 및 세부 카테고리 분류

카페는 UX 자료 공유 목적으로 운영되고 있으며, 카페 가입 시 바로 승인됩니다. 




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


가능성은 무한하다

위에서 소개한 사례는 일부에 불과합니다. 더 궁금하시다면 아래 목록을 살펴보세요.


다른 사례

자간 넓히기와 좁히기
직사각형과 모서리가 둥근 사각형
채우기와 투명하게 만들기
거칠게와 매끄럽게
가로와 세로
오래된 것과 새 것
낯선 것과 익숙한 것
선과 점
상세한 것과 깔끔한 것


대비는 그래픽 디자인의 기초와 같습니다. 대비가 멋져 보이는 색상 조합과 텍스트 사이즈 조합만을 뜻하는 게 아니라는 점을 안다면, 수백만 가지 방식으로 대비를 표현할 수 있습니다. 



매거진의 이전글 모바일 앱에서 히든 제스처를 소통하는 방법

매거진 선택

키워드 선택 0 / 3 0

댓글여부

afliean
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari
브런치 시작하기

카카오계정으로 간편하게 가입하고
좋은 글과 작가를 만나보세요

카카오계정으로 시작하기
페이스북·트위터로 가입했다면