완벽한 디자인 시스템을 구축하기 위한 5가지 주요 단계

디자인 시스템 구축을 위한 필수 단계

디자인 시스템은 전체 프로젝트 디자인 팀을 위한 지침으로 제공되는 재사용 가능한 항목, 요소 및 규칙의 모음입니다. 이제는 사용자에게 성공적인 경험을 제공하는 데 중요한 UX 디자인 프로세스의 중요한 부분으로 널리 간주됩니다.

지난 몇 년 동안 이 시스템은 많은 국가에서 제품 디자인 전략에 새로운 바람을 불러일으켰으며 일반적인 UI 가이드보다 훨씬 뛰어납니다.

우리는 이 시스템이 우리에게 제공하는 일관성 및 기타 이점을 고려하여 이 시스템을 만들어야 할 필요성에 대해 많이 듣습니다.

IBM 및 Airbnb와 같은 유명한 회사도 마찬가지로 자체 디자인 시스템을 통합하여 팀 내에서 생성 속도를 높이고 용이하게 했습니다.

이 짧은 소개를 염두에 두고 디자인 시스템에 대한 보다 자세한 설명을 살펴보고 이것이 우리에게 도움이 될 수 있는 방법에 대해 알아봅시다.

디자인 시스템이란 정확히 무엇입니까?

디자인 시스템은 제품 디자인 및 개발에서 팀 구성원을 지원하기 위해 다양한 요소로 구성된 올인원 정보 소스입니다.

이를 통해 여러 응용 프로그램에 대해 더 큰 규모의 제품 설계와 관련된 모든 작업을 처리할 수 있습니다. 이 지침 세트의 전반적인 결과는 작업 버튼에서 랜딩 페이지에 이르기까지 모든 단일 단계를 다루는 시스템에서 일관된 순서입니다.

 

디자인 시스템과 스타일 가이드의 차이점은 무엇입니까?

일반적으로 디자인 시스템은 다양한 애플리케이션에 대한 신뢰할 수 있는 소스를 만드는 다양한 요소로 구성됩니다.

스타일 가이드에서 찾을 수 있는 것은 브랜드에 필요한 다양한 색상, 로고, 글꼴 및 기타 속성입니다. 디자인팀과 마케팅팀은 대부분 스타일 가이드를 사용하지만 디자인 시스템은 시각적인 측면과 표현적인 측면보다 위에 있습니다.

시스템의 구체화를 만드는 데 중요한 스타일, 음성 및 구성 요소의 조합입니다.

회사가 청중과 대화해야 하는 방식에 주로 초점을 맞춘 가이드를 고려하십시오.

이것은 인간에게 더 나은 느낌을 전달하여 더 가치 있는 경험을 남길 수 있도록 해야 할 것과 피해야 할 것을 알려준다는 점에서 일반 스타일 가이드와 다릅니다.

간단히 말해서 디자인 시스템이라는 곳에서 원칙, 가이드, 패턴, 구성 요소 및 프로토콜을 모두 찾을 수 있습니다.

회사에 디자인 시스템이 있어야 하는 이유는 무엇입니까?

디자인 시스템은 회사가 확장되거나 고객의 요구 사항이 변경됨에 따라 제품과 함께 진화하는 역동적인 정보 모음입니다.

생산성을 높이고 더 쉽게 협동 팀워크에서 디자인 시스템의 분리할 수 없는 두 가지 결과입니다. 그들은 여러 가지 방법으로 기업의 성장을 도울 수 있으며 다음은 가장 중요한 것 중 일부입니다.

일관성

기업은 상호 작용과 행동의 일관성을 유지하면서 여러 플랫폼에 맞게 설계해야 하는 경우가 많습니다.

소스의 일관성이 높을수록 디자이너와 개발자가 고품질 UI를 구현하기가 더 쉬워집니다.

이렇게 하면 특정 제품이나 페이지를 알려진 요소의 조합으로 간주할 수 있습니다. 랜딩 페이지에 CTA 버튼이 필요하다고 생각해보세요.

글꼴, 패딩, 색상 및 배경에 대한 정확한 세부 정보를 설명하는 대신 "기본 CTA"를 제공하도록 요청하기만 하면 됩니다.

