반응형
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)
반응형
'웹개발 > 혼자하는 디자인 공부' 카테고리의 다른 글
| [유데미] Daniel Walter Scott의 Figma UI UX Design Essentials (0) | 2023.06.04 |
|---|---|
| [유데미] Figma UI UX Design Essentials 수업 내용 (0) | 2023.06.04 |
| [UI/UX] Design Process (0) | 2023.05.19 |
| [UI/UX] How to choose a theme colour for UI/UX design (0) | 2023.05.19 |
| [UX] Best UX Practices for 이커머스 UX Shopping Cart (0) | 2023.05.12 |