도상학에 대한 매우 간단한 안내서

평균적으로 사용자 정의 아이콘을 디자인하는 데 얼마나 걸립니까?

몇 분? 십분? 더 길게? 10분 안에 멋진 아이콘 10개를 만드는 방법을 알려 드리면 어떨까요?

Iconography는 브랜드의 시각적 언어에 추가되는 커뮤니케이션의 한 형태이므로 사용자 정의 아이콘 세트는 단순하고 일반적인 것보다 더 의미 있고 매력적입니다. 대부분의 디자이너는 사용자 지정 아이콘을 만드는 방법을 배우는 데 신경을 쓰지 않습니다. 주로 학습 대기열에 추가해야 할 또 다른 과정이기 때문입니다.

그래서 도상학의 기초를 10분 이내에 배울 수 있도록 아주 간단한 가이드를 만들기 시작했습니다.

사용자 지정 아이콘을 만들 수 있다는 것은 프로젝트를 위한 복잡한 모양을 만들기 시작할 수 있는 완전히 새로운 세계를 열어줄 것이며, 이는 다른 군중과 구별되고 디자이너로서 경쟁력을 제공할 것입니다.

원래 저는 Morgan Allan Knutson이 몇 초 만에 위치 서비스 아이콘을 만드는 방법을 보여주는 이 GIF로 이 가이드를 만들도록 영감을 받았습니다. 나는 그것이 상쾌하고 똑똑하고 빠르다는 것을 알았습니다. 그것은 사용자 정의 아이콘을 만드는 과정을 설명하고 그것이 얼마나 간단할 수 있는지 보여줍니다. 아이콘은 실제로 정사각형, 삼각형 또는 원과 같은 기본 모양의 조합 또는 변형으로 인해 발생할 수 있는 기하학적 모양입니다. 로고 또는 아이콘 디자인의 기본 원칙은 단순함을 유지하는 것입니다.

이 기사의 목표는 간단한 모양만 사용하여 각각 10초 안에 10개의 아이콘을 만드는 것입니다.

중요 참고 사항: 이 게시물에서는 Adobe Illustrator를 사용하지만 Sketch 또는 Figma를 사용하여 동일한 결과를 얻을 수 있습니다. 모양에 점을 추가하거나 제거해야 할 때마다 "펜 도구(P)"를 사용합니다. 포인트 선택 및 이동은 "직접 선택 도구(A)"로 수행됩니다.

눈 아이콘

그림과 같이 색상을 변경하면서 가장 큰 것에서 가장 작은 것까지 4개의 원을 가운데 정렬합니다. 가장 큰 원에서 뒤쪽으로 왼쪽과 오른쪽 점을 중심에서 멀리 당깁니다. 마지막으로 가장 작은 내부 원을 다음 원의 가장자리로 이동하여 홍채에 조명 효과를 만듭니다.

팁: 흰색 원을 사용하는 대신 각 원 아래에 있는 원에서 두 개의 원을 뺍니다(패스파인더 패널 사용). 배경에 더 깨끗한 결과를 만듭니다.

화살표 아이콘

초기 사각형의 가장자리에 추가 점을 추가하는 위치에 관한 것입니다. 팁: 대안으로 화살표 모양의 가는 선을 간단하게 그릴 수 있습니다.

배터리 아이콘

하나의 사각형을 획으로 사용하고 두 개를 채우기로 사용합니다. 채워진 사각형 하나를 획 모양에 포함하고 두 번째 사각형을 외부에 두어 배터리 팁을 형성하면서 비율을 조정하기만 하면 됩니다.

팁: 좋은 시각적 균형을 유지하려면 획 두께와 패딩을 사용하십시오.

글머리 기호 목록 아이콘

간단한 정사각형으로 시작하십시오. 오른쪽으로 한 번 복제하십시오. 긴 직사각형으로 모양을 변경합니다. 전체를 선택하고 사이에 하나의 정사각형 크기 공간을 유지하면서 두 번 복제하십시오.

팁: 정사각형을 원으로 교체하여 더 부드러운 모양을 만듭니다.

구름 아이콘

크기가 다른 세 개의 원을 그립니다. 두 개의 가장 작은 원을 아래쪽으로 정렬하여 밑면을 만들고 가장 큰 원을 그 사이에 더 높은 위치에 놓습니다. 작은 원 중 하나를 변형하여 구름의 기초를 만듭니다.

팁: 더 유기적으로 보이는 구름을 얻으려면 다양한 원 크기를 사용하십시오.

앞으로 재생 아이콘

긴 직사각형을 그립니다. 왼쪽 가장자리 중앙에 점을 추가하고 위쪽 및 아래쪽 점을 제거합니다. 이제 삼각형이 하나 있으므로 해당 모양을 오른쪽으로 한 번 복제하면 아이콘이 완성됩니다.

팁: 이 작업을 더 빠르게 수행하려면 정사각형 대신 삼각형으로 시작하면 됩니다.

