🔖 UXUI 해외 인기 아티클

🔖 2022년 3월 3주 TOP3

UI 유형을 개선하는 4가지의 방법

오늘은 하루의 일부를 타이포그래피를 배우는데 보냈습니다. 저는 많은 새로운 것들을 배웠고 또한 이전에 배웠던 몇 가지 팁들을 우연히 발견했습니다.

타입페이스 및 폰트

시작하기 전에 타입페이스와 폰트의 차이점을 염두에 두는 것이 좋습니다. 타입페이스는 폰트 모음을 정의하는 반면 폰트는 타입페이스 스타일의 변형을 정의합니다.

이제 UI에서 유형을 개선하는 방법에 대해 한번 알아보겠습니다.

1. 라인 높이 (Line-Height)

본문의 경우, 카피는 타입 크기(Type Size)의 1.3~1.6배의 라인 높이(line-height)를 유지합니다.

제목의 경우 타입크기의 1~1.2배의 라인 높이를 유지합니다.

2. 라인 길이 (Line Lenght)

큰 화면에서 본문은 45~75자의 정도의 범위를 유지하세요.

작은 화면 크기에서의 본문은 40~60자 범위를 유지합니다.

3. 단락 간격 (Paragraph Spacing)

단락 간격은 활자 크기의 0.75~1.25배 범위를 유지해야 합니다.

4. 유형 정렬 (Type alignment)

영어의 경우 왼쪽에서 오른쪽 방향으로 정렬하는 것이 가장 일반적이며 UI의 대부분의 텍스트에 사용되어야 합니다.

참고: 오른쪽 정렬 및 중앙 정렬도 사용할 수 있지만 소량의 텍스트에만 권장됩니다.

참고 소스:

(1) 머티리얼 디자인

(2) 더 나은 웹을 위한 더 나은 타이포그래피 — Matej Latin의 저서

(3) 사용자 인터페이스 디자인 — Michał Malewicz & Diana Malewicz의 저서 

..

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

노인을 위한 UX 디자인

기도의 중요성, 자전거 타는 법, 오믈렛 만드는 법 등을 가르쳐 주셨을 때 조부모님에 대한 어린 시절의 기억이 생생합니다. 우리가 어렸을 때 배우고 새로운 것에 적응하는 것은 비교적 쉽습니다. 제가 자라면서 교육을 받는 데 도움이 되었던 것처럼 나도 기술로 그들을 도울 수 있기를 바랍니다. 그러나 이것은 연령이 증가함에 따라 변합니다.

우리의 책임은 노인들이 더 나은 사용자 경험을 할 수 있도록 돕는 것입니다. 그들의 인지적, 생리학적 변화는 시력, 운동 능력, 청력, 기억력, 주의력, 그리고 의사 결정의 감소로 이어집니다. 빠르게 변화하는 기술로 인해 기성 세대는 기술 사용을 이해하고 학습하는 데 도움이 필요합니다. 기술 회사는 노인을 위한 포괄적이고 사용자 친화적인 장치를 설계하고 만들어야 합니다.

UX/UI 디자이너의 목표는 노인이 접근할 수 있고 포괄적인 디자인을 만드는 것이어야 합니다. 이는 노인들이 기술에 익숙해지고 계속 참여하도록 하는 데 도움이 될 것입니다. 디자이너는 노인을 위한 더 나은 UX를 위해 다음 고려 사항에 주의를 기울여야 합니다.

UX 리서치

많은 노인들은 큰 화면 크기와 글꼴 크기 때문에 휴대 전화 사용을 좋아하지 않고 태블릿을 선호합니다. 노인들은 거의 휴대전화를 사용하지 않습니다. 급한 일이 아니면 며칠 동안 문자 메시지를 무시하는 경향이 있고 전자 장치가 짜증난다고 느낍니다. 응용 프로그램과 장치를 만드는 설계자는 이 사용자 그룹을 모르기 때문에 노인의 요구를 충족하지 못할 수 있습니다.

