비전공자를 위한 앱 디자인학 개론
TRANSCRIPT
비전공자를 위한 앱 디자인학 개론
오정민
App Design 101 _ 기본앱 디자인프로세스및 용어정리
앱 이란?앱[ app ]
휴대폰이나 PC 등에다운받아사용할수 있는응용프로그램. 애플리케이션(application)을줄인 말
가장 일반적인 앱 디자인 프로세스
와이어프레이밍 프로토타이핑 디자이닝 디자인가이딩
순서는작업 문화, 개인적취향에따라 달라질수 있음
특히 프로토타이핑과디자이닝은사용하는방법론에따라 자주 순서가바뀜
가장 일반적인 앱 디자인 프로세스
와이어프레이밍 프로토타이핑 디자이닝 디자인가이딩
물론 기획, 전략, UX 모두 앱이 개발되면서함께 발전되어야하지만
시장조사, 유저 리서치등, 보다 명확한사전 기획을통해 많은 비용, 시간 절감이가능
1. 와이어프레이밍 2. 프로토타이핑 3. 디자이닝 4. 디자인가이딩
오늘은가장 일반적인디자인프로세스에서사용하는툴과 작업 방식에대해!
와이어프레이밍 프로토타이핑 디자이닝 디자인가이딩
1. Axure (데스크탑)
2. Justinmind (데스크탑)
3. UXPin (웹)
4. Proto.io (웹)
6. 다음 Oven_오븐 (웹)
7. 네이버 ProtoNow_프로토나우 (데스크탑)
2. Flinto (웹)
4. Form | Framer | Pixate | Origami(인터랙티브프로토타이핑)
1. Balsamiq (데스크탑) 1. Photoshop (데스크탑)
2. Sketch 3 (데스크탑)2. PowerMockup (플러그인)
5. Fluid UI (웹)
3. POP (모바일 앱)
1. Assistor (데스크탑)
2. Specking (플러그인)
유저수가많고 관련커뮤니티가활발한순(조금상당히매우주관적일수있음)
1. Invision (웹)
3. Ink (플러그인)
4. Specctr (플러그인)
3. 손 (손)
1. 와이어프레이밍
Balsamiq | PowerMockUp | Hand
주로 핸드 드로잉, 파워포인트 등을사용
2. 프로토타이핑
Invision | Flinto | POP
예시영상) 플린토
최근 각광 받고 있는인터랙티브 프로토타이핑 툴
Framer.js Origami Form Pixate(코드와 UI 중간)
- 트랜지션 / 애니메이션효과 확인 탁월- 전체적인플로우보다는모션 확인을위한 작업- 기본적인코딩에대한 이해가요구 되기에대중적인툴이 되지는못 함
3. 디자이닝
Photoshop | Sketch
그래픽 완성도를높이는 단계
4. 디자인가이딩
Assistor PS | Specking | Ink | Specctr
Assistor PS | Specking | Ink | Specctr
4. 디자인가이딩
개발자와 디자이너간의 디테일한커뮤니케이션 과정
멋진 종합 영상(UI - UX DESIGN PROCESS)
