Share
Sign In
[디자인 인사이트] 훌륭한 디자인 시스템 예시 : TOP 8
tooldi
Airbnb 및 Uber와 같은 많은 회사들이 이미 그들만의 고유한 디자인 시스템을 전환하여 사용하고 있습니다.
특히 글로벌 규모로 운영되고 있는 브랜드의 경우에는, 업계 내의 끊임없는 혁신으로 경쟁사와 차별화하고 사용자 환경을 개선하는 데 있어 디자인 시스템은 필수적인 요소입니다.
반복 및 재사용 가능한 구성요소를 최대한 활용하여 워크플로우에서 디자인 시스템을 만든 브랜드들은 팀 간의 속도, 영감 및 효율성을 높일 수 있습니다.
유의할 점은 패턴 라이브러리나 코드 및 UI 요소 모음만 있다고 해서 완성된 디자인 시스템으로 취급되지 않는다는 것입니다. 디자인 기본적인 측면에서 종합적인 디자인 시스템에는 더 많은 것들이 있으니까요.
즉, 일반적인 디자인 시스템에 대해 자세히 알아보고, 추가 영감을 위한 성공과 가치를 창출하기 위해서 이미 디자인 시스템을 활용하고 있는 다른 기업들의 몇 가지 훌륭한 예시들을 확인해 보도록 하겠습니다.
디자인 시스템이란 정확히 무엇인가요?
디자인 시스템은 디자인 회사가 가질 수 있는 모든 UI 리소스 모음을 제공합니다. 여기에는 필요한 코드, 문서, 페이지 스크린숏 및 이미지 예제, 디자인 지침, 관련 도구, 문서 및 기사, 스타일 가이드, 재사용 가능한 구성 요소 및 철학, 기타 전반적인 웹 디자인 워크플로우에 유용한 모든 디지털 자산들이 포함됩니다.
그런 다음 이러한 디자인 시스템은 온라인 웹 사이트로 호스팅 되며 브랜드에서 결정하는 대로 공개 및 내부 요소가 될 수 있습니다.
디자인 시스템은 적용 가능한 지침들과 예제, 스타일 가이드 및 코딩 지침, 그리고 UI 키트의 일부로서 동시에, 귀중한 문서 역할을 하는 방대한 데이터 라이브러리라고 생각할 수 있습니다.
기업들은 왜 디자인 시스템을 만들고 있나요?
개발자, 디자이너, 엔지니어, 제품 관리자 등 회사 제품 팀의 모든 구성원이 함께 모여 로고, 색상, 언어 및 코드에 이르기까지 디지털 프로덕트 자산의 기존 부분을 논의하고 매핑합니다. 그런 다음, 아 궁극적인 마스터플랜을 작성하기 위해 협업하고 사물을 정확히 어떻게 제시되어야 하는지(디자인 및 코딩) 설명합니다.
이러한 방식을 채택하면 모든 팀들은 시각적 참조, 도구, 기사, 패턴 및 데이터 라이브러리에 대한 하나의 완전한 출처 소스(*디자인 시스템이 업계에서 단일 정보 소스라고 불리는 이유가 있음.)를 갖게 됩니다. 이를 통해 작업이 일관화되고 균일하게 유지되기 때문에 모든 단일 구성 요소를 동일한 페이지에 표시할 수 있습니다. 이는 디자인 시스템의 궁극적인 목표입니다.
디자인 시스템의 사용 방법 및 구현 요소입니다.
디자인 시스템을 구현하고 개발하는 경우, 개발자는 재사용 가능한 구성요소 및/또는 라이브러리에서 복사하는 데 필요한 모든 것들이 있을 때, 반복적인 코드 조각에 시간을 낭비할 필요가 없어집니다.
마찬가지로, 디자이너는 디자인 프로세스의 속도를 높이기 위해 색상, 로고, 머리글, 바닥글 및 기타 필수 기호와 같은 표준 디자인 및 UI 요소 라이브러리가 존재하기에, 처음부터 다시 새로 랜딩 페이지를 디자인할 필요가 없습니다.
또한 마케터들은 시스템에 필요한 모든 것이 있을 때, 뉴스레터의 어조와 템플릿을 반복적으로 작업할 필요가 없어집니다.
디자인 시스템에서 무엇을 배울 수 있을까요?
대부분의 디자인 시스템은 일반적인 설정 패턴(Setup Patterns)을 따르고 있습니다.
디자인 시스템은 종종 주요 카테고리와 함께 상위의 전개 기능을 제공하는 경우가 있습니다. 디자인, 코드, 언어, 구성 요소 같은 것들입니다.
이러한 각 주요 카테고리에는 아토믹 디자인 구조(*Atomic Design Structure)를 최대한 활용하여 보다 자세히 의논할 수 있는 하위 카테고리들이 나타납니다. 예를 들어 볼까요, 타이포그래피, 색상, 양식, 배너 등이 하위 카테고리가 될 수 있겠네요.
이 직관적인 전개 구조에 따르면 디자인 측면에서 모범 사례에 대한 귀중한 정보를 얻을 수 있을 것 같습니다.
/tooldi-community
Subscribe
Other posts in '디자인 TIP'See all
[디자인 인사이트] Microcopy : 독해력 있는 디자이너가 되기 위한 필수 가이드
디자이너는 단순한 데코레이터가 아니라 중요한 디자인 기술인 언어와 마이크로카피에 대한 이해력을 가져야 합니다. 지금 그 어느 때보다도 중요한 디자인 기술입니다. 다음 2가지의 이미지를 보세요. 이 두 가지 온 보딩 비주얼의 명백한 차이점은 옵션 A에는 단어가 없고 절대적으로 쓸모가 없다는 것입니다. 방향도, 지침도, 행동 촉구도 없습니다. 이 점은 너무나 명백해서 (화면에서 소리 지르고 있음) 부정 할 수 없습니다. 오랜 세월 동안, 저는 디자이너들이 단어와 언어에 사각지대를 가지고 있다는 것을 알아 챘습니다. 그리고 마지막 순간까지 높은 높이에서 아름답게 렌더링 된 디자인으로 텍스트를 돌리기 위해 남겨두었습니다. 디자이너들의 악의가 아니라 직업에 대한 요구와 기대를 통해서 입니다. 저는 이 일을 직접 저지른 적이 있습니다. 우리는 모두 죄인이며, 저는 공개적으로 제 자신을 채찍질합니다. 사용자 경험을 만들거나 깨기 마이크로카피는 버튼 텍스트, 섹션 캡션, 페이지 제목, 양식 레이블 및 오류 메시지와 같은 웹 사이트 및 앱에서 찾을 수 있는 작은 텍스트입니다. 작은 단어는 시각적으로나 심리적으로 큰 영향을 미칩니다. 하지만 우리의 시각적 마음 속에 있는 단어와 이미지의 분리는 디자이너들이 쉽게 빠져들 수 있는 함정입니다. 저는 마이크로카피와 텍스트 콘텐츠를 사용자 경험을 만들거나 깨는 또 다른 디자인 요소로 생각하고 싶습니다. 좋은 마이크로카피는 사용자가 디지털 경험을 통해 자신의 길을 탐색할 수 있도록 도와주며, 압축 된 방식으로 의미를 최대화하며, 공간적 여유가 더해져 모든 단어가 고려되어야 합니다. 단순한 데코레이터가 아니라 문해력 갖춘 디자이너가 되세요 글을 읽고 쓰는 디자이너가 된다는 것은 마이크로카피를 디자인 과정에서 필수적인 교려사항으로 생각하고, 개념을 바꾸고 솔루션에 영향을 줄 수 있는 요소로 생각하면서 텍스트에 주의를 기울이는 것을 의미합니다. 미학과 말은 서로 통합니다. 디자이너라면 누구나 길러야 할 기본 기술이기도 합니다. 우리는 왜 하지 않습니까? 글쎄, 사용자에게 도움이 되는 좋은 마이크로카피를 작성하는 것은 힘든 일일 수 있습니다. 예산이 허락한다면 우리 팀에 UX 작가를 데려 올 수 있습니다. 이상적이지만 실제로는 많은 회사에서 이를 감당할 수 없는 사치로 보고있습니다. 전담 UX 작가가 없는 상황에서 우리는 더 둥근 디자이너가 되어 더 나은 마이크로카피를 제작해야 합니다. 그래픽 디자이너 인 Lucine Robert는 얼마 전에 '디자이너는 단순히 데코레이터이자 미학자들 (문자 형태를 마크 팔레트로 사용하는 패턴 제작자들) 뿐만 아니라 정보 수집하고 책임지는 사람들이다' 라고 썼습니다. 마이크로 카피의 예 저는 여러분이 가끔 보는 이 고전적이고 매우 놀랄 정도로 끔찍한 오류 메시지들를 거의 좋아합니다. 하지만 나쁜 것에 집중하지 맙시다. 올바르게 작성되면 즉시 잘 쓰여지고 명확하고 간결한 마이크로카피로 옮겨집니다.
tooldi
[디자인 인사이트] 로고vs브랜드? 차이가 뭘까?
애플 VS 삼성, 나이키 VS 아디다스, 코카콜라 VS 펩시. 이 논쟁은 지금까지 이어져왔고 앞으로도 계속될 것이다. 일부만이 아니라, 대부분의 대중이 각자 자신이 좋아하는 쪽을 옹호해왔다. 이러한 현상은 어느 한 쪽을 더 지지하여 강화하는 결과를 낳았다. 하지만 생각해보자, 도대체 뭘 위한 논쟁과 지지일까? 스티브는 이렇게 말할 것이다- ‘설탕물!’ 맞는 말 아닌가요? 재료는 모두 같다. 우리 모두가 알듯이, 레시피는 같다. 그런데 무엇이 사람들로 하여금 한 제품에 열광하고 그에 따르도록 두 제품을 차이나게 만드는 것일까? 코카콜라와 펩시는 비슷한 로고로 시작했다. 하지만, 코카콜라는 전략적으로 감정에 호소하는 브랜드로 만들어왔다. 반면 펩시는 넘치는 에너지, 음악, 그 당시의 유머와 관련이 있다. 삼성은 휴대폰을 마치 PC처럼 사용할 수 있도록 다양한 기능을 넣었지만, 애플은 스스로를 ‘혁신적인' 모바일 브랜드로 어필하였다. 기술이 아닌 브랜드는 글로벌 비즈니스의 체계적인 원칙이다. 브랜드는 점점 서로에게 소원해지는 21세기 사회에 사는 사람들에게 소속감과 감정적인 보상을 제공하기 위해 매우 중요한 요소가 되었다. 또한, 세계화는 사람들이 이 세계와 협상하고 그들 자신에 대해 자부심을 느끼기 위해 브랜드를 필요로함을 뜻한다. -Wally Olins 로고 vs 브랜드 문제에 있어서, 로고와 브랜드 사이의 논리적인 비교점을 만들고, 각각의 확실한 역할을 정의하기를 원한다. 또한, 당신 역시 새로운 비즈니스를 만들거나 스스로가 성장하고, 여러가지 가능성에 대해 고려하고 사업의 이득을 위한 새로운 배움을 얻어갔으면 한다. 1.주로 어떤 것들이 차이점으로 여겨지는가? 브랜드는 사람이고, 로고는 그 사람이 입은 옷과 같다! -Vaibhav Gera 이 답변들은 내가 트위터에 로고와 브랜드의 차이점을 퀴즈 형식으로 올렸을 때 받은 내용이다. 로고는 회사가 되고자 하는 방향을 그래픽적으로 나타낸 것이다. 브랜드는 소비자가 느끼는 경험들의 공통적인 인식이다. -Kapil 이는 창업자나 주주, 법률 관계자 혹은 학생에게만 해당하는 문제가 아니다. 이는 디자이너를 포함하여 차이의 명확함에 대해 고민하는 모든 사람에 대한 문제이다.
tooldi