그렇게 하면 XNUMX가지 이상의 다양한 버튼 스타일, 다양한 디자인 레이아웃, 다양한 느낌과 모양이 있는 제품을 볼 수 없습니다.

다른 관점에서 볼 때 구성 요소 기반 및 모듈러 당신의 디자이너에 대한 마음가짐. 훨씬 더 관리하기 쉬운 요소를 정의하고 설계 요구에 따라 필요한 변경을 수행할 수 있습니다.

이러한 일관성은 최종 결과를 남기지 않고 QA 팀의 모니터링을 용이하게 하는 더 높은 품질의 제품을 제공합니다.

팀워크 <br>(Teamwork)

여러 팀이 동시에 프로젝트를 수행하는 회사 중 하나입니까? 그렇다면 디자인 시스템을 구축하면 팀원 간의 협업 속도를 크게 높일 수 있습니다.

이 정보 소스를 사용하면 사람들이 다양한 리소스에 더 쉽게 액세스할 수 있으므로 처음부터 새 프로젝트를 만들거나 기존 프로젝트를 업그레이드하는 데 많은 시간을 절약할 수 있습니다.

또한 디자이너와 개발자 간의 커뮤니케이션이 보다 효율적으로 이루어집니다. 그렇기 때문에 많은 사람들이 디자인 시스템을 이러한 분야 간의 다리로 간주합니다.

디자인 시스템을 갖추는 것은 현재 팀원의 생산성을 높일 뿐만 아니라 탑승 단계 신규 이민자의.

팀의 새로운 디자이너나 개발자는 가치에 훨씬 더 빨리 익숙해질 수 있으며 필요한 것을 쉽게 찾을 수 있습니다.

어떤 유형의 디자인 시스템이 필요합니까?

따라야 할 디자인 시스템의 종류는 팀과 생산하려는 제품에 따라 크게 달라집니다. 몇 가지 간단한 질문으로 시작하여 알아낼 수 있습니다.

• 소규모 팀 또는 대규모 팀에서 시스템을 사용할 예정입니까? 그들은 주제를 완전히 이해합니까?
• 정렬할 총 제품 수는 몇 개입니까? 우리는 어떤 플랫폼과 기술을 사용합니까?
• 모든 제품의 일관성이 우리에게 중요한 문제입니까?

다음 원칙은 이와 관련하여 더 나은 이해를 제공할 수 있습니다.

 

유연하거나 단단합니까?

우선, 추가 실험을 위해 공간을 남겨둘지 여부에 대한 명확한 아이디어가 필요합니다.

유연한 계획은 모든 팀 구성원에게 어느 정도의 자유를 제공하면서 사용할 일반적인 지침을 제공합니다. 이는 디자인 및 개발 섹션의 팀원이 요구 사항에 따라 사용할 수 있음을 의미합니다.

반면 엄격한 계획은 상세한 문서를 포함하므로 디자이너와 개발자 모두 따라야 할 동기화된 계획을 제공합니다.

새로운 아이디어나 요소를 계획에 넣는 것은 엄격한 시스템에서 쉽지 않기 때문에 모든 것을 고려하여 처음부터 준비해야 합니다.

가장 좋은 접근 방식은 유연성과 강성을 조합하여 활용하는 것입니다. 때로는 디자이너와 개발자가 디자인 시스템 사용에 별로 관심이 없을 수 있으며, 그렇게 하도록 강요하는 것은 그들을 밀어내는 것 외에는 아무런 영향을 주지 않습니다.

그러나 모든 것을 선택 사항으로 남겨두는 매우 느슨한 시스템은 전혀 디자인 시스템으로 간주될 수 없습니다! 따라서 엄격하고 느슨한 시스템 계획으로 디자인 시스템을 함께 준비하여 두 세계의 장점을 모두 얻으십시오.

모듈형 대 통합형

모듈식 시스템 설계는 현재 다양한 산업 분야에서 널리 사용되고 있습니다. 여러 사용자의 요구 사항을 수반하고 단기간에 확장해야 하는 프로젝트에서 사용하는 것이 가장 좋습니다.

그러나 이러한 시스템을 구현하려면 함께 효율적으로 작동할 수 있는 독립적인 부품을 만드는 것이 어려운 작업이기 때문에 더 많은 예산이 필요한 경우가 많습니다.

