웹 사이트 스타일 가이드 만들기

이 기사는 웹 디자이너와 개발자를위한 세계에서 가장 많이 팔리는 잡지 인 .net 잡지 219 호에 처음 게재되었습니다.

스타일 가이드 란? 간단히 말해, 이야기를 전달하는 방법을 알려주는 문서입니다. 쓰기 규칙, 음성, 인쇄 처리, 시각적 요소 및 상호 작용 결정을 설정합니다. 스타일 가이드 인쇄 세계에서 시작되었습니다. 예를 들어 모든 신문에는 하나가 있습니다. 가디언 즈 ). 그리고이 개념은 웹 프로젝트에 크게 이전 할 수 있음이 입증되었습니다.

인쇄와 온라인의 핵심은 콘텐츠입니다. 콘텐츠를 명확하고 일관되게 만들고 한 목소리로 노래하도록하는 것이 스타일 가이드의 목표입니다. 웹 사이트 스타일 가이드의 환상적인 예는 BBC 글로벌 경험 언어 (GEL) .



BBC Global Experience Language (GEL)는 웹 사이트 스타일 가이드의 좋은 예입니다.

BBC Global Experience Language (GEL)는 웹 사이트 스타일 가이드의 좋은 예입니다.

시스템 이야기

잘했다면, 스타일 가이드는 웹 사이트 프로젝트의 자서전처럼 읽어야합니다. 그러면 다른 사람들이 사이트를 이해하고 상호 작용하며 확장 할 수 있습니다. 한 사람 (또는 팀)이 프로젝트에 대해 축적 한 모든 지식과 경험을 흑백으로 배치합니다. 스타일 가이드는 디자인 시스템의 이야기를 전달하고 디자인 사고를 설명하며 팀의 다른 사람들이나 미래의 팀이 조치를 취할 수 있도록합니다.

이 모든 것을 공식 문서에 기록하는 이유 : 본능적으로 알고 있어야하지 않습니까? 글쎄, 당신이 모든 것을 스스로하지 않는다고 가정하면 (비즈니스 전략, 연구, 콘텐츠 전략, UX, 디자인, 구축, 엔지니어링, QA 및 출시), 다른 사람들에게 넘겨야 할 시점이 있습니다.

인터랙션 디자이너로서 우리는 사용자 인터페이스가 완료되고 사이트가 구현 준비가되면이 작업을 종종 수행합니다. 그리고 그것은 무서운 순간이 될 수 있습니다.

이 시나리오가 친숙하게 들립니까? Photoshop 또는 Fireworks에서 완벽하게 제작 된 디자인이 있습니다. 모든 픽셀은 그것이 속한 곳이고, 라인 높이는 완벽하며 색상은 의미가 가득합니다. 훌륭합니다.하지만 웹 사이트를 구축하지 않는 경우 디자인의 모든 요소를 ​​구현할 다른 회사 또는 프런트 엔드 개발자의 다른 내부 부서에 어떻게 전달합니까?

믹서기에서 도시를 만드는 방법

그 과정에서 내린 모든 중요한 디자인 결정을 생각해보십시오. 60 % 불투명도 콘텐츠 상자를 완벽하게 구성하는 미묘한 1 픽셀 회색 연필 선입니다. 20 픽셀 패딩, 40 픽셀 여백, ... 음, 모든 것.

그리드 및 수직 리듬과 같은 보편적 인 요소로 시작하는 것이 필수적입니다.

그리드 및 수직 리듬과 같은 보편적 인 요소로 시작하는 것이 필수적입니다.

일관성

우리는 디자인에 수천 가지 다른 결정을 내 렸습니다. 각 명백한 요소와 모든 생략 된 요소는 의미를 가지며 사용자 경험에 영향을줍니다. 이 모든 것을 문서화하려면 실제 디자인을 만드는 데 오랜 시간이 걸립니다. 이것은 우리 고객이 지불하기를 원하는 것이나 프로젝트를 완료하기 위해 우리가 정말로 시간을 보내고 싶은 것이 아닙니다.

스타일 가이드를 통해이 원을 정사각형으로 만들 수 있습니다. 모든 픽셀의 위치를 ​​지정하는 대신 프로젝트의 모든 사람이 따라야 할 일반적인 디자인 원칙을 설정합니다. 이렇게하면 프로젝트에서 더 이상 작업하지 않아도 디자인 비전이 유지됩니다.

포토샵 이미지를 뒤집는 방법

