빠지지 않는 아이콘 디자인을위한 10 가지 팁
요즘 거의 모든 디자이너가 앱 디자인을 생각하고 있습니다. 모든 앱의 가장 작은 기능 중 하나는 모든 모바일 장치의 화면과 앱 스토어에서이를 나타내는 데 사용되는 아이콘입니다. 훌륭한 아이콘을 디자인하는 것은 단지 상자에 로고를 넣는 것 이상입니다. 다른 모든 앱 아이콘 중에서 눈에 띄는 것이 필요합니다.
좋은 아이콘은 앱, 소셜 미디어 및 소규모 인쇄 프로젝트 또는 명함 등 다양한 방법으로 사용할 수 있습니다. 그리고 약간의 디자인과 계획 만 있으면됩니다.
1. 읽기 편하게
아이콘을 쉽게 읽을 수 있어야합니다. (우리는 텍스트에 대해 이야기하지 않습니다.) 시각적 가독성이 중요합니다.
아이콘에는 브랜딩 또는 이해하기 쉽기 때문에 인식하기 쉬운 시각적 요소가 포함되어야합니다. 예를 들어 컴퓨터 바탕 화면의 아이콘에 대해 생각해보십시오. 아이콘의 단순한 특성으로 사물의 위치를 알 수 있습니다. 문서는 폴더에 저장되고 음악은 음표 형태의 버튼으로 재생되며 이미지는 폴라로이드 사진처럼 보이는 위치에 저장됩니다.
시각적 인 가독성과 관련하여 브랜딩은 고려해야 할 큰 부분입니다. 크고 가정용 브랜드에는 종종 로고 또는 상징적 이미지의 일부인 아이콘이 있습니다. 사람들은 작은 크기에서도 이러한 요소를 즉시 인식하는 경향이 있습니다. 이것은 새로운 브랜드 나 작은 브랜드 또는 아이콘 개념에 대해 조금 더 어려울 수 있으며 디자이너는 최적의 영향을주기 위해 다른 기술을 선택할 수 있습니다.
2. 이미지가 아닌 생각 아이콘
아이콘은 상자의 사진이 아닙니다. 아이콘은 이미지를 포함 할 수 있지만 텍스트 표현, 로고 또는 이러한 요소의 조합 일 수도 있습니다.
시각적으로 잘 인식 가능해야합니다. 대부분의 로고에는 실제 사진이 포함되어 있지 않지만 아이디어를보다 그래픽으로 표현한 것입니다. (이 개념은 벡터 기반 아이콘을 만들어야한다는 점에서 강조됩니다.)
작은 크기로 이미지를 읽기가 어려워지고 사용자의 휴대 전화 나 다른 기기에서 다른 아이콘이 사라지면 이미지가 사라질 수 있습니다. 더 많은 그래픽 표현은 종종 더 많은 시각적 무게를 가질 수 있습니다.
위의 메이시 백화점에 대한 모바일 앱 아이콘이 이에 대한 좋은 예입니다. 빨간색 상자 중앙에있는 큰 흰색 별은 쉽게 식별 할 수 있습니다. 아이콘은 색상이 반전되어 아이콘을 강조한다는 점에서 회사 서명 아이콘의 표준 처리와 다릅니다. 빨간색 배경은 다양한 사용자 배경 화면에 비해 흰색 배경보다 두드러 질 것입니다.
3. 단어를 피하십시오
아이콘에 표시되지 않는 한 가지는 단어 사용입니다. 읽고 이해할만한 것들로 채워진 아이콘을위한 공간이 충분하지 않습니다.
일반적으로 텍스트가 로고의 일부가 아닌 이상 텍스트를 사용하지 마십시오. 기본 로고 디자인에 사용하기 전에 로고의 일부인 텍스트도 신중하게 고려해야합니다.
아이콘은 단어없이 정체성을 만드는 방식으로 디자인되어야합니다. 또한 표시되는 장치와 관련하여 실제로 사용되는 아이콘 수를 기억하십시오. 대부분 실제 아이콘 블록 아래에 한 줄의 설명자 텍스트를 포함합니다.
예를 들어, Design Shack 아이콘은 웹 사이트와 일치하는 색상 및 유형 처리와 함께 단일 문자 "d"를 사용하는 아이콘입니다. 이 통합 된 브랜딩과 읽기 쉬운 문자는 단어없이 시각적 인 관계와 연결을 만듭니다.
4. 생생한 컬러 사용
아이콘이 돋보이기를 원하십니까? 색으로 대담하게 가십시오. 생생한 색상 선택은 다양한 배경에서 앱을 돋보이게하고 사용자의 관심을 끌 것입니다.
아이콘 디자인에서 마지막으로 원하는 것은 사용 가능한 다른 모든 옵션과 혼합되는 것입니다. 이렇게하면 특히 하늘과 해군 색상과 같은 파란색이 다른 많은 아이콘이 사용하기 때문에 피하고 싶을 것입니다.
파란색이 기본 로고 또는 브랜드 색상 인 경우 충격을주기 위해 더 밝은 색상과 페어링하십시오. 라임 그린과 같은“새로운 중립”을 고려하거나 가을에는 밝은 주황색, 봄에는 밝은 분홍색과 같은 계절 색조를 선택하십시오.
5. 심볼 또는 간단한 로고 개발
브랜드 로고가있을 수 있지만 아이콘과 관련하여 기호도 중요합니다. 심볼은 간단한 그래픽 표현이나 로고 또는 이미지의 조각 일 수 있습니다.
선명하고 기억하기 쉬워야합니다. 더 작은 브랜드와 더 큰 디자인 프로젝트를 완벽하게 연결하기 위해 더 많은 브랜드가 표준 브랜드와 로고에 상징적 기호를 통합하고 있습니다.
메시징 및 사진 공유 앱 Snapchat에 대해 생각해보십시오. 고스트 심볼은 사용자가 친숙한 아이콘, 다른 색 구성표 및 모양, 심지어 광고판의 독립형 이미지로도 인식 할 수있게되었습니다. 이것이 작동하는 상징의 주요 예입니다.
6. 스케일 기억
우리 대부분은 휴대 전화 나 데스크톱 컴퓨터에서 아이콘을 작은 것으로 생각하지만 아이콘이 항상 작은 것은 아닙니다. 크기에 관계없이 사용할 수 있도록 설계해야합니다.
이것은 끊임없이 변화하는 디지털 환경, 더 많은 망막 디스플레이의 출현 및 다른 플랫폼 및 장치가 다른 크기의 아이콘을 렌더링 할 수 있기 때문에 특히 중요합니다.
그것을 크게 만든 다음 축소합니다.
7. 벡터 형식으로 생성
크기와 크기와 관련하여 형식도 중요한 고려 사항입니다. 벡터 기반 디자인을 사용하여 아이콘을 만들어야합니다.
벡터 이미지를 사용하면 많은 개별 이미지를 만들지 않고도 다양한 장치, 크기 및 뷰포트에 대한 아이콘을 자유롭게 변경하고 저장할 수 있습니다. 실제로는 다양한 프로젝트에 적합한 크기의 여러 버전의 아이콘이 필요합니다.
벡터의 장점은 유연성입니다. 그러나 캐치가 있습니다. 많은 응용 프로그램 또는 플랫폼의 경우 업로드를 위해 복사본을 벡터가 아닌 형식으로 저장해야 할 수 있습니다.
8. 디자인 박스 밖에서 생각하기
최근 몇 달 동안 흰색 배경, 평면 디자인 기술 및 긴 그림자가있는 단색 배경을 사용하는 아이콘이 많이있었습니다. 이러한 트렌드는 많은 재미가 있지만 디자인 상자 안에 갇히지 마십시오. 아이콘으로 다른 것을하십시오.
다른 사람이 정사각형 모서리로 작업하는 경우 더 둥근 것을 고려하십시오. 모든 평평한 색상에서 눈에 띄도록 배경에 질감 힌트를 추가하십시오. 다른 사람이하는 일에 아이콘을 모델링해야한다고 생각하지 마십시오.
9. 흑백으로 만들기
소규모 설계의 효과를 테스트하기 위해 수년 동안 사용했던 약간의 트릭 디자이너가 있습니다. 흑백으로 만듭니다. 디자인이 색상이 있거나없는 동일한 메시지를 전달하면 제대로 작동합니다. 아이콘의 색상을 읽으려면 수정 작업을 계속하십시오.
개인적으로 거의 모든 디자인 프로젝트를 흑백으로 시작한 다음 나중에 색상을 추가하기 시작합니다. 컴퓨터 컨셉의 스케치입니다. 종이에 스케치하고 실제로 색상을 추가하기 전에 작동하면 아이디어가 견고한 프레임 워크를 가질 수 있습니다.
10. Think Square
아이콘과 사각형 프레임 안의 모든 부분도 사각형으로 맞아야합니다. 그렇다고 디자인이나 이미지의 모양이 정확히 정사각형이어야한다는 것은 아니지만 모든 아이콘의 기본 종횡비는 높이와 너비가 같습니다.
따라서 세로 또는 가로가 슈퍼 인 심볼이 있으면 주변 공간을 채워 백그라운드에서 길을 잃지 않도록해야합니다. 공간의 대부분을 정사각형으로 채우는 개념을 선택하십시오. (둥근 원형 아이콘도 높이와 너비가 같습니다.)
결론
진부하게 들릴지 모르지만 좋은 아이콘 디자인의 열쇠는… 음… 아이코닉입니다. 그렇게 간단합니다.
단순성, 색상 및 시각적 인식을 염두에두고 디자인하십시오. 인터페이스와 현재 트렌드를 고려하여 표준에 맞는 디자인을하십시오. (요즘 iOS 모바일 앱을위한 skeuomorphic 아이콘을 디자인하지 않겠습니까?) 아이콘은 디지털 인터페이스에 대한 사용자의 출입구입니다.
이미지 출처 : Ash Kid, Casey Fleser, Roland Tangalo, Gustavo da Cunha Pimenta 및 Microsiervos Geek Crew
