가능성의 스펙트럼: Go-to UI 색상 가이드

방법이 없습니다. 색상은 시각 디자인에서 가장 영향력 있는 창의적 요소입니다. 세트 디자인의 매혹적인 풍경 배경에서 픽셀 아트의 복잡한 구성에 이르기까지 색상에 대한 확실한 이해는 설득력 있는 커뮤니케이션의 마스터 키입니다. 증거가 필요하십니까?

최근 브랜드 중심 연구에 참여한 참가자들에게 10개의 상징적인 기업의 로고를 그려야 했을 때 정확한 모양과 디자인 특징을 기억할 수 있었던 사람은 16%에 불과했습니다. 그러나 브랜드의 색상 팔레트를 식별하도록 요청했을 때 정답의 수는 최대 80%까지 치솟았습니다.

색상은 또한 사용자 인터페이스 디자인 세계에서 영향력 있는 역할을 합니다. 우리가 매일 상호 작용하는 디지털 제품은 중요한 정보를 전달하기 위해 전략적으로 색상을 사용하므로 UX 및 UI 디자이너가 색상을 현명하게 사용하는 방법을 이해하는 것이 중요합니다.

이 가이드에서는 다음을 수행합니다.

• 색 이론의 기초를 이해하고,
• 디지털 인터페이스에서 색상 작업을 위한 견고한 원칙 제공,
• 색상 인식 구축에 유용한 리소스를 공유하고
• UI 디자이너가 자신만의 놀라운 색 구성표를 만들 수 있도록 지원합니다.

이 가이드의 목표는 우리가 매일 접하는 사용자 인터페이스에서 놀라운 색상 실행을 위한 색상 능력과 색상 자신감입니다.

단기집중과정: UI 디자이너를 위한 색상 이론

색상 이론은 자체 용어, 방법론 및 과학적 토대가 있는 광범위한 연구 분야입니다. 복잡할 수 있지만 그것은 우리가 원하는 것이 아닙니다. 우리가 원하는 것은 번개처럼 빠른 정확도로 적용할 수 있는 색상에 대한 이해입니다. 우리는 모양을 사용하는 방식으로 색상을 쉽고 대담하고 효과적으로 사용하기를 원합니다.

이러한 방식으로 색상을 사용하려면 UI 디자이너가 다음과 같은 핵심 색상 이론 개념을 확실히 이해하고 있어야 합니다.

• 색상은 상대적입니다.
• 채도 과부하는 색상 선명도를 죽입니다.
• 동시 대비에는 장단점이 있습니다.
• 기본 색 구성표가 가장 좋습니다.
• 색조는 항상 가치에 영향을 미칩니다.

파헤쳐 봅시다.

색상은 상대적입니다.

색상은 결코 단독으로 존재하지 않습니다. 인간의 눈과 뇌는 함께 색을 볼 때 다음의 영향을 받습니다.

• 색상에 빛나는 빛
• 색상을 둘러싼 다른 색상

자연에서 이 예를 확인하십시오.

A: 뇌와 눈은 함께 작용하여 꽃 전체가 실제로는 밝은 빨간색임을 이해하도록 돕습니다.

B & C: 꽃 그림자(B)의 짙은 갈색은 꽃잎 능선(C)의 하이라이트를 실제의 칙칙한 적갈색보다 훨씬 밝게 나타냅니다. 본질적으로 꽃잎의 능선에 빛나는 빛과 그림자의 색상이 함께 작용하여 눈을 속이고 하이라이트를 강화합니다.

다음은 색상이 얼마나 기만적일 수 있는지 보여주는 또 다른 예입니다.

UI 디자인에서 색상 상대성은 항상 명확하지 않으므로 구성표 내의 색상을 서로 테스트해야 합니다. 왜요? 스타일 가이드에서 아름답게 배열된 색상 선택이 인터페이스에 적용될 때 문제가 될 수 있기 때문입니다.

큰 테이크 아웃? 색상 개념을 복잡하게 만들지 마십시오. Sketch에서 공백으로 둘러싸인 노란색 악센트 견본이 무성해 보이지만 UI의 주요 색상 구성표와 충돌하는 경우 다른 솔루션을 찾으십시오.

채도 오버로드는 색상 선명도를 죽입니다.

색상 채도는 색상 선명도에 필수적입니다. 그러나 채도가 높은 색상만을 중심으로 구성된 구성표가 눈을 압도하고 생동감이 떨어집니다. 색상은 적을수록 좋습니다. 채도가 높은 색상은 채도가 낮은 색상과 함께 사용하면 생생해집니다.

