웹 스타일 가이드의 사용자 문서를 작성하는 방법

스타일 가이드는 브랜드의 시각적 요소에 대한 사용 규칙을 제시합니다. 많은 사람들이 만든 콘텐츠에서 일관된 이미지를 유지하려는 조직에서 일반적으로 사용합니다. 웹 스타일 가이드는 다양한 기술 수준을 가진 사용자가 온라인 컨텐츠를 작성하고 편집 할 경우 특히 중요합니다. 조직과 관련된 웹 페이지에 대한 특정 규칙을 설정하면 모든 페이지에서 전문적이고 일관된 ID를 보장 할 수 있습니다. 스타일 가이드를위한 사용자 문서를 작성할 때 명확하고 간결한 언어를 사용하고 웹 디자인 기술 수준이 가장 낮은 사용자에게 글을 씁니다.

1.

각 페이지 유형에 대한 웹 레이아웃 및 스타일에 대한 전반적인 설명과 함께 설명서를 엽니 다. 특정 페이지 카테고리는 조직에 따라 다르지만 방문 페이지, 제목 페이지, 홈페이지, 하위 카테고리 페이지, 이미지 전용 페이지 및 텍스트 전용 페이지를 고려하십시오. 구조 다이어그램을 사용하여 복잡한 정보 계층 구조를 설명하고 각 레이아웃의 예를 보여주는 그래픽을 포함하십시오.

2.

다른 유형의 웹 페이지에서 로고를 사용하는 방법을 설명하십시오. 사용자가 로고를 어디에 배치해야하는지 알려주고 크기의 상한 및 하한을 나열하십시오. 로고 레이아웃과 색상이 여러 개인 경우 사용할 수있는 장소를 나열하십시오. 로고 마크 만 사용하는 것은 예를 들어 제목에서 조직의 전체 제목을 사용하는 페이지에서 허용 될 수 있습니다. 사용자가 올바른 버전을 쉽게 저장할 수 있도록 치수와 함께 로고 파일을 설명서에 포함하십시오. 무단 편집을 방지하기 위해 로고의 색상, 모양, 크기 또는 레이아웃을 변경하지 말 것을 경고하는 문장으로 텍스트를 닫으십시오.

삼.

모든 조직의 웹 페이지에서 사용해야하는 특정 글꼴을 나열하십시오. 제목, 부제목, 제목, 본문, 캡션 및 따옴표에 글꼴을 포함하십시오. 각 범주에 대해 글꼴 이름, 크기 및 굵게, 기울임 꼴, 밑줄 또는 대문자로 배열하십시오.

4.

조직의 오프라인 스타일 가이드에 웹 예외에 대해 작성하십시오. 텍스트 내 링크를 표시하는 방법이나 페이지 끝 부분에 외부 소스를 포함할지 여부와 같이 인쇄물에 문제가없는 요소를 포함하십시오. 귀하의 그룹이 좀 더 비공식적 인 온라인 스타일을 가지고 있다면, 웹 사본을 작성할 때 사용자가 어떻게 톤을 얻는 지 설명하십시오.

5.

페이지를 디자인 할 때 사용자가 사용할 수있는 색상을 알려줍니다. 각 텍스트 유형, 사진 개요, 머리글, 탐색 모음 및 페이지 구분 기호의 색상을 나열하십시오. 일관성을 보장하기 위해 특정 RGB 색상 코드를 제공하십시오. 색상은 브랜드 이미지를 표현하고 명시된 색상 만 사용하여 전체 사용자 경험을 보존 할 수있는주의 사항을 나타내는 강력한 방법이라는 것을 사용자에게 설명하십시오.

6.

조직 웹 페이지에 사진 사용 규칙을 배치하십시오. 모든 페이지에 특정 디자인이있는 경우 사용자가 사진을 저장할 위치를 설명하십시오. 용도에 따라 필요한 픽셀 크기 (예 : 텍스트 사진, 헤더 사진 또는 사이드 바 사진)를 나열하십시오. 웹 사이트를보다 쉽게로드하려면 특정 이미지 해상도를 지정하십시오. 웹의 경우 72 dpi가 표준입니다. 속도를 최적화하기 위해 사용자가 웹 사이트에 이미지를 배치하기 전에 이미지를 자르고 크기를 조정하고 편집하도록 알려줍니다.

7.

각 페이지 유형에 있어야하는 필수 명령문 또는 설계 요소를 설명하여 문서를 닫으십시오. 기회 균등 고용 진술 및 저작권 고지와 같은 항목을 포함하고 사용자가 페이지의 정확한 게재 위치를 알 수 있도록합니다. 페이지에 그래픽이나 이미지가 나타나면 배치 요구 사항을 나열하고 즉시 다운로드 할 파일을 제공하십시오.