아이콘 디자인에 대해 알아야 할 모든 것

아이콘은 작지만 강력하기 때문에 아이콘 디자인을 신중하게 생각하는 것이 중요합니다. 전 세계의 디자이너들은 좋은 아이콘을 만드는 데 들어가는 창의성과 노력의 양을 목격하게 될 것입니다. 표현적이면서 동시에 단순해야 하기 때문입니다.

아이콘의 배경

아이콘 디자인은 실제로 개체나 프로그램을 나타내는 작은 이미지일 뿐입니다. 그들은 강력한 메시지를 전달하는 정말 간단한 이미지입니다. 아이콘은 일반적으로 기억하기 매우 쉽고 거의 모든 그래픽 인터페이스의 주요 기능이기도 합니다.

재미있는 사실: 아이콘이라는 단어의 어원은 이미지를 의미하는 그리스어 'eikona'에서 유래했습니다. 디지털 아이콘은 매킨토시와 마이크로소프트와 같은 최초의 GUI 운영 체제가 나왔을 때 등장하기 시작했습니다.

아이콘의 다른 유형은 무엇입니까?

알아야 할 아이콘에는 세 가지 주요 유형이 있습니다. 다음은 각각에 대한 통찰력과 사용자 경험에 미치는 영향의 종류입니다.

유니버설 아이콘

보편적으로 인식되는 아이콘입니다. 예를 들어 검색, 인쇄, 홈 또는 장바구니 아이콘이 그러한 아이콘입니다. 그러나 단지 하나의 작은 문제가 있습니다. 유니버설 아이콘은 다소 드뭅니다. 희귀를 의미할 때 여기에 제공된 예를 제외하고 대부분의 아이콘이 모호하고 인터페이스에 따라 의미가 다를 수 있음을 의미합니다.

다른 의미를 가진 아이콘

이름에서 알 수 있듯이 이러한 아이콘에는 여러 가지 의미가 있어 상충되거나 모순될 수 있습니다. 예를 들어 하트와 별 아이콘이 충돌합니다. 이 두 아이콘의 기능은 앱마다 변경되며 때로는 서로 경쟁할 수도 있습니다. 이 때문에 이러한 아이콘은 정확하게 해석하기가 다소 어려워집니다. 앱에서도 이러한 기호는 사용자가 특정 결과를 기대하면서 기호를 클릭하고 대신 다른 결과를 얻을 때 혼동될 수 있습니다.

독특한 아이콘

아이콘을 사용하여 고유한 개체 또는 동작을 어떻게 설명할 수 있습니까? 독특한 아이콘 디자인을 사용합니다. 그러나 이것이 실패한 사례가 많다는 점에 주목하는 것이 중요합니다. 예를 들어, Apple이 다양한 색상의 원을 통해 게임 센터를 표현하기로 결정했을 때 의미가 사라졌습니다. 이 서클은 무엇을 의미하며 게임 센터와 어떤 관련이 있습니까?

어떤 아이콘 형식을 사용할 수 있습니까?

아이콘 디자인을 요청할 때 알아야 할 몇 가지 유형의 아이콘 형식이 있습니다.

• SVG – 확장 가능한 벡터 그래픽이며 완벽한 기본 형식을 제공합니다. 확장 가능하기 때문에 본질적으로 품질을 잃지 않고 아이콘의 크기를 변경할 수 있음을 의미합니다.
• PNG – 완벽한 호환성을 원하는 경우 휴대용 네트워크 그래픽 형식을 선택하십시오. 이것은 픽셀을 기반으로 하며 품질에 영향을 미치지 않고는 업스케일할 수 없음을 의미하는 래스터 형식입니다. PNG는 Word, PowerPoint 및 이메일에서 작동합니다. 편집 없이 색상이 있는 배경 위에 추가할 수 있습니다.
• ICO – Microsoft Windows 아이콘 형식은 Windows 응용 프로그램에 아이콘을 사용하거나 웹 사이트의 파비콘으로 사용하려는 경우에 적합합니다.
• ICNS – 이 형식은 매우 특정한 목적으로 사용됩니다. 이것은 Mac OS X 문서 및 앱과 함께 사용할 수 있는 Apple 전용 형식입니다.

