구글 머티리얼 디자인 - 색상
Google Material Design - Color
구글이 2014년에 머티리얼 디자인을 발표했다. 구글이 GUI룰을 정한 이후로 색상을 이용한 계층화, 활성화 표시가 명확해졌다. 많은 웹 앱 디자인이 머티리얼 디자인을 적용했고 이러한 머티리얼 디자인 덕분에 사용자들은 훨씬 더 편리하고 균등하며 효율적인 UX를 경험하고 있다.
색상은 디자인을 할 때 굉장히 중요한 요소이다. 구글 머티리얼 디자인 가이드에서는 디자이너들에게 프라이머리 컬러와 세컨드 컬러를 정할 것을 권고한다. (물론 프라이머리 컬러로만 디자인하는 경우도 있다. )
그리고 정한 컬러에서 베리에이션을 줌으로써 디자인을 일관적이면서도 풍성하게 할 수 있다.
프라이머리 컬러
(1)브랜드 아이덴티티
프라이머리 컬러는 브랜드의 아이덴티티 BI를 나타낼 수 있는 색이다. 네이버의 초록색, 유튜브의 빨간색, 티몬의 주황색이 바로 각 브랜드의 프라이머리 컬러이다. 따라서 구글은 이러한 프라이머리 컬러는 탑바(앱바, GNB)에 적용해 브랜드의 아이덴티티를 명확히 표현할 것을 권고한다.
(2)색상표
구글의 머티리얼 디자인 색상표에서 프라이머리 컬러는 500 이상의 컬러, 쨍한 컬러를 사용하도록 권고하고 있다. 프라이머리 컬러를 정하면 그 컬러칩 안에서 명도, 채도 값을 변화시켜 베리에이션을 줄 수 있다.
(3)트렌드
2018년 트렌드 중 하나였던 그라디언트 디자인은 프라이머리 컬러에도 적용되었다. 그라디언트 컬러가 프라이머리 컬러가 될 수 있다.
(4)계층
프라이머리 컬러는 액센트 컬러보다 상위 계층에 속한다.
(5)비활성
세컨더리 컬러를 지정했을 경우, 프라이머리 컬러는 인터렉션이 없는 곳에 적용된다. 즉 프라이머리 컬러가 적용된 요소는 언터쳐블해야 한다.
세컨더리 컬러를 지정했을 경우, 프라이머리 컬러는 인터렉션이 없는 곳에 적용된다. 즉 프라이머리 컬러가 적용된 요소는 언터쳐블해야 한다.
(6)주 사용처
앱바(탑바, GNB), 푸터, 프로그레스 인디케이터, 로고, 커서, 순간 미리보기나 자동완성의 하이라이트, 체크박스 on 상태, 페이지네이션 등
세컨더리 컬러
(1)인터랙션
세컨더리 컬러는 인터랙션을 나타내는 색이라는 것이 가장 큰 특징이다. 터쳐블한 버튼, 텍스트, FAB에는 세컨더리 컬러를 적용한다.
(2)색상표
구글의 머티리얼 디자인 색상표에서 세컨더리 컬러 또한 500 이상의 컬러, 쨍한 컬러를 사용하도록 권고하고 있다. 프라이머리 컬러와 같은 명도와 채도값을 가진 컬러를 골라야 세련된 디자인을 할 수 있다.
(3)계층
세컨더리 컬러는 프라이머리 컬러보다 하위 계층에 속한다.
(4)주 사용처
FAB, 버튼, 터쳐블한 텍스트
0 개의 댓글