동시 대비에는 장단점이 있습니다

동시 대비는 정확히 같은 값의 색상 보색이 서로 인접하게 배치될 때 발생합니다. 효과가 너무 강렬하여 두 색상이 만나는 지점이 진동하거나 펄스합니다.

UI 디자이너의 경우 동시 대비는 긍정적인 결과와 부정적인 결과를 모두 가질 수 있으므로 이 시각적 현상의 잠재력을 제어하는 ​​방법을 이해하는 것이 중요합니다.

예를 들어 다양한 파란색을 중심으로 설계된 인터페이스에서 파란색 앵커 색상과 동일한 값을 가진 보색 주황색을 사용하면 알림 아이콘에 주의를 집중시킬 수 있습니다.

그러나 동일한 주황색과 파란색 콤보를 드롭다운 메뉴의 텍스트와 배경에 사용하면 편두통을 유발할 수 있습니다.

기본 색 구성표가 가장 좋습니다.

무지개는 자연에서 아름답습니다. UI 디자인에서 색상은 더 선택적으로 사용되어야 하며 그렇지 않으면 경험을 압도합니다. 브랜드에 다양한 옵션이 있는 효과적인 팔레트가 있는 경우에도 단순한 색 구성표를 중심으로 사용자 인터페이스를 구축하고 억제하는 것이 가장 좋습니다.

다음은 기본 UI 색 구성표를 구축하기 위한 두 가지 확실한 계획입니다.

1. 유사한 UI 색 구성표

• 이러한 눈을 즐겁게 하는 구성표는 색상환에서 밀접하게 그룹화된 색상으로 구성됩니다.
• 유사한 색 구성표는 자연 환경, 특히 식물의 사진에서 쉽게 찾을 수 있으며 시각적으로 차분한 경향이 있습니다.
• 유사 구성표의 다양성은 주요 색조 변화가 아니라 채도와 밝기의 변화에서 비롯됩니다.
• 유사한 구성표를 사용할 때 인터페이스 내에서 강조를 만들기 위해 색상환에서 직접 채도가 높은 색상 하나를 추가해 보십시오.

2. 보완적인 UI 색 구성표

• 보색 구성표는 색상환에서 서로 건너편에 존재하는 차갑고 따뜻한 색상을 보완하는 상호 작용을 기반으로 합니다.
• 색상 다양성은 보완 극단 사이의 채도와 밝기를 변경하여 달성됩니다.
• 밝고 채도가 높은 색상을 너무 많이 사용하면 보색 구성표의 영향이 약화됩니다.

색조는 항상 가치에 영향을 미칩니다

이상하게 들릴 수 있지만 색상에는 해당하는 회색 값이 있습니다. 다음은 증거입니다.

위의 이미지에는 밝기와 채도가 100%인 색조 범위가 있지만 이러한 색상이 회색조로 변환될 때 어떤 일이 발생하는지 살펴보십시오.

팔! 전체 범위의 회색 값이 나타납니다. 이것이 UI 디자이너에게 중요한 이유는 무엇입니까? 한 단어: 대조 .

잠시 마음을 회색조로 바꾸십시오. 대비를 만들려는 경우 50% 위에 40% 회색 값을 사용하시겠습니까? 물론 그렇지는 않지만 색상 대비 방정식에서 색조를 제외하면 위험이 따릅니다.

색조는 항상 가치에 영향을 미친다는 것을 기억하십시오.

디지털 인터페이스를 위한 4가지 필수 색상 원칙

이제 색상 이론을 단순화하고 핵심 개념을 UI 디자인과 연결했으므로 디지털 인터페이스에서 색상이 하는 역할에 대해 좀 더 집중적으로 살펴볼 때입니다. 이것은 모든 UI 디자인 프로젝트의 초기 노력에서 고려해야 하는 4가지 색상 원칙입니다.

1. 텍스트와 색상의 관계는 매우 중요합니다.
2. 색상 접근성을 무시할 수 없습니다.
3. 대비는 필수적이지만 디자인이 만병통치약은 아닙니다.
4. 색상은 비율에 맞게 적용할 때 가장 잘 나타납니다.

텍스트와 색상의 관계는 중요합니다

색상은 가독성에 영향을 줍니다. 대부분의 UI 디자이너는 원칙적으로 이것을 이해하므로 빨간색 배경에 녹색 본문 텍스트가 있는 인터페이스가 많이 표시되지 않습니다. 대신 텍스트와 색상 사이의 긴장이 미묘하게 나타나 양식, 버튼, 헤더 및 아이콘과 같은 일반적인 UI 구성 요소를 통해 스며듭니다.