Kimp 팁: 아이콘 디자인을 가능한 한 단순하게 유지하십시오. 의도한 의미를 명확하게 나타내는 실제 항목을 디자인에 사용하십시오. 예를 들어 막대 차트를 사용하여 재무를 나타낼 수 있습니다. 당신은 업무를 의미하는 작업 가방을 사용할 수 있습니다. 디자이너가 올바른 아이콘을 만들 수 있도록 최대한 많은 컨텍스트를 제공하세요. 귀하의 아이콘이 어떻게 사용될 것인지 정확히 알려주십시오.

아이콘을 효과적이거나 비효과적으로 만드는 것은 무엇입니까?

이제 아이콘의 형식과 아이콘의 유형에 대한 아이디어를 얻었으므로 효과적인 아이콘 또는 비효율적인 아이콘을 만드는 요소도 살펴보겠습니다. 이렇게 하면 디자이너와 작업할 때 이러한 속성을 확인할 수 있습니다.

명쾌함

아이콘 디자인은 보는 즉시 메시지를 전달해야 합니다. 아이콘에 사용하는 은유가 알려지지 않았거나 모호한 경우 사람들은 그것이 의미하는 바에 대해 혼란스러워할 것입니다. 예를 들어 홈에 사용되는 아이콘은 모두에게 알려져 있습니다. 즉, 명확성입니다. 이제 홈 아이콘이 중간에 점이 있는 원으로 표시되면 어떻게 될지 상상해 보세요. 그러면 혼란스럽겠죠? 혼란스러운 아이콘은 효과가 없습니다.

가독성

명료도 요소를 정렬한 후에는 이제 아이콘을 쉽게 읽을 수 있는지 확인해야 합니다. 아래 예시를 보시면 맨 처음 아이콘은 디테일이 너무 촘촘해서 흐릿하게 보여서 이해하기 어렵습니다. 작은 아이콘이 제대로 된 좋은 예는 가독성이 뛰어난 Google 지도의 아이콘일 것입니다. 더 얇은 획을 사용하고 충분한 공간을 남기지 않고 작은 아이콘에 너무 많은 세부 사항을 추가하면 가독성을 잃기 때문에 효과가 없게 됩니다.

아이콘 정렬

아이콘 디자인은 균형 감각이 있어야 하며 이는 모든 요소를 ​​광학적으로 정렬하여 얻을 수 있습니다. 즉, 보는 사람이 요소를 인식하는 방식에 따라 디자인을 정렬해야 합니다.

아이콘의 간결함

아이콘의 간결함은 추가하는 디테일의 양에 따라 결정됩니다. 아이콘을 가능한 한 단순하게 유지하고 불필요한 선과 세부 사항을 추가하여 읽을 수 없고 흐릿하게 만들지 마십시오.

일관성

앱 또는 특정 인터페이스의 아이콘 디자인을 완료하는 경우 모든 아이콘이 동일한 일관성을 유지하는지 확인하세요. 일부 아이콘이 다른 아이콘보다 더 상세하거나 선명하게 보이면 일관성을 잃게 됩니다. 이것은 사용자 경험 측면에서 인터페이스를 어렵게 만듭니다.

디자인의 개성

다시 말하지만, 디자인하려는 인터페이스나 앱에서 각 아이콘이 브랜드의 개성을 구현하는지 확인해야 합니다. 어떤 브랜드 스타일과 목소리를 가지고 있느냐에 따라 프로페셔널에서 재미 있고 프레피하게 갈 수 있습니다. 이것은 아이콘을 디자인할 때 디자이너에게 제공해야 하는 브리핑의 매우 중요한 부분입니다.

