디자인 팀 / 개발 팀이 제품 전반에 걸쳐 일관성 있고,
목적있게 색상을 사용할 수 있도록 돕는 색상 프레임워크를 만들어 봅시다.
원문 링크입니다 : https://medium.com/prototypr/a-framework-to-create-accessible-and-harmonious-color-system-for-faster-design-dev-handoff-8138b3a9604d
1단계: UI 색상의 접근성(대비) 검사
액세스할 수 없는 색상 조합을 기록하고 팔레트에서 지우십시오.
나중에 결정을 내리기가 쉬워집니다.
2단계: UI 색상의 의미론(시맨틱) 검사
게슈탈트의 유사성의 원리는 모양, 크기, 색상, 질감, 가치 또는 방향과 같은
시각적 특성을 공유하는 사물이 함께 속하는 것으로 간주된다는 것입니다.
링크와 버튼을 사용하면 사용자가 클릭하고 일부 액션을 수행할 수 있습니다.
4가지 다른 파란색 음영으로 표시되어야 할까요?
지배적이며 클릭을 의미하는 유일한 색상(혹은 유이한)색상이 없을까요?
테두리(border)는 컴포넌트, 테이블 및 섹션을 포함하는 데 도움이 됩니다.
따라서 콘텐츠를 포함하는 것과 동일한 목적을 수행합니다.
정말 테두리가 3가지 다른 회색 음영으로 표시되어야 하나요?
팔레트에 얼마나 많은 색상이 있나요?
의미론적 검사를 수행한 후 각 팔레트에 실제로 필요한 색상의 수를 정확히 알 수 있습니다.
3단계: 모든 팔레트의 색상 조화 검사
Colors harmonize if they are variations in lightness and chroma within a single hue (monochromatic harmony)
참고: https://www.handprint.com/HP/WCL/tech13.html
handprint : color harmony & design
The unsaturated, dark values are an important aspect of the design, as they make the scarlet flowers "pop" (appear by contrast relatively brighter and more saturated). All the normally bright or light valued colors, such as whites or yellows, have been dar
www.handprint.com
위 글은 너무 어려움. 이거 보자 : https://www.designer-note.com/design-color_harmony-1/
[Design] 색을 어떻게 적용해야 하는가? 색을 조화롭게 배색하는 공식! – 비전공자를 위한 디자인
‘어떤 색을 사용할 것인가? 주제(Concept)에 맞는 컬러를 찾는 방법!‘에서 기획의 콘셉트에 맞는 주제색을 색의 의미를 통해 찾아보는 방법을 알아보았습니다. 색의 배색(Color Combination) = 색의 조
www.designer-note.com
HSB 모델을 사용하여 기존의 모든 팔레트가 조화로운지 평가합니다.
HSB는 인간이 읽을 수 있는 가장 논리적인 색상 모델입니다.
다른 색상 모델은 해당 값을 조정하여 색상 결과가 어떻게 변경되는지에 대한 완전한 이해를 제공하지 않습니다.
4단계: UI의 각 색상 팔레트에 대해 1개의 색조(hue) 선택
파란색 색상 매핑
다른 모든 팔레트에 대한 색상 매핑
특별 케이스 : 회색 팔레트
5단계: 모든 색조의 값 결정
텍스트가 다른 배경색에 어떻게 나타나는지 시각적으로 확인하여 배경색을 완성합니다.
WCAG 색상 대비 검사기로 접근성 검사를 수행하여 선택한 배경색에 가장 적합한 텍스트 색상을 완성합니다.
다른 팔레트에 대해서도 비슷한 방법을 따랐습니다.
색조에 관계없이 명도와 채도가 같으면 색상이 조화를 이룹니다(뉘앙스 조화)
접근성이 안좋거나 시각적으로 거슬리는 경우만을 예외로
가능한 모든 종류의 hue에 동일한 S 또는 B 값을 사용하고자 했습니다.
3가지 색상 적용 지침
지침 1: 텍스트 색상과 배경 색상 쌍 정의, 그리고 테두리 색상
지침 2 : 파생된 상태 (like hover & active)
파생 상태는 종종 원래 색상보다 약간 더 밝거나 약간 어두운 색상을 사용합니다.
lighten() 또는 darken()과 같은 CSS 전처리기(SASS 또는 LESS) 함수를 사용하여 파생된 상태 색상을 계산할 수 있습니다.
“선택의 수가 늘어날수록 결정을 내리는 것이 기하급수적으로 어려워집니다.” — 힉스의 법칙
지침 3: 모든 UI 컴포넌트에서 동일한 상태에 대해 동일한 색상 적용
결론
위 과정을 통해 얻은 것은 다음과 같습니다.
- 제한된 값과 제한된 적용 규칙(힉스의 법칙)을 가진 색상 시스템
- 매우 쉽고 논리적으로 기억할 수 있음(게슈탈트의 유사성 원칙)
- 개발자는 Zeplin과 같은 다른 도구에서 목업들을 검사하는 데 시간을 할애할 필요가 없습니다.
- 개발자가 색상 시스템 적용 방법과 규칙에 대해 이해하고 있기 때문에, 개발-디자인 팀 간 소통 비용 감소
- 디자이너가 모든 색상을 체크할 필요가 없어짐
- 접근성 색상 대비 지침을 준수하는 색상 시스템
참고 자료
https://medium.com/eightshapes-llc/light-dark-9f8ea42c9081
Light & Dark Color Modes in Design Systems
Model decisions that flow through a UI component catalog
medium.com
https://medium.com/eightshapes-llc/color-in-design-systems-a1c80f65fa3
Color in Design Systems
16 Tips for Setting Up a System That Endures
medium.com
https://m3.material.io/theme-builder#/custom
Material Design
Build beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams build high quality digital experiences.
m3.material.io
https://yeun.github.io/2016/03/21/rgb-and-hsb.html
heeyeun | RGB와 HSB
최근에 동료 디자이너에게 HSB의 Brightness 값이 상대적이라는 개념을 설명할 일이 있었다. 마침 비슷한 주제로 세미나를 했던 적이 있어서 그때 썼던 키노트를 활용하려고 했는데 다시 보니 설명
yeun.github.io
https://www.designer-note.com/design-60-30-10_rule-1/
[Design] 색 구성 비율의 균형을 조화롭게 맞추는 공식, 60-30-10 법칙! – 비전공자를 위한 디자인 노
‘중요한 디자인 구성요소에는 중요한 컬러를 적용‘에서 디자인을 구성하는 색의 역할에 대해서 알아보았습니다. 주제색(Primary Color): 주인공 역할을 하는 색, 브랜드 컬러(Brand Color)강조색(Accen
www.designer-note.com
'FrontEnd' 카테고리의 다른 글
| 보다 탄력적인 웹을 위한 점진적 향상[Progressively enhance for a more resilient web] (0) | 2022.10.14 |
|---|---|
| The Web’s Next Transition(웹 애플리케이션 아키텍처의 미래) (0) | 2022.10.14 |
| [CSS] Spacing(간격) 프레임워크 구축 (0) | 2022.10.13 |
| [CSS] 타이포그래피 프레임워크 구축 (0) | 2022.10.12 |
| UI 치트 시트 : 간격의 우정(UI cheat sheet: Spacing friendships) (0) | 2022.10.11 |
