디지털 아이콘을위한 10 가지 황금률

Iconography는 증가하는 상호 작용 포트폴리오에 귀중한 자산을 추가합니다. 아이콘 디자인은 좋은 디자인 원칙을 따르지만 자체 규칙에 따라 작동합니다. 시작하는 데 10 가지가 있습니다.

01. 의도적 인 디자인

좋은 디자인의 모든 요소와 마찬가지로 아이콘에는 명확한 목적이 있어야합니다. 원하는 아이콘의 종류를 생각하기 전에 스스로에게 물어봐야합니다. 이유는 무엇입니까? 당신의 대답이 '예쁘기 때문에'라면, 앞으로 찌르기 전에 두 번 생각해야합니다. 시각적으로 과밀 한 디지털 세계에서 가장 예쁜 아이콘조차 의미 나 목적없이 곧 광택을 잃을 것입니다.



내비게이션부터 시작하겠습니다. Facebook과 Twitter는 탐색을위한 매우 간단하고 실용적인 아이콘 사용의 좋은 예입니다. 아이콘 옆에 텍스트가있는 것은 사용자에게 매우 중요합니다. 추상 아이콘이 텍스트의 유무에 관계없이 일관성없이 사용되거나 규칙이 무시되어 사용자가 원하는 것을 쉽게 찾을 수없는 경우가 너무 많습니다. 예를 들어 Skype iPhone 앱에는 사람을 찾는 데 사용되는 세 가지 아이콘이 있습니다. 하단 탐색 막대의 아이콘은 iOS 연락처 축소판 아이콘의 수정 된 버전입니다. 다이얼 패드를 사용할 때 연락처를 찾는 아이콘은 중앙에 #가있는 노트북입니다. 연락처에없는 Skype 사용자를 찾기위한 아이콘은 머리, 어깨 및 +입니다. 뭐라고?



UI 디자인과 관련하여 처음부터 인터페이스를 만들 든 기존 인터페이스를 수정하든 아이콘은 디자인에 일관성과 의미를 부여 할 수 있습니다. 전자 상거래 사이트를 디자인하는 경우 링크뿐만 아니라 화면 오른쪽 상단 어딘가에 눈에 띄는 위치에 체크 아웃 아이콘이 표시됩니다. Checkout, Basket, Your Items 또는 Shopping Cart라고 부를 수 있지만 일관성 원칙에 따라 사용되는 아이콘은 이름을 반영해야합니다.

Skype는 사람을 찾기 위해 세 가지 다른 아이콘을 제공하여 야생 거위를 쫓는 사용자를 보냅니다.



Skype는 사람을 찾기 위해 세 가지 다른 아이콘을 제공하여 야생 거위를 쫓는 사용자를 보냅니다.

아마존 그것을 바구니라고 부르고 하이브리드 바구니와 트롤리 아이콘을 사용합니다. 마제스틱 와인 쇼핑 카트에는 최소 6 병 구매 정책이 있습니다. 각 병을 추가하면 6 개의 회색으로 표시된 와인 병 중 하나가 최소 요구 사항을 충족했음을 알려주기 위해 색상이 변경됩니다. 단. ASOS 관습을 무시하고 아이콘을 사용하지 않기 때문에 사용자는 물건을 사기 위해 조금 더 세게보아야합니다.

전체 UX의 큰 그림은 아이콘과 다른 그래픽 요소 간의 상호 작용에서 올바른 균형을 찾는 것만 큼 세부 사항에 대한 세심한주의를 통해 이점을 얻습니다. 너무 미묘하면 아이콘이 손실 될 수 있습니다. 예를 들어 The Witcher 사이트의 탐색 아이콘은 페이지 하단에 숨겨져 있으며 디자인에 완전히 압도됩니다. 그러나 아이콘을 너무 눈에 띄게 만들면 디자인이 너무 붐비 게됩니다. 양조장 Ommegang 웹 사이트 아이콘 상호 작용에 너무 많은 시간과 관심이 흘렀지만 그렇게 많이 필요하지는 않습니다. 이것이 '적은 것이 더 많다'는 철학이 우세한 곳입니다.