인터페이스의 모든 요소에는 일관성이라는 공통점이 하나 이상 있어야합니다. 그들은 만들어지고 더 큰 디자인 시스템의 일부가 된 디자인의 본질을 살며 숨을 쉬어야합니다. 귀하의 사이트를 사용하는 사람, 심지어는 특히 다양한 기기에서 모든 것이 잘 어울리는 것처럼 느껴야합니다.

Nathan Borror로서 좋은 게시물 2009 년에 인터페이스 조화에 대해 '올바르게 수행되면 인터페이스 일관성은 눈에 띄지 않아야합니다.'라고 말합니다. 인터페이스 조화는 사용자가 왜 그토록 유쾌한 지 모를 정도로 기쁨을 만들어야한다고 말하고 싶습니다.

내 스타일 가이드에 '인터페이스 조화 캔버스'를 통합하여 Borror의 개념을 한 단계 더 발전 시켰습니다. 프로젝트에 참여하는 모든 사람이 사이트의 모든 요소를 ​​세분화하여 볼 수 있도록합니다. 빠른 구현을 위해 각 요소의 모든 상태가 코드 조각과 함께 노출됩니다.

이 접근 방식에서 발생할 수있는 부수적 인 이점은 느슨한 패턴 라이브러리를 설정하는 것입니다. 물론 각 요소의 시각적 디자인은 프로젝트마다 변경되어야하지만 패턴은 변경되지 않아야합니다. 효율성을 위해 만세!

스타일 가이드를 시작하기 위해 프로젝트가 끝날 때까지 기다리지 마십시오. 디자인 프로세스 전반에 걸쳐 작업해야하며 진행하면서 신중하게 추가해야합니다. 요소를 만들 때 고려하여 스타일 가이드 폴더에 배치하는 것은 다음과 같은 항목을 설정하는 좋은 습관입니다.

  • 스타일 타일
  • 범용 그리드
  • 와이어 프레임
  • 개발되는 인터페이스 하모니 캔버스

DrupalCon Chicago 사이트 디자인에 오버레이 된 범용 그리드를 통해 포지셔닝을 빠르게 이해할 수 있습니다.

DrupalCon Chicago 사이트 디자인에 오버레이 된 범용 그리드를 통해 포지셔닝을 빠르게 이해할 수 있습니다.

