웹 사이트, 전자 상거래 또는 응용 프로그램 색 구성표를 개발하는 방법

웹사이트, 전자상거래 또는 앱 색 구성표 개발

우리는 브랜드와 관련하여 색상의 중요성에 대해 꽤 많은 기사를 공유했습니다. 웹 사이트, 전자 상거래 사이트 또는 모바일 또는 웹 애플리케이션의 경우에도 마찬가지로 중요합니다. 색상은 다음에 영향을 미칩니다.

  • 브랜드의 첫인상과 그 가치 - 예를 들어 명품은 종종 검은색을 사용하고 빨간색은 흥분을 의미합니다.
  • 구매 결정 – 브랜드에 대한 신뢰는 색상 대비에 의해 결정될 수 있습니다. 부드러운 색 구성표는 더 여성스럽고 신뢰할 수 있으며, 거친 대비는 더 시급하고 할인이 필요할 수 있습니다.
  • 사용성 및 사용자 경험 – 색상은 심리적 생리학적 영향도 포함하여 사용자 인터페이스를 탐색하는 것이 더 쉽거나 더 어렵습니다.

색상이 얼마나 중요합니까?

  • 85%의 사람들은 색상이 구매에 큰 영향을 미친다고 주장했습니다.
  • 색상은 브랜드 인지도를 평균 80% 향상시킵니다.
  • 색상 인상은 제품의 합격 또는 불합격의 60%를 차지합니다.

웹사이트의 색 구성표를 결정할 때 함께 제공되는 인포그래픽에 몇 가지 단계가 자세히 설명되어 있습니다.

  1. 원색 – 제품이나 서비스의 에너지에 맞는 색상을 선택하십시오.
  2. 액션 컬러 – 아래 인포그래픽에는 누락되어 있지만 기본 동작 색상과 보조 동작 색상을 식별하는 것은 매우 유용합니다. 색상을 기반으로 특정 사용자 인터페이스 요소에 집중하도록 청중을 교육합니다.
  3. A추가 색상 – 추가 선택 보완하는 색상 기본 색상, 이상적으로는 기본 색상을 만드는 색상 대중적인.
  4. 배경색 – 웹사이트 배경 색상을 선택하십시오. 기본 색상보다 덜 공격적일 수 있습니다. 어둡고 밝은 모드도 염두에 두십시오.. 점점 더 많은 사이트에서 밝은 모드 또는 어두운 모드에 색 구성표를 통합하고 있습니다.
  5. 서체 색상 – 웹사이트에 표시할 텍스트의 색상을 선택하십시오. 단색 검정색 서체는 드물고 권장하지 않는다는 점을 기억하십시오.

예를 들어 우리 회사는 Highbridge 사람들이 온라인으로 드레스 구매. 우리는 대상 고객과 브랜드의 가치를 이해했으며, 브랜드가 주로 디지털이었지만 실제 제품도 있었기 때문에 인쇄(CMYK), 패브릭 팔레트(Pantone), 디지털(RGB 및 XNUMX진수).

시장 조사를 통해 색 구성표 테스트

색 구성표 선택 과정은 집중적이었습니다.

  1. 우리는 우리를 단일 색상으로 축소시킨 대상 고객과 함께 일련의 기본 색상에 대한 마케팅 조사를 수행했습니다.
  2. 우리는 목표 청중과 함께 일련의 XNUMX차 및 XNUMX차 색상에 대한 마케팅 조사를 수행하여 일부 색상 구성표의 범위를 좁혔습니다.
  3. 제품 목업(제품 포장, 목 태그, 행잉 태그)과 색 구성표를 사용한 전자상거래 목업을 제작하여 고객과 대상 고객에게 피드백을 제공했습니다.
  4. 그들의 브랜드는 계절성에 크게 좌우되기 때문에 계절적인 색상도 믹스에 통합했습니다. 이는 광고 및 소셜 미디어 공유를 위한 특정 컬렉션 또는 시각 자료에 유용할 수 있습니다.
  5. 우리는 최종 계획을 확정하기까지 이 과정을 XNUMX번 이상 거쳤습니다.

closet52 색 구성표

브랜드 컬러는 라이트 핑크와 다크 그레이이지만, 액션 컬러 녹색의 그늘이 될 것입니다. 그린은 액션 위주의 컬러라서 유저들의 시선을 액션 위주의 요소로 끌어들일 수 있는 좋은 선택이었습니다. XNUMX차 작업(흰색 배경 및 텍스트가 있는 녹색 테두리)에 대해 녹색의 역을 통합했습니다. 또한 호버 동작의 동작 색상에서 더 어두운 녹색 음영을 테스트하고 있습니다.

사이트를 시작한 지 얼마 되지 않아 방문자가 가장 끌리고 가장 많이 상호 작용하는 요소를 관찰하기 위해 마우스 추적 및 히트맵을 통합하여 단순히 보기에 좋지 않은 색상 구성표를 만들었습니다. 성능도 좋습니다.

색상, 공백 및 요소 특성

색 구성표 개발은 항상 전체 사용자 인터페이스에서 테스트하여 사용자 상호 작용을 관찰하여 수행해야 합니다. 위 사이트의 경우 매우 구체적인 여백, 패딩, 윤곽선, 테두리 반경, 도해법 및 서체도 통합했습니다.

우리는 회사가 마케팅 또는 제품 자료에 대해 내부적으로 배포할 수 있도록 전체 브랜딩 가이드를 제공했습니다. 이 회사는 브랜드 일관성이 매우 중요합니다. 이 회사는 새로운 회사이고 현 시점에서 업계에 대한 인식이 전혀 없기 때문입니다.

색 구성표가 있는 결과 전자 상거래 사이트는 다음과 같습니다.

  • Closet52 - 온라인 드레스 구매
  • Closet52 컬렉션 페이지
  • Closet52 제품 페이지

Closet52 방문

색 사용성 및 색맹

사이트 요소 간의 색상 대비에 대한 사용성 테스트를 잊지 마십시오. 다음을 사용하여 계획을 테스트할 수 있습니다. 웹사이트 접근성 테스트 도구. 색 구성표를 사용하면 앞으로 작업할 대비 문제가 있거나 사용자를 위한 몇 가지 옵션이 있다는 것을 알고 있습니다. 흥미롭게도 대상 고객과의 색상 문제 가능성은 매우 낮습니다.

색맹은 색맹이 아닌 사용자가 구별할 수 있는 일부 색상 간의 차이를 인식할 수 없는 것입니다. 색맹은 다음과 같은 영향을 미칩니다. 남성의 XNUMX~XNUMX% (약 10.5만) 및 여성의 XNUMX% 미만.

사용성.gov

WebsiteBuilderExpert의 팀은 이 인포그래픽과 함께 제공되는 자세한 기사를 웹사이트의 색상을 선택하는 방법 그것은 매우 철저합니다.

웹사이트의 색 구성표를 선택하는 방법