🔖 2021년 6월 2주 TOP3

🔖 2021년 6월 2주 TOP3

1. Netflix 디자인에서 배울 수 있는 것

2. 게이미피케이션
(참여도와 만족도를 높이기 위한 11가지 팁)

3. 8point 그리드 시대는 가고, 4point 그리드 시대가 올까요?

Netflix 디자인에서 배울 수 있는  것

디자이너는 최종적으로 세련된 UI를 디자인할 뿐만 아니라 웹 사이트의 UX 또는 사용자 경험에 대해 생각해야 합니다. 이 기사에서는 5개의 잘 알려진 웹 사이트를 분석하여 그 웹 사이트에서 무엇을 배울 수 있는지 알아보고 이를 웹 디자인 프로젝트에 적용합니다.

몇 가지 기본 사항을 먼저 살펴 보겠습니다.

UX와 UI의 차이점은 무엇이며 웹 디자이너로서 이것을 왜 둘 다 알고 있어야합니까?

UX (User Experience) 란?
사용자 경험 (UX라고도 함)은 웹 사이트나 앱과 같은 디지털 제품과 상호 작용할 때 사용자가 경험하는 전반적인 경험을 설명하는데 사용되는 일반적인 용어입니다.

UX 디자이너가 프로젝트를 위해 작업 할 수있는 작업으로는 사용자 테스트, 사용자 흐름 및 여정지도, 와이어 프레임, 로우 및 하이파이 UI 모형 디자인, 작동하는 프로토 타입 제작 등이 있습니다. 기본적으로 UX에는 전체 엔드-투-엔드 프로세스가 포함됩니다.

와이어 프레임은 UX 디자인 프로세스의 중요한 부분입니다. 개별 랜딩 페이지에 대한 콘텐츠를 매핑하는 방법과 이러한 페이지가 서로 상호 작용하여 사용자 여정을 만드는 방법입니다. 와이어 프레임은 간단한 펜 및 종이 스케치에서 저 충실도 및 고 충실도 디자인의 모형에 이르기까지 다양 할 수 있으며, 각각은 디자인 프로세스에서 목적을 제공합니다. 

더 많은 아이디어를 얻기 위해 디자인 프로세스를 시작할 때 손으로 빠르게 스케치 할 수 있습니다. 나중에 생각을 공유하고 클라이언트 또는 사용자 테스트를 위해 피드백을 요청하기 위해 충실도 높은 와이어 프레임을 만들고 싶을 것입니다.

또한 UX 디자인 프로세스의 일부는 프로토타이핑으로, 마치 사용자가 실제로 제품과 상호 작용하는 것처럼 와이어 프레임에 생명을 불어 넣습니다.

와이어 프레임에 많은 세부 사항이 있고 사용자가 앱과 상호 작용할 수있는 방법을 명확하게 이해하고 있기 때문에 이것은 고화질 프로토 타입으로 간주됩니다.

UI 란?
UI (사용자 인터페이스라고도 함)라는 용어는 웹 사이트 또는 앱의 모양과 느낌을 디자인하는 것을 의미합니다.

UI를 디자인 할 때 강력한 시각적 디자인 기술이 필요합니다. 그리드, 타이포그래피, 색상 및 레이아웃을 사용하여 사용자가 탐색 할 수 있도록 깔끔하고 간결한 방식으로 정보를 구성합니다. 시각적 세부 사항을 수정하고 버튼 크기, 색상, 둥근 모서리와 정사각형 모서리와 같은 디자인 결정을 내릴 것입니다.

와이어 프레임 작업을 할 수 있지만 대부분의 경우 이러한 와이어 프레임을 가져와 개발 준비가 된 세련된 UI 모형을 만듭니다. 왼쪽의 와이어 프레임과 오른쪽의 최종 UI 디자인으로 시작하는이 예제를 살펴보십시오.

구조가 동일하게 유지되는 방식에 유의하십시오. 유일한 차이점은 색상, 타이포그래피, 일러스트레이션 및 디자인 요소를 추가하는 것입니다.

이제 UX 및 UI 디자인에 대한 이해의 기초를 얻었으므로 사용자로서 이미 접했을 수있는 유명 웹 사이트의 몇 가지 예를 살펴 보겠습니다.

1. 넷플릭스

Netflix는 제대로 된 UX의 좋은 예입니다. 웹 사이트에서 앱이 모바일 및 TV 용으로 설계된 방식에 이르기까지 모든 플랫폼은 원활한 경험을 제공합니다. Netflix와 같은 제품을 사용하는 경우 사용자의 의도를 고려해야합니다.

