UI 디자인 기초
1. Design History
산업혁명 이전
- 대량생산 불가
- 장인이 물건을 만드는 즉시적인 행동패턴
산업혁명 이후
- 동일하게 규격화하여 제품을 대량생산
- 프로세스를 가진 계획적이고 체계적인 행동 패턴
디자이너의 역할과 개념 변화
- 컨셉정의 및 개발, 품질관리&협업&완결에 모두 관여.
- 디자인 사고와 소비자 통찰을 겸하여 사용자 및 고객, 소비자에게 실용적이고 가치있는 경험을 제공
- 사용자에게 쓸모있는 가치의 경험 제공을 위해 사람을 이해하고 사회문화측면, 기술, 트렌드를 적절히 활용하여 비즈니스 전략을 수립하는 디자이너의 작업방식과 감수성이 필요하다.
2. Design Empathy
- 디자인 기준을 세우는 이유
- 협업하기 위해- 일관성을 유지하기 위해
- 타당성을 확보하기 위해
3. Design Process
Double diamond
- 사고의 발산과 수렴 과정을 두 번 거치는 프로세스
- 각 단계에서 뒤로 돌아가거나 처음부터 다시 시작도 가능한 유동적 구조
1. 발견
- 서비스 현황을 이해하고 문제점을 찾는 단계
- 데스크 리서치, 필드 리서치, 이해관계자 지도 등 방법론을 사용해 진행
2. 정의
- 발견 단계에서 얻은 인사이트들을 새로운 아이디어와 개념으로 시각화하는 단계
- 어피니티 다이어그램, 페르소나, 고객 여정 지도 등의 방법론을 사용해 진행
3. 발전
- 시각화된 아이디어와 개념을 테스트해 어떤 서비스를 통해 해결할 것인지 정의하고 본격적으로 서비스를 발전시키는 단계
- 서비스 블루프린트, 사용성 테스트, IA 등 방법론을 사용해 진행
4. 전달
- 전 단계들을 통해 개발한 서비스를 사람들에게 효율적으로 전달할 방법을 정하는 단계
- 스토리보드, 비즈니스 모델 캔버스, 최종 프로토타입 등 방법론을 사용해 진행
Stanford's d.school
- 공감, 문제정의, 아이디어, 프로토타입, 실행&평가 총 5단계의 프로세스 구성
1. 공감
- 리서치, 데이터 분석, 관찰조사, 인터뷰, 트렌드 조사 실시
2. 문제정의
- 사용자의 입장에서 불편함을 느끼는 지점이 무엇인지 조사
- 주제의 대상, 니즈, 필요 가치 키워드 등을 분석해 주제를 설정
3. 아이디어
- 문제를 해결할 수 있는 많은 아이디어를 만들어낸 후, 가장 적합하다고 판단하는 아이디어를 선택하는 과정
- 사용자 모델링, 가치제안 맵, 고객 여정 맵, 등을 통해 현재의 문제점과 가치분석을 통해 아이디어를 도출하는 과정
4. 프로토타입
- 아이디어를 시각화하는 과정
- 눈으로 보이는 사용자 기반 제품이나 구체적인 서비스를 개발하는 단계
5. 실행&평가
- 프로토타입을 사용자에게 직접 이용해보게 하고, 피드백을 받아 본다.
- 가정이 옳았는지 틀렸는지 확인 후, 최종 출시할지, 이전 단계를 반복할 지 판단.
Google Design Sprint
- 구글 벤처스에서 기업의 목표에 빠르게 도달하기 위해서 개발한 프레임워크
- 이 프레임워크는 Design thinking에 기반
- 여러 사람들과 자유롭게 아이디어를 공유하며 새로운 아이디어를 발견해 내고 그것을 시각화해 문제를 단기간에 해결해 나가는 방식
- 5일 동안 각각의 하루에 해야만 하는 일들을 명확하게 규정
Understand > Diverge > Decide > Prototype > Validate
Waterfall Model
- 각 작업이 폭포처럼 위에서 아래로 떨어지는 단계별 개발 방법론
설계 > 디자인 > 개발 > 테스트 > 배포
Agile Model
- 일정한 주기를 가지고 빠르게 제품을 출시하여 고객의 요구사항, 변화된 환경에 맞게 요구를 더 하고 수정해나가는 탄력적인 방법론
- 짧은 사이클로 제품을 개발하고 테스트하고 피드백을 받아 보완하는 방식
- 변화에 수동적으로 대처하기보다 변화를 하나의 고정값으로 전제하여 1~4주 작은 스프린트 단위로 디자인 → 개발 → 테스트를 진행
디자인 분석
| 컨텐츠 | 디자인GUI | 전략&방향 수립 |
|---|---|---|
| asis 브랜드 분석 | asis 브랜드 분석 | 최상위 키워드 도출 |
| asis 채널분석 | asis 디자인분석 | 컨셉메이킹 |
| asis 컨텐츠분석 | 경쟁/유사 디자인분석 | 컨셉 메이킹 |
| 경쟁/유사 브랜드 | 경쟁/유사 UX분석 | 디자인 전략 |
| 경쟁/유사 채널 | 브랜드 SWOT & ERRC | |
| 경쟁/유사 UX | GUI SWOT & ERRC | |
| 경쟁/유사 컨텐츠 | 브랜드 포지셔닝 맵 | |
| 이미지맵 / 무드보드 | ||
| 메타포, 컴포넌트, 영감정보 | ||
| 컬러, 그래픽, 인사이트클러스터링 | ||
| 타이포그래피, 레이아웃, 아이콘 | ||
| 디자인 트렌드 |
