스타일 가이드를 만드는 방법 : UI 프레임 워크로 시작

AdRoll의 UX 디자이너와의 Q & A는 왜 그랬으며 무엇을 배웠는지에 대해

이 블로그 게시물은 스타일 가이드의 제작부터 팀을위한 성숙한 UI 프레임 워크 제공, 궁극적으로 제품에 대한 고유 한 음성 및 분위기를 발산하는 스타일 가이드의 여정을 연상시키는 시리즈 중 첫 번째입니다.

안녕하세요! 저는 AdRoll의 UX 연구원 인 Arya Srinivasan입니다. AdRoll의 기본 광고 API 제품을 작업하는 UX 디자이너 인 Mason Lee와 함께 AdRoll의 스타일 가이드를 개발하는 그의 작업에 대해 이야기했습니다.

Arya : 일을 시작하기 위해 왜 스타일 가이드 프로젝트를 시작 했습니까? 해결해야 할 문제는 무엇입니까?

Mason : 문제는 제품 간 및 단일 제품 내에서 디자인 불일치 문제였습니다. 예를 들어, 단추는 어디에서나 동일하지만 실제로 색상, 글꼴 두께 및 테두리 스타일이 다릅니다.

버튼은 개별 디자이너의 모의 및 응용 프로그램에서 다르게 보입니다.

AdRoll의 빠른 성장은 우리가 속도에 집중했다는 것을 의미했습니다. 우리는 이제 여러 제품을 보유한 대기업이므로 디자이너로서 디자인을 통해 제품을 표현하는 방식의 일관성을 강조하는 것이 중요하다고 생각합니다.

디자인에 집중하기 위해 먼저 기존의 불일치를 수정해야했습니다. 여기서 UX 디자이너는 일반적으로 하나 또는 두 개의 제품에 중점을 두므로 팀이 모든 제품의 디자인에 대해 생각할 수 있도록 UI 지침을 논의하기 위해 매주 "UI Smackdown"미팅을 설정했습니다.

각 회의에서 단일 설계를 결정하기 위해 설계 불일치를 검토했습니다. 몇 번의 회의 후에도 디자이너들은 여전히 ​​올바른 색상이나 패딩 등에 대해 물었습니다. 모든 답이 담긴 중앙 문서가 필요했기 때문에 디자이너를위한 리소스로 Sketch에서 UI 프레임 워크를 구축했습니다. 누락 된 구성 요소가 있거나 새로운 구성 요소를 포함하려고 할 때마다이를 논의하고 마스터 UI 프레임 워크 파일에 추가합니다.

Arya : AdRoll이 디자인 중심의 회사가되기를 원한다고 말씀하셨습니다. 그 의미는 무엇입니까?

Mason : AdRoll이 디자인을 최첨단에 두어 고객의 요구를 실제로 해결하는 잘 설계된 제품으로 고객이 인정하는 경쟁력있는 차별화 요소가되기를 바랍니다.

Arya : 스타일 가이드의 직접적인 목표는 무엇입니까? 이 프로젝트에 대한 장기 비전이 있습니까?

Mason : 단기 목표는 UI 구성 요소를 표준화하여 디자이너간에 디자인 일관성을 유지하는 것입니다. 디자인을 말할 때 디자이너가 같은 언어를 사용하기를 원합니다. 예를 들어, 모달 또는 드롭 다운에서 엔지니어는 설계자가 제안한 방법에 따라 빌드합니다. 설계 요소가 설계자마다 다르면 엔지니어는 동일한 요소를 다른 방식으로 만들 것입니다.

중장기 목표는 AdRoll의 내부 UI 구성 요소 라이브러리 인 'RollUp'의 코드에서이 스타일을 정의하는 것입니다. 사전 정의 된 스타일 시트가있는 경우 엔지니어가해야 할 일은 복사하는 것입니다. 디자이너와 엔지니어는 동일한 언어를 말할 수 있습니다.

Arya : 스타일 가이드를 만드는 동안 문제가 발생 했습니까? 어떻게 해결 했습니까?

Mason : 가장 큰 장애물 중 하나는 제품 팀의 사람들로부터 바이 인을 얻는 것이 었습니다. 모든 사람들이 참여할 수 있도록, 명확한 의제 목록이있는 회의를 설정했습니다. 제품마다 다양한 드롭 다운 메뉴와 같은 디자인 불일치를 제시했습니다. 시각적 증거를 제공하면 대화가 시작되고 결국 사람들은 제품에 관심을 갖고 일관성을 원합니다.

또 다른 도전은 규칙을 결정하는 것이 었습니다. 구성 요소 표준화에 관해 이야기 할 때 모든 구성 요소의 어느 곳에서나 적용 가능해야합니다. 모든 에지 케이스를 생각해야합니다. 구성 요소는 유연해야하지만 동시에 기능이 충분히 완성되어 사용, 소모품 및 적용이 용이합니다.