아이콘은 사용하기 쉬워야 합니다.

't'까지 그림을 그린 후에도 아이콘이 완성되지 않은 상태입니다. 디자이너가 만든 아이콘은 클라이언트가 사용하도록 하기 전에 테스트와 준비가 필요합니다. 이 테스트 및 준비를 통해 아이콘을 쉽게 사용할 수 있습니다. 사용하기 쉬운 아이콘의 징후는 다음과 같습니다.

• 잘 정리됨 - 여기서 디자이너가 나중에 필요할 때 참조할 수 있도록 잘 정리된 방식으로 디자인에 대한 마스터 파일을 배치했는지 확인해야 합니다. 필요할 때 쉽게 찾을 수 있도록 알파벳 순서 또는 다른 순서로 배치하도록 요청할 수 있습니다.
• 잘 문서화됨 – 디자이너에게 아이콘 제품군의 핵심 원칙을 전달하고 기술 규칙을 배치하도록 요청하십시오. 사람들이 원할 경우 참조할 수 있도록 이 문서가 완성되면 공개할 수도 있습니다.
• 테스트됨 - 디자이너와 함께 이 작업을 실행하는지 확인하십시오. 디자인된 모든 아이콘을 서로 옆에 배치하도록 하면 일관성과 관련성을 확인하는 데 도움이 됩니다.
• 아이콘 관리자와 같은 사용자 정의 도구에서 지원됩니다. 아이콘 사용에 도움이 되는 사용자 지정 도구를 제공할 수 있다면 액세스할 수 있도록 만들어야 합니다.

아이콘 디자인에 대한 브리핑에는 어떤 내용이 포함되어야 합니까?

모든 사용 사례 고려

아이콘이 어디에 사용되고 무엇을 나타내야 하는지 알 수 있습니다. 또한 메타포가 필요한 아이콘과 실제 개체를 기반으로 하는 아이콘을 구분해야 합니다. 이러한 요소가 명확해지면 브리핑을 통해 디자이너에게 이를 전달할 수 있습니다.

브레인스토밍 개념 및 은유

먼저, 아이콘을 가능한 한 가장 잘 설명하는 데 사용할 수 있는 모든 묘사의 목록을 만드십시오. 단어 세트 및 사전과 같은 리소스는 키워드, 유사한 단어 및 아이콘을 통해 전달하려는 개념의 정의와 같은 항목을 찾는 데 도움이 됩니다. 그런 다음 이러한 아이디어를 단순화하여 아이콘(추상적이고 단순해야 함)이 메시지를 명확하고 효과적으로 보낼 수 있도록 시작할 수 있습니다. 가능한 한 많은 연구와 브레인스토밍을 스스로 처리하고 나머지는 디자이너의 지원을 받으십시오.

유용한 참조 찾기

항상 양질의 참조 자료를 찾기 위해 연구에 투자하십시오. 어딘가에 누군가가 이미 당신이 디자인하고자 하는 아이콘의 환상적인 버전을 완성했을 가능성이 있습니다. 이것들을 찾을 수 있다면 영감도 찾을 수 있습니다. 디자이너에게 이러한 참조를 제공하면 디자이너는 당신의 관점을 더 쉽게 이해할 수 있을 것입니다.

아이콘 스타일 선택

인기 있는 스타일 중 일부는 글리프, 평면, 윤곽선, 재료 및 손으로 그린 ​​것입니다. 스타일을 결정할 때 두 가지 중요한 요소에 대해 생각해야 합니다. 하나는 이것이 표시될 UI 인터페이스와 스타일입니다. 두 번째는 Material 또는 iOS와 같은 인터페이스에 대한 요구 사항입니다.

디자이너와 자세히 논의

디자이너가 디자인 중인 모든 아이콘에서 일관성을 유지하는지 확인하십시오. 일을 더 명확하게 하려면 수행할 모든 아이콘의 전체 스케치를 하도록 하세요.