UX 리서치는 일상 생활에 도움이 되는 앱을 이해하고 만드는 데 필수적입니다. 사용자 연구를 수행할 때 사용자와 교류하고 관찰하여 사용자가 디자인하는 프로덕트나 서비스에 대한 요구 사항, 행동과 문제점을 알게 됩니다. 연구는 이러한 문제를 발견하는 데 도움이 될 것입니다. 사용자 인터뷰, 일기 연구, 포커스 그룹 연구, 설문 조사를 수행하면 유용한 프로덕트를 개발하는 데 도움이 될 수 있습니다. 질적 방법과 양적 방법을 조합하여 개선할 수 있습니다.

UI 디자인

구세대를 위해 디자인하는 동안 UI 디자이너는 그 연령대에 어필하고 지원하는 것이 무엇인지 고려해야 합니다. 아이콘, 그래픽, 버튼, 글꼴과 같은 UI 요소를 자신의 기술에 맞춥니다. 운동 능력의 감소는 인터페이스 표적화를 어렵게 만들고 손가락 두드리기도 감소합니다.

UI에 대한 몇 가지 제안 사항은 다음과 같습니다.

16p 미만의 글꼴 크기를 피하고 텍스트 크기를 조정하도록 합니다. 화면 판독기로 프로덕트를 테스트하고 명암비에 주의하세요. 비디오와 오디오 콘텐츠에 대한 언어 설정이 포함된 자막을 제공하세요.

상호 작용과 도움말 섹션

연령대마다 인터랙티브 디스플레이에 대한 선호도가 다르며 이러한 요소를 즐기는 것은 어린 아이들에게 재미있습니다. 게임화, 제스처 제어 그리고 애니메이션은 젊은이들에게 동기를 부여하지만 단순하고 사용하기 쉽고 사용하기 쉬운 디자인은 노인 그룹에 가장 적합합니다. 우리는 모두 특정 기술 작업을 완료하는 동안 혼란스러워 하고 길을 잃지만, 노인들은 더 나아가기 위해 단계나 튜토리얼을 보기 위해 도움말 섹션을 찾는 경향이 있습니다. 따라서 상호 작용을 낮게 유지하고 도움말 섹션의 설명을 액세스 가능하고 관련성이 있으며 이해하기 쉽게 유지하면 앱을 일관성 있게 사용할 수 있습니다.

..

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

디자이너를 위한 10가지 최고의 Chrome 확장 프로그램

디자이너로서 우리는 항상 작업 흐름의 속도를 높이고 개선하는 데 도움이 되는 새로운 팁, 기술, 그리고 도구를 찾고 있습니다. 저는 몇 달 동안 Chrome 확장 프로그램을 테스트해보고, 디자이너를 위한 10가지 최고의 확장 프로그램 및 플러그인 목록을 작성했습니다.

1. Window Resizer

당신이 디자이너라면 이 글을 읽으면서 27" iMac을 보고 있을 것입니다. 하지만 대부분의 사람들이 큰 모니터를 가지고 있지는 않습니다. 따라서 Window Resizer를 만나보세요. 사이트가 다양한 뷰포트에서 어떻게 보이는지를 본다면, 이것은 진정한 생명의 은인일 겁니다. 확장 프로그램을 열고, 사전 설정 뷰포트를 클릭하거나 사용자 정의 항목을 입력하기만 하면 됩니다.

2. Loom

사진은 천 마디 말의 가치가 있고 비디오는 만 마디의 가치가 있다고 합니다. Loom은 애니메이션, 유저플로우, 또는 버그를 기록하고 팀과 공유하는 데 도움을 주는 무료 소프트웨어입니다. 스크린샷만으로는 캡처할 수 없는 내용을 전달할 때 유용합니다. 확장 프로그램을 설치하고 녹음을 누르기만 하면 됩니다. 작업이 끝나면, 비디오를 공유하고 누가 이 비디오를 보았는지 등의 통계를 얻을 수 있습니다.

3. Toybox

