사용할 팔레트의 각 색을 0~100%로 준비한다. (여기서는 gray는 쿨그레이 사용)
의미를 가진 핵심적인 색. 악센트, 긍정 부정 경고의 색이 가장 중요하다
Semantic: 의미의. 언어의, 여기서는 컬러의 시각적인 문법, 구조, 위계…를 뜻한다
Visual Hierarchy를 나타내기위한 배경, 텍스트, 획의 색상을 (중요도별로 Primary, Secondary, Tertiary) 미리 지정한다.
토큰 네이밍 방법: 레벨,폰트 사이즈,행간
원문:
: 요소 간의 간격, 길이를 결정하는 규칙을 만든다
장점
우측은 8pt간격 시스템을 사용한 것, 시각적으로 일관적이고 계층구조(Hierarchy)가 더 분명해보인다. +) 예측가능성 부여 → 화면의 완성도를 높이고 사용자가 신뢰한다
(간격의 이름)+숫자/sml사이즈
디자인 요소들의 간격과 여백을 구조화하고 쉽게 배치하기 위한 용도.
화면 전체를 그리드에 끼워맞출 필요는 없다 (예: 내비게이션바를 제외한 콘텐츠 영역만)
픽셀 단위로 디자인을 해서 퍼블리셔에게 넘기면 퍼블리셔는 때에 따라 픽셀을 %로 변환해서 개발을 하는 경우가 있다.
디자이너가 %를 이해해야 되는 이유는 상대적 크기로 움직이는 반응형 디자인, 모바일 디자인할 때 % 디자인을 한다.
픽셀 단위로 디자인을 해서 퍼블리셔에게 넘기면 퍼블리셔는 때에 따라 픽셀을 %로 변환해서 개발을 하는 경우가 있다.
디자이너가 ‘%’를 이해해야 되는 이유는 상대적 크기로 움직이는 반응형 디자인, 모바일 디자인할 때 ‘%’ 디자인을 한다.
아이콘을 직접 만드는 경우 크기가 중요하다
그리드 시스템에 따라, 8배수 그리드라면 16,24,32 사이즈의 아이콘을 준비한다.
(마케팅용 아이콘은 크기가 커짐에따라 디테일이 추가된다)
프로덕트용 아이콘은 무조건 블랙만으로 표현한다
마케팅용 아이콘은 2개사용 가능, 3개이상은 아이콘이 아니라 일러스트레이션이다
픽셀그리드에 맞춰서 제작한다.(피그마에서 픽셀에 물리기 기능을 사용하면 자동으로)
또는 그리드를 만들어서 제작한다
stroke weight와 동일한 패딩을 줘서 아이콘의 무게중심과 크기, 부피를 맞춘다.(원형과 곡선은 같은 지름일 때 사각형보다 부피가 적게보인다)
일관성있는 스타일이 중요하다
Default/Selected을 나타내는 경우는 가능, 베리언트 사용
아이콘의 이름은 직관적으로 이해되게끔, 사물명칭을 사용한다.
라인의 디자인시스템 네이밍 방법
ColorPrimaryAcolor_primary_a 또는 COLOR_PRIMARY_Acolor-primary-a
사용 이유: 해상도가 다른 핸드폰에서 픽셀 계산이 발생하는데 오프셋이 발생하지 않아서 가장자리가 흐릿해지지 않는다. (0.5px이 남는다면 안티앨리어싱으로 가장자리가 흐릿하게 보이게 된다)
