UX에서 색상의 역할

색상 심리학을 이해하는 것은 디지털 디자인에서 잘 작동하는 색상 팔레트를 만드는 핵심 측면입니다. 일부 디자이너는 색상을 순전히 미학적 선택으로 생각하기도 하지만 실제로는 디자인이 사용자와 UX에 미치는 심리적 영향의 핵심 구성 요소입니다.

잘 생각한 색상 팔레트는 디자인을 "좋은"에서 "훌륭한"으로 끌어올릴 수 있는 반면, 보통이거나 나쁜 색상 팔레트는 사용자의 전반적인 경험을 손상시키고 사이트나 앱을 사용하는 능력을 방해할 수도 있습니다.

일반적으로 색상 이론은 복잡한 주제이고 UX 디자인에서 색상을 사용하는 것은 단순히 보기 좋은 팔레트를 만드는 것 이상을 다룹니다(예: 접근성 및 동일한 색조 내에서도 다른 음영의 심리적 효과). 디자이너는 전체 프로세스를 다시 생각할 필요 없이 디자인에 더 나은 색상 사용을 점진적으로 통합할 수 있습니다. 디자이너가 기본 사항을 다뤘다면 색상 이론에서 가장 보람 있는 부분 중 하나는 예상치 못한 색상을 디자인에 통합하는 방법을 배우는 것입니다.

색상의 심리학

색상 이론과 색상이 사용자에게 미칠 수 있는 심리적 효과는 복잡하고 종종 주관적인 주제입니다. 그러나 보다 보편적인 수준에서 다룰 수 있는 특정 측면이 있습니다.

기본 색상(1차, 2차 및 3차)의 일반적인 의미, 전통적인 색상 팔레트 및 색상 의미의 문화적 변화와 같은 것은 모두 매우 간단합니다. 디자이너는 이러한 기본 사항을 쉽게 배우고 작업에 적용할 수 있습니다. 그러나 UX 디자인 에서 색상을 사용하는 것과 관련하여 배워야 할 세부 사항이 있습니다.

인터페이스 색상의 정서적 영향을 간과해서는 안 됩니다. 일부 색상은 UX 디자인에서 "보편적"인 반면(검정, 흰색, 회색 등, 거의 모든 좋은 디자인에 이 중 적어도 하나가 사용됨), 이들이 결합된 색상은 UX 디자인에 큰 영향을 미칠 수 있습니다. 사용자의 인식.

물론 색상이 사용되는 방식도 색상이 인식되는 방식에 극적인 영향을 줄 수 있습니다. 예를 들어, 현대적이고 미니멀한 디자인에서 기본 색상으로 사용되는 파란색은 더 복잡하고 기업 디자인에서 강조 색상으로 사용되는 동일한 파란색과 매우 다른 느낌을 줍니다.

색상의 문화적 차이

디자이너가 간과하는 경향이 있는 한 가지 문제는 다양한 색상 주변에 존재할 수 있는 문화적 차이입니다. 예를 들어, 많은 서구 문화에서 흰색은 순결, 순수, 희망과 관련이 있습니다. 그러나 아시아 일부 지역에서는 흰색이 죽음, 애도, 불운과 관련이 있습니다.

일부 색상은 문화에 관계없이 일반적으로 긍정적인 의미를 갖는 반면(예: 주황색) 흰색과 같은 다른 색상은 국가마다 크게 다릅니다. 이것은 가능한 한 많은 청중에게 어필할 수 있는 디자인을 만들려고 할 때 디자이너의 삶을 확실히 복잡하게 만들 수 있습니다.

디자이너는 제품이나 웹사이트의 대상 고객을 기반으로 색상 팔레트의 문화적 의미를 살펴보는 것이 중요합니다. 제품이 전 세계 청중을 대상으로 하는 경우 부정적인 문화적 의미를 방지하기 위해 사용되는 색상과 이미지의 균형을 유지해야 합니다. 제품이 주로 특정 문화만을 대상으로 하는 경우 디자이너는 선택한 팔레트가 다른 문화에 미칠 수 있는 영향에 덜 주의를 기울일 수 있습니다.

브랜드에 맞는 UX 색상

브랜드 가치는 색상 팔레트를 만드는 데 중요한 역할을 해야 합니다. 그러나 그것들이 유일한 중요한 요소는 아닙니다. 경쟁업체에서 이미 사용하고 있는 색상과 마찬가지로 업계 표준도 중요합니다. 브랜드의 주요 경쟁 제품과 거의 동일한 색상 팔레트를 사용하는 것은 혼란을 야기하고 브랜드가 눈에 띄지 않도록 하는 좋은 방법입니다.