누군가 Netflix에 로그인하면 지금 당장 무언가를보고 싶은 기분이 듭니다. 시청하고 싶은 콘텐츠를 이미 알고있을 수도 있지만 조금 더 탐색해야 할 것입니다. Netflix는이 여정에서 사용자를 돕기 위해 많은 일을 합니다.

첫째, 화면의 상단 절반이 몇 초 후에 자동 재생되기 시작합니다. 이렇게하면 사용자가 빠른 "미니 트레일러"클립에서 영화나 쇼를 이해하는 데 도움이 됩니다. 누군가 관심이 있고 배우고 자하는 경우 재생 또는 추가 정보를 누를 수 있는 옵션이 있습니다.

볼 항목을 더 많이 선택하면 하나의 썸네일 위로 몇 초 이상 마우스를 가져 가면 동일한 자동 재생 기능이 나타납니다.  

이 기능은 사용자가 관심있는 콘텐츠를 찾는 문제를 해결하는 데 도움이 되지만 잠시 후 짜증이 날 수 있습니다.  넷플릭스는 또한 이것을 생각하고 사용자에게 사운드를 비활성화하고 브라우징 이유를 미리 볼 수있는 옵션을 제공했습니다.

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

게이미피케이션 
(참여도와 만족도를 높이기 위한 11가지 팁)

 1. 게이미피케이션

소비자 대상 웹이나 모바일 사이트 등 애플리케이션 사용을 권장하기 위해 게임 플레이 기법을 적용하는 것을 뜻합니다. 게이밍과 게이밍을 사용하여 사용자 환경을 개선하는 방법에 대해 알아보겠습니다. notees에서 만들어진 이 기술은 사용자가 지루하고 일상적인 작업을 완료하도록 유도하는 설계 기법 입니다.

2. 게이밍이란 무엇입니까?

어느 시점에서 우리 모두는 원하지 않는 일을 해야하거나 재미없는 일들을 해야 했습니다.  게임화의 과정은 모든 제품을 게임으로 바꾸는 것이 아닙니다.이것은 디자이너들이 게임에서 나오는 면을 시뮬레이션하여 게임 이외의 제품이나 서비스에 사용하는 메커니즘에 가깝습니다. 이러한 즐거운 요소들의 통합은 인간의 감정과 동기에 영향을 주어 사용자들이 더 즐거운 경험을 할 수 있도록 합니다. 기본적으로, 많은 디자이너들은 재미를 더하려고 노력하고 있습니다.

3. 게임화의 이점

게이밍을 사용하는 것은 사용자가 특정 태스크에 소속되어 있지 않거나 작업을 완료하기를 원하지 않을 때 특히 도움이 될 수 있습니다. 이러한 작업은 지루한 작업으로 인식되거나 완료되는 특정 개인에게 거의 가치가 없는 작업으로 인식될 수 있습니다. 재미있는 요소를 주입함으로써 사용자를 격려하고 장려할 수 있으며, 이러한 작업과 관련된 부정적인 감정을 숨기거나 제거하는데 도움을 줄 수 있습니다. 게이미피케이션은 모든 분야의 비즈니스에 도움이 될 수 있지만, 특히 마케팅, 영업 및 고객 서비스 부문에서는 더욱 그렇습니다. 

가장 성공적인 게이미피케이션 기술은 사용자들의 습관을 변화시킬 수 있습니다. 한때는 지루한 작업이었던 일을 잘 하고 싶어할 정도로 말이죠. 게이메이션을 사용하여 과제를 만들고 성공했을 때 보상을 하면  다음 사항이 증가할 수 있습니다.약속, 만족감, 생산성, 학습, 유용성, 세일즈, 기억력어떻게 하면 여러분의 경험에 맞는 게이미피케이션을 얻을 수 있을까요?

1. 사용자와 목표 파악

동기 부여는 사용자 유형과 목적에 따라 달라집니다.디자인 활동에 앞서 UX연구를 수행하면 게이미피케이션 솔루션에 대한 정보를 제공할수 있고 이를 가장 잘 달성 할수있는 기법을 생각해 볼 수 있습니다

사용자와 개인의 목표를 알면 '게임'에 대한 자신의 목표를 설정하는데도 도움이됩니다. 사용자가 이러한 목표를 성공적으로 달성하면 재미를 위한 강력한 요소인 성취감이 생깁니다. 자신만의 목표를 설정하고, 게임화 측면에서 무엇을 이루려고 하는지 목표에 대해 생각하는 것도 중요합니다.

