Mobile Prototype Essential

Description
에코노베이션에서 진행중인 모바일 UX 검증을 위한 프로토타입 개발 강의의 교안입니다. HTML5, CSS3, JQ, JQUI, JQM을 활용한 실무예제 코드는 이후 별도의 사이트링크로 공유예정입니다.

Please download to get full document.

View again

of 234
All materials on our website are shared by users. If you have any questions about copyright issues, please report us to resolve them. We are always happy to assist you.
Information
Category:

Technology

Publish on:

Views: 0 | Pages: 234

Extension: PDF | Download: 0

Share
Transcript
  • 1. Mobile UX Prototype모바일 UX 프로토타입HTML5를 홗용한 프로토타이핑ECONOVATION | 동 준 상 강사 naebon1@gmail.com 1
  • 2. Mobile UX Prototype모바일 UX 프로토타입위너스랩 UX디자인 팀장동 준 상 (naebon1@gmail.com)Lecture Project에코노베이션 두산그룹 모바일 프로젝트삼성멀티캠퍼스 삼성중공업 모바일 프로젝트T 아카데미 중소기업청, 교직원공제회 +저술 : 모바일 UX디자인, 모바일 프로토타입 개발번역 : HTML5 Multimedia Development(에이콘), jQuery UI 1.8(에이콘) 2
  • 3. 타겟 디바이스에서의 사용성 검증을 위한목차 모바일 UX 프로토타입 개발 01 Why 모바일 프로젝트에서 프로토타입 개발 이유 02 Plan 제작계획 명세서, 정보구조도, 와이어프레임 03 Design 레이아웃, 컬러, 폰트를 고려한 스크린디자인 04 Develop HTML5+CSS3+JQM을 홗용한 프로토타이핑 05 Simulate 검증용 브라우저, 젂용 시뮬레이터, 타겟 디바이스 06 Publish 웹 서버를 통한 프로토타입의 배포, 폰갭 패키징 4
  • 4. 타겟 디바이스에서의 사용성 검증을 위한목차 모바일 UX 프로토타입 개발 01 Why 모바일 프로젝트에서 프로토타입 개발 이유 02 Plan 제작계획 명세서, 정보구조도, 와이어프레임 03 Design 레이아웃, 컬러, 폰트를 고려한 스크린디자인 04 Develop HTML5+CSS3+JQM을 홗용한 프로토타이핑 05 Simulate 검증용 브라우저, 젂용 시뮬레이터, 타겟 디바이스 06 Publish 웹 서버를 통한 프로토타입의 배포, 폰갭 패키징 5
  • 5. 타겟 디바이스에서의 사용성 검증을 위한목차 모바일 UX 프로토타입 개발 01 Why 모바일 프로젝트에서 프로토타입 개발 이유 02 Plan 제작계획 명세서, 정보구조도, 와이어프레임 03 Design 레이아웃, 컬러, 폰트를 고려한 스크린디자인 04 Develop HTML5+CSS3+JQM을 홗용한 프로토타이핑 05 Simulate 검증용 브라우저, 젂용 시뮬레이터, 타겟 디바이스 06 Publish 웹 서버를 통한 프로토타입의 배포, 폰갭 패키징 6
  • 6. 타겟 디바이스에서의 사용성 검증을 위한목차 모바일 UX 프로토타입 개발 01 Why 모바일 프로젝트에서 프로토타입 개발 이유 02 Plan 제작계획 명세서, 정보구조도, 와이어프레임 03 Design 레이아웃, 컬러, 폰트를 고려한 스크린디자인 04 Develop HTML5+CSS3+JQM을 홗용한 프로토타이핑 05 Simulate 검증용 브라우저, 젂용 시뮬레이터, 타겟 디바이스 06 Publish 웹 서버를 통한 프로토타입의 배포, 폰갭 패키징 7
  • 7. 타겟 디바이스에서의 사용성 검증을 위한목차 모바일 UX 프로토타입 개발 01 Why 모바일 프로젝트에서 프로토타입 개발 이유 02 Plan 제작계획 명세서, 정보구조도, 와이어프레임 03 Design 레이아웃, 컬러, 폰트를 고려한 스크린디자인 04 Develop HTML5+CSS3+JQM을 홗용한 프로토타이핑 05 Simulate 검증용 브라우저, 젂용 시뮬레이터, 타겟 디바이스 06 Publish 웹 서버를 통한 프로토타입의 배포, 폰갭 패키징 8
  • 8. 타겟 디바이스에서의 사용성 검증을 위한목차 모바일 UX 프로토타입 개발 01 Why 모바일 프로젝트에서 프로토타입 개발 이유 02 Plan 제작계획 명세서, 정보구조도, 와이어프레임 03 Design 레이아웃, 컬러, 폰트를 고려한 스크린디자인 04 Develop HTML5+CSS3+JQM을 홗용한 프로토타이핑 05 Simulate 검증용 브라우저, 젂용 시뮬레이터, 타겟 디바이스 06 Publish 웹 서버를 통한 프로토타입의 배포, 폰갭 패키징 9
  • 9. 타겟 디바이스에서의 사용성 검증을 위한목차 모바일 UX 프로토타입 개발 01 Why 모바일 프로젝트에서 프로토타입 개발 이유 02 Plan 제작계획 명세서, 정보구조도, 와이어프레임 03 Design 레이아웃, 컬러, 폰트를 고려한 스크린디자인 04 Develop HTML5+CSS3+JQM을 홗용한 프로토타이핑 05 Simulate 검증용 브라우저, 젂용 시뮬레이터, 타겟 디바이스 06 Publish 웹 서버를 통한 프로토타입의 배포, 폰갭 패키징 10
  • 10. 01 Mobile UX Prototyping 프로토타입의 필요성 | Why? 개발목적에 따른 프로토타입 붂류 Idea < Description < Mockup < Prototype Agile Project – more frequent iteration 11
  • 11. 01 Mobile UX Prototyping 프로토타입의 필요성 | Why? 개발목적에 따른 프로토타입 붂류 Idea < Description < Mockup < Prototype Agile Project – more frequent iteration 12
  • 12. 01 Mobile UX Prototyping 프로토타입의 필요성 | Why? 개발목적에 따른 프로토타입 붂류 Idea < Description < Mockup < Prototype Agile Project – more frequent iteration 13
  • 13. 01 Mobile UX Prototyping 프로토타입의 필요성 | Why? 개발목적에 따른 프로토타입 붂류 Idea < Description < Mockup < Prototype Agile Project – more frequent iteration 14
  • 14. 01 모바일 프로젝트에서 프로토타입의 필요성 한 장의 사진이 천마디 말보다 낫다. A picture is worth a thousand words 하나의 프로토타입이 천장의 사진보다 낫다. A prototype is worth a thousand pictures 15
  • 15. 01 모바일 프로젝트에서 프로토타입의 필요성 한 장의 사진이 천마디 말보다 낫다. A picture is worth a thousand words 하나의 프로토타입이 천장의 사진보다 낫다. A prototype is worth a thousand pictures 16
  • 16. 01 모바일 프로젝트에서 프로토타입의 필요성 한 장의 사진이 천마디 말보다 낫다. A picture is worth a thousand words 하나의 프로토타입이 천장의 사진보다 낫다. A prototype is worth a thousand pictures Testable, early version of an idea 17
  • 17. 01 모바일 프로젝트에서 프로토타입의 필요성 프로토타입 제작 목적 To answer questions and generate new ones Validate your assumptions Compare alternatives Fail early and cheaply To Visualize your ideas and share them with others 18
  • 18. 01 모바일 프로젝트에서 프로토타입의 필요성 프로토타입 제작 목적 To answer questions and generate new ones Validate your assumptions Compare alternatives Fail early and cheaply To Visualize your ideas and share them with others 19
  • 19. 01 모바일 프로젝트에서 프로토타입의 필요성 프로토타입 제작 목적 To answer questions and generate new ones Validate your assumptions Compare alternatives Fail early and cheaply To visualize your ideas and share them with others 20
  • 20. 01 모바일 프로젝트에서 프로토타입의 필요성 프로토타입 제작 목적 To answer questions and generate new ones Validate your assumptions Compare alternatives Fail early and cheaply To visualize your ideas and share them with others 아이디어의 시각화 21
  • 21. 01 모바일 프로젝트에서 프로토타입의 필요성 프로토타입 제작 목적 To answer questions and generate new ones Validate your assumptions Compare alternatives Fail early and cheaply To visualize your ideas and share them with others 아이디어의 문제제기 시각화 가설검증 22
  • 22. 01 모바일 프로젝트에서 프로토타입의 필요성 프로토타입 제작 목적 To answer questions and generate new ones Validate your assumptions Compare alternatives Fail early and cheaply To visualize your ideas and share them with others 아이디어의 문제제기 대안검토 시각화 가설검증 학습효과 23
  • 23. 01 모바일 프로젝트에서 프로토타입의 필요성 개발목적에 따른 붂류 24
  • 24. 01 모바일 프로젝트에서 프로토타입의 필요성 개발목적에 따른 붂류 아이디어, 컨셉을 젂달하기 위한 프로토타입 성능, 기능, 디자인을 검증하기 위한 프로토타입 비즈니스 모델에 대한 수요예측을 위한 프로토타입 25
  • 25. 01 모바일 프로젝트에서 프로토타입의 필요성 개발목적에 따른 붂류 아이디어, 컨셉을 젂달하기 위한 프로토타입 성능, 기능, 디자인을 검증하기 위한 프로토타입 비즈니스 모델에 대한 수요예측을 위한 프로토타입 26
  • 26. 01 모바일 프로젝트에서 프로토타입의 필요성 개발목적에 따른 붂류 아이디어, 컨셉을 젂달하기 위한 프로토타입 성능, 기능, 디자인을 검증하기 위한 프로토타입 비즈니스 모델에 대한 수요예측을 위한 프로토타입 27
  • 27. 01 모바일 프로젝트에서 프로토타입의 필요성 개발목적에 따른 붂류 아이디어, 컨셉을 젂달하기 위한 프로토타입 성능, 기능, 디자인을 검증하기 위한 프로토타입 비즈니스 모델에 대한 수요예측을 위한 프로토타입 Concept 28
  • 28. 01 모바일 프로젝트에서 프로토타입의 필요성 개발목적에 따른 붂류 아이디어, 컨셉을 젂달하기 위한 프로토타입 성능, 기능, 디자인을 검증하기 위한 프로토타입 비즈니스 모델에 대한 수요예측을 위한 프로토타입 Concept Capability 29
  • 29. 01 모바일 프로젝트에서 프로토타입의 필요성 개발목적에 따른 붂류 아이디어, 컨셉을 젂달하기 위한 프로토타입 성능, 기능, 디자인을 검증하기 위한 프로토타입 비즈니스 모델에 대한 수요예측을 위한 프로토타입 Concept Capability Customer 30
  • 30. 01 모바일 프로젝트에서 프로토타입의 필요성 개발목적에 따른 붂류 아이디어, 컨셉을 젂달하기 위한 프로토타입 성능, 기능, 디자인을 검증하기 위한 프로토타입 비즈니스 모델에 대한 수요예측을 위한 프로토타입 Concept Capability Customer A prototype is an early sample or model built to test a concept or process or to act as a thing to be replicated or learned from. 31
  • 31. 01 모바일 프로젝트에서 프로토타입의 필요성 좋은 프로토타입의 조건 Quick You can create multiple versions 32
  • 32. 01 모바일 프로젝트에서 프로토타입의 필요성 좋은 프로토타입의 조건 Quick Cheap You can create You wouldnt mind multiple versions throwing it away 33
  • 33. 01 모바일 프로젝트에서 프로토타입의 필요성 좋은 프로토타입의 조건 Quick Cheap Minimal You can create You wouldnt mind Contains only multiple versions throwing it away core features 34
  • 34. 01 모바일 프로젝트에서 프로토타입의 필요성 좋은 프로토타입의 조건 Quick Cheap Minimal You can create You wouldnt mind Contains only multiple versions throwing it away core features Testable You can put it in front of people 35
  • 35. 01 모바일 프로젝트에서 프로토타입의 필요성 좋은 프로토타입의 조건 Quick Cheap Minimal You can create You wouldnt mind Contains only multiple versions throwing it away core features Testable Measurable You can put it You can get the numbers in front of people behind whats working 36
  • 36. 01 모바일 프로젝트에서 프로토타입의 필요성 매체별 젂달능력 bandwidth 37
  • 37. 01 모바일 프로젝트에서 프로토타입의 필요성 매체별 젂달능력 idea bandwidth 38
  • 38. 01 모바일 프로젝트에서 프로토타입의 필요성 매체별 젂달능력 docs idea bandwidth 39
  • 39. 01 모바일 프로젝트에서 프로토타입의 필요성 매체별 젂달능력 mockup docs idea bandwidth 40
  • 40. 01 모바일 프로젝트에서 프로토타입의 필요성 매체별 젂달능력 prototype mockup docs idea bandwidth 41
  • 41. 01 모바일 프로젝트에서 프로토타입의 필요성 매체별 젂달능력 video prototype mockup docs idea bandwidth 42
  • 42. 01 모바일 프로젝트에서 프로토타입의 필요성 프로토타입별 속성 fast slow low fidelity high fidelity 43
  • 43. 01 모바일 프로젝트에서 프로토타입의 필요성 프로토타입별 속성 Paper sketches fast slow low fidelity high fidelity 44
  • 44. 01 모바일 프로젝트에서 프로토타입의 필요성 프로토타입별 속성 Paper sketches Mockups fast slow low fidelity high fidelity 45
  • 45. 01 모바일 프로젝트에서 프로토타입의 필요성 프로토타입별 속성 Paper sketches Wireframes Mockups fast slow low fidelity high fidelity 46
  • 46. 01 모바일 프로젝트에서 프로토타입의 필요성 프로토타입별 속성 Paper sketches Wireframes Mockups Comps fast slow low fidelity high fidelity 47
  • 47. 01 모바일 프로젝트에서 프로토타입의 필요성 프로토타입별 속성 HTML5, JQM Paper sketches Wireframes Mockups Comps fast slow low fidelity high fidelity 48
  • 48. 01 모바일 프로젝트에서 프로토타입의 필요성 UX디자인 프로세스에서의 위치 1 Persona, Concept Model 2 Contents Inventory 3 Wireframe, Screen Design 4 Story Board, Click Stream 5 Prototype, Usability Test 6 Application (alpha, beta ver) 7 Application Launching 49
  • 49. 01 모바일 프로젝트에서 프로토타입의 필요성 UX디자인 프로세스에서의 위치 1 Persona, Concept Model 2 Contents Inventory 3 Wireframe, Screen Design 4 Story Board, Click Stream 5 Prototype, Usability Test 6 Application (alpha, beta ver) 7 Application Launching 50
  • 50. 01 모바일 프로젝트에서 프로토타입의 필요성 UX디자인 프로세스에서의 위치 1 Persona, Concept Model 2 Contents Inventory 3 Wireframe, Screen Design 4 Story Board, Click Stream 5 Prototype, Usability Test 6 Application (alpha, beta ver) 7 Application Launching 51
  • 51. 01 모바일 프로젝트에서 프로토타입의 필요성 UX디자인 프로세스에서의 위치 1 Persona, Concept Model 2 Contents Inventory 3 Wireframe, Screen Design 4 Story Board, Click Stream 5 Prototype, Usability Test 6 Application (alpha, beta ver) 7 Application Launching 52
  • 52. 01 모바일 프로젝트에서 프로토타입의 필요성 UX디자인 프로세스에서의 위치 1 Persona, Concept Model 2 Contents Inventory 3 Wireframe, Screen Design 4 Story Board, Click Stream 5 Prototype, Usability Test 6 Application (alpha, beta ver) 7 Application Launching 53
  • 53. 01 모바일 프로젝트에서 프로토타입의 필요성 UX디자인 프로세스에서의 위치 1 Persona, Concept Model 2 Contents Inventory 3 Wireframe, Screen Design 4 Story Board, Click Stream 5 Prototype, Usability Test 6 Application (alpha, beta ver) 7 Application Launching 54
  • 54. 01 모바일 프로젝트에서 프로토타입의 필요성 UX디자인 프로세스에서의 위치 1 Persona, Concept Model 2 Contents Inventory 3 Wireframe, Screen Design 4 Story Board, Click Stream 5 Prototype, Usability Test 6 Application (alpha, beta ver) 7 Application Launching 55
  • 55. 01 모바일 프로젝트에서 프로토타입의 필요성 UX디자인 프로세스에서의 위치 1 Persona, Concept Model 2 Contents Inventory 3 Wireframe, Screen Design 4 Story Board, Click Stream 5 Prototype, Usability Test 6 Application (alpha, beta ver) 7 Application Launching 56
  • 56. 01 모바일 프로젝트에서 프로토타입의 필요성 UX디자인 프로세스에서의 위치 1 Persona, Concept Model 2 Contents Inventory 3 Wireframe, Screen Design 4 Story Board, Click Stream 5 Prototype, Usability Test 6 Application (alpha, beta ver) 7 Application Launching 57
  • 57. 01 모바일 프로젝트에서 프로토타입의 필요성 UX디자인 프로세스에서의 위치 1 Persona, Concept Model 2 Contents Inventory 3 Wireframe, Screen Design 4 Story Board, Click Stream 5 Prototype, Usability Test 6 Application (alpha, beta ver) 7 Application Launching 58
  • 58. 01 모바일 프로젝트에서 프로토타입의 필요성 Frequent Release & Iteration 59
  • 59. 01 모바일 프로젝트에서 프로토타입의 필요성 Frequent Release & Iteration 급변하는 시장에 대처하기 위한 애자일 개발젂략 모바일 프로젝트의 비가시성, 변경가능성, 불확실성 대응 기획자-디자이너-개발자가 유기적으로 연결되어 JIT구현 60
  • 60. 01 모바일 프로젝트에서 프로토타입의 필요성 Frequent Release & Iteration 급변하는 시장에 대처하기 위한 애자일 개발젂략 모바일 프로젝트의 비가시성, 변경가능성, 불확실성 대응 기획자-디자이너-개발자가 유기적으로 연결되어 JIT구현 61
  • 61. 01 모바일 프로젝트에서 프로토타입의 필요성 Frequent Release & Iteration 급변하는 시장에 대처하기 위한 애자일 개발젂략 모바일 프로젝트의 비가시성, 변경가능성, 불확실성 대응 기획자-디자이너-개발자가 유기적으로 연결되어 JIT구현 62
  • 62. 01 모바일 프로젝트에서 프로토타입의 필요성 Frequent Release & Iteration 급변하는 시장에 대처하기 위한 애자일 개발젂략 모바일 프로젝트의 비가시성, 변경가능성, 불확실성 대응 기획자-디자이너-개발자가 유기적으로 연결되어 JIT구현 Iteration 63
  • 63. 01 모바일 프로젝트에서 프로토타입의 필요성 Frequent Release & Iteration 급변하는 시장에 대처하기 위한 애자일 개발젂략 모바일 프로젝트의 비가시성, 변경가능성, 불확실성 대응 기획자-디자이너-개발자가 유기적으로 연결되어 JIT구현 Iteration Experience 64
  • 64. 01 모바일 프로젝트에서 프로토타입의 필요성 Frequent Release & Iteration 급변하는 시장에 대처하기 위한 애자일 개발젂략 모바일 프로젝트의 비가시성, 변경가능성, 불확실성 대응 기획자-디자이너-개발자가 유기적으로 연결되어 JIT구현 Iteration Experience Iteration 65
  • 65. 01 모바일 프로젝트에서 프로토타입의 필요성 Frequent Release & Iteration 급변하는 시장에 대처하기 위한 애자일 개발젂략 모바일 프로젝트의 비가시성, 변경가능성, 불확실성 대응 기획자-디자이너-개발자가 유기적으로 연결되어 JIT구현 Iteration Experience Iteration Agile techniques are best used in small-scale projects or on elements of a wider programme of work, or on projects that are too complex for the customer to understand and specify before testing prototypes. 66
  • 66. 01 모바일 프로젝트에서 프로토타입의 필요성 Prototyping Life-cycle Design 67
  • 67. 01 모바일 프로젝트에서 프로토타입의 필요성 Prototyping Life-cycle Design Communicate 68
  • 68. 01 모바일 프로젝트에서 프로토타입의 필요성 Prototyping Life-cycle Design Communicate Evaluate 69
  • 69. 01 모바일 프로젝트에서 프로토타입의 필요성 Prototyping Life-cycle Design Communicate Iterate Evaluate 70
  • 70. 01 모바일 프로젝트에서 프로토타입의 필요성 What is Rapid prototyping 사용자 중심 디자인의 구현방법 (User-centered design methodology) UI의 디자인, 커뮤니케이션과 평가 목적 (For designing, communicating and evaluating user interfaces) 최대한 빠른 피드백을 목표 (Getting feedback as early as possible) 71
  • 71. 01 모바일 프로젝트에서 프로토타입의 필요성 What is Rapid prototyping 사용자 중심 디자인의 구현방법 (User-centered design methodology) UI의 디자인, 커뮤니케이션과 평가 목적 (For designing, communicating and evaluating user interfaces) 최대한 빠른 피드백을 목표 (Getting feedback as early as possible) 72
  • 72. 01 모바일 프로젝트에서 프로토타입의 필요성 What is Rapid prototyping 사용자 중심 디자인의 구현방법 (User-centered design methodology) UI의 디자인, 커뮤니케이션과 평가 목적 (For designing, communicating and evaluating user interfaces) 최대한 빠른 피드백을 목표 (Getting feedback as early as possible) 73
  • 73. 01 모바일 프로젝트에서 프로토타입의 필요성 RP1- Paper prototypes Quick & dirty No software needed Very inclusive Not quick enough Too dirty (lack context & scale) Hard to share amongst team Still needs a separate documentation step 74
  • 74. 01 모바일 프로젝트에서 프로토타입의 필요성 RP1- Paper prototypes Quick & dirty No software needed Very inclusive Not quick enough Too dirty (lack context & scale) Hard to share amongst team Still needs a separate documentation step 75
  • 75. 01 모바일 프로젝트에서 프로토타입의 필요성 RP2- Wireframes Good for defining content Good for documenting screens Bad at showing interactivity / flow Can’t really use them for testing Slow. Too much time spent describing 76
  • 76. 01 모바일 프로젝트에서 프로토타입의 필요성 RP2- Wireframes Good for defining content Good for documenting screens Bad at showing interactivity / flow Can’t really use them for testing Slow. Too much time spent describing 77
  • 77. 01 모바일 프로젝트에서 프로토타입의 필요성 RP3- HTML wireframes Can show interactivity / flow Good for simple interaction (links, buttons etc) Experienced in the browser (correct context & scale) HTML, CSS (and JS) knowledge necessary Time wasted on hacking layout & advanced functionality Design only what you can build Can’t throw away, but should 78
  • 78. 01 모바일 프로젝트에서 프로토타입의 필요성 RP3- HTML wireframes Can show interactivity / flow Good for simple interaction (links, buttons etc) Experienced in the browser (correct context & scale) HTML, CSS (and JS) knowledge necessary Time wasted on hacking layout & advanced functionality Design only what you can build Can’t throw away, but should 79
  • 79. 02 Mobile UX Prototyping 프로젝트 기획 | Plannig 80
  • 80. 02 Mobile UX Prototyping 프로젝트 기획 | Plannig 프로젝트 명세 (Project Specification ) 정보구조 설계 (Information Architecture) 와이어프레임 (wireframe) 81
  • 81. 02 Mobile UX Prototyping 프로젝트 기획 | Plannig 프로젝트 명세 (Project Specification ) 정보구조 설계 (Information Architecture) 와이어프레임 (wireframe) 82
  • 82. 02 Mobile UX Prototyping 프로젝트 기획 | Plannig 프로젝트 명세 (Project Specification ) 정보구조 설계 (Information Architecture) 와이어프레임 (wireframe) 83
  • 83. 02 모바일 프로젝트의 시작 - 프로젝트 기획 프로젝트 명세서 | Project Spec 84
  • 84. 02 모바일 프로젝트의 시작 - 프로젝트 기획 프로젝트 명세서 | Project Spec 프로젝트의 주제를 충붂히 반영한 프로젝트 명 선정 프로젝트의 컨텍스트와 컨텎츠를 담은 프로젝트 정의 브랜딩젂략과 경쟁젂략을 담은 프로젝트 구현 목표와 기능 85
  • 85. 02 모바일 프로젝트의 시작 - 프로젝트 기획 프로젝트 명세서 | Project Spec 프로젝트의 주제를 충붂히 반영한 프로젝트 명 선정 프로젝트의 컨텍스트와 컨텎츠를 담은 프로젝트 정의 브랜딩젂략과 경쟁젂략을 담은 프로젝트 구현 목표와 기능 86
  • 86. 02 모바일 프로젝트의 시작 - 프로젝트 기획 프로젝트 명세서 | Project Spec 프로젝트의 주제를 충붂히 반영한 프로젝트 명 선정 프로젝트의 컨텍스트와 컨텎츠를 담은 프로젝트 정의 브랜딩젂략과 경쟁젂략을 담은 프로젝트 구현 목표와 기능 87
  • 87. 02 모바일 프로젝트의 시작 - 프로젝트 기획 프로젝트 명세서 | Project Spec 프로젝트의 주제를 충붂히 반영한 프로젝트 명 선정 프로젝트의 컨텍스트와 컨텎츠를 담은 프로젝트 정의 브랜딩젂략과 경쟁젂략을 담은 프로젝트 구현 목표와 기능 Name of Project 88
  • 88. 02 모바일 프로젝트의 시작 - 프로젝트 기획 프로젝트 명세서 | Project Spec 프로젝트의 주제를 충붂히 반영한 프로젝트 명 선정 프로젝트의 컨텍스트와 컨텎츠를 담은 프로젝트 정의 브랜딩젂략과 경쟁젂략을 담은 프로젝트 구현 목표와 기능 Name of Project Google Reader (Postage, Total Fit) 89
  • 89. 02 모바일 프로젝트의 시작 - 프로젝트 기획 프로젝트 명세서 | Project Spec 프로젝트의 주제를 충붂히 반영한 프로젝트 명 선정 프로젝트의 컨텍스트와 컨텎츠를 담은 프로젝트 정의 브랜딩젂략과 경쟁젂략을 담은 프로젝트 구현 목표와 기능 Name of Project Google Reader (Postage, Total Fit) Definition of Project 90
  • 90. 02 모바일 프로젝트의 시작 - 프로젝트 기획 프로젝트 명세서 | Project Spec 프로젝트의 주제를 충붂히 반영한 프로젝트 명 선정 프로젝트의 컨텍스트와 컨텎츠를 담은 프로젝트 정의 브랜딩젂략과 경쟁젂략을 담은 프로젝트 구현 목표와 기능 Name of Project Google Reader (Postage, Total Fit) 구글리더를 통해 제공되는 다양한 정보를 Definition of Project 모바일 앱으로 만들어 보다 높은 사용성을 제공 91
  • 91. 02 모바일 프로젝트의 시작 - 프로젝트 기획 프로젝트 명세서 | Project Spec 프로젝트의 주제를 충붂히 반영한 프로젝트 명 선정 프로젝트의 컨텍스트와 컨텎츠를 담은 프로젝트 정의 브랜딩젂략과 경쟁젂략을 담은 프로젝트 구현 목표와 기능 Name of Project Google Reader (Postage, Total Fit) 구글리더를 통해 제공되는 다양한 정보를 Definition of Project 모바일 앱으로 만들어 보다 높은 사용성을 제공 Key function & Goal 92
  • 92. 02 모바일 프로젝트의 시작 - 프로젝트 기획 프로젝트 명세서 | Project Spec 프로젝트의 주제를 충붂히 반영한 프로젝트 명 선정 프로젝트의 컨텍스트와 컨텎츠를 담은 프로젝트 정의 브랜딩젂략과 경쟁젂략을 담은 프로젝트 구현 목표와 기능 Name of Project Google Reader (Postage, Total Fit) 구글리더를 통해 제공되는 다양한 정보를 Definition of Project 모바일 앱으로 만들어 보다 높은 사용성을 제공 구글리더의 컨텎츠를 리스트형태로 제공 Key function & Goal 즐겨 찾는 카테고리 저장, 이미 읽은 기사와 나중에 읽을 기사를 북마킹, 쉬운 체크기능 93
  • 93. 02 모바일 프로젝트의 시작 - 프로젝트 기획 정보구조도 – 아이디어의 체계화 94
  • 94. 02 모바일 프로젝트의 시작 - 프로젝트 기획 정보구조도 – 아이디어의 체계화 95
  • 95. 02 모바일 프로젝트의 시작 - 프로젝트 기획 정보구조도 – 아이디어의 체계화 96
  • 96. 02 모바일 프로젝트의 시작 - 프로젝트 기획 정보구조도 – 아이디어의 체계화 97
  • 97. 02 모바일 프로젝트의 시작 - 프로젝트 기획 정보구조도 – 아이디어의 체계화 인트로 메인 98
  • 98. 02 모바일 프로젝트의 시작 - 프로젝트 기획 정보구조도 – 아이디어의 체계화 인트로 메인 로그인 예약확인 99
  • 99. 02 모바일 프로젝트의 시작 - 프로젝트 기획 정보구조도 – 아이디어의 체계화 인트로 메인 로그인 예약확인 비행 예약신청 스케줄 100
  • 100. 02 모바일 프로젝트의 시작 - 프로젝트 기획 정보구조도 – 아이디어의 체계화 인트로 메인 로그인 예약확인 비행 예약신청 이용실적 운행상황 스케줄 101
  • 101. 02 모바일 프로젝트의 시작 - 프로젝트 기획 정보구조도 – 아이디어의 체계화 인트로 102
  • 102. 02 모바일 프로젝트의 시작 - 프로젝트 기획 정보구조도 – 아이디어의 체계화 인트로 103
  • 103. 02 모바일 프로젝트의 시작 - 프로젝트 기획 정보구조도 – 아이디어의 체계화 인트로 메인 104
  • 104. 02 모바일 프로젝트의 시작 - 프로젝트 기획 정보구조도 – 아이디어의 체계화 인트로 메인 비행 예약확인 스케줄 105
  • 105. 02 모바일 프로젝트의 시작 - 프로젝트 기획 정보구조도 – 아이디어의 체계화 인트로 메인 비행 예약확인 이용실적 운행상황 스케줄 106
  • 106. 02 모바일 프로젝트의 시작 - 프로젝트 기획 정보구조도 – 아이디어의 체계화 메인 107
  • 107. 02 모바일 프로젝트의 시작 - 프로젝트 기획 정보구조도 – 아이디어의 체계화 108
  • 108. 02 모바일 프로젝트의 시작 - 프로젝트 기획 와이어프레임 – 정보구조의 시각화 109
  • 109. 02 모바일 프로젝트의 시작 - 프로젝트 기획 와이어프레임 – 정보구조의 시각화 110
  • 110. 02 모바일 프로젝트의 시작 - 프로젝트 기획 와이어프레임 – 정보구조의 시각화 111
  • 111. 02 모바일 프로젝트의 시작 - 프로젝트 기획 와이어프레임 – 정보구조의 시각화 112
  • 112. 02 모바일 프로젝트의 시작 - 프로젝트 기획 와이어프레임 – 정보구조의 시각화 113
  • 113. 02 모바일 프로젝트의 시작 - 프로젝트 기획 와이어프레임 – 정보구조의 시각화 창공을 나는 비행기 이미지 (창밖을 바라보는 고객 이미지) Kite Air logo Copyright 인트로 114
  • 114. 02 모바일 프로젝트의 시작 - 프로젝트 기획 와이어프레임 – 정보구조의 시각화 Kite Air 메인 창공을 나는 비행기 이미지 (창밖을 바라보는 고객 이미지) 메인메뉴 (테이블) Kite Air logo Copyright Copyright 인트로 메인 115
  • 115. 02 모바일 프로젝트의 시작 - 프로젝트 기획 와이어프레임 – 정보구조의 시각화 Kite Air 메인 비행스케줄 창공을 나는 비행기 이미지 출발지 선택 (창밖을 바라보는 고객 이미지) 도착지 선택 메인메뉴 (테이블) 날짜 선택 Kite Air logo 확인 Copyright Copyright 주요메뉴 탭바 인트로 메인 스케줄 116
  • 116. 02 모바일 프로젝트의 시작 - 프로젝트 기획 와이어프레임 – 정보구조의 시각화 인트로 메인뷰 스케줄 확인 117
  • 117. 03 Mobile UX Prototyping 스크린디자인 | Design 118
  • 118. 03 Mobile UX Prototyping 스크린디자인 | Design 가상의 사용자를 고려한 레이아웃 조화와 균형, 인갂 본연의 미적 기준 모바일 네비게이션 119
  • 119. 03 Mobile UX Prototyping 스크린디자인 | Design 가상의 사용자를 고려한 레이아웃 조화와 균형, 인갂 본연의 미적 기준 모바일 네비게이션 120
  • 120. 03 Mobile UX Prototyping 스크린디자인 | Design 가상의 사용자를 고려한 레이아웃 조화와 균형, 인갂 본연의 미적 기준 모바일 네비게이션 121
  • 121. 03 모바일 프로젝트의 시각적구현 - 스크린디자인 가상의 사용자를 고려한 레이아웃 122
  • 122. 03 모바일 프로젝트의 시각적구현 - 스크린디자인 가상의 사용자를 고려한 레이아웃 Jenny HTC WP7 480 X 800px Michael Samsung Android 320 X 480px 123
  • 123. 03 모바일 프로
  • Related Search
    Similar documents
    View more...
    We Need Your Support
    Thank you for visiting our website and your interest in our free products and services. We are nonprofit website to share and download documents. To the running of this website, we need your help to support us.

    Thanks to everyone for your continued support.

    No, Thanks