[TIL] AI 그래픽 디자이너 D-2

디자인개론 강의 4-1~6-3

 

[LAYOUT 레이아웃]

 

특정 공간 안에 문자, 이미지 당의 구성요소를 보기 쉽고, 효과적으로 배치하는 작업

시각적인 균형과 조화를 이루고, 사용자의 효과적인 정보인식을 돕는 구성방식

 

• 레이아웃의 중요성

시각적위계에 따라 시선의 이동이 이루어지고, 정보전달도 효과적으로 할 수 있다. 

일관성있는 레이아웃 자체로 브랜드의 아이덴티티를 나타낼 수도 있다. 

 

• 사용자경험UX

 애플 VS 쿠팡

https://www.apple.com/kr/

Apple (대한민국)

애플은 고가의 자체 브랜드 상품을 판매하므로 해당 상품에 대해 상세하고 깔끔하게 보여주는 레이아웃을 선호.

 

https://www.coupang.com/

로켓배송으로 빠르게, 로켓와우 멤버십으로 할인과 무료 반품까지 | 쿠팡

쿠팡의 경우는 다량의 상품을 더 많이 고객에게 보여주고 판매하기 위해 배너도 빠르게 넘어가고, 많은 상품이 한페이이지에 보여질 수 있도록 진열되어 있는 방식.

 

• 레이아웃의 핵심원칙

- 여백만들기 : 적절한 여백은 가독성을 높인다.

- 콘텐츠의 그룹화 : 통일성, 근접의 원리와 관통하는 개념으로 비슷한 콘텐츠를 그룹화 하므로써, 정보전달력이 올라간다.

- 핵심요소 반복사용 :  레이아웃의 통일성도 생기고, 이미지를 효과적으로 표현해 주요 메시지를 전달하는데 효과적이다. 

- 대비와 강조 : 주요하게 표현할 부분만 강조한다거나 컬러나 형태 등으로 대비를 확실히 주어 시선을 끌 수 있다.

- 정렬, 그리드 : ex) 신문을 생각하면 쉽게 이해가 된다. 그리드로 면분할을 하여 잘 정렬하고, 정보를 분리하면, 가독성이 올라간다. 

- 초점 만들기 : 주요 정보나 이미지에 시선이 모이고, 분산되지 않도록 만드는 것. 

- 계층 구조 구성 : 정보의 중요도에 따라 시선의 흐름을 고려하여 계층구조를 만들어 설계한다.

---

[기본색채학]

 

색상(color)

빛의 반사에 의해 인식되는 시각적 속성. 물체가 반사하는 빛의 파장 특성에 따라 다르며, 인간의 감각과 심리에 영향을 미치는 요소 

primary(1차색)

secondary(2차색) : 1차색을 혼합한 것

tertiary(3차색) : 1,2차 색을 혼합하면 나오는 것

 

보색대비는 상큼하고, 화려하고, 에너지가 느껴지는 색조합이다.

유사색 조화는 익숙함과 편안함, 조화로움을 느끼게 한다. 실패할 확률이 낮은 조합

 

 

[마케팅과 색채 심리학]

1. 고객의 감정과 행동에 영향을 미친다. ex) 빨간색 STOP 간판, 빨간 신호등 = 경고, 멈춤 

2. 고객이 브랜드를 인식하는 방식에도 영향을 줍니다.  ex) 프라다, 샤넬 - 검정색 = 고급스러움, 네이버 - 연두색 = 프레시하고 안정적인 느낌, 

3. 브랜드 인지도를 높이는데 효과적이다.  ex) 삼성=파란색, 이케아=파란색+노란색

4. 브랜드의 개성을 드러내는데 도움을 줍니다. ex) 티파니-에메랄드블루, 구글-빨강,노랑,초록,파랑  

 

컬러별 이미지

Black: 힘, 권위, 고급스러운, 세련된, 단정함, 진지함

Red : 열정,사랑,에너지,활력,심박수,혈압,생명력

Yellow : 행복,즐거움,주의,경고,에너지,활력,희망,낙관

Blue : 신뢰,믿음,전문성,진실,정의,우울,슬픔,차가움,무관심

Green : 자연,생명,평화,안정,회복,치유,새로운시작,희망

Purple : 신성함,고귀함,예술성,창의성,신비로움,영성,광기

---

[디자인프로세스] 

추상적인 아이디어를 가시적인 결과물로 전화하는 여정

• 발견 단계

- 발견은 디자인의 출발점이며, 문제와 사용자를 이해하는 단계

- 리서치와 관찰, 분석을 통해 핵심인사이트를 도출한다.

- 이 단계에서 얻은 통찰이 이후 아이디어와 실행의 방향을결정한다. 

 

ex) 어플을 출시했는데 생각보다 사용자가 적었을 때 문제 해결 단계

 

• 컨셉 구축 및 아이디어 구상

- 디자인의 핵심적인 주제, 개념과 뿌리를 잡고 실체화 하는 과정

- 아이디어가 많아도 컨셉은 한가지

 

컨셉을 잡아가는 과정 

1. 마인드맵, 아이데이션, 브레인스토밍 으로 자유롭게 아이디어를 구상해본다. 
2. Keyoword Clustering, 컨셉도출
3. Moodboard, 컨셉 명확화 : 시각적인 자료로 소통하여 구체화 한다.   

• 계획 및 정의 Plan & Define

- 컨셉을 구체적으로 정리,실행 가능하도록 구조화하는단계

- 사용자의 흐름, 와이어프레임, 기획문서를 통해 구체화합니다. 

- 팀원or고객과의 소통을 위한 명확한 문서화가 핵심

 

- 기획문서 : 고객이 보통 원하는 내용을 러프하게 전달하면, 디자이너는 시각적 배치와 표지 내용 순서, 흐르을 명확히 보여주는 기획 문서를 만들어 제작과정에서 혼선을 줄인다. 

- 스케치 및 와이어 프레임 : 주로 앱이나 웹등 디지털 미디어 디자인의 계획 및 정의 단계에서 사용하는 정리방법으로, 앱플로우를 정리한 기획서는 메뉴선택 후 플로우, 클릭시 결과화면등 앱의 작동 과정을 도식화 하여 보여준다. 

와이어 프레임은 웹사이트 또는 앱의 뼈대를 시각적으로 표현한 스케치로 컴퓨터 작업뿐 아니라, 손그림도 사용되며, 레이아웃 콘텐츠 구성, UI흐름을 단순환 선과 도형으로 나타낸 것. 

왼 앱플로우 스케치 / 오 와이어프레임

 

- 디자인 브리프 (디자인제안서) : 디자인의 전반적인 방향성과 요구사항을 문서화 하여, 앞단계보다 발전된 단계를 보여준다. 거의 완성형.

클라이언트나 상사를 이해시키기 위한 논리과정으로 보면된다. 

---

[느낀점]

뭔가 대충 알고있던 내용들을 구체적이고 상세하게 정리해서 배운 느낌이라 좋았다. 

보는 눈과 디자인감각을 더 단련해야겠다.