🔖 2021년 9월 1주 TOP3

🔖 2021년 9월 1주 TOP3

디자인 시스템이란? ( 2021년 무료 가이드)

디지털 제품의 경쟁 환경에서 구성 요소 기반 시각 디자인 시스템은 점점 더 중요해지고 있습니다. 이 기사는 디자인 시스템이 무엇인지, 왜 필수적인지, 그리고 만드는 방법을 이해하는 데 도움이 될 것입니다.

디자인 시스템이란?

디자인 시스템은 디자인 원칙과 중요한 UX 전략에 의해 결합 된 UI 구성 요소의 모음입니다. 그들은 종종 더 큰 사용자 경험 내에서 각 구성 요소가 어떻게 생활하는지에 대한 지침을 제공합니다.

그 후 팀은 이 컴포넌트를 다양한 조합으로 재사용하여 일반적인 상호작용 패턴을 리디자인하는 데 시간을 낭비하지 않고 제품을 구축 또는 업데이트할 수 있습니다. 디자인 시스템을 대규모 디지털 제품으로 만들기 위한 레고 세트라고 생각 해 봅니다.

디자인 시스템은 종종 UI 요소 전체에서 사용되는 색상, 타이포그래피 및 스타일 등 스타일 가이드로서의 디자인 정보가 포함되어 있습니다. 표준, 원칙 및 일관된 UI 요소의 집합은 디자인 시스템을 조직 전체에서 단일 소스 로서 가치있게 만듭니다. ‍

‍ 디자인 시스템의 이점완전한 설계 시스템은 조직에 많은 이점을 제공합니다. 디자인 시스템은 UX / UI 팀이 프로젝트에서 작업하는 여러 디자이너가있는 경우에도 제품과 인터페이스에서 일관성을 유지할 수 있도록 도와줍니다. 이를 통해 디자인 팀은 인터페이스를 다시 만들거나 오래된 디자인 파일을 검색하는 데 지치지 않고 더 중요한 문제를 해결할 수 있습니다.

더 높은 수준에서 디자인 시스템은 회사의 제품 디자인 노력에 대한 단일 소스가되어 조직의 비용을 절약 할 수 있습니다. 모든 디자인 팀은 디자인 파일을 검색하거나 오래된 디자인 사양으로 작업하는 고통을 겪었습니다. 바쁜 작업을 피하고 혼란을 최소화하여 효율성을 높이면 특히 규모가 크거나 분산 된 디자인 팀의 경우 시간 손실을 줄일 수 있습니다.

디자인 시스템이 새로운가요?

실제로는 아닙니다. 디자인 가이드 라인은 오랫동안 디자인 프로세스의 일부였습니다. 1975 년에 발표 된 NASA의 브랜드 스타일 가이드는 초기 디자인 가이드 라인의 한 예입니다. ‍ 새로운 기능은 설계 구성 요소에 대한보다 "원자적인"보기입니다.  인터페이스 요소는 서로 다른 반응 형보기와 서로 다른 장치 끝점에서 구성되고 표시됩니다.  또한 최신 도구를 사용하면 일회용 문서를 게시하는 대신 서버에서 설계 시스템을 점진적으로 실시간으로 업데이트 할 수 있습니다.

.  .  👇 더 자세한 내용은 아래 원문에서 확인해주세요.

Google의 가장 멋진 UX 디자인 애니메이션에서 배우기

Google의 가장 중요한 자료 가이드가 3D로 어떻게 보일지 궁금한 적이 있으십니까? 그 대답은 아마도 2021년에도 그곳에서 찾을 수 있는 가장 멋진 UX 애니메이션 쇼케이스일 것입니다. 디자인 팀 oddfellowstv는 "Google의 개인정보 보호정책과 함께" 제품을 발전시키고 새로운 3D 시각적 아이덴티티를 구축했습니다.

위의 이 비디오는 그들이 Google을 위해 만든 첫 번째 UX 애니메이션 쇼케이스가 아니지만, 저는 이것이 그들의 최고의 작품 중 하나라고 생각하기 때문에 "고급 보호의 작동 방식"에 대해 이 비디오를 강조하고 싶습니다.

동영상을 보고 나면 'Google이 사용자의 정보를 안전하게 보호하는 방법'을 이해하게 됩니다. 정보 안전은 복잡한 문제 공간이고 비디오는 매우 짧습니다. UX 애니메이션 쇼케이스가 성공할 수 있었던 이유는 스토리가 좋았기 때문입니다.

좋은 이야기를 하기 위해서는 일반적으로 두 가지가 가장 중요합니다. 즉, 요점을 맞추는 것과 창의성입니다. 대부분의 마케팅 또는 디자인 비디오는 한 가지를 성공적으로 수행하지만 두 가지를 모두 수행하는 경우는 드뭅니다.

그렇기 때문에 oddfellowstv의 3D 목업 쇼케이스가 감동적입니다. 3D 비주얼은 눈길을 끌고, 재미있고, 창의적이고, 독특할 뿐만 아니라 Google의 MG에 익숙한 사람이라면 누구나 쉽게 알아볼 수 있습니다. 시청자의 이러한 친숙함과 관심을 활용하여 oddfellowstv는 이러한 3D 상호 작용과 시각적 요소를 활용하여 기존 UX 애니메이션보다 더 나은 작업을 수행하여 클라이언트(Google) 개인 정보 보호 프로덕트의 스토리와 사용 사례를 보다 명확하게 전달합니다.

