Close

카테고리

디자인 시스템 템플릿

작성자: InVision

전문가의 도움을 받아 통합된 디자인 시스템을 개발하여 디자인 팀을 확장하세요.

템플릿 사용
디자인 시스템 템플릿

조직이 성장함에 따라 브랜드와 디자인에도 변화를 주어야 할 것입니다. 디자인 시스템을 개발하면 디자인 프로세스의 속도를 높이고, 비일관성을 없애고, 조직 전반에서 디자인 부식을 줄일 수 있습니다. InVision 디자인 시스템 템플릿에서는 디자인 원칙을 정의하고, 컴포넌트를 문서화하고, 디자인, 작성 등에 대한 규칙 및 모범 사례를 명확하게 하는 데 필요한 도구를 제공합니다. 이는 어떠한 디자인 시스템에든 완벽한 시작점입니다.

디자인 시스템 템플릿을 사용하는 방법

1단계. 디자인 원칙 정의하기

Your design principles are the foundation of your design system: they are the values that guide you as you create new products, features, and functionality, and they interact to create your unique look and feel. Choose principles that are concrete, that reflect your organization’s unique point of view, and that designers can apply – using their expert discretion to resolve any tensions or conflicts.

2단계. 시각적 언어 설명하기

디자인 원칙을 정한 후에는 시각적 언어의 요소를 다룰 차례입니다. 시각적 요소로는 색상 팔레트, 타이포그래피, 크기 및 자간 간격 규칙, 아이콘 및 일러스트 라이브러리 등이 있습니다. 각 디자인 요소에 대해 디자이너가 적용해야 하는 규칙을 나열하고 "해야 할 것과 하지 말아야 할 것" 몇 가지를 포함하여 이러한 요소가 실전에서 사용되는 방법을 설명하세요.

3단계. 작성 규칙 적기

시각적 요소 다음에는 언어를 다룰 차례입니다. 모든 조직은 서로 다른 작성 스타일과 목소리를 가지고 있습니다. 심지어 대문자 표시, 구두점 및 숫자에 대한 규칙마저 디자인 팀마다 다를 수 있습니다. 페이지에 핵심 작성 규칙을 적고, 어휘집에 브랜드 용어를 추가하고, 상단에 치트 시트를 만들어 자주 묻는 질문에 답하거나 디자인 팀에게 중요한 작성 규칙을 다시 알려주세요.

3단계. 작성 규칙 적기

4단계. 모범 사례 구축하기

디자인 팀에 적합한 것과 적합하지 않은 것이 무엇인지 알고 계실 것입니다. 다음 섹션에서는 접근성, 브라우저 지원 및 모바일 디자인과 같은 항목에 대한 모범 사례를 작성하세요. 이렇게 하면 디자이너들이 아름다우면서도 포괄적인, 효과가 입증된 디자인을 만드는 데 도움이 되는 치트 시트를 이용할 수 있습니다.

5단계. 컴포넌트 문서화하기

이제 세부 사항을 다룰 차례입니다. 디자인 시스템의 각 컴포넌트를 위한 코드 조각을 붙여넣고 이 섹션의 표를 사용하여 여러 디자인 컨텍스트에서 이것이 어떻게 수정될 수 있는지 설명하세요. 이 섹션은 조직의 개발자가 디자인을 올바르고 일관적으로 구현하도록 보장하는 데 중요한 역할을 하므로 충분한 시간을 갖고 주의를 기울여 작성하세요.

5단계. 컴포넌트 문서화하기

InVision은 세계 최고의 고객 경험을 만들기 위한 디지털 제품 디자인 플랫폼입니다.

  • Customer interview report template

    Atlassian팀

    고객 인터뷰 보고서

    고객 인터뷰 보고서를 사용하여 고객 인터뷰에서 통찰력을 얻으세요.

    템플릿 사용 자세히 보기
  • Design component template

    Tony Starr

    선임 콘텐츠 디자이너
    Atlassian팀

    디자인 컴포넌트

    이 편리한 템플릿으로 디자인 시스템의 컴포넌트를 문서화하세요.

    템플릿 사용 자세히 보기
  • Design sprint template

    Figma

    디자인 스프린트

    디자인 및 테스트를 통해 중요한 비즈니스 질문에 답하기 위한 프레임워크를 만드세요.

    템플릿 사용 자세히 보기