◆url
◆ 내용 요약
pxd의 디자인 시스템 시리즈 중 6편 - 기본 시각 요소 설계 시 알아 두어야 할 것들
컬러, 타이포그래피, 그리드, 레이아웃, 아이코노그래피를 설계할 때 알아 두어야 할 점을 실무 관점에서 알려줌
다양한 환경에 대응할 수 있는 브랜드 컬러를 정의하자디지털 화면의 특성을 충분히 반영해야한다. 보통 밝은 배경색 기준으로 정의된 브랜드 컬러가
다크모드에서는 적합하지 않다.
∙ 라이트 모드의 브랜드 컬러를 기계적으로 적용하기 보다 다크 모드에 맞춰진 브랜드 경험과 주목도를 전달하도록 시각 보정한 사례 - 트위치
프라이머리 컬러와 스테이터스 컬러를 명확하게 구분시키자.프라이머리 컬러 : 제품의 전체적인 인상을 결정짓는 역할
스테이터스 컬러 : 경고, 정상 상태 등의 상태정보를 색상 본연의 의미를 통해 빠르게 전달하는 역할
두가지의 컬러가 겹치는 경우 문제가 발생함.
∙ 프라이머리 컬러가 레드인 넷플릭스의 경우 스테이터스 컬러는 시각적으로 확실히 구분되는 톤다운된 오렌지로 사용하고 있음
행간 간격, 그리드는 함께 생각하자전통 웹디자인의 그리드와 다르게 모바일 화면에서는 세로의 리듬이 매우 중요하다. 그리드를 설계할 때부터 이를 염두에 두어야 한다.
∙ 본문의 행간부터 시작하자 : 본문의 크기와 행간을 정한 후 이를 기준으로 확장해 나가는 방식을 추천.
∙ 간격의 모듈 : 큰 간격의 모듈일수록 서로 많은 차이를 가지도록 설계하는 것이 좋다. 어디에 사용할지 혼동을 줄일 수 있다.
검증된 종횡비를 레이아웃에 적용하자모바일에서 세로를 어떻게 자르느냐는 어떤 가로/세로 종횡비를 가지게 될 것인가와 같은 의미를 가진다.
∙ 익숙한 황금비율(≒ 2:3),3:4,16:9등의 비율을 사용해 보라. 모든 곳에는 무리지만 시각적, 경험적으로 중요한 영역에 우선적으로 시도하라.
브랜드 요소를 닮은 아이콘을 그리자심플하면서 독창적인 형태를 갖는 방법
∙ 로고나 서체 등 브랜드의 다른 요소들을 살펴보고 그 특징적인 형태를 아이콘에 적용하라.
◆ 느낀점
새삼 모든 기본기가 중요하다는 말이 생각난다. 기본을 잘 다져놓으면 그 다음은 대부분이 괜찮다. 앞두고 있는 디자인시스템 구축은
비주얼적 요소의 일관성을 목표로 하고 있는데, 약간의 품질상향조정을 노리고 있다. 이 아티클의 조언을 참고해서 기초가 탄탄해짐으로 인한 품질향상을 목표해봐야겠다.