큰 시사점은 무엇입니까? 디자이너로서 훌륭한 스토리텔러가 되어야 한다고 생각합니다. 독창성과 친숙함의 균형을 맞춰 모든 사람의 시선을 단숨에 사로잡는 독특하고 강력한 비주얼을 구현해야 합니다. 일단 그들의 관심을 끌면 애니메이션과 상호 작용 디자인을 계속 활용하여 프로덕트의 목적과 사용 사례를 명확하게 전달합니다. 창의력과 시각적 요소가 스토리텔링에 방해가 되지 않고 스토리텔링을 높이는 역할을 하는지 항상 확인합니다.

..👇 더 자세한 내용은 아래 원문에서 확인해주세요.

'차트'를 디자인하는 방법

Robinhood, Coinbase, Cash App, Pinterest 등 큰 서비스들이 UI 디자인에서 차트를 어떻게 사용하고있는지 알아봅시다.

사용하고 있는 앱이 데이터 기반이라면 데이터를 간단하고 이해하기 쉬운 형식으로 차트가 표시될 가능성이 매우 높습니다.

하지만 차트를 잘못 사용하게 된다면 아주 나쁜 경험을 만들게 되지요.따라서 저는 많이 사용하고 있는 앱에서 영감을 얻어, 데이터 기반 앱에 대해서 더 나은 차트를 디자인할 수 있는 방법을 알려 드릴 것입니다.우선은 먼저, 기본 사항부터 정리하도록 할게요.

앱에서 차트를 사용하는 이유가 무엇일까요?

앱에서 차트를 만들어야 할지 고민이 되신다면 제가 정리해드리겠습니다. 첫 번째, 차트는 아주 간단한 형태로 데이터를 설명하여, 사용자가 데이터를 정확하게 이해할 수 있도록 합니다.

인간은 시각적인 동물이기 때문에 긴 데이터 목록 대신에 차트 형태로 보는 것을 더 좋아합니다. 그렇기 때문에 차트는 주식 앱, 현금 앱, 습관 추적 앱, 디지털 사용 앱이나, YouTube, Instagram, Pinterst 등과 같은 사용자의 통계를 보여주는 앱을 사용할 때 유용합니다.

#1 차트 유형 선택하기

기기에 표시할 차트를 선택해야 합니다. 저는 차트를 선택하는 것이 쉬운 일이 아니라는 것을 압니다. 매번 막대 차트를 선택하게 되지요. 하지만 반대의 경우, 원형 차트를 사용해서 막대 차트보다 더 나을 수 있는 경우에도 마찬가지라 생각합니다.

그래서 더 나은 차트를 선택하기 위해 이 아티클을 읽어보시고, 더 나은 관점을 위해서 여기서 알려드리고자 하는 모든 종류의 차트를 빠르게 요약해드리겠습니다. (그림을 보세요.)

구성(Composition): 완전한 부분을 표시하고 싶다면 구성 섹션에 나열한 차트들을 사용하시면 됩니다.

비교(Comparison): 이름에서 알 수 있듯이 하나의 데이터를 다른 데이터와 비교하려면 비교 섹션에 나열된 차트를 선택해야 합니다.

관계(Relationship): 특정 시간, 기간 등 두 가지 사이의 관계를 표시하고 싶으시다면, 관계 섹션에 나열된 차트를 사용하세요.

분포(Distribution): X, Y 축의 양이나 개수에 따라 서로 다른 데이터를 사용하려면 이러한 분포 차트를 사용할 수도 있습니다.

여러분들 중에서 잘 이해하시지 못하시는 분들도 계시겠지만 괜찮습니다, 더 나은 차트를 디자인하기 위해 아래의 모든 강의들을 읽은 후에 지금이나 또는 나중에 다시 아티클을 읽으시면 됩니다.

#2 단순하게 만들기

보는 사람들이 더 쉽고 효과적으로 이해할 수 있도록 하고 차트를 단순하게 만드세요. 전문 데이터 분석가들이라면 어렵고 복잡한 차트를 제공해도 멋지게 볼 수 있겠지만, 일반 사용자들은 단순한 것을 원하며, 이는 차트에도 마찬가지라 생각합니다.

어떻게 차트를 단순하게 만들 수 있냐고요? 바로 제거를 통해서입니다.

오믈렛에 양파를 빨리 제거하고 싶은 것처럼, 무엇이든지 간단하게 제거할 수 있다면, 시간도 절약할 수 있을 거예요. 사용자가 오믈렛에 양파를 넣을 수 있도록 옵션을 만드세요. 데이터가 많은 경우에는 차트를 고급 차트 또는 훨씬 복잡한 차트로 전환될 수 있는 버튼을 추가합니다.

#3 색상

Map 앱은 트래픽이 많을 때 빨간색을 표시하고, Robinhood 앱은 주가 하락을 빨간색, 상승을 녹색으로 표시하는 예시처럼, 차트의 일부를 눈에 띄게 만들고 싶다면 색상이 필요합니다.몇 가지 색상을 추가했을 때, 디코딩 하기 쉬운 차트가 있는 경우라면 예제로 사용하세요..  .

..👇 더 자세한 내용은 아래 원문에서 확인해주세요.

🎄from.designer 

🗓️ 행사 일정 & UXUI 자료 

디자이너 공유, UXUI 스터디 참관, UX 발표자료 공유등 다양한 정보를 노션에서 확인하세요.

💭 단톡방 가입문의  (1,900명)

🎥 유튜브 UXUI 공개 영상  

🔖 이메일 

📍 SNS   @from.designer 페이스북 , 인스타그램