Ch04_2 UI/UX 디자인 프레임워크

학습목표

•UI/UX디자인 프로세스의 필요성과 디자인의 시각적 기준과 근거가 되는 스타일 가이드를 알아보고 무드 보드를 제작 해 보자.
* 무드보드 제작 방법을 대하여 알아보자.

---

디자인 프로세스의 필요성

• 논리적인 디자인 흐름을 만들려면 디자인 프로세스가 필요하다.
• 목표를 설정했다면 그 목표를 시각적으로 잘 전달할 수 있는 색상, 이미지, 폰트 등 을 설정하는 과정이 필요
• 디자인 프로세스는 리서치 결과를 바탕으로 먼저 디자인의 목표와 정의를 세운 후에 디자인하 고 개발해 배포하는 프로세스를 거치는 것이 좋다.

---

1.디자인의 목표와 정의 수립

•골든 서클을 이용해 목표를 설정하는 과정

①WHY : 이 프로젝트를 통해 궁극적으로 전하려는 바가 무엇인지 목표를 설정한다.

②HOW : 그 가치를 어떻게 전달할 것인지 판단한다.

③WHAT : 무엇을 통해 목적과 가치를 전달할 것인지 방법적인 부분을 논의한다. 프로젝트를 진행하는 이유와 가치에 대해 의견을 제시하는 과정을 거친다.

---

2.콘셉트 키워드 도출

• 골든 서클을 통해 도출한 목표와 가치에 대한 키워드를 작성
• 타깃 사용자, 서비스 카테고리, 전달 가치 등으로 분류해 작성하거나, 페르소나를 통해 단어나 서비스를 생각했을 때 떠오르는 느낌과 감정을 무작위로 작성

---

3.디자인 시각화(Design Visualization)

•일관성 있는 시각 테마를 먼저 설정

•이 과정에서 이미지, 컬러, 레이아웃, 폰트, 스타일링 요소를 세부적으로 설정

•다음 단계는 룩앤필(Look and Feel)을 전달할 수 있는 무드보드(Mood Board)를 만드는 것이다

 

•무드보드의 주요 특징 및 사용 목적:

• 시각적 인사이트 제공: 무드보드는 아이디어나 컨셉을 효과적으로 시각화하여, 참여자나 클라이언트에게 그 방향성을 명확하게 전달하는 데 도움
• 창의적 과정의 시작: 무드보드는 디자인 프로세스의 초기 단계에서 아이디어를 모으고 정렬하는 데 사용되며, 팀원 간의 커뮤니케이션 도움
• 컨셉 확정: 무드보드를 통해 다양한 요소와 스타일을 탐색하고 결합하여, 최종적인 디자인 컨셉을 확정
• 프로젝트의 일관성 유지: 무드보드는 전체 프로젝트 팀이 동일한 방향성을 가지고 작업을 진행할 수 있도록 일관된 가이드라인을 제공
• 전통적으로 무드보드는 종이나 판넬 위에 다양한 자료를 부착하여 만들었지만, 현대에는 디지털 도구를 활용하여 온라인 무드보드도 널리 사용

---

4.개발

1. 사용한 컴포넌트, 폰트, 시각 이미지, 색상 요소의 스타일 가이드를 각각 제작
2. 작성한 디자인 템플릿을 디자인 팀 내에서 공유하고 요소별 스타일 가이드는 개발팀에 제공
3. 개발을 완료했으면 서비스를 배포

---

실습

• 콘셉 키워드를 제시하고 무드보드를 디자인 해 보자.

• 무드보드는 다른 브랜드의 디자인과 사진등을 차용해 와서 내부적으로 디자인 방향성을 만들어 내는 브랜딩의 기본적인 툴

예제
- 콘셉 키워드 : 역동적
- 역동성을 구현할 수 있는 컬러, 이미지, 폰트 등의 시각적 요소를 준비하여 무드 보드 작성
- 이미지는 여러장으로 분위기를 전달하자.
- 동향을 파악하자

무드보드 요소

• 로고 디자인
• 글꼴: 2가지의 글꼴 조합
• 사진(이미지) : 감정적 반응을 일으키는 이미지(너무 상세한 것은 필요없다)
• 색상 : 유사한 색조로 보드 팔레트의 균평을 맞춤 (3~7), 기본색상과 몇가지 보조색상, 음영,대비...
• 패턴 

무드보드 작성법

1. 목적 및 주제 정의: 무드 보드를 만들려는 목적과 주제를 명확히 합니다. 예를 들어, 새로운 브랜드 아이덴티티를 디자인할 때의 무드 보드는 브랜드의 느낌과 색상, 스타일 등을 반영할 것입니다.
2. 자료 수집: 관련 이미지, 색상, 패턴, 텍스트, 소재 등의 자료를 수집합니다. 이 과정에서는 인터넷, 잡지, 책 등 다양한 출처에서 자료를 찾을 수 있습니다.
3. 레이아웃 결정: 무드 보드의 크기와 형태, 그리고 배치 방식을 결정합니다. 전통적인 종이 형태의 무드 보드를 사용할 수도 있고, 디지털 무드 보드를 사용할 수도 있습니다.
4. 요소 배치: 수집한 자료들을 무드 보드에 배치합니다. 이때 중요한 것은 각 요소들이 조화롭게 배열되어 전체적인 무드와 분위기를 잘 전달해야 합니다.
5. 피드백 및 수정: 다른 사람들에게 무드 보드를 보여주고 피드백을 받습니다. 필요한 부분을 수정하고 개선합니다.
6. 최종 확정: 무드 보드가 완성되면, 프로젝트의 참고 자료로 사용하거나 클라이언트나 팀원들에게 제시하여 아이디어를 공유합니다.

무드보드 기준

1. 계층구조 : 가장 중요한 요소가 눈에 띄어야 한다.
2. 통일성 : 전체적인 조화와 유사함
3. 명료성 : 컨셉키워드가 연상되고, 전달되어야 한다.

---

참고사이트

canva : Canva 에는 '브랜드 키트' 기능이 있어 색상 팔레트, 글꼴, 로고를 실험하여 브랜드를 돋보이게 할 수 있습니다.

https://www.canva.com/

https://pixso.net/kr/

Pixso 홈페이지-스케치, 피그마 대신 차세대 UI 디자인 툴, 온라인 실시간 협업 지원

https://www.pinterest.co.kr/

Pinterest