테이블에 대한 생각으로 인해 언덕을 향해 달리고 싶을 수도 있지만, 표 형식 구조 내에서 아이콘과 명확한 범례를 사용하면 다루기 힘든 정보를 정리할 수 있습니다. 5 일간의 BBC 일기 예보 요약은 BBC Weather 사이트에서 가장 즉각적이고 눈에 띄는 기능입니다. 전 세계적으로 이해되는 관습을 사용하여 전설의 필요성을 피할 수도 있습니다.



제한된 부동산과 더 제한된 관심 범위로 인해 디지털 도메인의 도상학은 쉽게 그 자체로 언어가 될 수 있지만 이것은 위험한 게임이 될 것입니다. 텍스트에 생명을 불어 넣기 위해 이제 이미지 나 기타 그래픽 요소 대신 간단한 아이콘이 사용됩니다. 그만큼 기호 아이콘 웹 사이트는 텍스트와 아이콘을 혼합하여 스토리를 전달하는 재미있는 방법을 보여줍니다. Veggie 아이콘은 따뜻하고 환영합니다.

디지털 형식이든 하드 카피 형식이든, 텍스트 전용 지침은 읽기가 어렵습니다. 이러한 텍스트는 잘 진행되는 아이콘을 포함하여 이해하기 쉽습니다. 적절한 양의 여백은 방정식의 일부이지만 전략적으로 배치 된 아이콘은 요약과 향상을 제공합니다. My Shizzle 's을 평가하세요. 교육용 아이콘은 카피와 함께 흐르며 Shizzle 성공을위한 보완 텍스트와 그래픽 경로를 제공합니다.

이모티콘은 기분과 감정이 언급 될 때 떠 오릅니다. 그러나 감정에 영향을 미치는 것은 이모티콘을 사용하는 것보다 훨씬 더 미묘하기 때문에 올바르게 이해하기가 어렵습니다. 색 이론을 확인했다고 가정하면 은유에 관한 것입니다. 잘못된 의미를 전달하면 상황이 매우 잘못 될 수 있습니다. eHarmony의 아이콘은 현재까지의 욕망을 불러 일으키기위한 것이지만 너무 임상 적이 어서 사용자가 추위를 느끼게합니다.

02. 청중 파악

사용자가 아이콘을 해석하는 방법을 이해하려면 몇 가지 하위 규칙이 필요합니다.

  • 가정하지 마십시오 : 우리 모두 ASS U ME를 할 때 무슨 일이 일어나는지 알고 있습니다.
  • 5W와 1H : 사용자가 누구이며 왜, 무엇을, 어떻게, 어디서, 언제 서비스를 사용하는지 알아야합니다.
  • 의미있는 은유 만들기 : 항상 모든 사람들을 기쁘게 할 수는 없지만 은유가 대다수 사용자에게 동일한 의미를 전달하지 않으면 새로운 사용자를 찾으십시오.
  • 문화적 규범을 고려하십시오. 전 세계 대부분의 국가에서 좋아요 표시는 수락의 표시로 이해됩니다. 그러나 태국에서는 누군가에게 혀를 내미는 것과 같습니다.
  • 적절한 언어 사용 : 한 국가에만 서비스를 제공하거나 서비스를 현지화 할 수있는 경우 언어 변형을 고려하십시오. 서비스가 글로벌 인 경우 적절한 아이콘은 언어 장벽을 극복하는 데 적합합니다.

Ommegang 양조장 웹 사이트에는 실제로 필요한 것보다 더 많은 아이콘이 있습니다.

Ommegang 양조장 웹 사이트에는 실제로 필요한 것보다 더 많은 아이콘이 있습니다.

03. 기획은 필수

아이콘을 만들고 전체 디자인에 통합하려면 신중한 계획과 세부 사항에 대한주의가 필요합니다.

