23’ 11월 1주 🔖 UXUI 해외 주간 아티클 TOP3

🔖 2023년 11월 1주 TOP3

1️⃣ 데이터 시각화: 디자인의 가치

2️⃣ 워크플로우를 10배로 향상시킬 수 있는 꼭 필요한 Figma 플러그인 15가지

3️⃣ 2023 모바일-퍼스트 디자인 가이드

1️⃣ 데이터 시각화: 디자인의 가치

700개 이상의 대시보드를 디자인하고 검토한 경험에서 얻은 교훈

제품 디자이너로서 팀에 합류하기 전에 은행에서 아름답고 어두운 테마의 대시보드가 차트로 가득한 멋진 인사이트를 찾아내는 전문가들이 많을 것이라고 생각했습니다. 나는 심지어 디자이너로서 어떤 기여를 할 수 있을까 고민하기도 했습니다.

하지만 사실 대시보드도 디자인되어야 합니다.

현실은 불완전한 대시보드가 많이 있으며, 데이터 테이블이 여기저기에 존재하며 사용자가 이해하지 못할 약어도 많이 있습니다. 3년 동안 700개 이상의 대시보드를 디자인한 후로써 나는 디자이너로서 어떻게 가치를 추가할 수 있는지를 알아보았습니다.

1. 집중

"우리가 모든 데이터를 (모든 30개의 열 😉) 하나의 테이블에 넣을 수 있는데 왜 3개의 데이터만 표시하나요?"

이것은 흔한 패턴입니다: 모든 데이터를 보여주세요. 왜 이게 항상 첫 번째 본능일까요?

대시보드는 너무 많은 테이블을 가지고 있습니다. 팀이 많은 열과 행을 가진 테이블을 표시하려고 할 때 종종 "사용자에게 철저한 전망을 제공하고 싶다... 사용자가 이 데이터를 모두 필요로 할 수 있을 것이다... 사용자가 관심을 가진 열을 읽을 수 있을 것이다"라는 주장을 합니다.

사실 이것은 사용자가 필요로 하는 데이터에 대한 정보화된 결정이 이루어지지 않았다는 표시일 뿐입니다. 또한 "사용자는 테이블을 보는 데 익숙하므로 데이터 시각화로 길을 잃지 않도록 하지 않겠다"는 주장을 들을 수도 있습니다.

이에 대한 대처 방법: 데이터 시각화에서 인사이트를 찾는 것이 테이블을 스캔하는 것보다 훨씬 빠르다는 것을 설명해주세요. 더 나아가서 테이블과 동일한 데이터를 포함하는 간단한 막대 차트와 테이블의 예제를 준비하고 얼마나 빨리 결론을 도출할 수 있는지 비교해보세요.

그래서 우리는 항상 테이블을 멋진 시각화로 대체해야 할까요? 그렇지 않습니다.

2. 적절한 시각화

먼저 차트의 남용과 오용에 대해 이야기해보겠습니다. 아마도 가장 인기 있는 데이터 시각화가 파이 차트와 도넛 차트인 것을 알아채셨을 겁니다. 그러나 이들은 종종 잘못된 용도로 사용되어 사용자에게 불완전하거나 오해를 불러일으키는 정보를 제공합니다

— 여기서의 위험은 사용자가 잘못된 결정을 내릴 수 있다는 것입니다.

사용자가 주어진 주제의 주요 범주(보상)가 무엇인지 이해해야 할 때에만 파이 차트를 사용하세요. 그러나 카테고리를 비교해야 할 때는 파이 차트가 사용자의 삶을 더 복잡하게 만들 수 있습니다 — 카테고리 조각의 크기를 비교하는 것은 쉬운 작업이 아닙니다. 특히 차이가 작을 때는 더욱 그렇습니다. 그래서 카테고리를 비교하려면 막대 차트를 사용하세요.

카테고리 비교를 더 어렵게 만들지만 더 멋져 보이는 것이 있을 수 있을까요? 바로 도넛 차트 🍩입니다. 이 멋진 차트로 비교가 더 어려워지며 색상 영역이 추가로 축소됩니다.

우리가 관찰한 공통 오류 중 하나는 팀이 원시 데이터를 가져와서 차트/테이블을 생성하는 것입니다. 그들은 사용자가 2개의 기간 간의 차이를 스스로 계산하거나 테이블에서 추세를 이해하거나 평균과 평균을 스스로 계산할 것으로 예상합니다. 분석을 단순화하여 사용자가 한눈에 차트를 읽고 상황이 좋은지 나쁜지 이해할 수 있도록 해야 합니다. 종종 데이터를 표시하는 것뿐만 아니라 트렌드와 비율을 제공하여 맥락을 제공하는 것도 좋은 생각입니다. 데이터로 이야기를 할 수 있다면 더욱 좋습니다!

나는 각각의 차트 유형을 모두 살펴보지는 않겠습니다. 올바른 시각화를 선택하는 데 도움을 줄 수 있는 웹에서 다양한 솔루션들이 많기 때문입니다. 여기에 제 짧은 목록을 소개합니다:

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

2️⃣ 워크플로우를 10배로 향상시킬 수 있는 꼭 필요한 Figma 플러그인 15가지

업무 프로젝트에서 사용하는 Figma 플러그인 15개를 모았습니다.

Unsplash

Unsplash는 개인 또는 상업용 프로젝트에 사용할 수 있는 많은 무료 이미지가 있는 인기 있는 온라인 플랫폼입니다. Figma용 Unsplash 플러그인을 사용하면 키워드로 이미지를 빠르게 검색하고 프로젝트에 가져올 수 있습니다.

