brunch

라이킷 댓글 5 공유 265 브런치 글을 SNS에 공유해보세요

You can make anything
by writing

- C.S.Lewis -

UX 디자인배우기
by UX 컨설턴트 전민수 Feb 03. 2017

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

UX 디자인 배우기 #109

2016년 12월 29일 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


가능성은 무한하다

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


다른 사례

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


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


감사합니다. 




해외 UI/UX 트렌드,  체계적인 UI/UX 이론 및 방법론, 다양한 UI/UX 프로젝트 사례 등을 더 많이 알고 싶으면...    


<6월9일 개강>UX 디렉터 양성 과정(30시간/중소기업 재직자:162,690원) 상세 커리큘럼 보기: 
https://goo.gl/9feGPa



<6월12일 개강>[매월수당지급+인턴실습] 스마트 환경 기반의 UI‧UX엔지니어링 상세 커리큘럼 보기:

https://goo.gl/aFfrkw

keyword
magazine UX 디자인배우기
UX 컨설팅 ·UX리서치 전문 이비피알유엑스(www.ebprux.co.kr) 대표 이사 / UX 컨설팅 및 강의 문의 시 rojer70@ebprux.co.kr 메일 주세요
댓글

    매거진 선택

    키워드 선택 0 / 3 0
    브런치는 최신 브라우저에서 최적화 되어있습니다. IE chrome safari