다음 사항을 고려해야합니다.

  • 아이콘이 필요한 곳 . 디자인에서 아이콘을 사용하려는 위치를 지정하십시오. 디자인에 얼마나 중요한지 고려하십시오. 바닥 글과 같은 글로벌 섹션에서만 사용 하시겠습니까, 아니면 전자 상거래 사이트의 제품 페이지와 같은 특정 콘텐츠 유형에 간헐적으로 사용 하시겠습니까?
  • 아이콘 사용 빈도 . 두 번 이상 사용할 아이콘 수 또는 단일 아이콘의 변형 수를 고려하십시오. 아이콘의 다양한 응용 프로그램에 대해 생각해보십시오. 웹 사이트에 반응 형 디자인 프레임 워크를 사용하고 있으며 iPhone 앱도 디자인한다고 가정 해 보겠습니다. 웹 사이트와 앱에서 동일한 아이콘을 사용하거나 이러한 플랫폼을 개별적으로 제공하는 것이 가장 좋습니다.
  • 아이콘이 전체 디자인에 배치되는 방식 . 모양과 느낌의 측면에서 아이콘은 전체 인터페이스 내에서 작동해야합니다. 똑같이 중요한 것은 위치, 크기 및 사용할 수에 대한 결정입니다. 여기에는 아이콘이 다른 그래픽 요소와 함께 작동하는 방식이 포함됩니다.
  • 텍스트로 충분합니까? 세부 사항을 고려한 후에는 뒤로 물러서서 텍스트로 충분한 지 자문 해보십시오. 텍스트가 작업을 수행한다면 그렇게하십시오. 인터넷은 충분히 어수선합니다.

계속 진행하기 전에 계획 및 워크 플로의 주요 측면을 파악해야합니다.

1 단계 : 계획

깜짝 놀랄만 한 부분을 빼고 창의력을 발휘하세요. 계획에 도움이되는 다음 질문을 스스로에게 물어보십시오.

  • 전달할 메시지는 무엇입니까? 여기까지왔다면 만들려는 각 아이콘에 목적이 있으며 이제 그 목적을 전달하려는 방법에 대해 절대적으로 명확하게하는 것이 중요합니다. 아이콘은 문자 적이거나 은유적일 수 있지만 의미가 올바른지 확인해야합니다.
  • 컨벤션이 있습니까? 문자 적이든 은유 적이든 관례가 이미 존재한다면 따라야합니다. 규칙이없는 경우 다음 단계로 진행하십시오.
  • 문맥은 무엇입니까? 컨텍스트는 접착제와 같습니다. 당신의 아이콘이 맞다면, 그들은 그것에 붙어있을 것입니다. 그렇지 않으면 엄지 손가락처럼 튀어 나올 것입니다. 건축 현장에서 안전모를 착용해야 함을 나타내는 안전 표지에 익숙 할 것입니다. 맥락에서 벗어나 레스토랑의 휴대품 보관소 옆에 배치하면 방문자는 자신이 모자를 쓴다고 생각하는 것을 용서받을 수 있습니다. 관례가 존재하더라도 문맥에 의존합니다.
  • 말이 되나요? 이것은 순수한 논리이지만 세부 사항에 들어가면 관점을 잃을 수 있습니다. 사이트의 목적, 메시지, 디자인 및 컨텍스트가 일관성이 있는지 질문하는 것이 좋습니다.
  • 이미 존재합니까? 그 후에는 동일하거나 유사한 아이콘이 디자인의 다른 곳에서 이미 사용되고 있음을 알 수 있습니다. 확인하고 다시 확인하십시오.
  • 다른 곳에서 영감을 얻을 수 있습니까? 인터넷을 검색하고, 책을보고, 최신 소식, 오래된 소식, 다른 사람들이하는 일을 확인하세요. 나는 당신이 다른 사람의 작품을 복사하라고 제안하는 것이 아닙니다. 나는 당신이 그것을 찾을 수있는 곳에서 영감을 얻는 것을 제안합니다.

2 단계 : 디자인

16 픽셀 아이콘을 디자인하든 16 개 방 집을 디자인하든 스케치 패드를 꺼내는 것은 창작 과정에서 중요한 부분입니다. 해당 마우스를 클릭하면 사용 가능한 하드웨어 및 소프트웨어에 대한 창의력이 제한됩니다. 물론 하드웨어와 소프트웨어가 없다면 모바일과 웹 플랫폼을위한 디자인은 불가능하지만 디지털 방식으로 시작하지 마십시오.

글꼴, 아이콘, 색상 및 스타일은 가족 내에서 일관되고 확장 된 가족 내에서 조화를 이루어야합니다. 모든 요소가 하나의 플랫폼에서 작동하는 경우 동일한 균형을 복제하여 개별 플랫폼의 모든 디자인도 조화로운 제품군을 형성해야합니다. 그라디언트, 그림자 및 원근도 일관성이 있어야합니다.

