[UI 디자인 프로세스] 2 - 02. UI제안 프로세스

ㅣ플러스 엑스 UI 강의 후기 01ㅣ

---

02_02. Plus X, UI 제안 프로세스 요약

파트너사가 요청한 프로젝트의 시안을 작업 할 때 이렇게 작업해.

 

 

플엑이 고객사의 요청으로 프로세스를 진행하고 시안을 전달할때 어떤 프로세스로 일하는지 알아보자. 

1. 파트너사 데스크 리서치와 인터뷰 진행. 
ㄴ 배경지식 향상, 비즈니스 모델에 대한 이해, 브랜드 분석 을 중점적으로 데스크 리서치 

[배경지식 향상]
- 유사서비스, 관련 서비스, 연관된 디자인, 기술트렌드 등 다방면으로 검색.
- 고객사 서비스 리처치: 현황, 인터뷰, 뉴스, 기사, 논문... 
- UI 디자인 리서치 : UI 디자인에 필요한 부분들 광범위하세 리서치 하여 트렌드를 읽고 반영한다. 

[비즈니스 모델]
- 고유한 비즈니스 모델 분석. 이해

[파트너사 브랜드 분석]
- 브랜드 가이드 여부, 확인.
- 브랜드 커뮤니케이션 전반적인 운영방식 확인
- 내부 임직원들의 자사 브랜드 인터뷰 (인터뷰중 나온 키워드 도출)


2. 아이데이션
UI,UX 디자이너 함께 함. 
- 인사이트 공유 및 의견 조율   
- UX디자이너: 휴리스틱 평가
- UI 디자이너: 브랜드 이미지 서치 발표

 

 => 컨셉 모델링 및 목업 아이데이션

 

 (1) 서비스 구조 설계
 (2) 메인 페이지 중심 아이데이션. 
 -> 전체 적인 서비스 플로우 고려하여 설계. 정보, 디자인, 사용성을 고려하여 작업  


3. 디자인 시안 작업
[디자인 콘셉 도출 및 원칙 정의] 
(브랜드 스토리, 가치와 임직원, 사용자의 니즈 도출, 시장 트렌드, 비즈니스 방향성 반영)

예시 )
[신라면세점]
- 기존 광고 컨셉: 여행이 시작되는 곳. 
- 브랜드 이미지: 젊음, 활기, 세련, 고급
< 제안 >
- 리뉴얼 콘셉: 여행이 먼저 시작되는 곳
- 디자인 원칙: 세련되고 간결한/ 친절하고 명료한 / 생동감있고 경쾌한


[UI Elements 정의]
(1) 폰트
- 브랜드 가이드에서 사용중인 폰트 확인 
시스템 폰트 (디바이스나 브라우저에 따라 기본적으로 제공하는 폰트) / 
임베딩 폰트 (앱이나 웹에서 서비스에 맞게 제공하고자 데이터로 삼는 폰트)
*임베딩 폰트를 사용할 경우 호환 문제가 있을 수 있음. 
브랜드 폰트 사용 시 온라인에서 가독성 확인! 단순 브래드 그래픽으로 사용 할 경우는 가독성이 떨어져도 괜찮으나 정보제공을 위한 폰트일경우 확인 필!
* 만약 브랜드 폰트가 가독성이 떨어진다면 이를 보완하면서 브랜드폰트와 유사한 다른 폰트를 제안 

(2) 컬러
온 오프라인 환경을 고려하여 지정. 

(3) 이미지
브랜드 이미지에 맞는 톤앤매너 이미지를 선정
브랜드 이미지와 디자인 원칙에 따른 이미지 스타일을 제안 함. 
예시)
#여백을 충분히 확보 한다. 
#수평과 수직의 일관된 각도
#근거리보다 원거리
#인물보다 풍경..

배너, 상품 썸네일 포함.
썸네일 이미지 가이드 제공시 일관된 브랜드 이미지 구축 가능. 운영시 활용 함



(4) UI Elements 정의
브랜드 이미지를 표현 하기 위해 형태적 감성을 분석하여 적용

형태가 갖는 감성 예 )
- 직선: 안정감, 편안한...
- 곡선: 부드러운, 따듯한..


- 아이콘 제작 시 브랜드 로고를 분석하여 로고 형태와 비슷한 아이콘을 제안 하기도 함. 
로고형태 -> 아이콘 확장

예)
AlR PREMIA

디자인 모티브인 비행기 창문을 로고에 녹임 -> 아이콘도 이런식으로 디자인 함.

(5) 메인페이지 디자인 및 프로토타입
- 무드 보드 제작
- 시안 제작 시 통상적으로 두 가지 제작: 두 가지 시안은 차별성이 있어야 함. 

무드보드 레퍼런스 (방향성 설정)-> 폰트 선택 -> 어울리는 아이콘 선택 -> 디자인 시안 제작 

시안작업 : 홈, 서브 , 상세페이지 + 필요시 추가페이지 
*서비스의 플로우가 중요한 프로젝트일 경우 : 사용자 시나리오 설정 -> 주요페이지 중심 작업
*작업시 고려 할 것. 
" 해당 브랜드 스러운가?"  질문 하면서 작업 하기.  앞선 브랜드 정의와 결을 같이하여 일관된 작업을 위해 


(6) 메인 페이지 디자인 및 프로토타입
보통 간단한 프로토타입을 제작 하지만, 컨셉이나 마이크로인터렉션 중요한 서비스일 경우 전문적인 툴 사용.-> 프로젝트 성향에 따라 툴과 범위를 결정. 
why: 디자인 시안을 통해 파트너사의 이해도를 높일 수 있음. 


(7) 디자인 제안 문서 작업
- 디자인 컨셉, 원칙, 디자인 요소, 페이지 시안, 프로토타입 문서의 흐름을 만드는 것. 
 인터뷰,리서치를 통한 UX원칙 발견 -> 메인컨셉 설정(UIUX, 디자인..) -> UI콘셉 요소 원칙 정립 -> 각각의 화면에 적용 => 문서 흐름

*인터렉티브 문서를 만들어서  제안사에 제안. 키노트로 만듬

---

 

키노트로 제안서를 작성하는 방법을 강의에서 알려줬는데 이게 꿀 팁이였다.

키노트에서 에니메이션 기능을 거의 사용 하지 않아서 몰랐데 멋있는 모션구축이 가능했다.  제안서 작성할때 응용해서 멋지게 만들어 봐야지

 

---

[🌰인사이트]

●UX디자이너와 UI 디자이너의 협업과 각 분야의 전문성
- 초기 단계에서는 같이 자료를 모은다. UX디자이너일 경우 휴리스틱 평가에 집중한 탐색을, UI디자이너일 경우 조형요소와 브랜드 이미지에 집중한 탐색을 전개하여 서로 정보를 교환하며 프로젝트를 이해 한다. 
● UI 설계의 북극성 지표는 브랜드 방향성 콘셉이다.
- 디자인 중 많은 생각이 떠오르면 길을 잃기 쉽다. 시안 작업 이전에 세워놓은 디자인 원칙과 콘셉에 충실한지 집중하며 작업 해 나가자.  

---

[🌞 목표]

▶ 인터렉션이 있는 서비스를 제안 할 때 키노트를 이용해서 실제 구현과 비슷한 느낌을 제공 하자. 

▶ 디자인 원칙에 따라 설계하고 추후에 브랜드 일관성이 지켜지도록 운영 가이드 지침을 설정하고 가이드 문서를 만들어 운영팀에 전달하기. 

---