UI 디자인 과정 4주차

Designing 2 

• Visual Design Strategic 수립 이론 및 실습
  UI Concept 추출 방법 이론 및 실습
  UI 개발 Guideline 제작 이론 및 실습

강사: 왕지연 책임연구원 | 삼성전자

날짜: 2009년 7월 25일(토)

기억에 남는 것은 Moodboard 작업
조근조근 말씀하시는 강사님 말이 귀에 쏙쏙~
강의를 들으면 항상 새롭게 알게 되는 것이 많아 유익하다.

강의 내용

1. GUI Designing Process

- GUI Strategy & Concept

- GUI Guideline

: 선행조사 -> 기술(테크놀러지 이해) -> 시나리오 -> 기능 정의

: 사용자의 행위를 창출하다.

2. Design Strategy

- Trend Research: 인터넷 서핑도 할 수 있지만, 시간과 노력을 기울여 직접 장소에 가서 자료를 얻는다.

- Preference Survey: 사용자의 선호도 조사

- Understanding Segmentation: Segmentation의 다양화, 세분화 

- Forecast Technology: 기술의 메가 트렌드를 이해하고 예측할 수 있다.

- Collecting VOC: 사용자의 요구사항 수집

: Pain point- 사용자의 불편한 곳, 가려운 곳을 찾아내어 긁어주라.

: segmenation의 세분화로 다양한 사용자들의 preference를 모두 충족시켜주는 것은 어렵고, 다양한 need와 unique하길 원하는 마음을 해결하기 위해 customization을 제공한다. 즉, 사용자에게 열린(oepn), 확장성 있는 디자인이 의미가 있다.

: 심미적인 디자인도 중요하지만 사용자가 customizing 할 수 있는 디자인이 더 요구되고 있다.

: Technology를 이해하고 그에 맞는 UI를 디자인한다.

: GUI Design을 하면서 행위를 창출할 수 있는 스토리 텔러의 기능도 겸하면 더욱 좋을 것이다.

: 리서치 데이터와 디자인과의 결합

3. Design Process

- Keyword 수집 및 추출 -> Persona(페르소나) 사용자 유형 정하기 -> Emotional Value Design(페르소나의 감정선, 성향 파악, 행위 추측, 사용자의 감성적 부분에 대한 접근) + Social Culture(사회적 접근, 행태) + Life Style 정의 -> Design Language(Mood & Style, Detail, Color..) 정의

: 사용자의 Usage 찾기(사용자의 관심사를 찾는 것) + MegaTrend(like SNS, 4G, 햅틱 등..)

4. 사례(Moda)

- 전략(Creative Brief)

- Project Vision(Visual attribute: 컨셉 용어, Personal attribute: 사용자의 성향, 타겟) -> Research Analysis(Review current research, Field research) -> Audience Profiles = Persona(Key DNA 제안, 필드 리서치에 따른 사용자 타겟 제안(spritiual, social, sophisticated)) -> Design Inspiration -> Apporach -> Plan 

- Moda의 디자인 그룹 구성: Analyst 1(클라이언트가 원하는 방향 파악, 기존 데이터 파악, 로우 데이터... => 디자인 방향 설정) + Design Director 1 + Senior Designer1 + Designer 1 + Product Manager(일정, 예산, 커뮤니케이션 디자인 조율..) 

: 내가 원하는 바를 정확하게 전달하는 것이 커뮤니케이션의 핵심이다(뭉뚱그려 대충 시안을 그려서 이런 느낌이다' 로 보여주는 것으로 끝나는 것이 아니라 정확히 구체적으로 요소별로 전달할 수 있어야 한다). 

: 각 segmentation의 구분이 명확해야 한다. 

5. Moodboard

- 추출한 Keyword와 어울리는 이미지를 활용한 무드 보드

- 전체의 Mood를 본다

- Color: 전체 컬러와 포인트 컬러

- 무드보드의 해석과 포지셔닝도 중요하다

- 무드보드를 활용하여 샘플링한 이미지를 제시한다. 시안이 아니라 draft image다.

6. Deepening Elements

- Icon: 2D, 3D, outline style, sillouette style, realistic, illustrate, basic, 생략 정도, 컬러 배색, 심플리티, 배경과의 combination 고려.. 

- Texture

- Color Combinations(Point Color)

- Typography: 시인성 확보의 중요성, 가독성을 고려해야 함, 모바일에서는 Condensed 폰트가 유용함

- Interaction

: 각각의 thumbnail에 관한 comment로 의견을 공유한다

: 20:80( 20%의 예외상황을 cover하기 위해 80%를 불편하게 할 필요는 없다)

: UI 원칙의 고정관념을 맹신하지 말것: depth가 깊어지면 사용자들이 불편할 것이므로 depth를 줄이기 위해 한 화면에 모든 것을 다 때려넣으려고 한다. 그것은 오히려 사용자들의 불편을 야기시키는 복잡한 UI를 만들어 낸다. 

수업 시간에 만든 무드 보드