[TIL] Today I Learned (2022.06.03)

🧸 zelly log·2022년 6월 3일
4

TIL

목록 보기
27/28
post-thumbnail

세심한 디자인 스킬

외우자! 갓준혁님의 디자인-컨벤션🎇

1. 주인공은 단 한명인가 👤

  • 가장 중요한 버튼이 눈에 잘 띄는가
  • 중요한 버튼이 아니라, 중요하지 않은 버튼이 색이 있다던가. 더 크던가.
  • 페이지/한 섹션에서 가장 중요한 것은 하나.

2. 형제간의 우애 👥

  • 비슷한 요소는 가까이, 다른 요소는 멀리 배치
  • [날짜 시작][날짜 끝]
  • [아이디 입력창][비밀번호 입력창]------------[로그인 버튼]

3. 정렬이 잘 되어있는가? ⏸

  • 큼직한 사각형의 섹션. 상하좌우 마진이 동일한가?
  • 가로로 긴 Input/Button. 내부 텍스트의 좌우가 상하보다 더 큰가?
  • 비슷한 여러개의 버튼. 버튼 크기가 동일하고 간격이 동일한가?

4. 타이포그래피를 아름답게 사용하는가? 🆎

  • 작은 글씨에 볼드 주지 않기
  • 볼드 주고싶다? 큰 글씨에 주기

5. 색상을 아름답게 사용하는가? 🌈

  • 애매한 회색? NONO. 아예 진하던가 아예 연하던가.
  • 색상 계열별로 한가지 톤만 사용.
  • 한 화면에 보이는 색상은, 서로 보색이거나 채도, 명도, 휘도가 유사해야 한다.
    어떤건 형광색 어떤건 파스텔?...🤯
  • 웜톤이냐 쿨톤이냐 RGB 정하고 자신없다면 무채색!

CSS / fit-content

width: fit-content;

실제로 상자가 사용 가능한 공간을 사용하지만 그 이상은 사용하지 않는다.

MDN

profile
🌱 Frontend Developer / ✏Studying / 🍋 React Typescript / 성장하는 프론트엔드 개발자!

0개의 댓글