2. 문맥 인식

경험에 재미를 주입해야 하는 요구 사항의 균형을 맞출 때 문맥은 매우 중요하며, 동시에 작업을 완료해야 하는 고유한 요구 사항을 기억해야 합니다.

운전을 예로 들어 보겠습니다.  
운전자들에게 좀 더 침착한 스타일을 적용하고 더 경제적이 되도록 장려하는 것은 문제가 되지 않고 자신이나 다른 사람의 안전을 위협하지 않는 한 괜찮습니다. 마찬가지로, 친구와 가족 간의 경험에 사용되는 기술은 직장 동료들에게 적용되었을 때 반드시 성공하지는 않을 것입니다.

'게임'에 대한 규칙을 관리하면 경계가 제공되고 사용자가 '게임' 방법을 이해하는 데 도움이 됩니다. 사용자가 이러한 규칙을 쉽게 이해할수록 더 많은 참여를 유도할 수 있습니다.
.  
.  
👇 더 자세한 내용은 아래 원문에서 확인해주세요.  

8point 그리드 시대는 가고, 4point 그리드 시대가 올까요?

UI에서는 유연성을 높이기 위해 4의 배수를 사용합니다. 

기술이 발전함에 따라 많은 그래픽 디자이너들이 UX/UI 설계로 전환하거나 이미 전환했습니다. 저는 아트 디렉션을 공부했기 때문에 그래픽 디자인의 기준선 그리드에 익숙합니다.

약 6년 전 UI 디자인을 시작했을 때, 저는 어떤 구체적인 지침도 따르지 않았습니다. 저는 주로 다른 앱과 웹 사이트에서 그들이 사용하는 간격의 종류를 살펴보니 모든 사람들이 다르게 사용하고 있다는 것을 알게 되었습니다. 12px, 13px, 15px, 20px의 마진과 패딩 등등 모든 종류의 숫자를 보았습니다. 당시에는 그다지 중요해 보이지 않았습니다.

몇 년 전에 Spec.fm에서 8포인트 그리드와 "소프트 그리드"와 "하드 그리드"라는 두 가지 방법에 대해 읽었습니다. 브린 잭슨은 디테일 지향적인 사람으로서 저에게 새로움을 가져다 주었습니다.

모든 디자인에 8포인트 그리드를 적용하기 시작했는데, 다른 사람들이 이 방법을 따르지 않으면 짜증이 생겼었습니다. 하지만 얼마 지나지 않아 기업용 소프트웨어나 카피, 텍스트 필드, 하이퍼 링크, 테이블 및 버튼이 많은 인터페이스에서 저를 제한하는 경우가 많았습니다.

저는 그것에 대해 전혀 조사하지 않고 그것을 4포인트 그리드로 바꾸기 시작했습니다. 하지만 다행히도, 저는 이 4포인트 그리드를 사용하는 유일한 사람이 아니라는 것을 알게 되었습니다.

8포인트 그리드는 무엇인가요? 

기본 원칙은 모든 것이 8의 배수 (8, 16, 24, 32, 40, 48,… 80,… 96,…)라는 것입니다. 모든 요소 사이의 간격입니다. 예를 들어 입력 필드의 높이는 48 픽셀이고 다른 입력 필드 사이의 공간은 16 픽셀이 됩니다.

왜 정확히 4포인트가 8포인트보다 높을까요?

더 세분화되고 더 많은 옵션을 읽을 수 있습니다. 8 이나 16 중 하나를 선택하는 대신에, 여러분은 12로 갈 수 있습니다. 아이콘 크기, 요소 간 간격, 텍스트와 아이콘 간 수평 간격 등을 생각해 보십시오.저는 제 텍스트를 8의 기준 그리드에 맞추곤 했습니다. 그러다보니 항상 여러 줄의 텍스트가 너무 빡빡하거나 너무 크다는 문제가 있었습니다.

이제 저는 제 텍스트를 4의 기준선에 맞추고 4의 선 높이 배수를 4의 기준선 그리드에 맞춥니다. 다음 제품을 사용하여 만든 좋은 라인 높이 도구를 적극 추천합니다. 

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

🎄from.designer 

🗓️ 행사 일정 & UXUI 자료 

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

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

🎥 유튜브 UXUI 자료 영상  

🔖 이메일 

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