여기에서 페이지 하단의 디자인 가운데 아이콘이 사라집니다.

여기에서 페이지 하단의 디자인 가운데 아이콘이 사라집니다.

계층 적으로 생각하고 중요한 순서대로 모든 요소를 ​​고려하십시오. HTML에서 헤더 중첩을 수행하는 것과 동일한 방식으로 접근하고 중요도 수준에 올바른 크기, 음영 및 불투명도를 적용합니다.

04. 크기가 정말 중요합니다

SVG 및 아이콘 글꼴과 같은 초기 기술의 약속은 아직 실현되지 않았으므로 지금은 크기와 확장성에 대해 생각해야합니다. 대부분의 아이콘은 .png 파일로 출력되어 픽셀 완벽을 허용하고 이전 버전 인 .gif를 크게 개선했습니다.

그러나 .png는 크기가 조정되지 않으므로 단일 아이콘을 디자인하고 크기를 조정할 수 없습니다. 이렇게하면 확대 할 때 픽셀 화가 발생하고 축소 할 때 흐릿해질뿐만 아니라 창의력을 저해하고 전체 디자인의 품질이 저하됩니다. 아이콘이 작을수록 세부 사항이 덜 필요하고 아이콘이 클수록 더 깊고 풍부한 디자인이 필요합니다. 크기에 관계없이 아이콘은 단일 디자인으로 만들어 져야하며 각 크기 반복에 맞게 미묘하게 조정되어야합니다.

특정 대상 및 컨텍스트에 맞게 디자인해야합니다. 다양한 모바일, 태블릿 및 데스크톱 플랫폼은 각 플랫폼 내에서 일관성을 위해 크기를 지정하지만 플랫폼간에 일관성이 없습니다. 그러나 파비콘은 일반적으로 16 픽셀이며 현장에서 사용할 아이콘을 디자인 할 때 상식이 우선합니다.

아이콘 디자인에 접근하는 방법에 대한 다양한 생각이 있습니다. 하향식 접근 방식은 가장 큰 화면 크기 (대부분 바탕 화면)를 가장 자세하게 디자인하고 가장 작은 크기로 가장 선명한 아이콘을 얻기 위해 각 반복을 축소하는 것입니다.

가장 작은 아이콘을 먼저 디자인 한 다음 확장 할 때 세부 사항을 추가하는 모바일 우선 접근 방식도 있습니다. 둘 다 장점이 있지만 경험이 풍부한 아이콘 디자이너가 아니라면 세부 사항을 추가하는 것보다 세부 사항을 수정하고 제거하는 것이 더 쉽기 때문에 하향식으로 작업하는 것이 가장 좋습니다.

05. 단일 아이콘 패밀리 사용

전체적인 디자인이 균일하고 평평하며 무뎌지는 것을 방지하려면 아이콘 계열 내에서 일관성의 적절한 균형을 유지하는 것이 중요합니다. 아이콘과 UI 및 기타 그래픽 요소를 결합 할 때 조화가 우세합니다. 예를 들면 Luhse Tea 's 탐색 아이콘은 응집력이 있습니다. 그들은 같은 이야기를보고 느끼고 이야기합니다. 대조적으로, JIB의 아이콘은 디자인 스타일이 같더라도 미스터리입니다.

앱의 경우 스타일과 크기에 대한 많은 결정이 이미 내려졌지만 다른 SDK 지침 뒤에있는 동일한 종류의 추론을 적용하는 것이 중요합니다. 목적을 크기와 스타일에 맞추십시오. 예를 들어 탐색에 아이콘을 사용하는 경우 크기, 스타일 및 색상을 통해 사용자가 탐색 아이콘임을 알 수 있어야합니다. 다른 경우에 동일한 아이콘을 사용하지 마십시오. 혼란 스러울 것입니다. 사용자가 사이트의 초점을 쉽게 식별 할 수 있도록하십시오. 탐색이 디자인에서 검색보다 중요하지 않은 경우 탐색 아이콘의 스타일, 크기 및 무게가 덜 눈에 띄도록하여 사용자가 검색에 집중할 수 있도록합니다. 예를 들어, GOV.UK 웹 사이트, 요소의 사용 및 위치 지정은 검색에 대한 명확한 초점을 만듭니다. 반면에 화살표를 장식 및 상호 작용 요소로 사용하는 것은 혁신 레이더 웹 사이트가 흐름을 방해합니다.

