Fidelity

Fidelity : 충실도, 묘사 / 표현의 정도를 나타냄
Low Fidelity : 최소한의 구성 요소는 다 갖추고 있는 정도
High Fidelity : 완성에 거의 가까운 형태

간단히 한정도와 출시 전 단계 까지의 완성도 차이

Wireframe

기획단계에서 주로 제작되고, 각 페이지들의 정보와 UI 요소등에 대한
배치를 표현한다. 와이어프레임에 시나리오, 컨텐츠 설명 등이 첨부되면 스토리보드가 된다. (Low Fidelity)

대략적인 UI 디자인, 정보나 , Flow 파악을 위함

Storyboard

서비스의 각 페이지 구성요소나 콘텐츠의 설명 및 페이지간의 이동 흐름, 로직 등을 기술한 문서

더 세세한 페이지별 구성 내용

Mockup

디자인, 데모 시연 및 평가를 위한 서비스 / 제품의 디자인, 일반적으로 최종 버전의디자인이 되는 경우가 많다.

색상, 타이포그래피, 최종 디자인

Prototype

서비스에 대한 기능 및 사용성 등의 테스트를 위해 제작되는 동적인 모형, 개발자 디자이너 사이의 시각적인 커뮤니케이션 툴이 되기도 하고 사용성 테스트에 종종 사용되기도 한다.

Affordance (행동유동성)

사용자가 제품 또는 서비스를 인지했을때 어덯게 사용해야 하는지 알거나 디자이너의 의도대로 사용자의 행동을 유도하는 것을 의미

IA (information Architecture)

제품, 서비스를 구성하는 정보의 구조와 우선순위, 흐름의설계 등을 포함

Mobile UI History

Skeuomorphism

• 사용자의 인지를 돕기위해 현실 세계를 반영한 형태의 UI
• 디자인하는데 리소스가 많이 들고 쏟아져나오는 디바이스들에 대한 대응 어려움

Flat design (skeuomorphism에 대응해서 나왔음)

• 2 차원적 형태로 그림자, 하이라이트등 심도나 차원을 나타내는 요소는 배제

• 다양한 디바이스와 스크린 사이즈에 맞춰 수비게 사이즈를 조절하거나 배열 조절 가능

• 단점

• 플랫 디자인에 집착하면 정보우선순위와 사용성 등을 해칠수 있다.

• 많은 서비스들이 획일화된 디자인

Meterial Design

구글의 시각적 언어
모든 디바이스에일관성 있는 경험

• 3차원 z 축을 이용해 입체감을 더함
• 디지털 종이들이 레이어드를 구성
• 사용자에게 정보구조를 표현하기에 더 적합