물론 여기에는 예외가 있습니다. 예를 들어 맥도날드와 웬디스를 보자. 두 패스트푸드점은 직격탄을 맞고 있다. 그리고 둘 다 빨간색과 노란색 색상 팔레트를 사용합니다. 그러나 그들의 로고를 보면 Wendy의 로고는 주로 빨간색에 노란색 악센트가 있는 반면 맥도날드는 그 반대입니다. 그들의 포장은 또한 이러한 색상을 다른 방식으로 사용하여 브랜드를 더욱 차별화합니다. 이 때문에 포장에서 로고와 기타 식별 표시를 제거하더라도 어느 쪽도 다른 쪽과 쉽게 혼동되지 않습니다.

브랜드의 가치를 지원하는 브랜드 컬러 팔레트를 만드는 첫 번째 단계는 다양한 색상의 의미를 이해하고 색상을 더 밝게/밝게/어둡게/덜 어둡게 만드는 방법을 이해하는 것입니다. 영향을 줄 수 있습니다. 다양한 색상이 의미하는 바에 대한 기본 분석은 다음과 같습니다.

• 빨간색 — 빨간색은 위험과 열정, 흥분의 색입니다. 그것은 매우 강한 색으로 사람들에게 강한 반응을 불러일으킬 수 있습니다. 핑크로 밝게 하면 여성스럽고 로맨틱하게 하고, 적갈색으로 어둡게 하면 차분하고 전통적인 느낌이 난다.
• 주황색 — 주황색은 모험과 젊음과도 관련된 매우 창의적인 색입니다. 그것도 아주 활기차게. 오렌지는 70년대 스타일과의 끈이 강해 레트로한 느낌을 주기도 한다.
• 노란색 — 노란색은 행복하고 낙관적이며 쾌활합니다. 어린이와 성인 모두를 위한 디자인으로 인기가 있습니다. 더 많은 파스텔 색조는 종종 젠더 중립적인 베이비 컬러로 사용되는 반면 밝은 노란색은 창의적인 디자인에서 인기가 있습니다. 노란색의 어두운 색조는 부와 성공과 관련된 금이 됩니다.
• 녹색 — 녹색에는 다양한 연관성이 있습니다. 한편으로는 부와 전통(특히 어두운 색조)의 느낌을 불러일으키며, 다른 한편으로는 환경주의 및 자연과 강하게 연관되어 있습니다. 라임 그린은 종종 재생 및 성장과 관련이 있습니다.
• 파란색 — 파란색은 가장 자주 충성도와 신뢰와 관련이 있습니다. 더 밝은 블루스는 의사소통과 관련될 수 있고, 더 어둡고 어두운 블루스는 슬픔 및 우울증과 관련될 수 있습니다. 파란색은 세계에서 가장 보편적으로 사랑받는 색상으로, 많은 회사에서 브랜드에 파란색 음영을 선택하는 이유를 설명할 수 있습니다.
• 보라색 — 보라색은 다양한 의미를 지닌 또 다른 색조입니다. 그것은 오랫동안 왕족과 부와 연관되어 왔습니다(자주색 염료는 많은 고대 문명에서 드물었기 때문에 왕족을 위해 예약되었습니다). 그러나 그것은 또한 신비와 영성과 관련이 있습니다. 보라색은 또한 창의성을 불러일으킬 수 있습니다.
• 블랙 — 블랙은 세련미와 고급스러움을 의미합니다. 그러나 그것은 또한 슬픔과 부정과 연결될 수 있습니다. 블랙과 함께 사용되는 다른 UX 색상에 따라 모던하거나 전통적, 포멀하거나 캐주얼하게 느껴질 수 있습니다.
• 흰색 — 흰색은 순결, 순진함 및 긍정과 관련이 있습니다. 흰색은 중립성과 단순성으로 인해 미니멀리스트 디자인에서도 매우 인기가 있습니다. 검은색과 마찬가지로 흰색은 함께 사용되는 다른 색상의 특성을 쉽게 취합니다.
• 회색 — 회색은 문맥에 따라 다양한 의미를 갖습니다. 보수적이고 세련되거나 칙칙하고 둔할 수 있습니다. 감정이 없거나 변덕스러울 수 있습니다. 그것은 또한 슬픔과 슬픔과 관련될 수 있습니다.
• 브라운 — 브라운(실제로 오렌지의 어두운 음영)은 땅에 닿아 접지된 것과 관련이 있습니다. 그것은 또한 자연 및 심지어 아늑함과 관련이 있습니다. 물론 더럽거나 거추장스러운 것과 관련이 있을 수 있습니다.