대형 온라인 상점이나 정부 웹 사이트와 같은 광범위한 프로젝트에서 자주 사용됩니다.

반면에 통합 시스템은 주로 단일 컨텍스트에 중점을 둡니다. 일부 부품으로 구성되어 있지만 교체하거나 상호 교환하여 사용할 수 있습니다.

반복되는 요소가 많지 않은 시스템에 적합합니다.

디자인 시스템을 구축하는 방법?

조직을 위한 디자인 시스템을 시작하는 것은 처음에는 매우 어렵게 느껴질 수 있습니다. 고려해야 할 사항은 매우 다양하며 디자인 시스템을 하룻밤 사이에 준비하고 실행에 옮길 수는 없습니다.

일반적으로 우리 앞에는 완전히 새로운 프로젝트를 시작하거나 현재 가지고 있는 제품으로 작업하는 두 가지 경우가 있습니다. 전반적인 접근 방식은 거의 동일하지만 후자는 더 많은 단계를 다룹니다.

새 프로젝트의 경우 요소와 개념을 포함하는 다양한 샘플을 확인하는 것부터 시작해야 합니다. 자신이 만족할 수 있는 디자인을 찾아 기존의 통속적인 원리를 활용하여 다양한 부분의 색상과 형태를 생각해 보세요.

이미 프로젝트를 진행하고 있는 경우 가장 먼저 수행할 단계는 인벤토리를 만드는 것입니다. UI 요소.

그렇게 함으로써 그들 사이의 차이점과 유사점을 분석할 수 있으므로 추가 옵션을 줄일 수 있습니다.

이제 응용 프로그램을 기반으로 효율적으로 그룹화하고 사용 가능한 도구를 사용하여 프로세스 속도를 높일 수 있습니다.

일반적인 절차로서 이러한 시스템을 만드는 주요 단계는 다음과 같습니다.

당신이 가진 것을 분석

구현할 디자인 시스템을 선택하는 가장 좋은 방법은 디자인에 적용한 기존 접근 방식을 검토하는 것입니다. 따르는 프로세스와 해당 목적으로 사용하는 도구를 파악하는 것부터 시작하십시오.

또한 디자인 시스템을 도입하는 데 필요한 시간을 추정하기 위해 제품 팀이 디자인 측면을 얼마나 쉽게 이해할 수 있는지 평가하십시오.

다음으로 브랜드에 사용하는 알파벳을 식별합니다.

이 일반 용어에는 사용하는 제품 값과 색상, 음성 및 글꼴이 포함됩니다. 또한 브랜드의 가이드라인을 검토하고 디자인 원칙을 작업할 때 이 데이터 수집을 참조할 수 있습니다.

 

시각적 측면 검토

마지막으로 만나고 싶지 않은 것은 디자인 복제입니다. 그것은 당신에게 불일치를 가져와 프로젝트 결과의 품질을 떨어뜨립니다.

중복을 식별하고 제품의 모든 관련 구성 요소를 분류하기 위해 시각적 감사를 수행합니다. 이 감사는 제품 내에서 불일치를 찾는 데 도움이 될 뿐만 아니라 제품에서 가장 중요하고 사용된 요소를 찾는 데 도움이 됩니다.

CSS 통계 도구를 사용하여 CSS의 고유 색상 및 서체 수를 파악하여 이 다단계 프로세스를 시작할 수 있습니다.

이제 스타일 지정에 대해 더 나은 아이디어를 얻었으므로 구성 요소를 찾을 수 있습니다.

여기에서 이름에서 알 수 있듯이 웹 페이지에 존재하는 가장 작은 요소의 분석을 찾을 수 있는 Atomic Design 웹 사이트를 사용할 수 있습니다.

디자인 언어 및 패턴 만들기

디자인 언어는 사용하려는 디자인 시스템의 핵심입니다. 디자인 결정이 내려지는 이유를 명확하게 이해하면 멋진 사용자 경험을 얻을 수 있습니다.

설계 원칙은 무엇을 구축했는지, 그 이유, 구축에 사용한 방법론에 대한 질문에 대해 이해할 수 있는 답변을 제공해야 합니다. 디자인 언어는 네 가지 주요 부분으로 구성되어야 합니다.

