웹을 통해 새로운 창조를 꿈꾸는 인간 - kimdirector
www.kimdirector.co.kr Photo by unsplash.com
kimdirector
Creative Web & Mobile UI/UX Planner and Designer
Humans dreaming of new creation through the UI/UX



WEBDESK
Webdesign Report
HOME WEBDESK Webdesign Report
창의적인 디자인으로 대중의 눈길을 사로잡는 방법
Posted by kimdirector | 2015.10.08 | Hit : 2364
셔터스톡 디자인 대중 여백 색상 이미지
목록보기이전보기

디자인은 당신의 웹사이트나 광고를 보는 고객을 어느 정도 컨트롤 할 수 있습니다. 시각적인 흐름을 효과적으로 이용한다면, 독자들에게 참여를 증가하거나 구매 행동을 장려할 확실한 메시지나 요소를 전달할 수 있게 되죠.
 
우리는 셔터스톡의 디자이너인 Lily Ou와의 인터뷰를 통해 고객의 눈을 사로잡을 수 있는 방법과 시각적인 흐름을 이끌 수 있는 3가지 쉬운 팁에 대해 알아보았습니다. 그럼 셔터스톡이 준비한 3가지 팁을 함께 보시죠!
 
 
 
1.여백을 이용하라
 
여백은 사람의 눈을 특정한 방향으로 이끄는데 가장 간단하면서도 효과적인 방법 중 하나입니다. 여백(White space or Negative space)은 디자인 요소 주위의 어떠한 빈 공간을 말합니다. 신생 디자이너들은 여백을 이용하는 것을 꺼리기도 하지만 알맞게 사용한다면 사용하지 않은 것과 커다란 차이를 만들 수 있죠.
 
아래 이미지를 참고해주세요!

traditional french colorful macarons in a box, background by amawasri Pakdara
 
아무런 여백 없는 이 사진은 살짝 빽빽해 보입니다. 분명 밝고 화려한 색상이 보기에는 좋지만,빈틈 없이 꽉 차있기 때문에 당신의 눈은 즉각적으로 무엇에 집중해야 할지 모르게 되겠죠.
 

Colorful and tasty French Macarons on blue background by Lev Kropotov
 
반면에, 여백(여백을 영어로 White space 라고는 하지만, 여백이 꼭 White 여야 할 필요는 없죠!)이 아주 풍부하게 사용된 위의 이미지를 주목해주세요. 어떤가요? 곧바로 두드러진 마카롱을 응시할 수 있게 됩니다.
 
여백이 눈을 어디에 두어야 할지 안내를 해준 셈이죠! 독자의 시선이 당신이 원하는 곳으로 향하도록 만드세요.
 

Macaroons background, colorful cookies on black wooden table by Pani_Ganya
 
디자인을 할 때에는 독자의 눈길을 끌고 원하는 행동으로 이어지게 하기 위해, 글과 CTA(Call To Action : 의도된 무언가를 통해 특정 행동을 하게 하는 것)버튼을 풍부한 여백과 함께 배치해보세요. 균형과 깔끔함, 조화로운 외관을 나타낼 수 있을 거에요!
 
하지만 “여백(빈 공간)”은 “버려지는 공간”과 다르다는 것을 기억해주세요.
 
 
2.대조적인 색상을 사용하라.
 
대조는 주요한 디자인적 요소로 색상의 감정을 이끌어내는 영향력과 짝지어질 때, 독자의 시선을 끌 수 있는 아주 효과적인 방법이 될 수 있습니다.
 
사람의 눈은 자연스럽게 중요한 기능을 강조해주면서도 시각적인 흥미를 주는 “대조”에 끌리기 때문이죠. 패턴이 두드러질 수 있는 단색에서의 대조는 특히 효과적입니다.
 

Chrysaora fuscescens is a common free-floating scyphozoa by S-F
 
색상에서의 차이가 극명하네요. 역동적이면서도 손대면 전기가 오를 것 같은 분홍 해파리는 칠흙 같이 검은, 신비로운 바다와 즉각적인 대조를 이루며 주위를 환기시킵니다. 마찬가지로 대조적인 색상의 메시지를 사용한다면 독자의 눈을 사로잡겠죠!
 