다음의 간단한 지침에 따라 건강한 텍스트/색상 관계를 유지하십시오.

• 항상 텍스트와 배경 사이의 낮은 대비를 피하십시오.
• 특히 색상의 밝기와 채도가 비슷한 경우(예: 보라색 배경에 노란색 텍스트) 텍스트와 배경에 보색을 사용하지 마십시오.
• 흰색 배경에서도 본문 텍스트를 밝은 색상으로 설정하지 마십시오. 검정색과 짙은 회색이 가장 읽기 쉽습니다.

색상 접근성을 무시할 수 없습니다

색상은 의사 소통이 가능하지만 UI에서 정보를 전달하는 데 사용되는 유일한 디자인 요소는 아닙니다. 왜 안 돼? 일부 웹 사용자는 대다수의 인구와 다르게(또는 전혀) 색상을 인식하지 않기 때문입니다.

예를 들어 색맹을 경험한 사람은 아이콘의 유일한 차이점이 색상 변경인 경우 제품 아이콘이 "눌린" 상태에 있을 때 구분하지 못할 수 있습니다.

또한 일부 사람들은 인터페이스의 배경과 색상 대비가 낮은 중요한 UI 구성 요소를 보는 데 어려움을 겪습니다. Colorable 및 Contrast Ratio와 같은 사이트를 통해 디자이너는 대비 접근성을 위해 다양한 색상 조합을 빠르게 테스트할 수 있습니다.

대비는 필수적이지만 디자인의 만병통치약은 아닙니다.

네, UI 디자인에서 색상 대비는 중요합니다. 계획하고, 실행하고, 혜택을 받으십시오. 그러나 마술 지팡이처럼 그것을 흔들고 잘못된 디자인을 고칠 것이라고 기대하지 마십시오.

모양, 공간, 크기 및 기타 디자인 요소를 무시해서는 안 됩니다. 색상 대비는 끔찍한 UI를 매력적으로 보이게 만들 수 있지만 나쁜 사용자 경험을 해결하지는 못합니다.

색상은 비례적으로 적용될 때 가장 잘 작동합니다.

모든 텍스트 인스턴스가 제목 케이스에 설정되어 있는 뉴스 앱이나 9x9 이미지 그리드로 설계된 전자 상거래 웹사이트를 상상해 보십시오. 둘 다 끔찍할 것입니다!

정통한 UI 디자이너는 디자인 계층을 향상시키기 위해 타이포그래피와 반복과 같은 디자인 요소를 비례적으로 사용합니다. 색상도 마찬가지로 신중하게 고려할 가치가 있습니다. UI 디자인에서 너무 많은 색상을 사용하면 정보가 인식되는 방식이 혼동됩니다.

지속적인 발전을 위한 컬러 리소스

여기에 불편한 진실이 있습니다. 색상으로 디자인하는 것은 기술이며 기술은 개발되어야 합니다. 대부분의 UI 디자이너는 어떤 색상이 잘 어울리는지(색상 취향이라고도 함) 타고난 감각을 가지고 있지만 이것이 항상 응용 프로그램으로 변환되는 것은 아닙니다.

색상을 진정으로 마스터하고 UI 디자인에 대한 완전한 영향을 확인하려면 디자이너가 연습을 해야 합니다. 운 좋게도 지속적인 색상 학습 및 기술 구축에 도움이 되는 리소스가 많이 있습니다.

Ctrl+페인트

즉각적인 색상 자신감을 얻고자 하는 UI 디자이너라면 디지털 페인팅 교육 전용 웹사이트인 ctrlpaint.com에서 시작하십시오. 디지털 페인팅? 진짜?

전적으로. 전문 컨셉 아티스트 Matt Kohr는 빠른 비디오 자습서와 실습을 통해 디지털 색상 사용을 가르칩니다. 교과 과정은 놀라울 정도로 단순하며 실제 세계와 상상 모두에서 "보이는 것을 그리는 것"에 중점을 둡니다.

무료 비디오 라이브러리(섹션 11)부터 시작하여 Color Starter Kit 에서 보다 집중적인 연습으로 이동하십시오.

Josef Albers와 컬러 앱의 상호 작용

색상 상대성에 대한 현대적 이해는 예술가/교육자 Josef Albers의 이론 이전 접근 방식에 의해 많이 탐구되고 발전되었습니다.

Albers는 단일 색상이 "여러 면"을 가질 수 있다고 제안했으며, "눈이 열려" 색상이 실제 세계에서 실제로 작동하는 것처럼(우리가 상상하는 상징적 색상과 반대) 볼 수 있기를 희망하면서 학생들에게 광범위한 놀이와 실험을 권장했습니다. 우리의 마음에).

