웹개발/혼자하는 디자인 공부

[UI/UX] UI/UX Design 폰트, 사이즈, 컬러 참고

데브리 2023. 5. 22. 07:06
반응형

 

 

1. mobile font

 

 

font-size

  • mobile: 12px 이상 / 24px 이상
  • desktop: 16px default font size (1em)

 

 

<body> text-align

  • 3줄 이상 넘어가면 text-align: left가 가독성이 좋음.

 

 

font-family

  • 통일감 있게 1, 2가지만 사용할 것
  • font-weight 2-3가지만 써도 충분. 넘어가면 복잡해 보임

 

font color

  • 폰트 컬러는 접근성 4.5:1 이상? (Contrast Ratio 인가?)
  • 브랜드 컬러로 강조하는 건 좋지만, 너무 여기저기 쓰지 않도록 절제하는 것이 중요

 

 

 

 

 

2. button

 

 

font-size

  • 16 px
  • 손가락 굵기를 생각해서 여백은 넉넉하게
  • 계층 구조: 강-중-약 (중요도에 따라 계층 구조를 나눔: 로그인, 예약하기 등 가장 중요한 버튼은 눈에 띄는 컬러로)

 

 

icon styles

  • 직접 그릴 경우 통일감이 중요함 

 

 

space

  • 컨텐츠 간의 여백을 충분하게 잡아야 가독성을 높여줌

 

 

반응형

 

 

3. Design Tools

 

 

  • Figma
  • Adobe XD
  • Blender (3D)
반응형