올바른 디자인 시스템 만드는 방법

오늘날 디자인 시스템은 모든 디자이너 및 개발자 팀의 주요 도구 중 하나입니다. 아이콘에서 페이지 템플릿에 이르기까지 제품의 모든 재사용 가능한 디자인 요소가 어떻게 보이는지 정의하게 됩니다. 디자인 시스템은 새 레이아웃 생성, 페이지 개발, 제품 구성 요소에 대한 일반적인 이해를 단순화하고 제품의 유용성을 향상시키는 데 도움이 됩니다.

디자인 시스템이 제품에 해를 끼칠 수있는 방법

그러나 디자인 시스템은 변경 없이 어떤 제품에도 적합한 보편적인 도구가 아닙니다. 디자인된 제품의 전략에 따라 모양과 크기가 다릅니다. 디자인 시스템을 만들고 유지하는 데 시간과 리소스를 투자하기 전에 필요한 특정 목적이 무엇인지 생각해 보십시오. 이것은 나중에 많은 고민거리를 덜어 줄 것입니다. 현대적이고 트렌디하거나 Google이 시스템을 구축하기 때문에 시스템 구축을 시작하지 마십시오.

너무 일찍 시작하면

제품이 MVP 단계에서 개발 중일 때 전략과 목표가 자주 변경되며 디자인 시스템을 만드는 것은 시간 낭비입니다. 제품 개발을 따라가지 못하고 즉시 관련성을 잃게 됩니다. 제품의 초기 단계에는 항상 부족한 지원에 더 많은 시간이 걸립니다. 이 경우 디자인 시스템을 만드는 것보다 더 중요한 것이 있습니다.

너무 늦게 시작하면

제품이 다른 시대의 고대 디자인 동물원인 경우 디자인 시스템은 규모를 이해하기 위해 모든 요소를 ​​한곳에 수집하는 데 도움이 될 것입니다. 그러나 그러한 큰 라이브러리는 사용하기 어려울 것이며 개발의 유연성과 디자인의 단순성이 사라질 것입니다. 모든 것이 시작되는 모든 이점이 사라질 것입니다. 제품 재설계가 하루를 절약 할 수 있는 경우일까요?

기성 솔루션을 사용하는 경우

디자인 시스템은 사용자의 요구에 맞는 개별 솔루션이어야 합니다. 인기 있는 디자인 시스템은 자신의 제품에 100% 사용할 수 없습니다. 이를 사용하는 가장 좋은 방법은 다른 팀의 경험을 통해 배우는 것입니다. 상호 작용 유형, 구성 요소 계층, 문서 작동 방식을 살펴보십시오. 다른 사람의 내부 디자인 시스템을 살펴보면 다른 사람의 작업을 복사하지 않고 직접 만드는 방법을 배울 수 있습니다.

디자인 시스템으로 올바르게 작업하는 방법

디자인 시스템을 만들 때 결정해야 할 두 가지 사항을 염두에 두십시오.

‍1. 디자인 시스템은 일관된 사용자 경험을 보장하고 제품 디자인의 품질을 향상시켜야 합니다.

2. 구성 요소 시스템은 질서 있고 예측 가능한 개발 프로세스를 구성하고 구성 요소와 템플릿을 사용하여 레이아웃을 만드는 데 걸리는 시간을 줄여야 합니다.

‍이것은 그림자와 그라디언트의 아름다움이 아니라 디자인 시스템의 성공에 영향을 미칩니다. 디자인 시스템의 목표는 제품을 더 빨리 만들기 위해 전체 팀의 작업을 확장하는 것입니다.

선반에 배치(Arrange on Shelves)

인기 있는 디자인 시스템 접근 방식은 가장 단순한 UI 요소(텍스트, 색상 또는 간격)를 원자로 설명하고, 더 큰 구성 요소를 원자로 구성된 분자(버튼 또는 입력 형식)로 설명하는 원자 원리입니다. 아이디어는 시스템이 발전함에 따라 이 접근 방식이 그룹화된 구성 요소(유기체)를 생성한 다음 전체 레이아웃, 페이지 또는 템플릿으로 이어진다는 것입니다.

라이브러리 구성 요소의 유연성을 조정하고 특히 구성 요소가 제품에서 거의 사용되지 않는 경우 너무 복잡한 중첩을 만들지 마십시오. 그러나 다른 극단으로 가지 말고 약간 다른 요소의 전체 동물원을 만드십시오.