깔때기 아이콘

긴 직사각형으로 시작합니다. 왼쪽과 오른쪽 가장자리의 중심에 점을 추가합니다. 이제 상단 가장자리를 수평으로 늘리면 완료됩니다.

팁: 두 개의 정사각형을 가장자리에서 가장자리로 놓고 가장 위쪽 가장자리를 수평으로 늘이면 됩니다.

재생/일시 정지 아이콘

평행한 세 개의 긴 직사각형으로 시작합니다. 가장 넓은 직사각형을 삼각형으로 변경합니다.

팁: 또는 삼각형 하나를 그린 다음 평행한 직사각형 두 개를 그립니다.

위치 화살표 아이콘

이것은 Morgan의 위치 서비스 아이콘을 리믹스한 것입니다. 사각형 하나를 그린 다음 왼쪽 하단 점을 대각선 방향으로 당기고 반대쪽 점을 지날 때까지 위쪽으로 이동하면 됩니다.

팁: Illustrator에서 Shift 키를 누른 상태에서 점을 드래그하면 대각선 각도를 올바르게 유지하면서 대칭을 유지하는 데 도움이 됩니다.

위치 핀 아이콘

더 큰 원 안에 원을 녹입니다(Pathfinder 패널 사용). 가장 낮은 지점을 아래로 똑바로 드래그하고 형성된 각도를 날카롭게 합니다. "펜 도구(P)"로 전환한 다음 "Shift" 키를 누른 상태에서 해당 지점을 클릭합니다.

팁: 티핑 포인트의 둥근 모서리를 사용하여 모양을 부드럽게 합니다. 포인트가 선택된 상태에서 "변형" 옵션 패널에서 "모서리 반경" 값을 조정합니다.

소리 아이콘

깔때기 아이콘과 같지만 90도 회전합니다.

팁: 깔때기 아이콘을 복사하여 붙여넣고 시계 방향으로 회전하기만 하면 됩니다.

웨이브 아이콘

직선을 그리고 길이에 걸쳐 같은 거리에 점을 추가합니다. 변경점을 아래로 드래그하고 모든 모서리가 부드러워질 때까지 최대한 둥글게 만듭니다.

팁: 더 매끄러운 모양을 위해 선 끝을 둥글게 만듭니다.

토탈 아이콘

이것은 보너스 아이콘입니다.

충분히 두꺼운 획으로 사각형을 그립니다. 가위 도구를 사용하여 오른쪽 상단과 왼쪽 하단 지점을 자릅니다. 이렇게 하면 모양이 둘로 나뉩니다. 아래쪽 절반을 위로 이동하고 전체를 시계 반대 방향으로 45도 회전합니다.

Tip: 선의 굵기와 로고 내부의 여백에 주의하세요.

아이콘은 1,000단어의 가치가 있습니다.

우리는 종종 이미지가 천 마디 말의 가치가 있다는 말을 듣습니다. 글쎄, 이것은 시각적 공간, 사용성 및 미적 감각을 최적화하기 위해 긴 문장과 단어를 대체하는 아이콘에 매우 많이 적용됩니다. 간단하고 효과적인 아이콘 세트를 만드는 방법을 아는 것은 먼 길을 갈 수 있습니다. 그리고 우리는 기본 도형 세트를 관찰하고 활용하여 얼마나 빠르고 쉽게 만들 수 있는지 보았습니다.

요약하면, 도상학의 10가지 주요 규칙은 다음과 같습니다.

• 상징적이고 의미있게 만드십시오.
• 당신은 그것을 들었습니다 : 간단하게 유지하십시오. 스타일은 가독성을 손상시키지 않아야 합니다.
• 의도적이고 사려 깊은 사람이 되십시오. 만들기 전에 생각하십시오.
• 다른 크기에서 작동하는지 확인하십시오.
• 획일성을 염두에 두십시오.
• 벡터만 주세요!
• 필요한 경우에만 색상을 사용하고 신중하게 사용하십시오.
• 기본 기하학을 아는 데 도움이 됩니다.
• 디자인된 아이콘이 전체 디자인에 도움이 되도록 "어포던스"를 생각하십시오.
• 도상학은 보편적이어야 하는 언어입니다.
• 보너스: 알파벳은 26개의 아이콘 세트일 뿐입니다.

함께 플레이하고 10초 이내에 무엇을 생각해낼 수 있는지 확인하세요.

• • •

Toptal Design 블로그에 대한 추가 정보:

• 전자 상거래 UX – 모범 사례 개요(인포그래픽 포함)
• 제품 디자인에서 인간 중심 디자인의 중요성
• 최고의 UX 디자이너 포트폴리오 – 영감을 주는 사례 연구 및 사례
• 모바일 인터페이스에 대한 경험적 원리
• 예측적 디자인: 마법 같은 사용자 경험을 만드는 방법