Icons 8 BG remove

이것은 이미지의 배경을 제거하기 위한 무료 플러그인입니다. 이제 Figma를 종료하지 않고도 이 작업을 수행할 수 있습니다. 사진을 선택하고 플러그인을 클릭하면 결과를 얻을 수 있습니다.

Redlines

Figma Redlines는 프로젝트를 빠르게 개발자에게 제출하기 위한 이상적인 도구 모음을 제공하는 플러그인입니다. 이 플러그인을 사용하면 선택한 개체에서 즉시 레드라인을 생성하고 생성할 수 있습니다. 이를 통해 각 레드라인 요소의 스타일과 표시에 대한 완전한 제어를 얻을 수 있습니다.

등치선 디자인

등치선 디자인은 내가 가장 좋아하는 디자인 중 하나입니다. 2D 디자인을 등치선 디자인으로 변환할 수 있습니다. 케팅 자료와 기억에 남는 프레젠테이션을 만드는 데 유용합니다.

Design Lint

Design Lint는 무료 오픈 소스 플러그인입니다. 이 플러그인은 프로젝트에서 오류를 신속하게 찾고 수정하는 데 사용됩니다. 이 도구를 사용하여 텍스트, 채우기, 윤곽선 및 효과 스타일의 존재 여부를 확인할 수 있습니다. 이 플러그인은 잘못된 테두리 반지름 값을 표시하기도 합니다.

Content Reel

이 플러그인을 사용하면 라이브러리에서 텍스트와 이미지로 필드를 빠르게 채울 수 있습니다. 이름, 이메일 주소, 통화 등 다양한 사진 및 텍스트 컨텐츠를 수집합니다.

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

3️⃣ 2023 모바일-퍼스트 디자인 가이드

모바일-퍼스트는 제품 디자인 과정을 모바일 단말기에서 시작하는 디자인 접근 방식입니다. 웹 사이트나 앱의 모바일 버전을 먼저 디자인하고, 이후에 태블릿 또는 데스크톱 버전을 모바일 버전에서 적응시킵니다. 다시 말해, 우리는 스마트폰 화면 크기 (4.7 ~ 6.5 인치)에 대한 디자인을 먼저 시작하고 나서 큰 모니터와 화면으로 넘어갑니다.

"모바일-퍼스트"는 매년 등장하고 사라지는 무수한 모바일 앱 디자인 트렌드 중 하나가 아닙니다. 전문 웹 및 앱 디자이너에게는 명료하고 간결한 내비게이션 사용과 같은 모바일 앱 디자인 최상의 실천 방식과 유사한 기본적인 디자인 방법입니다. 왜냐하면 이 접근 방식은 모바일 사용자의 요구를 우선시하기 때문입니다.

2012년에는 모든 전 세계 웹 트래픽의 10.88%가 모바일 폰을 통해 이용되었으며, 2023년에는 이 숫자가 놀랍게도 56.86%로 증가했습니다! Google에서 지난 4년간 모바일 검색이 모든 검색의 50% 이상을 차지한 사실을 감안하면, 인터넷 사용자들은 명백하게 모바일 우선 접근 방식을 채택하였습니다.

이러한 추세를 따라가려면 웹 디자이너와 UI/UX 디자인 컨설팅 전문가들도 마찬가지로 모바일-퍼스트로 나아가야 합니다. 이 글에서는 모바일 우선 디자인에 대한 깊은 이해를 공유하겠습니다. 이 디자인 접근 방식의 기본 사항을 검토하고 현재 맥락에서 그 중요성을 분석할 것입니다.

모바일-퍼스트 디자인 개념

여기에서는 회사 웹사이트나 앱에 모바일 우선 디자인 접근 방식의 최상의 실천 방식을 적용하는 방법을 안내합니다. 그러나 그 전에 "모바일 우선" 디지털 플랫폼을 만드는 데 도움이 되는 몇 가지 디자인 개념을 명확히 해야 합니다.

반응형 웹 디자인

반응형 웹 디자인 (RWD)은 모든 장치에서 자동으로 다양한 화면 크기에 적응할 수 있는 유연한 웹사이트를 만들기 위해 사용되는 웹 디자인 기술입니다.

반응형 웹 디자인은 유연한 레이아웃과 유동적인 그리드를 특징으로 하며, 디자인 요소도 디바이스에 따라 자동으로 크기 조절하고 비율에 맞게 재배치합니다.

반응형 웹사이트나 웹 앱에 액세스하는 데 사용하는 장치에 관계 없이 항상 모든 장치에서 좋아 보이고 사용하기 쉬울 것입니다.

적응형 웹 디자인

RWD는 적응형 웹 디자인 (AWD)의 현대 버전입니다. AWD는 다른 디바이스에 대해 별도의 유연하지 않은 레이아웃을 사용하는 이전 디자인 접근 방식입니다. "유연하지 않다"는 것은 디자인 레이아웃, 그리드 및 요소가 자동으로 다른 디바이스에 맞게 조정되지 않는다는 의미입니다.

이 접근 방식에서 웹사이트의 데스크톱, 태블릿 및 스마트폰 버전을 수동으로 다른 디자인 레이아웃으로 생성해야 합니다. 이 추가 작업으로 인해 적응형 웹사이트를 유지하기 어려워지며, 결과적으로 RWD가 이 방식을 대체하게 되었습니다.

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

🎄from.designer 

🗓️ 행사 일정 & UXUI 자료 

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

💭 단톡방 가입문의  (2,070명)

🎥 유튜브 UXUI 자료 영상  

🔖 이메일 

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