ㅣUIUX디자인ㅣ스타일가이드ㅣ
시각 디자인: 스타일 가이드
제품 전체에서 일관성을 유지하기 위한 규칙과 원칙을 설정합니다.
이케아는 가구를 구입하여 집에 직접 설치할 수 있는 매장입니다. 그들은 가구를 설정하는 가이드 역할을 하는 모든 조각과 사용 설명서를 보내며, 보내지는 조각이 무엇인지, 그리고 모든 조각이 어떻게 함께 결합되어야 하는지에 의해 만들어진 표준에 따라 제대로 작동하도록 설명합니다.
글쎄, 가구가 당신의 디자인이고 스타일 가이드는 디자인을 만들고 설정하는 방법을 설명하는 사용 설명서라고 생각하십시오. 이 아티팩트는 제품 전체에서 일관된 스타일을 유지하기 위해 모든 디자인 사양을 찾을 수 있는 곳입니다.
시각적 시스템을 만드는 것은 시각적 디자인 단계의 핵심 측면입니다. Atomic Design 은 시각적 시스템을 만드는 데 가장 자주 사용되는 접근 방식 중 하나이며, 디자인을 분자라는 가장 기본적인 요소로 분해하여 이러한 분자를 구성하는 시스템을 만들어 동일한 스타일을 따르는 여러 디자인을 구축할 수 있도록 합니다. 제품 지침 같은 느낌. 블록에서 빌드하는 접근 방식을 통해 확장 가능하고 일관된 프레임워크를 크게 만들 수 있으므로 시간과 노력으로 디자인 생산을 향상시킵니다. 디자인 시스템을 만드는 동안 디자인의 가장 기본적인 요소를 정의하고 문서화하기 시작해야 합니다. 이 첫 번째 단계를 스타일 가이드 라고 합니다.
스타일 가이드는 디자인의 모범 사례를 보장하기 위한 일련의 규칙과 권장 사항을 찾을 수 있는 문서입니다. 특정 원칙을 채택하는 방법에 대한 개념, 기초 및 기본 구성 요소에 대한 명확한 지침을 디자이너와 개발자에게 제공하여 경험 전반에 걸쳐 일관성을 보장하기 위한 것입니다.
1. 기초 요소
스타일 가이드를 만들기 위해서는 기본 요소 라고 하는 스타일 요소를 먼저 정의해야 합니다. 왜냐하면 스타일 요소 는 디자인의 가장 필수적인 기반이며 단일 문서에 포함되어 있어 모든 결정을 쉽게 처리하고 유지할 수 있기 때문입니다. 프로젝트 전반에 걸친 일관성. 가장 일반적인 기본 요소 중 일부는 색상, 타이포그래피, 아이콘, 그리드 및 레이아웃 이며, 일부 스타일 가이드에는 일러스트레이션 및 애니메이션 도 포함 되지만 이는 프로젝트의 요구 사항에 따라 다릅니다.
기본 요소는 제품의 가치를 전달하는 근거를 갖도록 충분히 생각해야 합니다. 대부분 이러한 가치 는 프로젝트의 전반적인 모양과 느낌을 전달하는 데 사용되는 Moodboards 또는 아이디어 세션에서 가져옵니다. 창의성과 혁신을 묘사합니다.
2. 기본 구성품
스타일 가이드의 또 다른 부분은 기본 구성 요소로, 모든 디자인을 구축하는 데 사용할 수 있는 모든 UI 구성 요소이며, 프로젝트 요구 사항에 따라 개수가 다를 수 있습니다. 그 중 일부는 버튼, 배지, 양식 구성 요소(텍스트 필드, 라디오)입니다. 버튼, 체크박스, 텍스트 영역), 아바타, 드롭다운, 탭 등이 있습니다. 이러한 요소는 기본 요소 위에 구축되어 일관성 있게 보입니다.
스타일 가이드의 이 부분은 모든 디자이너 또는 개발자가 사용 사례 및 규칙을 포함하여 디자인의 모든 사양을 찾을 수 있는 구성 요소 라이브러리로 작동합니다.
스타일 가이드 만들기
스타일 가이드는 모든 디자인 요소를 하나의 문서로 수집합니다. 또한 모범 사례로서 이 아티팩트는 모든 디자이너나 개발자가 사용할 수 있도록 따라야 할 명확한 구조를 가져야 합니다. 구조는 프로젝트마다 다를 수 있지만 다음 항목을 반드시 포함해야 합니다.
1. 종속성
우리가 이미 본 바와 같이 스타일 가이드는 디자인 시스템의 처음 두 수준을 다루는 원자 설계 방법론의 일부입니다. 작은 부품으로 더 큰 것을 만들어내는 시스템이기 때문에 복잡한 요소는 기본적인 것부터 스펙이 있어야 설계가 됩니다.
따라서 시작하기 전에 종속성을 정의해야 합니다. 좋은 예는 색상에 대한 타이포그래피의 종속성입니다. 타이포그래피 색상을 포함하는 색상을 먼저 정의한 다음 타이포그래피를 정의해야 타이포그래피 색상을 색상 베이스에 직접 매핑할 수 있습니다. 설계를 하기 위해서는 기초가 먼저 정의되어야 하는 설계 구성 요소의 경우에도 마찬가지입니다.
좋은 방법은 사양을 다른 구성 요소에 더 잘 매핑하기 위해 기반에 이름을 지정하는 것입니다. 이 이름은 단 한 단어로 모든 사양을 포함하고 가장 복잡한 요구 사항도 설정합니다. 이렇게 하면 실수를 방지하고 일관성을 유지하는 데 참조할 수 있습니다. 이것은 또한 디자이너와 개발자 사이의 커뮤니케이션에 도움이 됩니다. 예를 들어 16진수 코드 #11220F가 있는 색상보다 "Dark Blue" 색상에 대해 이야기하는 것이 더 쉽고 실제 색상에 대한 가장 명확한 정보도 제공합니다.
이제 글꼴 패밀리, 글꼴, 두께, 방향, 색상(색상 기반의 이름과 매핑되어야 함) 등과 같은 훨씬 더 구체적인 기능이 있는 타이포그래피에서 "헤더 1"과 같은 것을 사용하는 것이 좋습니다. " 버튼, 양식 등과 같은 다른 구성 요소에 매핑되는 이러한 모든 사양을 다룹니다.
부작용으로 이것은 아티팩트에 대한 정보의 무게를 줄여 더 깨끗하고 이해하기 쉽게 만듭니다.
비. 기초 요소에 대한 항목
전체 설명: 각 재단의 목적에 대한 전반적인 설명을 제공합니다. 이 정의는 대부분 제품의 가치로 무드 보드에 설명된 개념에 첨부되지만 접근성, 가독성 및 표준화에 대한 간략한 소개도 포함합니다.
*컬러 파운데이션에 대한 전반적인 설명
사양: 각 항목과 각 상태에 대한 자세한 설명을 제공합니다. 필요한 경우 사양을 이름과 함께 기초에 다시 매핑해야 합니다.
규칙: 대부분 화면에서 접근성, 가독성 및 일관성을 보장하고 엣지 케이스를 지정하기 위해 정의됩니다.
씨. 기본 설계 구성 요소 항목
전체 설명 은 구성 요소 그룹에 대한 전반적인 설명을 제공하며, 디자이너와 개발자가 지침을 따르고 지침의 의도나 기능에 대한 대략적인 아이디어를 갖는 데 도움이 되는 소개 데이터입니다.
특정 설명 은 특정 구성 요소의 의도와 기능에 대한 자세한 설명을 제공합니다.
상태 는 특정 구성 요소의 모든 다양한 변수를 포함하며, 상태 수는 구성 요소마다 다를 수 있으며 가장 일반적인 상태는 정적/정상, 가리키기, 활성, 누름 및 비활성화입니다.
사양 및 레드 라이닝 은 각 요소 및 모든 상태에 대한 자세한 설명과 스타일 사양을 제공합니다. 사양을 다시 매핑하고 일관성을 보장하기 위해 기반에 지정된 이름을 사용하는 것이 중요합니다. 가장 일반적인 사양에는 측정값, 색상 사양, 타이포그래피 사양, 모양 사양이 포함됩니다.
스타일 가이드는 지속적으로 성장할 수 있는 살아 있는 문서이며 프로젝트의 모든 변경 사항이나 업데이트가 이 문서에 반영되어야 한다는 점을 명시하는 것이 중요합니다. Sketch 앱과 같은 도구는 색상, 아이콘, 글꼴, 텍스트 스타일 및 자산(기초 및 구성 요소)을 함께 넣을 수 있는 라이브러리가 있는 여러 파일 간에 일관성을 유지하는 데 도움이 됩니다. 또한 그 기능을 통해 플랫폼 전체에서 쉽게 업데이트할 수 있습니다.
팁/모범 사례
- 제품의 시각적 의도를 주도하는 무드 보드를 기반으로 기초를 수집하고 문서화합니다.
- 기반 및 구성 요소의 종속성을 기반으로 구조를 정의합니다.
- 모든 기초 요소의 이름을 지정하십시오.
- 구성 요소를 만들 때 해당 이름을 사용하여 기본 요소를 매핑합니다.
- 모든 사양에 대한 단일 문서를 유지하십시오.
- 스타일 가이드 전체에서 일관된 명명 규칙을 유지하십시오.
체크리스트
- 기초 및 기본 구성 요소를 정의합니다.
- 종속성을 정의합니다.
- 이해할 수 있는 구조를 만듭니다.
- 문서 이름, 설명, 상태, 사양 및 규칙.
- 나중에 스타일 가이드에서 내린 결정을 업데이트하고 디자인에 적용하세요.
빠른 질문
기본 구성 요소에 대한 전반적인 설명과 구체적인 설명을 작성해야 하는 이유는 무엇입니까?
- 스타일 가이드에서 정보 계층 구조를 갖는 것이 중요하기 때문입니다.
- 유사한 의도를 전달하는 일부 구성 요소를 그룹화할 수 있기 때문입니다.
- 첫 번째는 소개를 정의하고 두 번째는 규칙을 정의하기 때문입니다.
- 위 사항 없음
- 출처:https://ux-prasad.medium.com/visual-design-styleguide-4e3c6b62d7c8
[🌰인사이트]
●스타일 가이드란?
마치 제품 조립 설명서와 같다. ex)이케아 가구 조립 설명서(부품 종류, 수량, 결합방법, 올바른 결합 작동법을 설명)
여기서 가구는 디자인 이고 스타일 가이드는 디자인을 만들고 설정하는 방법을 설명하는 사용설명서 이다.
●시각적 시스템을 만든다는 것
Atomic Design 디자인의 가장 기본적인 분자 요소로 분해. 분자를 구성하는 시스템을 만들어 동일한 스타일을 따르는 여러 디자인을 구축 할 수 있도록 한다.
●스타일 가이드
- 디자인 시스템을 만드는 동안 디자인의 가장 기본적인 요소를 정의하고 문서화 하는 시작 단계
- 디자인의 일련의 규칙과 권장사항을 찾을 수 있는 문서. 특정 원칙을 채택하는 방법에 대한 개념, 기초 및 기본 구성요소에 대한 명확한 지침을 함께 작업하는 구성인에게 제공하여 작업 전반에 걸쳐 일관성을 보장함
●스타일 가이드를 만드려면
- 기본요소인 스타일 요소 먼저 정의. 보통 기본 요소에 색상, 타이포그래피, 아이콘, 그리드 및 레이아웃(일러스트레이션, 애니메이션)이며 프로젝트 요구사항에 따라 달라짐.
- 기본요소 제작 시: 제품의 가치를 전달할 수 있는 근거를 갖도록 충분히 생각해야 함. 무드보드나 아이디어 세션을 통해 만들어지는 경우가 많다.
●스타일 가이드의 기본구성 요소
- UI 구성 요소 ex.버튼, 배지, 양식 구성(텍스트필드, 라디오 , 버튼, 체크박스, 텍스트 영역), 아바타, 드롭다운, 탭 기본 요소 위에 구축되어 일관성 있게 보이도록 해준다.
- 종속성 작은 부품으로 더 큰 것을 만들어 내는 시스템이라 복잡한 요소는 기본적인 것부터 스텍이 있어야 설계가 가능. 시작전 종속성을 정의 해야 한다. ex) 타이포 그래피-> 색상 정의 후 타이포그피 정의해야 컬러면 타이포를 만들 수 있다.
●결론
- 스타일 가이드는 모든 디자인 요소를 하나의 문서로 수집 한다.
- 지속적으로 성장할 수 있는 살아 있는 문서이며 프로젝트의 모든 변경 사항이나 업데이트가 이 문서에 반영되어야 한다는 점을 명시해야 한다.
[🥜 추가조사]
사용성을 위한 Nielsen-Molich 휴리스틱
더블다이아몬드디자인
https://medium.com/@talktobrunorocha/early-calls-on-ui-ux-design-trends-for-2023-348a45e69d1e
Early calls on UI/UX Design trends for 2023
iOS 16 is around the corner and android 12 is converging to it in with its new redesign. How are apps going to behave considering that?
medium.com
https://redbeesoftware.medium.com/most-common-ux-ui-mistakes-e18e48eb54e4
Most Common UX/UI Mistakes
The software market is suffocated with new mobile and web apps monthly. That’s why, the focus has moved on ensuring a client-centered…
redbeesoftware.medium.com
[🌞 생각 정리]
▶ 스타일 가이드 설계시 가장 작은 요소를 파악하고 순차적으로 설계해 나가는 것이 필요하다.
▶ 협업시 의사소통 될 수 있도록 일괄적인 관리 통일성 있는 명칭으로 저장하기
▶. 프로젝트 성격마다 필요한 기본 부품이 다르니, 필요한것들을 생각해 보고 우선순위를 만들자.
'디자인 > UIUX' 카테고리의 다른 글
| [UI 디자인 프로세스] 2-01. 업무 프로세스 (0) | 2023.07.19 |
|---|---|
| 2023 Google material 새로운 기능 Carousel (0) | 2023.05.23 |
| UX인터뷰 설문지 작성하기 (0) | 2022.12.26 |
| UX 리서치 가이드& 설문조사 방법 (0) | 2022.12.26 |
| PM 서비스 기획 _보험 모바일 앱 재 설계 사례 (0) | 2022.11.25 |