06. 바퀴를 재발 명하지 마십시오

규칙을 고수하는 것과 유사하게, 귀하의 요구를 충족하는 (또는 귀하의 요구를 거의 충족하고 약간의 조정 만 필요로하는) ​​오픈 소스 또는 기성품 아이콘 패밀리가 있다면 아마도 최선의 선택 일 것입니다. 인터넷 거물에서 일하는 경우에만 맞춤형이 가장 좋습니다. EqualEyes 맹인, 시각 장애인 및 노인이 스마트 폰에 더 쉽게 접근 할 수 있도록하는 Android 앱입니다. 오픈 소스를 사용합니다. 멋진 글꼴 대상 고객 및 플랫폼에 이상적이며 기성품이 적합한 경우의 좋은 예입니다.

Rate My Shizzle은 보완 텍스트 및 그래픽 경로를 제공하기 위해 사본 내에서 아이콘이 흐르도록 지시 사항을 따르도록합니다.

Rate My Shizzle은 보완 텍스트 및 그래픽 경로를 제공하기 위해 사본 내에서 아이콘이 흐르도록 지시 사항을 따르도록합니다.

관습을 고수하는 것이 중요하지만, 추상화의 지점이 아니라 사물에 자신의 도장을 찍을 수 있고해야합니다. 알렉산더 비 코프 멸종으로부터 크리스마스 트리를 구하기위한 캠페인 의도는 좋지만 나무 대신 화살표를 사용하여 요점을 놓칩니다. 그리고 당신이 만드는 모든 것은 브랜드 가이드 라인의 정밀한 조사를 받아야한다는 것을 기억하십시오.

07. 형식에 익숙해 지십시오.

.png는 특히 다중 플랫폼 디자인의 경우 가장 일반적인 이미지 형식이지만 다양한 형식을 이해하고 프로젝트 요구 사항을 고려하여 장점을 평가할 수있는 것이 가장 좋습니다. 다음은 간단한 개요입니다.

  • GIF : 그래픽 교환 형식 . 이미지 형식의 할아버지. 256 색만 있으면 품질이 문제입니다. GIF는 크기가 조정되지 않고 단일 투명성 만 지원하며 조기 사용 중지가 필요합니다.
  • PNG : 휴대용 네트워크 그래픽 . GIF의 후속 제품은 수백만 가지 색상으로 고품질이며 알파 투명도를 지원합니다. 그러나 GIF와 마찬가지로 PNG는 확장 가능하지 않습니다. 완전히 지원되는 대안이없는 경우 PNG가 최상의 형식입니다.
  • SVG : 확장 가능한 벡터 그래픽 . 확장 가능한 범용 벡터 그래픽이 이상적입니다. 그러나이 형식은 이전 브라우저에서 완전히 지원되지 않으며 앤티 앨리어싱 문제가 있으며 확장성에도 불구하고 하나의 크기가 여전히 모든 것에 맞지는 않습니다.

아이콘 글꼴

브라우저 간 호환성 및 전체 확장 성으로 인해 아이콘 글꼴은 실행 가능한 솔루션처럼 보일 수 있습니다. 그러나 픽셀 정밀도의 부족, 번거로운 렌더링 프로세스 및 결과적으로 의미 상 잘못된 마크 업으로 인해 이러한 작업이 중단됩니다.

CLIP STUDIO PAINT에 커스텀 브러쉬를 추가하는 방법

픽셀은 단일 측정 단위이며 모든 화면에서 여전히 가장 작은 단위입니다. 그러나 모든 픽셀이 동일하게 취급되는 것은 아닙니다. 레티 나 디스플레이와 같은 고품질 화면 기술과 결합 된 무수히 많은 다양한 화면 크기는 픽셀의 수명에 영향을 미쳤습니다. 이제 PPI (인치당 픽셀 수) 설정이 픽셀 수만큼 중요하기 때문에 화면 해상도는 더 이상 장치 크기와 관련이 없습니다.

