웹 디자인 정리

책 "Do it! 웹 디자인 교과서"를 읽고 정리한 글 입니다.
* 책을 보면 제가 필요하다 싶은것만 정리 했습니다.

---

• 디자인 위젯
  1. 쿠퍼티노 Cupertino (Apple)
  2. 머티리얼 Material (Google)
  3. 패럴랙스 Parallax (스크롤에 따라 오브젝트와 배경이미지가 변화는 기법?)
• 웹디자인 추천사이트
  1. 디비딕 http://www.dbdic.co.kr/
  2. 지디웹 https://www.gdweb.co.kr/main/
  3. 핀터레스트 https://kr.pinterest.com/
  4. 드리블 https://dribbble.com/
  5. 비헨스 https://www.behance.net/
  6. css 디자인 어워즈 https://www.cssdesignawards.com/
• F 패턴과 Z 패턴 ( 참고글 : https://brunch.co.kr/@blackindigo-red/38 )

---

• 12컬럼 그리드
  1. 거터 + 유닛 + 거터 = 1컬럼
  2. 2*거터 = 1 사잇값
  3. 첫컬럼과 마지막컬럼 옆에 마진을 넣어서 한페이지 완성
  4. 텍스트를 위한 베이스라인도 있음 ( 가로 )
• 화면 사이즈 : 스탯카운터(https://gs.statcounter.com/)를 이용하여 화면 크기 구성
• 1920px 화면 구성
  1. 1920px width = 1440px container + 2 * 240px margin
  2. 1440px width = 24 * 20px gutter + 12 * 80 px column

---

• 색상그룹화
  • 주조색 + 보조색 + 강조색 3개정도
  • UI 스타일 가이드라인 작성
• 색상별 느낌
  • 빨강 : 에너지 식욕 용기
  • 주황 : 친근 활기 "버튼"
  • 노랑 : 밝고 쾌활 따뜻 "어린이"
  • 초록 : 친환경
  • 파랑 : 신뢰 안정 "병원" "첨단제품"
  • 보라 : 로열 귀족 고급미
• 컬러 사이트
  • 마이 컬러 스페이스 https://mycolor.space/
  • 플랫 UI 컬러즈 https://flatuicolors.com/
  • 쿨러스 https://coolors.co/
  • 컬러헌트 https://colorhunt.co/
  • adobe color https://color.adobe.com/ko/
• 아이콘 : png나 svg 사용
• 그레디언트 사이트 ( 잘못쓰면 촌스러워짐 )
  • 웹그레디언트 https://webgradients.com/
  • UI 그레디언트 https://uigradients.com/#ShroomHaze
  • 그레디언트 헌트 https://gradienthunt.com/

---

• 폰트
  • 강조 / 본문 / 영어&숫자 2~3개의 폰트 쓰기
  • 두께 색상 크기로 계층을 나누면 다양한 폰트를 쓰는 효과를 얻을 수 있음
  • Type scale 반응형 폰트크기
  • 한글자간은 -25 ~ -75 줄이기
  • (빅)타이포그래피로 강조글씨를 사용하는 디자인이 많아짐
• 폰트사이트
  • 구글 웹폰트 https://fonts.google.com/?subset=korean&script=Kore
  • 눈누 https://noonnu.cc/
  • 어도비 https://fonts.adobe.com/?locale=ko
  • 폰트어썸(아이콘) https://fontawesome.com/