2015년 2월 10일 UKOV 디자인세션에서 발표한 '비전공자를 위한 앱 디자인학 개론' 발표 자료 입니다.

1. 비전공자를 위한 앱 디자인학 개론
오정민
App Design 101 _ 기본 앱 디자인 프로세스 및 용어정리

2. 앱 이란?
앱[ app ]
휴대폰이나 PC 등에 다운받아 사용할 수 있는
응용프로그램. 애플리케이션(application)을 줄인 말

3. 가장 일반적인 앱 디자인 프로세스
와이어프레이밍 프로토타이핑 디자이닝 디자인 가이딩
순서는 작업 문화, 개인적 취향에 따라 달라질 수 있음
특히 프로토타이핑과 디자이닝은 사용하는 방법론에 따라 자주 순서가 바뀜

4. 가장 일반적인 앱 디자인 프로세스
와이어프레이밍 프로토타이핑 디자이닝 디자인 가이딩
물론 기획, 전략, UX 모두 앱이 개발되면서 함께 발전되어야 하지만
시장조사, 유저 리서치 등, 보다 명확한 사전 기획을 통해 많은 비용, 시간 절감이 가능

5. 1. 와이어프레이밍 2. 프로토타이핑 3. 디자이닝 4. 디자인가이딩
오늘은 가장 일반적인 디자인프로세스에서 사용하는 툴과 작업 방식에 대해!

6. 와이어프레이밍 프로토타이핑 디자이닝 디자인 가이딩
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. 손 (손)

7. 1. 와이어프레이밍
Balsamiq | PowerMockUp | Hand

8. 주로 핸드 드로잉, 파워포인트 등을 사용

9. 2. 프로토타이핑
Invision | Flinto | POP

10. 예시영상) 플린토

11. 최근 각광 받고 있는
인터랙티브 프로토타이핑 툴
Framer.js Origami Form Pixate
(코드와 UI 중간)
- 트랜지션 / 애니메이션 효과 확인 탁월
- 전체적인 플로우보다는 모션 확인을 위한 작업
- 기본적인 코딩에 대한 이해가 요구 되기에 대중적인 툴이 되지는 못 함

12. 3. 디자이닝
Photoshop | Sketch

13. 그래픽 완성도를 높이는 단계

14. 4. 디자인가이딩
Assistor PS | Specking | Ink | Specctr

15. Assistor PS | Specking | Ink | Specctr
4. 디자인가이딩

16. 개발자와 디자이너 간의 디테일한 커뮤니케이션 과정

17. 멋진 종합 영상
(UI - UX DESIGN PROCESS)

18. 감사합니다
five0203@gmail.com