이러한 기본 색상 의미를 알면 디자이너는 모든 브랜드 또는 제품에 대한 색상 팔레트를 구축할 수 있는 견고한 기반을 얻을 수 있습니다.

그러나 색상 이론은 일부는 과학이고 일부는 예술입니다. 색상이 일반적으로 특정 느낌이나 분위기와 관련되어 있다고 해서 다른 색상과 결합하거나 정확한 색조를 변경하거나 다른 디자인 요소에서 사용되는 방식을 변경하여 다른 방식으로 인식할 수 없다는 의미는 아닙니다.

틀에 박힌 UX 색상 사용

UX 색상의 틀에 박힌 사용은 브랜드를 차별화하는 좋은 방법입니다. 그리고 디자이너가 결합하고 싶어하는 오래된 색상을 단순히 결합하는 것보다 더 많은 기교가 필요하지만 UX 디자인에서 예기치 않은 색상을 사용하는 방법을 배우는 것은 그리 어렵지 않습니다.

액센트 색상은 틀에 얽매이지 않는 색상을 디자인에 추가할 때 가장 쉽게 시작할 수 있는 곳입니다. 예를 들어, 법률 회사 웹사이트는 남색과 회색의 전통적인 색상 팔레트를 사용할 수 있습니다. 그러나 약간의 라임 그린 악센트를 추가하면 갑자기 디자인이 남색 및 회색 웹사이트를 가진 다른 법률 회사의 바다와 구별됩니다. 또는 흰색, 회색 및 연두색 색상 팔레트를 사용하여 다른 법률 산업 사이트와 확실히 구별되는 현대적인 웹 사이트를 만드는 Hogan Lovells의 이 예를 보십시오. 일반 법률 사이트보다 젊고 현대적인 군중에게 어필할 것입니다.

Berdan Real Estate는 예상치 못한 색상 팔레트를 사용하는 또 다른 사이트입니다. 부동산 사이트는 노란색과 복숭아 색조를 사용합니다. 둘 다 일반 부동산 사이트(파란색, 빨간색 및 녹색이 많이 사용되는 곳)보다 훨씬 더 에너지가 넘칩니다.

보험은 일반적으로 현대적이고 획기적인 산업으로 생각되지 않지만 그렇다고 해서 보험 설계가 불가능하다는 의미는 아닙니다. 레모네이드의 웹사이트는 자홍색 액센트가 있는 회색과 흰색 색상을 사용합니다. 위험을 감수하는 것으로 알려져 있지 않은 업계에서는 전혀 예상치 못한 일입니다.

영감에 사용할 수 있는 웹에서 실제로 사용되는 비전통적인 UX 색상의 다른 많은 예가 있습니다.

60-30-10 규칙

60-30-10 규칙은 균형이 잘 잡히고 시각적으로 흥미로운 색상 팔레트를 만들기 위한 간단한 이론입니다. 아이디어는 일반적으로 상당히 중립적인(문자 그대로 또는 심리적으로) 한 가지 색상이 팔레트의 60%를 구성한다는 것입니다. 또 다른 보색은 팔레트의 30%를 구성합니다. 그런 다음 세 번째 색상이 디자인의 나머지 10%에 대한 악센트로 사용됩니다.

이 방법을 사용하면 디자이너가 업계 또는 브랜드 내에서 예상되는 표준을 너무 많이 벗어나지 않고도 기존에 없던 색상 팔레트로 실험을 시작할 수 있습니다. 예상치 못한 색조를 추가하면 특정 회사에서 기대하는 바에 맞는 디자인을 높일 수 있습니다. 또한 경쟁사보다 훨씬 더 진보적인 브랜드 팔레트를 만들기 위한 첫 번째 단계가 될 수 있습니다.

결론

색상 이론은 복잡한 주제이지만 기본을 배우는 것은 특별히 복잡하지 않습니다. 거기에서 디자이너는 지식을 바탕으로 디자인을 위한 보다 다양하고 정교한 색상 팔레트를 만들 수 있습니다.

잘 디자인된 색상 팔레트, 특히 예상치 못한 색조가 포함된 색상 팔레트는 단순히 미학적 선택이 아닙니다. 사용자에게 상당한 심리적 영향을 미칠 수 있으며, UX 디자이너는 더 나은 경험을 만들기 위해 이를 활용해야 합니다.

• • •

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

• 디자인 심리학과 멋진 UX의 신경과학
• 어두운 UI. 좋은 것과 나쁜 것. 해야 할 일과 하지 말아야 할 일.
• 지속 가능한 제품 디자인을 위한 감성 브랜딩
• 영감을 사용하십시오 - 무드 보드 가이드
• 설득력 있는 디자인: 고급 심리학을 효과적으로 사용하기