(이미지 제공 : Palantir.net. DrupalCon Chicago 프로젝트에 대한 추가 정보는 http://www.palantir.net/experience/drupalcon-chicago )

커뮤니케이션에 관한 모든 것

디자인의 세부 사항에 얽매이기 쉽지만 디자인 자체는 메시지를 전달하기위한 것임을 기억하세요. 질문에 대한 응답, 비즈니스 문제, 조직의 문제 ... 뭔가 거시적입니다. 디자인 자체에 접근해야하는 것과 거의 같은 방식으로 디자인 결정을 전달해야합니다.

Mark Boulton은 자신의 'A Richer Canvas'라는 제목의 블로그 게시물 :“디바이스에 관계없이 웹용 네이티브 레이아웃 디자인을 수용하려면 캔버스에서 레이아웃을 만든다는 생각을 버리고 콘텐츠에서 레이아웃을 만들어야한다고 생각합니다. 밖.'

즉, 더 큰 요소로 스타일 가이드를 시작해야합니다. 세분화 된 수준뿐만 아니라 전 세계적 수준에서 디자인 요소에 대해 생각하도록 강요하면 디자인이 더욱 조화를 이룬다는 것을 알게 될 것입니다.

지금까지 우리는 디자인 구현 방법을 전달할 때 스타일 가이드가 더 높은 수준의 항목으로 시작하여 더 자세한 자산이나 스프라이트로 내려 가야한다는 것을 확인했습니다. 전혀 익숙하지 않나요? 예, CSS (캐스 케이 딩 스타일 시트)와 마찬가지로이 모든 것의 핵심은 캐스케이드 – 캐스 케이 딩 스타일 가이드입니다.

MailChimp 사이트는 UI 패턴 라이브러리에 대한 멋진 작업으로 인해 시각적으로 잘 작동합니다.

MailChimp 사이트는 UI 패턴 라이브러리에 대한 멋진 작업으로 인해 시각적으로 잘 작동합니다.

계단식 스타일 가이드

CSS의 논리가 어떻게 작동하는지 스스로 상기시켜 봅시다. 일반적으로 스타일 시트의 맨 위에있는 항목에 스타일을 적용하면 해당 스타일이 아래로 '계단식'되어 더 구체적인 항목이 추가 될 때까지 그 아래에 관련된 모든 항목에 적용됩니다.

기본적으로 일반적으로 큰 그림 항목부터 시작한 다음 진행하면서 점점 더 세부 정보를 추가합니다. 큰 그림 항목은 정의되었으므로 반복 할 필요가 없습니다. 이것은 CSS에서 작동하며 디자인 스타일 가이드를 만드는데도 매우 유용합니다.

이러한 논리를 따름으로써 시스템이 처음에 설정되고 초기 항목이 방향을 정의 할 수 있습니다. 예를 들어, 그리드가 정의되면 그리드를 '끊는'요소에 대해서만 이야기하면됩니다.

새로운 맥북 프로 터치 바 케이스

여기에서는 웹 디자인 구현 스타일 가이드의 흐름에 대한 기본 개요를 제공합니다.

01. 개요

프로젝트, 접근 방식 및 솔루션에 대한 간단한 설명. 여기에서 중요한 '이유'와 사람들이 일반적으로 눈을 뜨고 있어야하는 사항에 대해 이야기 할 수 있습니다. 사이트의 분위기와 목소리를 설정할 수있는 완벽한시기입니다. 여기에서 프로젝트의 콘텐츠 전략에 대해 약간 이야기 할 수 있습니다.

02. 레이아웃

그리드, 일반 레이아웃 배치 및 블록 배치. 특정 전역 요소가 배치 된 위치, 가로 간격 및 열 (있는 경우) 처리 방법은 모두 여기에서 답해야 할 질문입니다. 이것은 또한 아내 프레임이 포함되어야하는 곳입니다.

03. 브랜딩

이 섹션에서는 색상 팔레트, 글로벌 브랜드 그래픽 및 브랜딩 제한에 대해 설명합니다.

04. 타이포그래피

여기서는 유형의 특정 크기를 다루지 않습니다. 사용되는 글꼴과 선택한 이유를 설명하고 더 큰 특수성을 제공하기위한 몇 가지 구현 예를 제공합니다.

05. 탐색

텍스트 링크, 기본 내비게이션, 드롭 다운, 하위 내비게이션, 내비게이션 버튼, 검색 창 ... 사용자가 사이트에서 자신의 길을 찾을 수 있도록하는 모든 것을 여기서 다루어야합니다. 우리는 훨씬 더 높은 수준의 세부 사항에 도달하기 시작했습니다. 링크 색상, 처리, 텍스트 장식 등을 여기에 입력해야합니다. 당신에게 분명해 보일지 모르지만, 나는 그것이 분명하지 않다는 가정하에 운영합니다. 저는 디자이너가 내린 디자인 결정을 원하고 코더가 내린 코딩 결정을 원합니다. 말이 되는군요.

06. HTML 요소

제목 (h1, h2, h3), 목록, 덱 카피, 버튼 텍스트, 양식, 필드 세트, 테이블 등. 기지를 다룰 수 있도록 모든 프로젝트에 대해 다시 참조 할 수있는 포괄적 인 목록이 있으면 좋습니다. 다시 말하지만, 일관된 시스템을 사용하면 프로젝트에서 작업을 두 번 수행해야하는 두통과 시간을 절약 할 수 있습니다.

07. 평균

1994 년 이전의 코딩 시대가 아니라면 (무슨 말인지, Netscape에 대해 모르십니까?) 디자인에 다양한 유형의 미디어를 포함 시켰을 것입니다. 글쎄, 사이트 전체의 이미지와 비디오 비율은 무엇입니까? 표준 비율을 사용 했습니까? 클라이언트가 사용할 CMS를 기반으로 고려해야 할 이미지 캐시 설정이 있습니까? 마지막은 약간 괴상하지만 제가 작업하는 대부분의 프로젝트에서 발생하므로 항상 염두에 둡니다.

08. 자산

이것은 실제로 세부적인 세부 사항에 들어가기 위해 깊이 파고 들어야하는 곳입니다. 악마는 세부 사항에 있습니다. 이전 7 개 섹션에서 적절하게 다룰 수 없었던 모든 맞춤 설정을 여기에서 구체화해야합니다. 독특한 상황에서 다른 블록 요소는 어떻게 처리됩니까? 검색 실패 후 사이드 바 광고 또는 검색 결과 페이지는 어떻습니까? 스레드가 있거나 선형 일 때 주석은 어떻게 표시됩니까? 사진 갤러리는 사이트 전체에서 어떻게 보이고 작동합니까? 이 단계에서도 반복 가능한 패턴이나 요소를 찾는 것이 중요합니다. 우리는 예산을 완전히 낭비하고 싶지 않습니다.

09. 인터페이스 하모니 캔버스

모든 것을 하나로 모아서, 이것은 모든 상태가 표시된 모든 요소가있는 하나의 거대한 캔버스 또는 HTML 페이지입니다. 프로젝트가 진행됨에 따라 코드 스 니펫을 포함하거나 추가 할 수 있다면 엄청난 보너스입니다. 가이드의이 부분의 목적은 두 가지입니다. 개발자가 구현을 위해 요소를 파악할 수있는 빠른 참조와 모든 요소가 완벽하게 조화를 이루는 것을 확인할 수있는 곳입니다.

10. UX 문서

나는 이것이 약간 광범위한 제목이라는 것을 알고 있지만 다루어야 할 광범위한 영역입니다. 사이트 맵, 와이어 프레임, 라이브 인 경우 링크가 포함 된 프로토 타입 스크린 샷, 페르소나 등 프로젝트 초기에 제작 된 기본 결과물을 포함하는 것이 중요합니다. 종종 이러한 초기 결과물은 사이트의 기능, 목적 및 상호 작용을 정의하는 데 도움이되었으며 계속해서 도움이되었습니다.

스타일 가이드에서 참조 할 요소 중 하나는 스타일 타일입니다.

스타일 가이드에서 참조 할 요소 중 하나는 스타일 타일입니다.

스타일 가이드 사용

이러한 제안 사항을 따르고 스타일 가이드를 완료 한 후에는 서랍에 그대로두고 무시하지 않도록하십시오. 프로젝트 관리 소프트웨어를 사용하는 적절한 사람에게 게시하거나 관련 이메일 스레드에서이 문서를 확인해야하는 모든 사람을 포함 시키십시오. 누가 포함해야할지 잘 모르겠 으면 스타일 가이드에 액세스 할 수 있어야한다고 생각하는 기술 책임자, 프로젝트 관리자 및 프로젝트 스폰서 (소유자)에게 문의하세요. 사이트 구현 작업, 디자인 시스템 확장 또는 콘텐츠 제작 작업을하는 모든 사람을위한 기본 문서입니다. 목표는 모든 것이 함께 잘 작동하고 기대를 충족하거나 초과하는 것입니다. 여기에는 팀의 노력이 포함됩니다.

마야 캐릭터 리깅 방법

배포가 끝이 아니라는 점을 기억하세요. 스타일 가이드의 중요성에 대해 계속 이야기하세요. 그들이 당신의 문화와 작업 흐름의 일부가 될수록 더 많은 사람들이 그들을 참조 할 것입니다. 또한이를 통해 프로젝트를 진행할 때 이들을 최우선으로 유지하여 다른 사람에게 의사 결정을 전달해야 할 필요성을 기억할 수 있습니다.

레이어를 통해 PSD에 문서를 포함하고 명확하지 않다고 가정합니다. 아무도 마인드 리더가 아닙니다. 이것은 우리 직업 전반에 적용되어야하는 좋은 UX 만트라 일뿐입니다.
표준과 관례는 새로운 솔루션을 내놓는 데 방해가되는 것이 아닙니다. 좋은 아이디어와 그렇지 않은 것을 결정하는 데 도움이됩니다. 그의 책에서 나를 생각하게 하지마 , Steve Krug는 모든 관습이 누군가의 밝은 아이디어로 시작한다고 말합니다. 따라서 규칙에 따라 규칙이 작동하는 경우에만 규칙이됩니다. 그것을 써. 그들은 당신의 친구입니다.

마지막으로 정직한 입장입니다. 저는 가끔 웹 디자인 스타일 가이드를 만드는 것이 약간 지루하다는 것을 알게됩니다. 그것은 완벽하게 괜찮습니다. 그러나 그것을 만들지 않는 변명으로 사용하지 마십시오. 그렇지 않으면 여유 시간에 회개하게 될 것입니다. 저를 믿으십시오. 그들은 성공적인 프로젝트의 핵심입니다.

스티브 피셔 yellowpencil.com/ 캐나다 Yellow Pencil의 크리에이티브 팀 nerd-herder입니다. 그는 연구, 비즈니스 분석, 시각 및 상호 작용 디자인, 콘텐츠 전략 조정을 담당합니다. 글로벌 무대에서 그는 반응 형 웹 디자인, UX, 오픈 소스, 디자인 사고 및 웹 프로세스와 같은 주제에 대해 인기있는 연사입니다. 그 또한 Twitter를 좋아합니다. (조금 너무 많을 수도 있습니다).