🔖 2021년 10월 1주 TOP3

🔖 2021년 10월 1주 TOP3

타이포그래피 크기를 만들 때 피해야될 실수 5가지 (2021년)

이 글은 제가 CallHub 마케팅 웹사이트의 타입(Type) 크기을 만들면서 실수하고 배웠던 5가지의 내용입니다.

배리어블 폰트없이 너무 많은 폰트 두께를 사용했을때.

페이지 요소에 대한 명확한 계층 구조와 요소 간의 대비를 만들기 위해서는 여러 개의 폰트 두께가 필요합니다. 그러나 개발자가 일반적인(Static) 폰트의 경우처럼 각 폰트 두께에 대해 별도의 폰트 패키지를 따로따로 설치해야 하는 경우 페이지 속도에도 영향을 미칠 수 있습니다. 배리어블 폰트는 단일 폰트 파일 하나로 여러 폰트 두깨를 조정할 수 있는 유연성을 제공해 주는 폰트입니다.

요약:

배리어블 폰트를 사용하지 않는 경우에는 두깨가 여러 개를 가진 폰트를 사용하는 것이 좋습니다. 그러나 모든 폰트 두께 파일을 한 번에 많이 가져오는 것은 피하세요. 페이지 속도가 부정적인 영향을 받지 않도록 필요한 최소한의 두께만 가져오세요. 더 빠른 페이지 로드를 위해 구글 폰트 사이트 링크에 있는 배리어블 폰트를 고려해봅시다.

눈으로 판단하는 경우에는 비례 척도를 사용하기.

타입 크기의 각 조합은 서로 가까이 배치될 때 시각적 조화를 이루어야 합니다. 크기를 늘리거나 줄이는 명확한 패턴 없이 타입 크기를 만들게 되면 타입 크기를 사용하는 것이 더 어려워지고 눈대중으로 맞추게 되는 계층 구조를 만들 것입니다.

타입 크기를 조정하기 위해 여러 비율(패턴 사용)을 사용할 수 있지만(*Jeremy Church의 Type Scale 참조) 패턴을 사용하게 되면 좀 더 눈이 편해지고 인쇄상의 크기에서 타입 크기를 추가할 때 편리합니다.

1.2의 비율을 사용하는 음정(The Musical Interval)에서도 마이너 3도(Minor Third)가 좋은 예시라 할 수 있습니다. 여기서 황금비(1.62)도 알 수 있는데요. 물론 이것들은 엄격한 규칙이 아님을 명심하세요. 자유롭게 시도해 보세요.

예를 들어, 마이너 3분의 1 비율은 1, 1.2, 1.44, 1.728, 2.074 등이 있으며 기본 폰트 크기로 16px를 고려하는 경우, 소수점 값이 있는 글꼴 크기를 제공합니다. 그러나 아래 이미지와 같이 여기에서 약간의 수정을 곁들이면 타입 크기 작업하기에 훨씬 수월해질 것입니다.

요약:

음악과 자연속에서는 타입 크기 간의 조화를 만드는 데 사용할 수 있는 많은 비례 비율들을 발경할 수 있습니다. 타입 크기를 만들 때 지침으로 한번 참고해보세요.(*Kevin Powell의 Using a typographic scale 참조).

웹과 모바일에서 동일한 타입 크기를 사용하는 경우.

올바른 타입 크기를 찾는 데 오랜 시간을 보내게 된다면, 웹사이트에서 자신의 타입 크기를 보고 싶어 하는 것은 당연합니다. 그러나 아름다운 비율의 타입들이 모바일 인터페이스에서는 어울리지 않거나 너무 크게 보일 수도 있습니다. 모바일 화면 전체를 채우고 있는 H1 타이틀이 마냥 반갑지만은 않네요. 데스크톱의 타입 크기를 완성한 후에는 모바일 인터페이스에서 어떻게 보일지 고려하는 데 약간의 추가 작업을 기울일 필요가 있습니다.

검색 엔진(SEO)이 우선순위가 아닌 경우, H2이 H1이 나타낼 위치 등을 대체하여 웹과 모바일에서 동일한 유형으로 선택될 수 있습니다. 그러나 Google과 같은 검색 엔진은 페이지의 주요 컨텍스트를 이해하기 위해 H1 제목을 찾기 때문에 모바일용 스케일을 만드는 것이 낫습니다.