문제를 더욱 복잡하게 만들기 위해 Android는 DP 또는 DIP (밀도 독립형 픽셀)를 도입하여 기존의 좋은 픽셀에서 벗어나지 만 그것이 지속되는지 시간이 알려줄 것입니다.

08. 다른 브랜드는 그대로 두십시오.

디자이너가 다른 브랜드의 아이콘과 로고를 가져와 자신의 디자인에 맞게 조작하는 것은 인터랙티브 세계에서 표준 관행입니다. 하지마.

이 마케터를 설득하기에는 너무 많은 소셜 미디어 그래픽이 모호하게 뻗어 있습니다. Twitter 및 Facebook 로고 매시업은 분실 전화 실험 긍정적 인 증거입니다.

Innovationsradar 웹 사이트는 두 가지 목적으로 하나의 아이콘을 사용합니다. 장식 및 상호 작용 요소 인 화살표 아이콘은 사용자 경험의 흐름을 방해합니다.

Innovationsradar 웹 사이트는 두 가지 목적으로 하나의 아이콘을 사용합니다. 장식 및 상호 작용 요소 인 화살표 아이콘은 사용자 경험의 흐름을 방해합니다.

09. 아이콘을 제자리에 유지

인터넷 전체에 나타나는 아이콘 세트가 있다고해서 반드시 사용해야하는 것은 아닙니다. 아이콘은 칙칙한 콘텐츠에 생명을 불어 넣지 만 스스로 생명을 가져서는 안됩니다. 대신 그들은 지원 역할을해야합니다. 원칙적으로 그들은 절대 중앙 무대를 차지해서는 안됩니다. 그것은 브랜드의 정체성을 위해 예약되어 있습니다.

디지털 플랫폼의 아이콘 디자인에 대한 새로운 모범 사례는 일반적으로 인정되는 디자인 원칙에서 탄생했으며 아이콘 배치에 특별한주의를 기울이고 있습니다.

  • 배경 . GIF에서 PNG 로의 진화는 투명성을 통해 유연성이 향상되었습니다. GIF의 경우 하나의 색상 만 투명하게 선택할 수 있으므로 켜기 / 끄기 스위치와 같습니다. PNG 형식에는 그라디언트, 불투명도 및 앤티 앨리어싱을 허용하는 알파 채널이 제공되었으므로 아이콘 자체 및 전체 디자인과의 통합을 고려하여 배경을 조작하여 더 큰 효과를 얻을 수 있습니다.
  • 포지셔닝 . 아이콘이있는 위치는 한 가지이지만 위치 지정의 개념은 원근, 피사계 심도, 그림자 및 치수에 관한 것입니다.
  • 대조 . 초기에 대비에 대한 몇 가지 규칙을 설정하는 것이 중요합니다. 각 아이콘 또는 아이콘 그룹이 처음에 얼마나 많은 관심을 가질 것인지 고려하면 전체 디자인에 균형 잡힌 공간 느낌을 줄 것입니다. 그렇게하지 않으면 항상 병목 현상이 발생하고 디자인이 불안정 해집니다.

10. 균형 형태와 기능

디자인의 형태와 기능은 기능보다 뒷받침하는 형태가 있고 그 반대의 경우도 마찬가지입니다. 현실은 어느 것도 다른 것보다 더 중요하지 않다는 것입니다. 멋진 아이콘을 디자인하는 것은 모양과 기능이 겉보기에 힘들지 않은 결합으로 만나는 끊임없는 균형 잡힌 작업입니다.

모든 것을 말하고 완료 한 후에는 아이콘이 단순하고 상징적이며 상징적이라면 성공할 것입니다.

말: 샌디 와스 머

샌디 와스 머 디지털 기술자, 포괄적 인 디자인 급진적, 마케팅 담당자, 작가, 연사, 정부 고문 및 가끔 잠자는 사람입니다. UX에 대한 그녀의 열정은 좋은 디자인, 특히 산업 디자인과 건축에서 영감을 얻었습니다.

이 기사는 원래 넷 매거진 문제 247.

마음에 드 셨나요? 읽어보세요!