색상

일반적으로 브랜드의 아이덴티티를 표현하기 위해 XNUMX~XNUMX가지의 메인 컬러를 사용합니다. 디자이너에게 더 많은 옵션을 제공하려는 경우 색상 혼합, 음영 및 색조를 포함하십시오.

 

글꼴

적절한 디자인 시스템은 종종 두 개의 글꼴로 구성됩니다. 하나는 제목과 본문용이고 다른 하나는 코드용 글꼴입니다. 긍정적인 결과 없이 사용자를 혼란스럽게 할 뿐이므로 여러 글꼴을 사용하지 마십시오. 또한, 웹 사이트에 적합한 글꼴 선택 까다로울 수 있으므로 충분히주의하십시오.

 

간격 및 크기 조정

페이지에서 사용하는 여백과 여백은 균형이 맞을 때 가장 좋게 나타납니다. 이와 관련하여 스마트폰과 완벽하게 호환되는 시스템을 선택하는 것이 이제 필수가 되었습니다.

 

형상

마찬가지로 이미지도 지침에 따라 준비해야 합니다. 브랜드에 대한 몇 가지 규칙과 계획을 설정하고 어떤 대가를 치르더라도 이를 고수하십시오.

이제 UI에서 사용될 실제 구성요소에 대해 알아볼 차례입니다. 모든 단일 버튼, 이미지, 양식까지 포함하는 부품과 조각으로 라이브러리를 만드십시오.

정확한 요구 사항에 따라 평가하고 유사한 항목을 병합하고 추가 항목을 제거하여 보다 단순화된 의사 결정 프로세스를 만듭니다.

 

규칙 및 전략 설정

앞서 지적했듯이 디자인 시스템의 궁극적인 목표는 창의성을 더 높은 수준으로 끌어올리는 것입니다.

이전 섹션에서 팀원의 창의성이 한 방향으로 제한되지 않도록 규칙이 엄격하고 느슨한 규칙의 조합이어야 한다고 언급했습니다.

디자인 시스템의 역동적인 특성을 고려하여 장기적으로 변화에 대처할 방법을 정의해야 합니다.

인기 있는 모델 중 하나는 거버넌스 전략에 대한 세 가지 접근 방식(독립형, 중앙 집중형 및 연합형)을 설명합니다.

독방 모델에서는 책임 있는 개인 또는 그룹이 디자인 시스템과 관련된 모든 결정을 내립니다.

중앙 집중식 모델은 팀이 시스템에서 발생하는 일을 담당하는 조건을 나타냅니다. 그리고 연합형 모델은 다양한 팀의 여러 사람이 시스템을 담당하는 것을 의미합니다.

많은 사람들은 한 사람이 모든 것을 결정하기 때문에 단독 모델이 가장 위험한 선택이라고 생각하며, 많은 경우 작업 완료를 방해할 수 있습니다.

시스템 업그레이드 및 변경을 담당하는 팀이 있는 조직은 시스템을 보다 다양하게 만들 수 있도록 다른 사람들과 긴밀한 연락을 유지해야 합니다.

연합 모델에 여러 팀이 참여한다는 점을 고려하면 사람들이 훨씬 더 빠르게 변화에 적응할 수 있습니다. 그러나 전체 진행 상황을 제어하려면 팀 리더가 필요합니다.

이러한 각 옵션에는 장단점이 있으며 모델 선택은 모두 귀하에게 달려 있습니다.

팀에서 모든 접근 방식을 조합하여 구현할 수 있지만 무엇을 하든 항상 시스템에 팀원의 참여에 초점을 맞추고 그들이 아이디어를 토론하도록 격려하십시오.

최대 포장

디자인 시스템은 더 이상 미래 지향적인 비전이 아닙니다. 디자인 시스템은 점점 더 회사에서 제품 전략의 기초가 되고 있는 디자인 필수품의 전체 패키지입니다.

디자이너 및 개발자와 더 나은 통합을 제공할수록 더 나은 결과를 생성합니다. 이 시스템은 디자인 중심 활동을 강화하고 시간이 지남에 따라 계속 진화합니다.

따라서 제품 변경 및 개발과 함께 지속적으로 업데이트해야 합니다.