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

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

 

 

 

1. Make your elements appear more defined with a subtle border.

Make your elements appear more defined with a subtle border.

 // 요소에 테두리를 둥글게 하고(border-radius),  그림자 같은 음영(box-shadow) 효과 적용

 

 

---

 

2. Reduce Letter-spacing on your Headings to give a better optical balance.

Reduce Letter-spacing on your Headings to give a better optical balance.

 // optical balance를 위해 제목의 문자 간격을 줄인다.

 

※ optical balance

  우리의 뇌는 때때로 정보를 의도한 것과 약간 다르게 인식할 수 있는데 이것을 착시현상이라고 한다.

착시 현상은 디자인에도 적용된다. 그러나 인터페이스를 설계하면 반대 방식으로 작동하는데,

물리학과 수학의 법칙을 깨고 optical balance을 만들기 위해 요소의 모양을 약간 변경해야 한다.

SIZE

정사각형과 원을 나란히 놓고 똑같은 크기를 주면 원이 정사각형보다 작은 것을 시각적으로 느낄 수 있다.

이 경우 원을 약간 늘리면 원의 지름이 실제로 사각형의 지름보다 크더라도 모양이 시각적으로 서로 가깝게 보인다.

---

COLOR

텍스트 옆에 채워진 아이콘을 넣는 경우 텍스트가 약간 어둡게 보일 수 있다.

이러한 불일치는 채워진 아이콘에 비해 문자가 얇은 선으로 만들어지고

아이콘보다 시각적인 무게가 적기 때문에 발생한다.

시각적 무게와 관련된 문제를 해결하기 위해 아이콘에 비해 텍스트에 약간 더 어두운 색상을 제공할 수 있다.

---

POSITIONING

텍스트 옆에 아이콘을 배치하고 세로로 정렬하면 결국 아이콘을 텍스트보다 더 높게 배치할 수 있다.

두 개체의 가중치가 서로 다르기 때문에 여기에서 텍스트의 기준선도 고려해야 한다.

이 경우 아래 이미지의 예와 같이 경계 상자 내부의 아이콘을 낮추기만 하면 되는데....

 - 텍스트와 같이 들어간 아이콘은  vetical-align 정렬이나  inline-block보단

  absolute 처리하는 게 맞는 듯하다

 

 

참조링크

https://medium.muz.li/basics-of-optical-balance-in-interface-design-ui-4037c033cca2

Basics of Optical Balance in Interface Design (UI)

 

 

---

 

3. For consistency, make sure your icons share the same visual style.

 For consistency, make sure your icons share the same visual style.

 // 일관성을 위해 아이콘이 동일한 시각적 스타일을 공유하는지 확인

 // 동일한 무게로 채워지거나 윤곽만 그리거나,  혼합하지 않기

 

 

---

 

4. Using just one typeface in your design is all good. Ignore the haters.

 // 디자인에 하나의 서체만 사용하는 것이 좋다. 싫어하는 사람은 무시하...🤣🤣🤣

 

 

---

 

5. Whitespace is your UI design friend. Use it generously. Use it well.

Whitespace is your UI design friend. Use it generously. Use it well.

 // ui디자인 시 공백을 적절히 사용하기

 // 여백의 미가 디자인을 숨 쉬게 한다

 

---

 

6. Creating long-form content? Give 20pt a try.

 // 콘텐츠에 텍스트 내용이 길다면 20pt를 유지하라

 // 폰트마다 다르겠지만 20pt에서 가장 가독성이 높을 것이다

 // 18pt는 지난 10년간이나 사용한 것 같은데 그만 쓰자.

 

---

 

7. Use a Type Scale to define a harmonious set of font sizes.

Use a Type Scale to define a harmonious set of font sizes.

 // 글꼴 크기의 조화를 원한다면 문자 비율을 사용하기

 // Type Scale 을 사용하면 어림짐작 없이 쉽고 실질적으로 글꼴 크기 세트를 정의할 수 있음

기본적으로 많이 사용하는 구글 웹폰트 Noto Sans Kr 폰트 

 

---

 

8. Choose a Base Colour, and then use Tints & Shades to add uniformity.

Choose a Base Colour, and then use Tints & Shades to add uniformity.

 // 기본 색상을 선택하고, 그 색상을 바탕으로 색조랑 음영을 일률적으로 맞추기

 // 색상을 너무 많이 채우지 말고 기본 색상을 기준으로 톤을 맞추면 가장 간단한 방법으로 균일하게 작업 가능

 

기본 컬러 정하기

선택된 색상을바탕으로 color picker창에서 채도(S), 명도(B)를 조정하여 톤 맞추기

선택된 색상을바탕으로 color picker창에서 채도(S), 명도(B)를 조정하여 커버

 

 

---

 

 

9. Improve your user’s onboarding experience. Thumbs rule remember.

Improve your user’s onboarding experience. Thumbs rule remember.

 // 사용자의 onboarding경험을 개선. 

 // 아이폰의 홈버튼 위치에 자리 잡은 skip - 엄지손가락이 쉽게 닿을 수 있는 곳에 배치

 

Thumb Zone - https://www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php

How Do Users Really Hold Mobile Devices? :: UXmatters

2013년 스티븐 후버가 모바일을 사용하는 유저들을 관찰한 결과를 보여줬고.

• one handed—49% 한 손 사용자가 49%
• cradled—36% 한 손은 사용하고 한손은 받치는 사용자가 36%
• two handed—15% 양손 사용자가 15% 

실제로 많은 사람들이 한손으로 엄지만 이용해서 스마트폰을 사용하고 있고, 그러다 보니 자연적으로 엄지존이 생긴다. 엄지가 닿는 부분과 닿지 않는 부분으로 나눠진다.

모바일에서 공유하기, skip, 홈버튼, 검색 등등이 왜 아래에 분포되어야 하는지 알 수 있는 대목이다. 

 

---

10. Your shadows are coming from one light source right?

Your shadows are coming from one light source right?

  // 그림자의 방향은 일치하게 - 햇빛의 위치는 하나일 뿐....

Use Global Light 체크

// Use Global Light는  전체 레이어의 빛의 방향을 한 곳으로 지정해주는 역할을 함

 

 

 

 

 

참조링크

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

UI & UX Micro-Tips: The Ultimate Collection

 

 

 

 

‘Always use 2 Typefaces. Minimum.’ crowd. 

두 개의 서채를 무시하기..
요즘 디비컷에 업로드된 사이트 대부분 최소 두 개 이상의 서체를 사용 중이다.
아마 한글을 지원하는 폰트와 영문을 지원하는 폰트가 달라서겠지만..

.
https://www.cuckoo.co.kr/
요즘 예제로 사용하는 사이트인데
제품명처럼 영어나 숫자로 조합된 부분의 폰트와
한글로 지정된 폰트가 다르다는 걸 알 수 있다.

 

 

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