design
1.0.0
3.1 한 페이지에 한 페이지에 3 개 이상의 서체를 사용하지 마십시오.
왜? 단일 페이지에 사용되는 다양한 서체는 제대로 정의되지 않은 브랜드를 보여 주며 게으르고 어수선한 것처럼 보일 수 있습니다. 최대 3 개의 다른 서체 (로고, 헤더, 신체 함량)에 3 개의 다른 서체를 사용할 수 있습니다.
3.3 일관된 유형 계층 구조를 유지하십시오. 유형 계층 구조를 개발하기 위해 소수의 글꼴 크기와 하나 또는 두 개의 글꼴 무게 만 사용해야합니다. HTML 헤더 태그 H1, H2, H3 등을 생각해보십시오. 텍스트의 중요성을 나타 내기 위해 밝기, 크기 및 무게의 변형을 사용하여 적어도 4 가지에 대한 뚜렷한 시각적 스타일이 있어야합니다. 유형 계층의 훌륭한 예는 Apple의 휴먼 인터페이스 지침을 확인하십시오.
[3.4] 신체 텍스트를 정상적인 체중과 간격으로 유지하십시오. 텍스트는 항상 읽을 수 있어야하므로 대형 헤더 또는 글꼴 무게가 텍스트의 가독성에 거의 영향을 미치지 않는 경우에 빛이나 대담한 글꼴을 예약하십시오. 또한 신체 텍스트의 라인 간격을 1.15 ~ 1.5 (크기에 따라)로 유지하여 가독성을 극대화하십시오. 예를 들어,이 기사에는 대략 1.5 REM 라인 간격이 있습니다. 신체 단락을 정당화하는 것도 아프지 않습니다.
3.1 신체 배경은 항상 회색 음영이어야합니다
왜? 색깔의 배경, 매우 어두운 회색조차도 눈에 쉽게 긴장을 줄 수 있습니다. 웹 페이지 또는 응용 프로그램의 텍스트 본문과 같은 중요한 컨텐츠의 경우 사용자가 페이지를 쉽게 읽고 inteppet 할 수 있습니다.
3.3 대부분의 경우 이미지, 색상 또는 그라디언트 배경에서 흰색 텍스트를 사용하십시오. 필요한 경우 텍스트에 매우 가벼운 드롭 그림자 (<= 10% 불투명도)를 적용하십시오.
왜? 흰색에있는 것은 종종 더 호소력 있고 변형을 만들기가 더 쉽습니다. 컬러 배경에 사용하기 위해 어두운 색상을 결정하는 것은 종종 어려울 수 있습니다. 그러나 선택한 색상 콤보에도 액세스 할 수 있는지 확인하십시오.
3.4 절대 블랙을 사용하지 마십시오.
왜? 순수하고 불투명 한 검은 색 (#000)은 대부분의 웹 페이지에서 종종 너무 가혹합니다. Github의 바디 글꼴 색상조차도 #000이 아닌 #24292E입니다. 의심스러운 경우 숫자 웹-안전 그레이 스케일 육각 코드 ( #111, #222 ... #AAA, #BBB 등)를 사용할 수 있습니다.
3.5 컬러 구성 요소가 서로 경계하지 않도록하십시오.
왜? 색상이 서로에게 매우 강한 보완이 아니라면 종종 두 개의 이웃 색상의 대비가 페이지의 흐름을 깨뜨리는 편광과 분열을 만들 수 있습니다. 내비게이션 바가 컬러 영웅을 만질 수있는 경우, 대신 투명한 Navbar 배경을 선택하십시오.
모든 구성 요소에서 일관성을 유지하십시오. 페이지의 광원을 정의한 후에는 모든 그림자가 방향을 따릅니다. 빛이 135도에서 페이지를 "치는"경우, 모든 그림자와 그라디언트는 135도에서 떨어야합니다. 계층 또는 상태를 제시하는 도구로 그림자를 사용하십시오. 그림자는 페이지 구성 요소를 강조 표시하거나 페이지 구조를 제공하거나 상태를 나타내는 데 사용해야합니다. 예를 들어, 색상을 변경하는 대신 높이를 낮추면 버튼을 눌러 눌 수 있습니다. 너무 많은 그림자가 너무 많은 차원을 나타낼 수 있으므로 조심하십시오 (예 : 18 개의 고유 한 고도가있는 사이트를 만들지 마십시오). 그림자의 오프셋은 블러 반경의 약 절반과 같아야합니다. 예를 들어, x / y 오프셋이 10px 인 그림자의 반경은 약 20px의 블러가 있어야합니다. 이 접근법은 가장 정통한 그림자를 만듭니다. 항상 그림자의 불투명도를 25%미만으로 유지하십시오. 미묘한 측면에 오류가 있으므로 디자인을 방해하지 마십시오. 어두운 배경을 사용하는 경우 경우에 따라 가시성을 보장하기 위해 그림자의 불투명도를 높이야 할 수도 있습니다. 그림자가 항상 검은 색 일 필요는 없습니다. 컬러 표면에 그림자를 사용할 때는 그림자의 혼합을 향상시키기 위해 배경색의 매우 어둡거나 둔한 변형을 사용하는 것이 유리합니다.