팀 구성(Assemble a Team)

좋은 디자인 시스템은 개발 팀에게 명확해야 합니다.

소규모 팀에서는 구성 요소와 템플릿의 일관성을 유지하기가 쉽습니다. 그러나 팀이 성장함에 따라 구성 요소 사용에 대한 지식이 변경되거나 잊혀질 수 있습니다. 이것이 모든 구성 요소에 대한 최신 문서를 유지하는 것이 중요한 이유입니다. 파괴로부터 보호하기 위해 디자인 시스템을 감독할 사람이 필요하지만, 제품을 만드는 창의적인 프로세스를 제한하지는 않습니다.

팀 구성원이 자유롭게 변경할 수 있다고 느끼는 것은 매우 중요합니다. 디자인 시스템은 창의력을 강화하는 도구이지 깨지지 않아야 하는 규칙이 아닙니다. 시스템의 목표 중 하나는 팀 프로세스를 개선하는 것임을 잊지 마십시오.

팀에 완전한 라이브러리와 최신 문서가 있는 경우. 모든 디자이너, 프로그래머, 분석가 또는 관리자는 세부 사항에 대해 걱정하지 않고 자신의 생각을 형성하고 구성 요소에서 완성된 디자인을 조립할 수 있습니다.

시작할 곳

디자인 시스템의 모양은 사용자의 요구를 해결하는 제품 인터페이스에 따라 달라집니다. 많은 디자이너는 스크립트 작성에 집중하는 대신 버튼과 구성 요소를 만들어 디자인 시스템을 시작하는 실수를 합니다. 사용자 행동 및 제품 목표에 대한 지식이 이미 있는 경우에만 통합 디자인 언어 만들기를 시작하십시오. 페이지나 화면만 그리는 것이 아니라 사람들이 사용할 기능을 만듭니다.

색상(Colors)

가장 간단하고 분명한 속성인 색상으로 시작하십시오. 팔레트를 만들기 위해 구축해야 하는 제품 브랜드에 대한 주요 색상이 필요합니다.

또한 성공 메시지 및 오류의 색상을 관리하십시오. 이는 제품 디자인의 일반적인 패턴입니다.(일반적으로 녹색 및 빨간색).

텍스트에 순수한 검정색 #000000을 사용하지 마십시오. 읽기가 어렵습니다. 브랜드의 기본 색상과 일치하는 색조로 희석하십시오.

동일한 조언이 회색조에도 적용됩니다. 디자이너는 종종 #CCCCCC 또는 # F0F0F0 회색을 사용하지 않습니다. 그들은 사용자의 눈에 부담을 주고 생명이 없는 것처럼 보입니다. 대부분의 인터페이스에는 다음과 같은 회색 색상이 필요합니다.

‍- 페이지 배경은 밝은 회색입니다.

- 테두리와 구분선의 경우 약간 더 어두운 색상입니다.

- 도움말 텍스트는 회색입니다.

폰트(Fonts)

하나의 단일 폰트에서 시작하고 필요한 경우 다른 폰트와 페어링 하십시오. 너무 많은 폰트는 한 페이지에 맞추기 어렵고 구성 요소 접근 방식으로 사용하기 어렵습니다.

모든 곳에서 동일한 폰트를 사용하더라도 제목과 본문 텍스트를 조화롭게 결합하십시오. 제목은 서로 대조적이어야 하지만 본문에서 주의를 분산시키지 않아야 합니다. 다음 스타일이 필요합니다.

- ‍페이지의 텍스트 계층을 정의하기 위한 2 ~ 3개의 주요 제목

- 여러 부제목;

- 메인 텍스트 및 본문 텍스트 스타일링

- 캡션, 버튼 및 각주에 대한 텍스트입니다.

‍텍스트 구성 요소를 정의하려면 폰트 크기, 문자 간격 및 행간에 대한 스타일을 정의해야 합니다. 큰 제목의 경우 글자와 줄 사이의 간격을 줄여서 구분되지 않도록 합니다. 작은 텍스트의 경우 그 반대의 경우도 마찬가지입니다. 페이지에서 숨을 쉬게 하십시오.

그림자 및 모서리 반경(Shadows and Corner Radius)

종종 디자이너는 디자인 시스템에 그림자를 포함하지 않고 시각적 장치로 취급합니다. 그러나 그림자에 대한 우연한 접근 방식은 사용자 인터페이스에서 불일치를 초래합니다. 밀도에 따라 그림자는 인터페이스에 관점을 추가하고 시각적 계층 구조를 만들고 사용자가 필수 항목에 집중할 수 있도록 도와줍니다.

