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

이전 글

2021.06.20 - [디자인] - UI & UX Micro-Tips: The Ultimate Collection - 5

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

 

 

---

 

51. If you (have to) use multiple typefaces, try to stick to the 2 max rule.

If you (have to) use multiple typefaces, try to stick to the 2 max rule.

 // 여러 서체를 사용할 경우 2개의 규칙을 지킬 것

 // 가능하면 한 가지의 서체를 사용하는 것이 좋으나, 프로젝트에서 요구하는 경우 최대 두 개까지만 사용할 것

 // 그 이상은 없어하지 마 하지 말 것. 

 

---

 

52. All-Uppercase + Letter-Spacing = Better Legibility.

All-Uppercase + Letter-Spacing = Better Legibility.

 // 모두 대문자 + 문자 간격 = 가독성 향상

 // 사용자가 더 잘 읽을 수 있도록 문자 사이의 간격을 늘리는 것이 좋다.

 // 글자가 서로 더 구별되기 때문에 단어를 읽고 처리하기가 더 쉬어진다.

 // 글자 사이의 간격을 조금만 늘려도 가독성을 높이고 대문자 유형에 세련미를 더할 수 있다.

 

---

 

53. Be consistent with your design elements.

Be consistent with your design elements.

 // 디자인 요소와 일치해야 한다.

 // 레이아웃, 아이콘, 색상 및 버튼을 사용하여 이름을 지정하고, 일관성을 유지하기.

 

---

54. White Space. Use it generously.

White Space. Use it generously.

 // 여백을 아낌없이 사용할 것

 // 디자인에 공백을 추가하는 것은 디자인을 즉시 개선할 수 있는 가장 간단한 방법 중 하나이다

 // 작업이 숨을 쉬고 더 세련되게 보이도록 합니다.

 

---

 

55. Style that opening paragraph, and draw the user in.

Style that opening paragraph, and draw the user in.

 // 시작 문단에 스타일을 지정하고 사용자를 끌어들인다.

 // 블로그 게시물 / 기사와 같은 긴 형식의 콘텐츠로 작업하는 경우 독자를 콘텐츠로 끌어들이는 것이 중요하다.

 // 시작 단락의 모양은 이를 달성하는 데 있어 내용 자체만큼이나 중요할 수 있다.

 // 다른 글꼴 크기, 선 높이, 두께 및 색상과 같은 간단한 조정만으로 첫인상을 개선할 수 있다.

 

---

56. Design for scanners. Use short paragraphs.

Design for scanners. Use short paragraphs.

 // 스캐너를 위한 디자인. 짧은 단락을 사용

 // 긴 형식의 콘텐츠로 작업하고 실용적 일 때는 단락을 짧고 강력하게 유지

 // 우리는 가능한 한 빨리 정보를 소화하기를 원함.

 // 가능한 한 짧고 명확한 단락으로 사본을 제공하면 사용자가 정보를 더 잘 읽고 이해할 수 있는 확실한 방법이다.

 

---

57. Define a colour palette, and create uniformity in your designs.

Define a colour palette, and create uniformity in your designs.

 // 색상 팔레트를 정의하고 디자인에서 균일 성을 만든다.

 // 다양한 무작위 색상 선택으로 디자인을 과도하게 채우지 말 것

 

 

---

 

58. Lay out your icons consistently when using the 8pt Grid System.

Lay out your icons consistently when using the 8pt Grid System.

 // 아이콘을 일괄되게 배치할 것

 // 아이콘 및 8pt 그리드 시스템으로 작업할 때 대부분의 잘 만들어진 아이콘 세트에는 8의 배수 (예 : 16x16, 24x24, 32x32 등)인 프레임 안에 있는 아이콘이 있다.

 // 그렇지 않은 경우 디자인에 삽입된 아이콘이 8pt 그리드 값 (예 : 24x24)을 사용하는 컨테이너 안에 프레임이 있는지 확인할 것. 이렇게 하면 아이콘이 디자인 내에서 일관되게 배치될 수 있다.

 

---

 

59. It’s ok the bend the rules sometimes when it comes to Type Scales and Grids.

 It’s ok the bend the rules sometimes when it comes to Type Scales and Grids.

 // 유형 스케일 및 그리드와 관련하여 때때로 규칙에 어긋 나도 괜찮다

 // 일종의 Type Scale이나 멋진 8pt 그리드 시스템과 같은 규칙을 따르는 것을 강력히 지지한다

 // 때로는 Scale 또는 Grid가 엄격하게 지시하는 것에서 벗어나 더보기 좋은 것을 시각적으로 표시하는 것이 좋다.

 

---

60. Make those error messages on your forms helpful and easy to understand.

Make those error messages on your forms helpful and easy to understand.

 // 양식의 오류 메시지를 이해하고 쉽게 만들기

 // Forms로 작업할 때 오류 메시지에 무엇이 잘못되었는지, 문제를 해결하는 방법이 설명되어 있는지 확인할 것

 // 항상 사용자에게 정보를 제공할 것

 

---

 

61. Try and assure the user that something is happening when loading up your App.

Try and assure the user that something is happening when loading up your App

 

 // 앱을 로드할 때 어떤 일이 일어나고 있는지 사용자가 확인하는 것이 좋다

 // 사용자에게 진행상황에 따른 정보를 제공해야 한다.

 

---

 

62. Inform the user on what’s going to happen if they apply a certain action.

Inform the user on what’s going to happen if they apply a certain action

 // 사용자에게 특정 작업을 적용하면 어떤 일이 일어날지 알리기

 // 특히 무언가를 영구적으로 삭제하는 것과 같이 되돌릴 수 없는 결과가 있는 작업에 적용

 // 사용자에게 무슨 일이 일어날지 알려주고 '인터넷 삭제'라고 표시된 큰 빨간색 버튼을 누르기 전에 확인을 요청

 

---

 

63. Make sure your most important screens get priority in the Tab Bar.

Make sure your most important screens get priority in the Tab Bar.

 // 탭 바에서 가장 중요한 화면이 우선순위를 갖도록 하기

 // 앱의 탭 바는 화면 공간의 주요 가격이므로 현명하게 사용할 것

 // 앱에서 가장 자주 사용되는 스크린을 위해 탭 바를 예약하고 더보기 아이콘 안에 보조 화면을 숨 길 것

 

---

 

64. Don’t hide important actions away inside of a Dropdown. Front and Center people!

Don’t hide important actions away inside of a Dropdown. Front and Center people!

 // 드롭다운 메뉴 안에 중요한 동작을 숨기지 말 것

 // 간혹 데스크톱 보기에서 이런 일이 발생하는데 사용자가 수행해야 하는 필수 작업 (예 : 가입 또는 로그인)은 탐색조차 할 수 없는 드롭 다운에만 숨겨져 있다. 이러지 말 것.

 

 

 

참조링크

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

UI & UX Micro-Tips: The Ultimate Collection

 

 

 

※ 64개의 글이 끝났습니다.

번역에 힘써준 구글 번역기님에게 감사를.. 

 

 

전체적으로 종합해 보면

1. font-family는 하나만 쓰고 대신 font-style이나 font-weight를 디테일하게 쓰는 걸 추천한다는 것

2. line-height와 letter-spacing도 디테일하게 쓰는 걸 추천  

3. 이미지에 맞는 폰트를 사용하라는 것 

4. 버튼 모양이나, 색상은 통일하라는 것

5. 사용자에게 에러 메시지나 특정 작업에 대해 알림, 현재 어떤 일이 일어나고 있는지에 대한 모든 부분에 대한 정보를 제공할 것