세심한 디자인 스킬
외우자! 갓준혁님의 디자인-컨벤션🎇
1. 주인공은 단 한명인가 👤
- 가장 중요한 버튼이 눈에 잘 띄는가
- 중요한 버튼이 아니라, 중요하지 않은 버튼이 색이 있다던가. 더 크던가.
- 페이지/한 섹션에서 가장 중요한 것은 하나.
2. 형제간의 우애 👥
- 비슷한 요소는 가까이, 다른 요소는 멀리 배치
- [날짜 시작][날짜 끝]
- [아이디 입력창][비밀번호 입력창]------------[로그인 버튼]
3. 정렬이 잘 되어있는가? ⏸
- 큼직한 사각형의 섹션. 상하좌우 마진이 동일한가?
- 가로로 긴 Input/Button. 내부 텍스트의 좌우가 상하보다 더 큰가?
- 비슷한 여러개의 버튼. 버튼 크기가 동일하고 간격이 동일한가?
4. 타이포그래피를 아름답게 사용하는가? 🆎
- 작은 글씨에 볼드 주지 않기
- 볼드 주고싶다? 큰 글씨에 주기
5. 색상을 아름답게 사용하는가? 🌈
- 애매한 회색? NONO. 아예 진하던가 아예 연하던가.
- 색상 계열별로 한가지 톤만 사용.
- 한 화면에 보이는 색상은, 서로 보색이거나 채도, 명도, 휘도가 유사해야 한다.
어떤건 형광색 어떤건 파스텔?...🤯
- 웜톤이냐 쿨톤이냐 RGB 정하고 자신없다면 무채색!
CSS / fit-content
width: fit-content;
실제로 상자가 사용 가능한 공간을 사용하지만 그 이상은 사용하지 않는다.
MDN