아이콘의 개념 스케치를 승인한 후 벡터화된 버전을 요청해야 합니다. 그런 다음 마지막으로 아이콘의 모형을 가져와 다양한 사용 사례에 잘 맞는지 확인할 수 있습니다.

이제 아이콘을 선명하게 보이도록 브리핑에 포함해야 하는 내용을 살펴보았습니다. 이제 최종 결과가 제대로 표시될 수 있도록 디자인하는 아이콘에 구현해야 하는 주요 사항을 살펴보겠습니다. 디자이너와 이러한 사항에 대해 논의해야 합니다.

새 아이콘 생성을 위한 체크리스트

아래에 설명된 단계는 아이콘 디자인을 만들기 위해 디자이너가 수행합니다.

흐릿한 아이콘 피하기

아이콘이 선명하고 뚜렷하고 확장되게 보이려면 픽셀에 위치해야 합니다. 이것은 흐릿한 딸꾹질을 제거합니다.

치수 및 무게 확인

모든 아이콘의 무게와 크기가 동일한지 확인하기 위해 사시 테스트를 사용하는 것이 좋습니다. 기본적으로 눈을 가늘게 뜨고 아이콘이 서로 어떻게 보이는지 살펴보십시오. 조정이 필요한 경우 디자이너의 도움을 받으십시오. 여기서 한 가지 팁은 완벽한 원과 정사각형을 사용하여 아이콘 세트에서 가중치가 동일하도록 하는 것입니다.

기하학적 모양 사용

귀하의 디자이너가 귀하의 아이콘을 그리기 위해 단순하고 확고한 기하학적 모양을 사용하도록 하십시오. 이렇게 하면 아이콘이 명확해지고 미학적으로 매력적으로 보입니다.

지나친 디테일을 피하라

아이콘을 디자이너와 함께 살펴볼 때 아이콘을 바쁘고 무겁게 보이게 하는 세부 사항을 제거하십시오. 대신 기본적이고 단순한 세부 사항만 유지하면 아이콘이 깨끗하고 명확해집니다. 아이콘은 작고 세부 사항이 너무 많은 얼룩으로 변할 수 있습니다.

공간 확보

아이콘 안의 모든 세부 사항에는 숨을 쉴 수 있는 공간이 필요합니다. 그것들이 모두 너무 밀접하게 붙어 있으면 전체 디자인이 진흙탕이 될 것입니다. 아이콘을 볼 때 세부 사항이 명확하고 의미가 즉시 명확해질 수 있도록 모든 아이콘에 충분한 공간이 있는지 확인하십시오.

아이콘의 대비

아이콘의 색상 대비가 충분한지 확인하십시오. 흑백의 균형이 맞아야 합니다. 대비가 충분하지 않으면 아이콘이 명확하지 않게 보입니다.

시각적 통일성을 보라

살펴봐야 할 또 다른 요소는 아이콘의 시각적 통일성입니다. 이것이 기본적으로 의미하는 것은 선의 무게, 모서리의 크기, 사용되는 색상 팔레트, 포함된 세부 수준 및 디자인 요소가 전체 아이콘 세트를 통해 일관되게 유지된다는 것입니다. 추적해야 할 것이 많기 때문에 디자이너와 이에 대해 이야기하십시오!

아이콘 디자인은 재미있지만 제대로 하기는 어렵습니다.

아이콘 디자인을 시작할 수 있도록 많은 정보를 제공했습니다. 많은 것을 받아들이고 익숙해져야 하므로 좋은 디자이너와 협력하여 아이콘을 올바르게 만드십시오. 그리고 아이콘이 어떻게 사용되며 누가 볼 것인지 이해하는 데 필요한 모든 세부 정보를 제공하십시오. 그리고 곧 강력하고 명확하며 사용하기 쉬운 디자인의 훌륭한 아이콘 세트를 갖게 될 것입니다.