Pink Ombre Cake for holiday by Elena Shashkina
 
독자의 눈길을 사로잡는 또 다른 방법은 그라데이션을 통해 색상의 대조를 나타내는 것입니다. 색상이 밝아지거나 어두워 짐으로써, 자연스레 눈길은 그라데이션을 쫓게 되고, 메시지가 추가된 의도된 곳으로 안내될 수 있답니다.
 

Block of sixteen eggs by Rene Jansa
 
전체적인 디자인이 단색일 경우 CTA 버튼(특별한 액션을 취하게 하는 버튼 ex)회원가입, 앱 다운로드) 같은 단 하나의 요소만 다른 색상을 사용하는 색상 대조법은 특별히 효과적입니다. 사람의 눈은 자연스럽게 눈에 띄는 요소를 찾기 때문에 즉각적으로 반응하게 됩니다.
 
 
3.역동적인 이미지를 이용하라.
 
글자 그대로 점프하는 사람이나 활동적인 무언가를 하고 있는 등의 움직임을 묘사한 사진은 시선을 사로잡습니다.
 

Young woman swimming undewater in the swimming pool by Netfalls – Remy Musser
 
위의 이미지에서 아래를 향해 헤엄치는 사람의 움직임대로 여러분의 시선도 따라갈 겁니다. 이미지의 깔끔하면서도 정돈된 여백은 사진 속 여자가 향하는 방향을 쫓기 쉽도록 도와줍니다.
독자를 시각적으로 매료시키는 역동적인 이미지를 이용해 그들의 시선을 위에서 아래, 오른쪽에서 왼쪽 등 원하는 곳으로 끌어오는 방법을 약간의 글과 함께 시도해 보는 것은 어떨까요?.
 

long and winding rural path crosses the green hills, Tuscany, Italy by Ondrej Prosicky
 
길과 도로 사진 역시 본래 방향을 나타내는 것이기 때문에 독자의 시선을 끄는 효과적인 방법입니다. 눈은 자연스럽게 구불거리는 길과 도로의 움직임을 쫓기 때문이죠; 우리는 직감적으로 길이 향하고 있는 곳을 보게 되어 있습니다. 이러한 움직임에서 시선이 끝나는 곳에 메시지를 추가하여 시각적인 궁금증을 더욱 유발해 보세요!
 
잘 구성한 시각적인 흐름은 디자인의 핵심 요소입니다. 위의 팁을 이용하여, 무형의 방향을 나타내는 단서를 당신의 디자인에 접목시켜보세요. 독자의 시각적인 경로와 방향을 잘 이끈다면 여러분이 원하는 것을 보게 할 수 있답니다!
 
Posted by kimdirector | 2015.10.08 | Hit : 2364
Origin http://blog.naver.com/shutterkr/220491066582
Tags 셔터스톡 디자인 대중 여백 색상 이미지
Trackback http://www.kimdirector.co.kr/bbs/zerotb.php?id=webdesign&no=469

COMMENT
Commented by kimdirector
2015.10.08 16:02:11 X
본 내용과 이미지들의 저작권은 셔터스톡에 있습니다. 무단으로 사용하시면 절대로 안되요.
자세한 내용은 본 내용의 원문에서 확인하시기 바랍니다. 원문의 링크는 바로 위에 표시되어 있습니다.
목록보기 이전보기
WEBDESK
Design Review
Webdesign Report
Web Plan Report
Design Inspiration
Mobile Life
Web Standard
Recommend Site
Insight Story
Popular Contents
Category Cloud
About us Review Portfolio Design Review Leaders Story Mobile UXD IT Information Web Identity Everyday Story Mobile Life Webdesign
Web Standard Homepage Work Web Plan Report Practical Use Tip Inspiration Download Recommend Site
Tags
행동 남규리 MS Office 프로젝트 사용량 웹표준 홈페이지 인간관계 디자인 스토리메이킹 일러스트 온라인광고 성장 비디오 배경이미지 윈도우7 리뉴얼 이미지 SNS CSS3 디자인 관리 소셜 로고 유저 CMS webcolourdata 로고디자인 몰입도 사용자 구글 iOS 7 라이센스 Contact us 일관성 반응형 디자인 액티브시니어 영화 Caliper 트랜드