요약:

웹 인터페이스용으로 구축된 타입 크기는 모바일에서 보기 좋지 않을 수 있습니다. 다양한 화면 해상도에 대해 타입 크기가 어떻게 변경되어야 하는지에 대한 규칙을 만듭니다. 중단점을 설정하고 화면 크기가 1024px 미만인 경우, (예: H1 글꼴 크기가 32px에서 24px로 변경되어야 함)처럼 수행할 수 있습니다.

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

스타트업에서 유일한 디자이너가 디자인 시스템을 구축하는 방법

회사에서 프로덕트 디자인을 담당하는 유일한 사람이 되는 것은 항상 어렵습니다. 동시에 여러 가지 일을 처리하기 때문에 하루가 정신없이 바쁠 떄가 있습니다. 프로덕트 디자인, 기능 제공, 프로덕트 담당자와의 협업, 개발자와 QA 지원, 사용자 인터뷰 등을 위한 고도의 전략을 정의해야 합니다.

또한 항상 기술을 따라잡아야 합니다. Figma는 모든 프로덕트 관련 기능에 사용하는 주요 도구입니다. 모든 디자인, 탐색과 브레인스토밍 세션이 거기에 있습니다.

제가 Statflo에 합류한 지 얼마 되지 않아 우리는 새롭게 리뉴얼된 앱을 만들기 시작했습니다. 이 과정에서 저는 클릭 몇 번으로 빠르게 이동하고 프로토타입을 만들 수 있는 디자인 시스템이 필요했습니다.

주저하지 말고 시중에 나와 있는 오픈 소스 디자인 시스템을 사용합니다.

처음에는 많이 필요하지 않습니다. 사용할 요소의 대부분은 버튼, 드롭다운, 폼, 폰트, 색상 등 원초적인 구성 요소입니다. 시스템의 초기 스타일 지정은 중요하지 않습니다. 몇 번의 클릭만으로 나중에 스타일을 변경할 수 있습니다.

타사 디자인 시스템에서 찾아야 할 가장 중요한 것은 유연성과 적절한 구성 요소를 필요로 합니다. 다음과 같이 시작할 수 있습니다.

무료: Ant Design open source, Lexicon DSL 유료: Tetrisly, Venus Design System, 73px

기본 구성 요소, 색상과 타이포그래피

디자인 시스템을 계속 진행하기로 결정했다면 먼저 색상, 타이포그래피 와 필수 구성 요소와 같은 몇 가지 간단한 사항에 중점을 두어야 합니다.

이 전략을 사용하면 훨씬 더 빠르게 디자인을 만들 수 있습니다. 예를 들어, 입력 필드를 생성해야 하는 경우 기본 상태로 시작하고 나중에 다른 필드를 추가할 수 있습니다.

예를 들어, 입력 필드 내에서 어떤 아이콘을 사용할지 확실하지 않은 경우 16x16 정사각형을 만들고 회색으로 채우고 구성 요소로 만듭니다. 이렇게 하면 앞으로 나아갈 수 있고 앞으로 이 아이콘을 더 쉽게 업데이트할 수 있습니다.

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

당신이 알아야 할 10가지 기본 UI 디자인 원칙

대부분의 사용자는 문제가 발생할 때만 앱이나 소프트웨어의 UI 디자인을 알아차립니다.  이러한 이유로 좋은 UI 디자인은 거의 눈에 띄지 않고 사용자가 중단 없이 작업에 착수할 수 있도록 해준다고 말할 수 있습니다.  그리고 UI 디자인 프로젝트가 다양한 만큼 UI 디자인의 모든 좋은 예는 동일한 기본 황금률을 따르는 경향이 있습니다.

이 기사에서는 완전히 매끄럽고 거의 감지할 수 없는 사용자 경험을 위해 따라야 할 가장 중요한 UI 디자인 원칙을 살펴봅니다.

10가지 필수 UI 디자인 원칙

효과적인 사용자 인터페이스 디자인은 사용자 경험에서 가능한 많은 장애물, 병목 현상, 걸림돌 및 잠재적인 혼란 원인을 제거하는 것입니다.  무엇보다도, 목표는 모든 사용자가 유연하고 직관적으로 탐색할 수 있는 환경을 조성하는 것이며, 최소한의 소란으로 목표를 달성할 수 있도록 하는 것입니다.

