UI & UX Micro-Tips: The Ultimate Collection - 2

디자인을 즉시 개선하는 데 도움이 되는 64 개의 강력한 팁 모음

이전글

2021.06.15 - [디자인] - UI & UX Micro-Tips: The Ultimate Collection - 1

UI & UX Micro-Tips: The Ultimate Collection - 1

 

 

---

 

11. Use Superfamilies when you’re looking for great font combinations, but fast.

Use Superfamilies when you’re looking for great font combinations, but fast.

 // 훌륭한 글꼴 조합 Superfamilies를 사용

Superfamilies

 // Serif 및 Sans-Serif 변형 모두 제공될 수 있는 서체 모음

 // 시각적으로 밀접하게 조화를 이루도록 제작

 // 한글은요?? 한글은...? 한글..

 

---

12. Improve contrast between your text and images with a subtle overlay.

Improve contrast between your text and images with a subtle overlay.

 // 텍스트와 이미지 간의 대비 개선 - 너무 정교할 필요는 없다.

 // 이미지 위에 텍스트가 배치될 수 있는 위치에 따라 전체 이미지에 오버레이를 사용하거나

(아래에서 위로 또는 위에서 아래로) 그러데이션 오버레이를 사용하여 둘 사이의 단순한 대비를 얻을 수 있다.

 

---

13. Use Centred Text in moderation. Too much of it makes for a sub-par user experience.

Use Centred Text in moderation. Too much of it makes for a sub-par user experience.

 // 가운데 정렬은 적당히 하자

 // 가능하면 헤드라인 및 텍스트의 작은 구절 정도에만.. 이후 텍스트들은 왼쪽 정렬을 유지

 

---

14. When choosing a multi-use Typeface, try to find one with plenty of weights.

When choosing a multi-use Typeface, try to find one with plenty of weights.

 // 다양한 스타일이 들어간 서체를 사용하는 것이 좋다.

Noto Sans Kr - style

 // 이젠 기본 폰트와 bold만 사용하는 것은 그만😅

 

---

 

15. Darken up your text on light backgrounds. Ignore the ‘cool kids’.

Darken up your text on light backgrounds. Ignore the ‘cool kids’.

 // 너무 당연한 얘기지만 밝은 배경엔 제발 어두운 글씨를 쓰자

고대비로 보기

 // 장애인 차별금지법이 생긴 이후, 여러 장애에 관련하여 불편하지 않게 웹을 사용할 수 있도록

웹 접근성에 맞춰 마크업을 하기 시작했다. 마크업도 마크업이지만, 디자인도 꽤 중요하다. 

 저시력 장애인은 웹을 이용할 때 화면을 확대하거나, 고대비로 보는데

배경과 텍스트 간에 명도 대비가 어느 정도 이루어져야 분별이 가능하다.

네이버 널리 명도대비 관련 이미지

참조링크 네이버 널리

[네이버 온라인 장애 체험]

 

---

 

16. Lighten up your text if it looks a little on the heavy side.

Lighten up your text if it looks a little on the heavy side.

 // 긴 형식의 콘텐츠에선 어두운 텍스트는 무거워 보일 수 있다.

 // 텍스트가 너무 무거워 보이는 경우보다 밝은 색을 사용하는 것이 좋다. (#F4F4F4)

 

---

17. Always make your ‘Call to Action’ the most prominent item on the screen.

Always make your ‘Call to Action’ the most prominent item on the screen.

 // 'Call to Action' 중요한 부분은 눈에 띄게 배치 

 // 색상 대비, 크기 및 라벨을 사용하고 강조할 것 - 아이콘에 대한 의존도 낮추기

 

 

※ 콜 투 액션(Call to Action)

 홈페이지 방문자에게 어떤 행동을 권하거나 유도하는 도구 또는 기법을 의미

 ‘전환율’을 높이는데 중요한 역할

 버튼, 링크, 배너 등의 형태로 만들어지며 방문자의 시선을 사로잡고

 전환 페이지로 이동시키는 것이 주된 목적

---

18. The smaller the font size, the more generous your line height should be.

The smaller the font size, the more generous your line height should be.

 // 글씨 크기가 작아질수록 줄 간격은 넓어집니다

 // 반대로 글씨가 커질수록 줄 간격은 좁아져야 합니다

line-height가 이렇게 중요합니다. - 근데 이미지 화질 어휴

 

---

 

19. Use the x-height or Il1 test to determine readability of your chosen Typeface.

Use the x-height or Il1 test to determine readability of your chosen Typeface.

// 글자의 세로 길이가 너무 긴 서체는 가독성이 떨어지지...

// 숫자 1과 소문자 l과 대문자 I를 구별하는 서체를 씁시다.

그래서 Noto Sans KR 못잃어....

 

---

 

20. Give Prominence to the most frequently used action in a Menu.

 Give Prominence to the most frequently used action in a Menu.

 // 자주 사용하는 메뉴 버튼은 눈에 띄는 action을 사용

 // 개인적으로 active 되었을 때만 동작되었으면 하는 맘이 있지만...

 

 

참조링크

https://uxdesign.cc/ui-ux-micro-tips-the-ultimate-collection-a07d56c9e98

UI & UX Micro-Tips: The Ultimate Collection

 

 

3부로 이어집니다... coming soon 😊