그림자에 기능적 의미를 부여하십시오.

- 상호 작용할 수 있는 요소에 밝은 그림자를 적용합니다.

- 대화 형 요소 위로 마우스를 가져갈 때 그림자를 만듭니다.

- 기본 인터페이스 위에 떠있는 요소에 그림자를 추가합니다.

- 큰 그림자가 있는 창에 사용자의 주의를 집중하십시오. 물체가 클수록 그림자가 더 뚜렷해져야 합니다.

‍코너 반경은 설계 시스템으로 가져와 다양한 크기와 기능의 구성 요소에 사용할 수도 있습니다. 작은 반경은 작은 요소, 버튼 및 입력 필드의 경우 중간 반경, 카드, 양식 및 큰 구성 요소의 경우 가장 큰 반경에 적합합니다.

반올림 반경은 제품의 분위기도 설정합니다. 둥근 요소는 더 친근한 느낌이 드는 반면, 각진 인터페이스는 제품에 진지함을 부여합니다.

‍

버튼 및 아이콘(Buttons & Icons)

버튼은 디자인 시스템에서 가장 중요한 요소일 것입니다. 사용자가 취할 조치를 결정합니다. 따라서 단추의 모양을 통해 찾기 쉽고 클릭 할 수 있으며 수행할 수 있는 작업이 무엇인지 명확하게 보여야 합니다.

호버, 포커스 및 비활성과 같은 버튼 상태를 잊지 마십시오. 한 번 정의하고 제품 전체에서 재사용하십시오.

아이콘은 일관적이어야 하며 (예 : 채우기 또는 윤곽선이 있어야 함) 옆에 있는 폰트와 선 너비가 조화롭게 혼합되어야 합니다. 아이콘의 반경, 필렛 각도에 주의를 기울이고 글꼴 선과 연관시킵니다.

구성 요소들(Components)

색상, 버튼 및 폰트와 같은 작은 독립 요소 각각의 스타일을 정의한 경우 구성 요소(기성품으로 구성된 블록)를 만들 수 있습니다. 예를 들어 간단한 양식은 양식 헤더, 입력 필드 헤더, 입력 필드, 그 안의 텍스트 및 양식 버튼과 같은 사용 가능한 요소로 구성됩니다. 구성 요소를 만드는 프로세스 자체는 폰트 쌍의 조합을 만드는 것 만큼 창의적이지는 않지만 요소의 디자인 라이브러리를 구축하고 제품의 새로운 기능 블록을 개발하는 프로세스를 크게 가속화 합니다.

구성 요소는 하위 수준 구성 요소로 구성될 수 있습니다. 따라서 기성품 블록으로 완전히 구성된 복잡한 전체 페이지가 있습니다.

페이지에 구성 요소를 배치하는 가장 쉽고 저렴한 방법은 8px의 배수로 그리드를 사용하는 것입니다. 그런 다음 그들 사이의 들여쓰기는 시스템 (8, 16, 24, 32, 48 등)에 따르고 구성 요소의 조화로운 구성을 만들고 다른 페이지의 개발을 돕습니다.

제대로 하기

디자인 시스템을 만들기 위해 Sketch는 디자이너들 사이에서 인기 있는 응용 프로그램이 되었습니다. 스타일과 기본 기호를 재사용 할 수 있어 디자인 시스템을 기반으로 한 디자인 워크 플로우의 속도가 빨라집니다. 다음 참조 글에서 Sketch의 디자인 시스템 구성 도구에 대해 자세히 알아볼 수 있습니다.

- 디자인 시스템 관리를 위한 스케치 도구 

‍또한, 영감을 얻기 위해 기성품 설계 시스템의 유용한 리스트를 아래와 같이 링크합니다.

- Adel. A Collection of Open Source Design Systems

- Material Design

- Fluent Design System

- GitHub

- Atlassian Design System

디자인 시스템은 올바르게 사용하면 유용한 도구입니다. 모든 구성 요소를 정의하는 데 조금 더 많은 시간을 투자하면 작업 시간을 많이 절약할 수 있습니다. 그러나 디자인 시스템이 그 자체로 진공상태에 있는 엔티티라는 생각에 얽매이지 마십시오. 제품 팀 워크 플로의 일부여야 합니다.

원문 링크) Make Design System Right