1963년 Albers는 세계 미술 및 디자인 교육에 계속 큰 영향을 미치고 있는 교과서 Interaction of Color 를 저술했습니다. 책 출판 50주년을 기념하기 위해 Yale University는 전체 텍스트가 포함된 대화형 iPad 앱을 출시했지만 사용자는 Albers의 색상판을 가지고 놀고 실험할 수 있습니다.

UI 디자이너에게 Interaction of Color 앱은 디지털 환경에서 아날로그 색상 연습을 경험하고 색상 상대성이 사용자 인터페이스에 어떤 영향을 미치는지 직접 확인할 수 있는 기회를 제공합니다.

앤드류 루미스

20세기 전반기에 Andrew Loomis는 시카고에 있는 American Academy of Art의 저명한 삽화가이자 강사였지만 그의 지속적인 유산은 작가의 것입니다. Loomis는 상업 예술과 디자인에 관한 6권의 책을 저술했으며 그림 그리기에서 제품 배치에 이르기까지 다양한 주제를 다루었습니다.

그의 저서 Creative Illustration 과 Eye of the Painter (둘 다 archive.org에서 사용 가능)에서 Loomis는 UI 디자인의 현대 분야와 여전히 관련이 있는 몇 가지 지속적인 라인을 삭제합니다.

색상의 가장 큰 실수이자 통일성과 조화의 부족을 초래하는 것은 팔레트에 너무 많은 색상이 있다는 것입니다.

하나 또는 둘 다에 다른 색상이 포함되어 있으면 두 색상이 조화를 이룹니다.

색상은 아름다움의 다른 어떤 요소보다 실험에 적합합니다.

다른 디자이너의 인터페이스

기본 수준의 색 능력에 도달하면 색 구성표 생성이 매혹적인 추구로 꽃을 피웁니다. 만나는 모든 인터페이스는 학습과 비판의 기회가 되며 관찰이 풍부합니다.

다른 디자이너의 작업을 참조하는 것이 힘이 되는 UI 디자이너의 발전 단계입니다. 어때요? 참조는 목적지에서 여정으로, 끝점에서 영감으로 이동하기 때문입니다.

모든 기술 수준의 UI 디자이너는 발견된 UI 색 구성표를 지속적으로 기록함으로써 이점을 얻을 수 있습니다. 스크린샷을 찍고, 실제 색상 저널을 유지하고, 무드 보드를 시작하는 등 향후 구현을 위해 색상 조명의 순간을 각인하는 데 필요한 모든 것이 가능합니다.

색상은 무시하기에는 너무 중요합니다.

디지털 인터페이스 디자인과 관련하여 색상은 선택 사항이 아닙니다. 최소한의 색상을 사용하는 UI(또는 완전히 흑백인 UI)에서도 UI 디자이너는 색상이 사용되거나 사용되지 않는 이유 와 이것이 사용자 경험에 미치는 영향을 이해하는 것이 필수적입니다.

UI 디자이너가 독창적인 색 구성표를 생성하고 구현할 수 있는 능력도 중요합니다. 다른 디자이너의 작업과 디지털 제품을 참조하는 것은 가치 있는 작업이지만 디자인 프로세스 중에 수행되는 유일한 색상 탐색 방법인 경우 제한이 있습니다. 실제 세계 또는 마음의 눈으로 볼 수 있는 색상 조합을 캡처할 수 있다는 것은 엄청난 가치가 있습니다.

색상을 능숙하게 사용하는 데 어려움을 겪는 디자이너이거나 "나는 색상에 소질이 없다"고 생각한 적이 있다면 낙담하지 마십시오. 색상으로 디자인하는 것은 일종의 창조적인 마법이나 특별한 재능이 아닙니다. 반복하고 개선할 수 있는 간단한 기술에 기반을 둔 실용적인 학문입니다.

색상은 명확하고 설득력 있는 디자인 커뮤니케이션의 마스터 키임을 기억하십시오. 신중하게 구현하든 무모하게 포기하든 상관없이 전환, 브랜드 인지도 및 사용자 경험에 영향을 미칩니다. UI 디자이너에게 색상은 단순히 무시할 수 없는 강력한 도구입니다.

• • •

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

1. UX에서 색상의 역할
2. 더 나은 UX를 위한 UI 스타일 가이드 만들기
3. UX와 웹 접근성의 중요성
4. 예술 대 디자인 – 시대를 초월한 논쟁
5. 인터랙티브 환경 및 스마트 공간을 위한 디자인