gabiadesign | 야후 : 평창 동계 올림픽 아이콘 디자인
30395
single,single-post,postid-30395,single-format-standard,ajax_fade,page_not_loaded,,select-theme-ver-3.1,wpb-js-composer js-comp-ver-4.3.5,vc_responsive
001

야후 : 평창 동계 올림픽 아이콘 디자인

야후 : 평창 동계 올림픽 아이콘 디자인

001

평창 올림픽은 이미 좋은 픽토그램을 만들어서 오프라인과 온라인에서 사용하고 있다.
하지만 야후는 웹에서 사용할 20px 정도의 작은 사이즈에서도 잘 보이는 이미지가 필요했고 결국 그들만의 그래픽을 새로 만들어냈다.
디자인은 야후, 플랜티르, 마블앱, DBS 은행등의 다양한 회사와 일한 경험이 있는 Budi Harto Tanrim이 담당했다. 그의 작업 과정을 따라가보자.

1. 동계 스포츠에 대해 알아보기

002
동계 스포츠에 대해서 잘 알지 못했던 그는 동계 올림픽에 어떤 스포츠가 있는지 먼저 조사할 필요가 있었다.
(작업을 하기전까지 이렇게 많은 겨울 스포츠가 있는지 몰랐다고.)
그는 2014 동계 올림픽 게임에 대한 자료를 보는 것으로 작업의 리서치를 시작했다.
자료를 찾으며 각 스포츠에서 보여지는 선수들의 동작과 그것을 어떻게 작은 사이즈에서도 효과적으로 보여줄지에 집중했다고 한다.

2. 근본 만들기

각 스포츠에 대한 기본적인 숙지가 끝난 후, 야후의 사람 아이콘에 대한 가이드를 보며 아이콘의 근본을 만들기 시작했다.

003

– 머리는 언제나 같은 크기로 그릴것 (4px)
– 몸통과 손은 원근법에 따라 변동될 수 있음 (7~9px)
– 다리또한 변동될 수 있음 (7px)

 

3. 포즈 잡기

004
먼저 각 스포츠에 대한 정보, 사진, 그래픽 등의 래퍼런스를 조사한다.
하나의 스케치를 완성하려하지말고 다양한 스케치를 러프하게 그려본다.

005006
이 과정에서 혼자 소통하지 않고 작업하려고 하기보다, 클라이언트에게 자주 보여주며 피드백을 받도록 한다.

 

4. 탄탄하게 다져가기

007
포즈가 확정된 후, 아이콘이 실용성과 차별화되는 스타일을 가질 수 있도록 발전시킨다.
이 과정 또한 클라이언트와 자주 소통하면 좋은 결과가 나온다.

008

이야기를 통해 다리는 점차 얇았다가 굵어지는 다리를 사용하기로 했다.
좀더 역동적인 모습으로 움직임을 표현해주기 때문이다. 또 적절하게 여백을 사용하여 포즈가 잘 보일 수 있도록 수정하였다.
이 두가지 규칙이 가능한 모든 아이콘에서 지켜질 수 있도록 했다.

 

5. 백터화 시키기

009
우리 모두 행복한 스케치가 나온 뒤, 일러스트레이터를 사용하여 백터화 시킨다.
백터화 시킬때 모든 포인트가 정확한 픽셀 위치에 있는지 신경써서 작업하도록 한다.

 

6. 최종결과물

010011
총 2주의 시간을 투자하여 나온 결과물과 야후 사이트에 적용된 모습

 

출처 및 원문 : https://medium.com/budi-brain/designing-yahoos-winter-olympics-icons-75ccdafacc3d

 

AUTHOR.

공룡 / Gabia UI Designer

No Comments

Post a Comment

*