디자인 트렌드의 핵심, 아이콘을 배우다

아이콘 제작 유의사항, 디자인 프로세스 및 팁까지!

디자인 트렌드의 핵심, 아이콘을 배우다

디자인 트렌드의 핵심, 아이콘을 배우다

 

매일 PC와 모바일에서 수없이 만나는 아이콘들!

 

웹디자인부터 모바일 전반에 이르기까지
최근 디자인 트렌드의 핵심이라고 할 수 있는데요.
간결하면서도 한눈에 쏙 들어와야 해서
사용자를 위한 디자이너의 숨은 노력이라고도 하죠.

 

오늘은 아이콘 제작 시 유의사항부터 프로세스 및 팁까지
꼭 알아두어야 할 점에 대해 알려드리겠습니다.

 

 

1. 아이콘 제작 시 유의사항

 

StockSubmitter|Illustrations/Clip-Art||$|10|01101000000000000030000000000000000000|$@5001003.213_5010010.537@163$$@Art-Illustration.Miscellaneous$$@$@21$$@$@$@$@350$@$@$@$@$@$@$@$@$@43$@$@$@0x6x218.15$$@Art-Illustration.Miscellaneous$$@100$$@$@$@$@$@$@$@$@NA$$@$@$@$@$@$@$|||$$0$0$0||00000000000000000000000000000000000000|

 

 

첫째, 해당 기능 및 콘텐츠의 내용을 정확히 담아야 합니다.

아무리 좋은 디자인이어도 해당 기능을 함축적으로
설명해주지 못한다면 그 기능을 완전히 잃어버렸다 할 수 있습니다.

 

둘째, 아이콘은 본질적으로 간단하고 심플할 때 더 잘 표현됩니다.

아이콘의 가장 중요한 요소는 심플함입니다.
복잡하고 디자인적인 요소는 지양해야겠죠?

 

셋째, 통일성을 가지고 있어야 합니다.

여러 개의 아이콘이 하나의 세트로 보이는 것은 아이콘 간에
통일된 규칙을 갖고 있기 때문입니다.
사용된 색상과 크기, 표현기법 등이 일치할 때 통일성을 갖게 되므로
가이드라인을 만들어 제작하면 편리합니다.

 

 

2. 아이콘 디자인 프로세스 

 

첫째, 아이콘 형식 결정하기

속이 차있는 면(Solid) 아이콘이 될지, 속이 비어있는 선(Line) 아이콘이 될지,
그 외에 두께, 색상, 모양 등 아이콘 개성을 드러낼 수 있는 요소를
복합적으로 고려하여 그 아이콘의 성격을 결정합니다.

 

1

선 아이콘

2

면 아이콘

 

 

둘째, 쓰이는 용도에 따른 고민하기

아이콘은 정보 이해 목적으로 텍스트와 함께 쓰이기도 하지만,
텍스트 없이 정보를 전달해야 하는 경우도 있습니다.
특히 특정 메뉴 카테고리나 기능을 대표하는 경우가 많아서
함축적인 의미가 잘 부여되도록 표현해야 합니다.

그래서 아이콘의 형태가 그 내용을 대표할 만한지,
한눈에 이해할 수 있는지 고려해야 합니다.

 

 

셋째, 유사 아이콘 찾아 미리 보기

아이콘 제작 작업 전에, 내가 그리려고 하는 아이콘과 유사한 아이콘을 찾아봅니다.
찾고 나면 실제 작업 될 페이지 디자인에 얹혀보고
대략 어떤 크기로 들어가면 좋을지, 예상하는 느낌과 잘 맞아 떨어질지
‘미리 보기’ 같은 느낌으로 고민해봅니다.

 

 

3. 아이콘 디자인 팁

 

1) Pixel 배율 맞추기

실제 작업에 들어가기 전에 아이콘 패밀리의 사이즈를 명확히 정의해야 합니다.

3

 

 

2) Pixel 영역 맞추기

아이콘을 그릴 때는 도큐먼트 안에 아이콘 영역만큼을 표시하고,
크기가 서로 비슷하게 그려지고 있는지 체크하면서 아래와 같은 영역을 기준으로 그립니다.

4

 

 

3) 시각적 크기 통일하기

사각형은 원보다 면적이 넓어 보이기 때문
그런 경우에는 임의로 원의 크기를 더 키운다거나
사각형을 조금 줄이며 크기를 조정해야 합니다.

5

 

 

4) 모듈화하기

아이콘 패밀리가 하나의 세트로 보이기 위해서는
각각의 형태와 특성에 맞게 모듈화 시키는 작업이 필요합니다.

6 7

 

━━━━━━━

사용자가 원하는 콘텐츠를 쉽고 빠르게 찾아 주는 아이콘.
아이콘은 비언어적 표현으로 의미전달이 빨라
앞으로 그 중요성이 더욱 높아질 텐데요.

 

명확성, 방향성, 그리고 인지성까지
아이콘 하나를 디자인하는 데 매우 세밀한 시간과 노력이 들지만
이런 과정을 거쳐 탄생한 아이콘은 사용자들에게
편리함을 제공하며 즐거운 가치를 선사할 것입니다.

 

[작성자: 양지연]

 

[참고사이트] 

 [바이널 X] 사용자를 위한 디자이너들의 숨은 노력, 아이콘|
http://blog.naver.com/vinylx/220185028932
http://blog.rightbrain.co.kr/?p=6513
http://macnews.tistory.com/2373
http://monodream77.blog.me/130110919375
http://monodream77.blog.me/130100113776
http://www.cyworld.com/g_blog/10004336
http://turbomilk.com/blog/cookbook/icon_design/icon-design-trends-2010/?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed:turbo-enTurbomilk

클립아트_아이콘이미지

 

 

Add comment