색상의 기본개념과 원리
색의 3요소 (색상Hue, 명도Value, 채도Saturation)
- 색상
올해의 컬러 트랜드 같은건 팬톤컬러에서 영향을 받음
올해는 모카무스~
*pantone사이트 참고 (매년 컬러 트랜드 알 수 있음) - 명도
색의 밝기/ 같은색이어도 밝으면 눈에 띄고, 어두우면 차분한느낌
명도활용하면 글씨 가독성 좋게 할 수 있음, 어떤 버튼일 때 명도로 더 눈에띄게 할 수 있음
명도에 따라 분위기가 달라진다 - 채도
얼마나 맑아?얼마나쨍해?느낌
원색에 가까우면 채도가 높음
채도가 높으면 색이 선명함
낮은채도는 회색끼가 돈다.
ex)유튜브 썸네일같은거, 강조하고자 할때
타이포그래피 기초
글자를 배치하고 디자인하는 기술과 예술
폰트,글자 크기, 간격, 정렬, 색상 등을 조절하여 가독성과 시각적인 완성도를 높인다.
같은 "안녕하세요"도 심리적, 시각적 완성도가 다르게 표현된다.
*스타벅스 가서 글자를 자세히 보기 / 저 메뉴판 바꿔주고싶다~ 마음으로 보기ㅎㅎ
명조체/ 셰리프serif - 장식이 있음(전통적,신뢰적느낌)
고딕체/ 산셰리프Sans-serif - 장식이 없음(현대적,직관적느낌)
글자크기와 계층구조
본문, 캡션 등 글자의 크기를 조절하여 중요한 정보에 시선을 유도
제목은 크고 굵게, 본문은 작고 가독성 있게
강조하고싶은 곳, 시선이 꽂히게 하고싶은 것에 강조하며 계층구조
자간 (Letter Spacing)
글자 사이의 간격/ 가독성향상
ex)스타벅스 메뉴판 참고
행간 (Line Height)
행과 다음행 사이의 간격
ex)책마다 행간 다르게 설정되어 있음
색상&대비
텍스트와 배경 간의 시각적 구분을 명확하게 하여 가독성 높임
중요한 정보를 강조
정보를 더 쉽게 이해하고 빠르게 읽을 수 있다.
타이포그래피 두분야
기능정 타이포그래피, 가독성>미적기능, 내용전달, 읽기편하게
실험적 타이포그래피, 가독성<미적기능 , 글자를 재료로 삼아 미적으로 사용함 ex) 광고, 포스터
색상환 color wheel
색상 간의 수학적 관계를 기반으로 작동함
hex 코드 : 색상을 16진수로 인식함 (예:#FF5733)
RGB 빨강, 초록, 파랑 (예: 255,0,0)
HSL 색조,채도,명도
컬러팔레트
1. https://www.khroma.co/generator
50개 색상을 클릭하면 자동으로 컬러조합 해줌
원하는 색상에 마우스를 갖다대고 오른쪽 위에 정보표시 클릭하면 HEX코드랑 RGB코드가 나온다
신기하다!
개인적으로 Downy 색상 예쁘다 ㅎㅎ
2. 컬리나 다른 사이트에서 폰트궁금할 때 크롬에서 fn+F12(개발자코드) 에서 맨앞 화살표 누르면 어떤 폰트 썼는지 알 수 있음
3. 폰트가져오기 : 눈누 사이트에서 다운 가능
1.원하는 폰트 검색 후 다운로드 페이지로 이동 클릭
2. 글꼴 다운로드 클릭
3. 다운로드-public-static-가져온 폰트 전부 선택 후 마우스 우클릭 -열기 - 설치하면 다운로드 완료
둘째날 과제1. 나만의 팔레트(무드보드) 만들기
1. 핀터레스트에 원하는 이미지 검색
2. 어도비 가서 테마추출 - 핀터레스트에서 가져온 이미지 가져오기 https://color.adobe.com/ko/
3. 그럼 비슷한 무드의 색상이 추출됨
과제2. 컬러 화면 제작하기 (타이포만)
마켓컬리 홈페이지에서 캡쳐해서 따라만들어보기
과제3. 자유롭게 타이포화면 만들어보기
1. 챗지피티한테 질문해서 글 소재 얻기
2. 핀터레스트에 '편집디자인 레이아웃'검색해서 레퍼런스 하고 싶은 디자인 고르기
3. 피그마로 나만의 타이포화면 만들기
둘째날 과제1. 나만의 팔레트(무드보드) 만들기
과제2. 컬러 화면 제작하기 (타이포만)
과제3. 자유롭게 타이포화면 만들어보기