스타일 가이드의 유연성에 대한 예는 다음과 같습니다. 이 지역 타겟팅 드롭 다운에서 패딩에 대한 초기 결정이 너무 커서이 사용 사례를 설명하기 위해 스타일 가이드를 수정했습니다.전 (왼쪽), 후 (오른쪽)

나는 실제로 하나의 도전을 더 불러 내고 싶다! 이름 지정이 어려울 수 있습니다. 앞에서 말했듯이 디자이너와 엔지니어가 같은 언어를 사용하기를 원하지만 신중하게 수행해야합니다. 드롭 다운처럼 단순한 것을 위해 실제로는 여러 가지 변형이 있습니다 (하나는 확인란, 다른 하나는 확인란 및 텍스트 블록, 다른 하나는 표준 드롭 다운 메뉴). 3 가지 드롭 다운 이름을 어떻게 지정하여 어느 것이 무엇인지에 대한 보편적 인 이해가 있습니까?

의미론은 도전적이다. 우리의 이름은 의미가 있어야합니다. 우리는 이름을 결정할 때 멋진 협업 도구를 사용하여 합의를 얻었습니다. 예를 들어 Wake는 모든 공개 질문과 문제를 수집하고 솔루션을 논의하며 UI Smackdown 결정을 모니터링하며 Slack과의 통합을 통해 더 큰 제품 팀과 대화를 계속할 수 있도록 도와주었습니다.

Wake를 사용하여 UI 불일치를 논의하고 구성 요소 규칙에 대해 공동 작업하는 방법

Arya : 스타일 가이드를 만들 때 고려해야 할 AdRoll의 UI에 고유 한 것이 있습니까?

Mason : 대시 보드는 데이터가 매우 많습니다. 또한 캠페인 생성 과정을 통해 광고주는 다양한 수단을 활용할 수 있습니다. 경험이 부족한 광고주의 요구를 충족시키기 위해 효과적인 기본 설정을 목표로합니다. 우리 제품에서 구성 요소는 복잡한 기능을 가지고 있지만 단순 해 보이고 사용하기 쉽습니다.

Arya : 스타일 가이드를 만들 때 알고 싶은 것이 있습니까?

Mason : 모든 제품이 처음부터 어떻게 작동하는지 더 깊이 이해하고 싶었습니다. 예를 들어, 주간 디자인 비평 회의에서 각 제품의 작동 방식을 공유하므로 SendRoll (전자 메일 리 타겟팅 제품)이 표면에서 어떻게 작동하는지 알고 있지만 디자이너가하는 SendRoll에 대한 깊이있는 지식은 없습니다. 스타일 가이드 작업을 할 때 제품에 대한 미묘한 이해가 확실히 도움이된다고 생각합니다. 왜냐하면 모든 잠재적 사용 사례를 더 잘 이해하기 때문입니다.

Arya : 그렇다면 디자이너의 프로세스와 제품에 대한 일반적인 이해를 얻는 가장 좋은 방법은 무엇입니까?

Mason : 제품 배송에 중점을두고 있지만 매주 디자인 비평 회의에서 디자인 프로세스를 공유하는 데 최선을 다하고 있습니다. 각 회의 후 루프를 닫는 것이 더 좋을 것 같습니다. 디자이너는 회의의 피드백을 어떻게 통합 했습니까? 광고주가 제품을 배송하고 사용하면 분석 정보를 바탕으로 광고주가 제품을 사용하는 방식도 공유 할 수 있습니다.

Arya :이 프로젝트를 진행하면서 언급 한 자료가 있습니까?

Mason : Brad Frost의 Atomic Design을 읽고 온라인에서 조사한 후 MeetUps의 다른 UX 디자이너와 대화했습니다. 특정 회사가 훌륭한 디자인을 실천한다고 생각한다면 온라인에서 자신의 스타일 가이드에 대해 이야기했을 가능성이 높습니다.

Arya : 스타일 가이드의 상태는 어떻습니까?

Mason : 다양한 제품에 사용하는 모든 UI 요소를 캡처하고 다시 검토하여 UI 디자인의 진실 소스로 사용할 기초, 구성 요소, 패턴 및 페이지로 그룹화했습니다.

Dribbble에서 기초 및 구성 요소 UI 요소를 확인할 수 있습니다. Atomic Design에 익숙한 경우 "원자"및 "분자"수준을 "구성 요소"라고하는 그룹으로 그룹화했습니다. 예를 들어, 양식 제목과 입력을 결합하면 다른 디자이너가 완성 된 양식을 쉽게 복사 할 수 있습니다. 들.

읽어 주셔서 감사합니다!

스타일 가이드를 개발할 때 다음에 나오는 주제를 살펴보십시오.

  • UI 프레임 워크가 협업을 단순화하는 방법
  • UI 프레임 워크를 기반으로 새 스타일 시트 개발
  • 스타일 가이드 웹 사이트를 구축하는 방법
  • 음성과 톤을 찾는 여정