물론 모든 UI 설계 프로젝트마다 다릅니다.특히 디테일에 관해서는요. 예를 들어, 모바일 앱에 적합한 솔루션이 데스크톱 소프트웨어나 웹 사이트에 적합한 솔루션이라고는 할 수 없습니다. 그러나 좋은 UI 디자인의 일반적인 원칙은 모든 플랫폼과 프로젝트에서 일관되게 유지됩니다.

다음은 작업 중인 거의 모든 UI 디자인 프로젝트에 적용할 수 있는(실제로 그래야 하는) 일련의 기본 UI 디자인 원칙입니다.  위험을 무릅쓰고 이 황금률을 무시하세요!

1. UI 디자인을 단순하게 유지하세요.

UI 디자인 프로세스는 종종 재미있습니다. 그래야 합니다. 그러나 목표를 주시하는 것이 중요하며 디자이너의 개인적인 만족도는 항상 이 목록의 맨 아래에 있어야 합니다.

아마도 모든 주요 UI 디자인 원칙 중 가장 중요한 것은 누구를 위해 설계하는지, 그 이유가 무엇인지 잊지 않는 것입니다. 좋은 UI 디자인은 실용적이며 결코 장식적이지 않습니다.  제멋대로이거나 지나치게 형식적인 디자인은 불필요한 잡음만 유발하며, 사용자와 실제로 관련된 요소로부터 주의를 분산시킵니다.

UI 디자인의 일부가 사용자에게 실용적인 목적을 제공하지 않고 자신의 창의적 취향만을 만족시킨다면, 그래서는 안 됩니다. 가장 기본적인 요소로 디자인을 정리하세요.  불필요한 성장은 모두 제거하고 절대적으로 필요한 요소만 남겨 두어야 합니다.

2. 예측하고 선점하세요.

그러나 사용자와 관련된 것이 무엇인지 어떻게 알 수 있을까요?  가장 먼저 취해야 할 UI 디자인 단계 중 하나는 사용자와 사용자의 요구를 완전히 이해하는 것입니다.  이 작업을 완료하면 사용자가 다음에 무엇을 하고 싶어할지 예측할 수 있는 위치에 있게 됩니다.

이제 사용자에게 필요한 도구, 정보 및 리소스를 정확하게, 그리고 그들이 정확히 필요할 때 제공할 수 있습니다.

또는 이것이 사용자가 원하는 것과 일치하지 않는 경우 디자인의 초기 부분을 변경하여 처음부터 완전히 다른 방향으로 유도하도록 행동을 선제할 수 있습니다.

3. 사용자를 운전석에 앉히세요.

사용자는 자신이 실제로 제어하고 있는지 여부에 관계없이 완전히 제어할 수 있다고 느껴야 합니다. 이것은 UI를 배경으로 페이드하게 만드는 것을 의미합니다. 물론 사용자가 필요할 때 항상 있어야 합니다. 그리고 그들이 기대하는 바로 그곳에 있습니다. 그러나 아무도 인터페이스가 특정 행동을 강요하거나 결정을 내리는 것처럼 느껴서는 안됩니다. 어떤 경우에는 이것이 정확히 진행되고 있는 것일 수도 있습니다.

4. 체계적이고 일관적이어야 합니다.

마스터해야 할 가장 기본적인 UI 디자인 개념 중 하나는 단순히 일관성을 유지하는 것입니다.  내부(즉, 자체 플랫폼 전반)뿐만 아니라 다른 곳에서 채택된 업계 표준도 마찬가지입니다. 우수한 UI 설계 프로젝트는 수레바퀴를 재창조하는 것이 아니라 수레바퀴를 개선합니다.  우리는 모두 필요한 곳에서 혁신을 추구합니다.  그러나 그들이 말했듯이 "고장난 것이 아니라면 고치지 마세요."

사실 고장나더라도 고치고 싶지 않을 수도 있습니다.  이 점을 고려하세요. 여러분의 아이디어가 객관적으로 "더 나은" 즉 논리적인 것일 수도 있지만, 사용자가 예상하는 것과 다를 경우 혼란만 초래할 뿐입니다.

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

🎄from.designer 

🗓️ 행사 일정 & UXUI 자료 

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

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

🎥 유튜브 UXUI 자료 영상  

🔖 이메일 

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