활판술 혹은 활자 서체로 글자의 형태, 배열, 크기 ,간격 등을 조절하여 텍스트를 효과적으로 표현하고 전달하는 예술적, 기술적 작업
타이포그래피 많은 것들 중에 예시다(출처:핀터레스트)
타이포그래피의 중요성
정보전달:좋은 타이포그래피는 독자들에게 가독성 향상시켜 정보를 흡수하도록 도와준다
브랜드 정체성 강화: 서체의 일관된 사용으로 브랜드 정체성을 확립시켜 소비자가 기억하게 도와준다.
사용자 경험 향상: 직관적인 탐색과 콘텐츠 접근성을 향상 시킨다.
타이포그래피의 역사
왼쪽부터 팔만대장경(1236-1251)->직지심체요절 (가장 오래된 금속활자본 1377)->구텐베르크(금속활자인쇄술의 대중화 1450)
디자인에서의 타이포그래픽은?
왼쪽은 영문 서체의 구성요소 오른쪽은 국문 서체의 구성요소이다.
영문에선 베이스라인을 기준을 둔다.
※국문은 영문과 달리 직사각형 혹은 정사각형 형식을 사용한다.
세리프와 명조체는 주로 전통적인 느낌이 강하며 격식있거나 권위있는 느낌 일 때 사용한다.산세리프와 고딕체는 현대적인 느낌과 심플 그리고 미니멀 느낌일 때 사용한다.
- 글자 사이(자간)과 단어 사이(어간) 미세하게 조정과 글줄 사이 또는 행간이 가독성을 좋게 만들어주는 요소이다.
Negative space(White space):글자가 아닌 모든 것, 쉽게 글자 사이나 내부의 빈공간들이다.
레이아웃(Layout)이란?
특정 공간 안에 문자, 이미지 등의 구성요소를 보기 쉽게 효과적으로 배치하는 작업이다.
시각적인 균형과 조화를 이루며 사용자의 효과적인 정보 인식을 돕는 구성 방식을 일컫는 말이다.
좋은 레이아웃이 되기 위해선?
시각적위계 형성이 잘 되어있다- 시각적 위계를 따라 시선이 이동하면서 정보를 읽고 분류하며 좀 더 편하게 이해할 수 있다.
일관성으로 브랜드 이미지 제고할 수 있다. ex) 애플 공홈을 들어가면 심플하고 깔끔한 레이아웃을 통하여 애플의 원하는 제품만 보여주는 경우
사용자 경험(UX)도 포함한다. ex) 쿠팡을 들어가면 많은 제품들이 눈에 볼 수 있는데 쿠팡의 레이아웃을 통하여 소비자가 구매욕구를 더 증폭시키거나 놓친 물건들을 다시 상기할 수 있는 마케팅 전략
레이아웃의 핵심원칙
-여백 만들기: 무조건 꽉꽉 채우면 가독성이 떨어지고 흥미를 잃는다. 여백을 만들면서 숨 틈을 찾아 가독성을 높이고 집중.
-컨텐츠의 그룹화
- 핵심 요소 반복 사용
핵심 디자인요소를 반복적으로 사용하면 핵심 메세지를 전달하는데 효과적이다.
- 대비와 강조
색을 대비하거나 이미지를 대비해서 중앙으로 시선을 강조시키면 내가 주고자하는 메세지를 비교적 쉽게 풀어낼 수 있다
- 정렬, 그리드
한정된 공간안에서 가독성을 높이기 위해 텍스트를 잘 정돈한다 ex) 신문, 정보형 포스터
- 초점 만들기
초점은 레이아웃의 시작점, 시선이 중앙에 집중되도록 이미지를 배치
계층 구조 구성(하이어라키)
보통 사람들의 시선이 어떻게 움직일지 생각하며 디자인 레이아웃 설정한다.
디자인의 색상
color: 빛의 반사에 의해 인식되는 시각적 속성
색상은 물체가 반사하는 빛의 파장 특성에 따라 다르며 인간의 감각과 심리에 영향을 미치는 요소이다.
명도는 색의 밝고 어두운 정도를 말하며 명도가 높은 것을 틴트 혹은 파스텔톤이라 부른다.
반면 명도가 낮은 것은 쉐이드,다크톤이라고 부른다.
채도가 높으면 점점 원색이 되고 채도가 낮아지면 점점 무채색으로 된다.
Primary(1차색) :빨강, 파랑, 노랑(빛의 3원색)
Secondary(2차색): 1차색끼리 혼합해 나온 색으로, 보라, 주황, 초록색이다.
Tertiary(3차색):2차색끼리 혼합 나온 색들이다.
보색대비는 시각적 경험을 풍부하게 만들고, 사람들이 강렬하게 기억에 남을 수 있게 한다 임팩트 강한 사진 만들 때 좋다,
유사색 조화는 우리 눈에 익숙하고 편안하게 해주고 상대적으로 실패하지 않는 조합이다.
왼쪽은 보색대비 오른쪽은 유사색 조화 예시
디자인에는 명도 대비가 낮을수록 가독성이 떨어진다.
웹디자인은 RGB, 인쇄 용도는 CMYK (출처: 핀터레스)
마케팅과 색채 심리학
맥도날드, 롯데리아 같은 햄버거 브랜드는 왜 파란색을 쓰지 않고 노란색, 빨간색, 주황색을 사용하지?
색은 사람의 감정과 행동에 영향을 미치기 때문이다.
사람이 브랜드를 인식하는 방식에도 영향을 미친다.
브랜드 인지도를 높이는데 효과적이다
브랜드의 개성을 드러내는데 도움을 준다.
마케팅하면 대표적인 색
Black
힘과 권위/ 고급스러움,세련됨/ 단정함과 진지함을 상징한다.
RED
열정과 사랑/ 에너지와 활력/ 심박수, 혈압, 생명력을 상징
Yellow: 행복과 즐거움/주의와 경고/에너지와 활력/희망과 낙관
Blue: 신뢰와 믿음/전문성/진실과 정의/ 우울과 슬픔/ 차가움과 무관심
Green:자연과 생명/평화와 안전/회복과 치유/새로운 시작과 희망/지속가능성, 성장, 발전, 혁신 이미지 가능
Purple:신성함, 고귀함/예술과 창의성/신비로움,영성/광기
디자인 감각 훈련 day2 -폰트 레퍼런스 리서치
폰트 이름:쿠키런 / 출처: 눈누
느껴지는 인상 : 귀여움, 미니멀함, 산세리프체, 고딕, 바빠도 잘 읽히는
폰트 이름: Google Sans Flex /출처: 눈누
느껴지는 인상: 고딕체, 산세리프체, 가독성, 명확한, 모더니즘
폰트 이름: 을유1945 / 출처: 눈누
느껴지는 인상: 명조체, 세리프체, 진지함, 무난함
폰트 이름: UnifrakturMaguntia/출처: 구글 폰트
느껴지는 인상: 고전적,세리프체, 진지함, 빈티지, 권위적이다.
폰트 이름: 넥슨 메이플스토리**/출처: 눈누**
느껴지는 인상: 동글동글, 귀여운, 가독성, 미니멀
가장 마음에 드는 폰트와 이유Google Sans Flex , 이유는 읽기 딱딱하지도 부담스럽지 않고 가독성이 좋고 무엇보다 simple is best인 나에겐 미니멀한 것이 좋기 때문에 5가지 고른 것들 중에 마음에 드는 폰트다
디자인 근력 기르기 질문
각 폰트의 구조(자간, 두께, 곡선, 기울기 등)가 시각적으로 주는 인상은 무엇인가요?
자간은 가까이에 갈수록 가독성이 좀 떨어지는 거 처럼 느끼고 곡선 또한 부드럽고 일정할수록 친밀하고 보기가 좋다. 기울기는 기울수록 뭔가 빠른 속도감이 있고 가볍게 느껴진다. 그리고 두께가 두꺼울수록 친밀하지만 뭔가 진실성은 떨어지는 느낌을 주는 거 같다.
같은 문장을 서로 다른 폰트로 썼을 때, 메시지의 톤은 어떻게 달라지나요?
가독성도 가독성이지만 글자의 진실감과 무게의 톤이 달라진다.
폰트가 전달하는 감정(따뜻함, 냉정함, 신뢰감 등)을 구체적인 단어로 표현해본다면?
편안함과 따뜻함 , 일정함
내가 선호하는 폰트들은 공통적으로 어떤 요소를 가지고 있나요? (예: 획이 일정하다 / 곡선이 강조된다 등) 글자들이 동글동글하고 곧고 곡선이 강조하지 않는다
이 폰트를 쓴다면, 어떤 메시지를 강화하거나 약화시킬 수 있을까요?
사람들의 쉽게 읽고 집중적으로 읽을 수있는 장점은 있지만 진지하고 집중적으로는 읽기 쉽지 않 는 단점도 있다.
‘가독성’과 ‘개성’ 사이에서 균형을 어떻게 잡을 수 있을까요?
글자는 개성도 중요하지만 가장 근본적인 것은 글자를 읽어야하는 가독성이 중요하는 것 같다. 독자가 글자를 읽을 때 좀 더 친근하게 다가가면서 약간의 획을 더해 개성을 추가하면 될 거같다
3. 작업 과정에서의 문제 & 해결 과정
디자인개론을 들으면서 단순히 예쁜 것만 만드는 것이 디자인이 아님을 다시 한 번 느끼고 타이포그래피, 레이아웃 등 이것들로 인해 하나의 창조물을 만드는 거 과정들이 쉽지 않음을 다시 한 번 느끼고 내 지식이 무지한 것에 다시 한 번 느낀다. 공부할 게 산더미라 잘 따라오는 거 같다고는 말 못하고 솔직히 이론만 보고 끝아 어나러 핀터레스트든 포스터랑 잡지 등 디자인 관련된 서적이나 매체를 좀 보면서 감으로 하는 것이 아닌 계속 보며 눈으로 익혀야 하는 생각을 많이 한 거 같다. 그리고 피그마 2주차 강의 다 들었음에도 너무 어렵고 너무 강의수업 한 번 보고 넘어가 이런 툴 공부를 할 때는 한 번보고 끝내는 것이 아니라 계속 반복적인 행동과 응용을 해야하는 습관을 길러야겠다.
4.내일 도전할 것 (학습 or 디자인 실험)
강의를 빨리 들어야겠다라는 생각을 치우고 피그마든 디자인개론이든 강의를 들으면서 내꺼가 될 때까지 열심히 공부하고 또 공부하기 특히 피그마 2주차 과제랑 디자인개론 마무리 (시간되면: 피그마 3주차 듣기)