요소를 점검하고, 스크린샷을 캡처하고, 사이트에서 버그를 기록하는 데 많은 시간을 보내고 있나요? Toybox 크롬 확장 외에는 더 보지 마세요. 피드백을 남기고, 사이트에서 직접 CSS를 점검하는 가장 빠른 방법입니다. InVision 주석 달기 및 Zeplin Inspecting과 같다고 생각할 수 있지만, 디자인 파일 대신 사이트에 있습니다. 뿐만 아니라 댓글을 남기면, 자동으로 스크린샷을 찍고 브라우저 데이터, OS 정보, 뷰포트 크기 등을 기록하므로, 문제를 쉽게 재현할 수 있습니다. 모든 프로덕트 팀에게 필수품입니다.자인으로 변환

4. Muzli

커피 혹은 차에 영감이 필요하신가요? Muzli 크롬 확장 프로그램으로 해결됩니다. 새 브라우저 창을 열 때마다 멋진 디자인의 최신 피드가 표시됩니다. 그들은 새롭고 힙하고 멋진 것을 제공하기 위해 수많은 디자인 소스를 가져옵니다.

5. SVG Grabber

'때로는 페이지에서 로고나 아이콘만 가져와야 하는 경우가 있습니다. SVG Grabber를 환영해주세요. 단일 버튼을 클릭하면 페이지에 있는 모든 SVG를 자동으로 가져옵니다. 무엇을 캡처할 수 있는지 전체 보기를 확인하고, 필요한 항목을 빠르게 다운로드할 수 있습니다.

6. Page Ruler (페이지 눈금자)

페이지에서 개체의 크기를 측정하는 것은 매우 괴로울 수 있습니다. 측정을 위해 스크린샷 도구를 자주 여는 사람이라면, Page Ruler 확장 프로그램을 사용하는 것이 좋습니다. 확장 프로그램을 열고, 박스를 끌어 측정하면 모든 것 완료됩니다.

7. Dark Mode Dev Tools (다크 모드 개발)

다크 모드는 모든 디자이너에게 진정한 필수입니다. 이것은 Chrome Dev Tools에 내장되어 있고 확장 기능이 아니지만, 저는 언급할 생각입니다. 개발자 도구 열기 > 오른쪽 상단 점 3개 클릭 > 설정 > 다크모드 전환. 이제 완전한 어둠 속에서 *DOM을 통해 길을 피할 수 있습니다. (*DOM: 문서 객체 모델(The Document Object Model)의 약자로, HTML, XML 문서의 프로그래밍 인터페이스를 뜻함. 문서의 구조화된 표현을 제공하며, 프로그래밍 언어가 DOM 구조에 접근하여 문서 구조, 스타일, 내용을 변경할 수 있게 도움.)

8. ColorZilla

어떤 컬러가 사용되었는지 빠르게 찾고 싶은 당신에게, ColorZilla가 최고의 솔루션이 될 겁니다. 그저 페이지에 마우스를 갖다대기만 하면, hex와 rgb 컬러값을 알 수 있습니다. 당신의 클립보드에 바로 옮기기 위해 클릭하세요. 빠르고, 쉽고, 효율적입니다.

9. Fontface Ninja

쉽고 아름다운 또 다른 확장 프로그램은 Fontface Ninja입니다. 당신이 마우스를 갖다대기만 하면 어떤 폰트를 사용했는지 알 수 있습니다. 확장 도구 모음을 사용하여 폰트에서 바로 구매할 수도 있습니다.

10. Custom Cursor

디자이너 특유의 것은 아니지만, 저는 얼마전 이것을 발견하고 장난꾸러기라고 생각했습니다. Custom Cursor를 사용하면 기본 커서를 변경할 수 있을 뿐만 아니라 사용자 지정 커서를 업로드 할 수 있습니다. 매우 재미있고 신선하죠.

..

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

🎄from.designer 

🗓️ 행사 일정 & UXUI 자료 

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

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

🎥 유튜브 UXUI 자료 영상  

🔖 이메일 

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