강의 개요 및 교안 2014 1차수_font

1. 2014년 국가기간전략산업직종 스마트기기 UX/UI 디자인 과정 Smart UX & UI Design : 1st - Orientation 최영현 강사 Smart UX & UI Design : 1 Orientation 강의개요 IA & Interaction 디자인 이론 및 실습 GUI가이드라인

2. Feature List 제작 실습 (-) Information Architecture 제작 실습 (4) Block Diagram 제작 실습 (-) Screen Definition 제작 실습 (-) Task flow 제작 실습 (-) IA & Interaction 디자인 이론 및 실습 GUI Design 5月 개요 및 디바이스별 GUI 가이드(5) Nine-patch 가이드 제작 실습 (-) 모바일 웹 가이드 제작 실습 (-) 이해(1) 제작 실습 (1) 평가시스템 제작(2) 조별평가 및 결과 발표(1) Heuristic Evaluation

3. Feature List 제작 실습 (2) Information Architecture 제작 실습 (3) Block Diagram 제작 실습 (2) Screen Definition 제작 실습 (16) Task flow 제작 실습 (10) 5/13~5/15 IA & Interaction 디자인이론및실습 Feature List 제작 실습 (2) Feature List 제작은 스마트 디바이스 UX/UI에 대한 기능을 작성 하는 시트로 각 항목별 기능정의와 리스트를 작성하는 것을 실습하 는 교육과정으로 스마트 디바이스의 UX/UI에 대한 전문지식 함양 을 목표로함 Information Architecture 제작 실습 (3) Information Architecture 제작은 정보구조에 대한 설계로 사용 자 중심의 정보구조 설계를 통해 편리한 스마트 디바이스 UX/UI를 설계하기 위한 기본을 다지는 교육과정으로 실습 통해 정보조직화 의 전문 능력향상을 목표로 함 Block Diagram 제작 실습 (2) Block Diagram 제작은 조직화된 정보구조의 실행 흐름을 도식화Block Diagram 제작은 조직화된 정보구조의 실행 흐름을 도식화 하여 작성하는 교육과정으로 실습 통해서 제작 전에 논리적인 구조 를 갖추고 있는지를 확인하는 전문가적인 능력을 개발하는 것을 목 표로 함 Screen Definition 제작 실습 (16) Screen Definition 제작은 스마트 디바이스 특성에 적합한 멀티스 크린 제작 방법에 대해서 익히는 과정으로 실습을 통해서 현업에서 필요로 하는 능력을 향상시키는 것을 목표로 함 Task flow 제작 실습 (10) Task flow 제작은 사용자 관점에서 과업설계를 통해 사용자가 개 발된 스마트 디바이스의 UX/UI에 대해서 편리하고 효율적으로 사 용할 수 있게 흐름을 설계하는 과정으로 실습을 통해서 협업에서 사용자 중심의 UX/UI설계능력 배양을 목표로 함 강의개요

4. 통합 가이드 제작 실습 (10) Nine-patch 가이드 제작 실습 (10) 모바일 웹 가이드 제작 실습 (10) 5/13~5/15 GUI가이드라인 통합 가이드 제작 실습 (10) 통합 가이드 제작은 스마트 디바이스 개발 시 필요로 한 전반적인 가 이드 제작에 대해서 배우는 교육과정으로, 실습을 통해서 스마트디 바이스 전문 개발자와 디자이너간의 협업능력 향상을 목표로 함 Nine-patch 가이드 제작 실습 (10) Nine-patch 가이드 제작을 통해서 안드로이드 멀티스크린에 대해서 유동적인 UI개발에 대해서 배우는 교육과정으로 실습하여 스마트디 바이스에 최적화된 UI 전문개발 능력을 향상시키는 것을 목표로 함 모바일 웹 가이드 제작 실습 (10) 모바일 웹 가이드는 하이퍼텍스트 생성 언어(HTML: HyperText Markup Language) 4.01, 종속형 시트(CSS: Cascading StyleMarkup Language) 4.01, 종속형 시트(CSS: Cascading Style Sheet) 2.0, 유럽 컴퓨터 제조자 협회(ECMA :European Computer Manufacturers Association), 문서 객체 모델(DOM) 표준을 기초 로 하여, 모바일 환경에 적합한 웹 콘텐츠 저작 방법을 규정에 대해서 이해하고 디자인 분야에서 스마트 기기 UX/UI개발 필요한 사항에 대 해서 교육하는 과정으로 모바일 웹 제작 전문 능력을 향상시키는 것 을 목적으로 함 강의개요

5. 우리의 여정은 GUI 여정은 어디까지 왔을까?

8. GUI IA & Interaction 디자인이론및실습 UI,UX 디자인이론및실습 GUI가이드라인

10. 5月 IA & Interaction 디자인 이론 및 실습 Feature List 제작 실습 (2) Block Diagram 제작 실습 (2) Screen Definition Screen Definition Screen Definition Information Architecture 제작 실습 (3) Screen Definition 제작 실습 (3/16) 제작 실습 (8/16) 제작 실습 (16/16) Task flow 제작 실습 (2/10) 제작 실습 (13/16) Task flow 제작 실습 (7/10) Task flow 제작 실습 (10/10)

11. “Feature List”는 “왜” 만들까?“왜” 만들까?

12. “Feature List”는 UI(Wireframe)을 체계적으로 개발하기 위해서

13. 이것은 어떤 “Feature List”어떤 “Feature List” 일까요?

16. 그렇다면, 이것은이것은 어떤 “Feature List” 일까요?

19. 그러므로 “Feature List”는 UI(Wireframe)을 체계적으로 개발하기 위해서 매우 중요하다!

20. IA & Interaction 디자인 이론 및 실습 Feature List 제작 실습 (2) Feature List 제작은 스마트 디바이스 UX/UI에 대한 기능을 작성하는 시트로 각 항목별 리스트와 기능정의 내용을 작성하는 것으로 와이어프레임 작업 시 체계적인 작업할 수 있도록 도움을 주는 작업

21. IA & Interaction 디자인 이론 및 실습 Feature List 제작 실습 (2) Feature List 제작은 스마트 디바이스 UX/UI에 대한 기능을 작성하는 시트로 각 항목별 기능정의와 리스트를 작성하는 것을 실습하는 교육과정으로 와이어프레임 작업시 체계적으로 작업할 수 있는 기능정의 목록임

22. IA & Interaction 디자인 이론 및 실습 Feature List 제작 실습 (2) Feature List 제작은 스마트 디바이스 UX/UI에 대한 기능을 작성하는 시트로 각 항목별 기능정의와 리스트를 작성하는 것을 실습하는 교육과정으로 와이어프레임 작업시 체계적으로 작업할 수 있는 기능정의 목록임

23. IA & Interaction 디자인 이론 및 실습 Feature List 제작 실습 (2)

28. IA & Interaction 디자인 이론 및 실습 Feature List 제작 실습 (2) Block Diagram 제작 실습 (2) Screen Definition Screen Definition Screen Definition 5月 Information Architecture 제작 실습 (3) Screen Definition 제작 실습 (3/16) 제작 실습 (8/16) 제작 실습 (16/16) Task flow 제작 실습 (2/10) 제작 실습 (13/16) Task flow 제작 실습 (7/10) Task flow 제작 실습 (10/10)

29. 'Information Architecture 제작 실습 (3)

30. IA & Interaction 디자인 이론 및 실습 Information Architecture 제작 실습 (3)

49. IA & Interaction 디자인 이론 및 실습 Block Diagram 제작 실습 (2) Block Diagram Not only did our service have to be usable to the business owner and the customer, (as well as making a tidy profit) but it had to be technologically feasible.

50. IA & Interaction 디자인 이론 및 실습 Block Diagram 제작 실습 (2) Block Diagram Not only did our service have to be usable to the business owner and the customer, (as well as making a tidy profit) but it had to be technologically feasible.

52. IA & Interaction 디자인 이론 및 실습 Screen Definition 제작 실습 (16)

78. http://www.appcooker.com

100. IA & Interaction 디자인 이론 및 실습 Task flow 제작 실습 (10)

110. 멋진 GUI만들기 바랍니다.

116. 5月GUI가이드라인 통합 가이드 제작 실습 통합 가이드 제작 실습 Nine-patch 가이드 제작 모바일 웹 가이드 제작 Nine-patch 가이드 제작 (5/10) (10/10) 실습 (5/10) 실습 (5/10)실습 (10/10) 모바일 웹 가이드 제작 실습 (10/10) 제작 실습 (5/10) 제작 실습 (10/10)

117. GUI가이드라인 통합 가이드 제작 실습 통합 가이드 제작 실습 Nine-patch 가이드 제작 모바일 웹 가이드 제작 Nine-patch 가이드 제작 5月 (5/10) (10/10) 실습 (5/10) 실습 (5/10)실습 (10/10) 모바일 웹 가이드 제작 실습 (10/10) 제작 실습 (5/10) 제작 실습 (10/10)

118. IGUI가이드라인 통합 가이드 제작 실습 (10)

136. IGUI가이드라인 통합 가이드 제작 실습 (10) 가이드시 dp으로 절대적인 수치가 아닌 상대적인 표현을 하는것이 가장 중요

138. IGUI가이드라인 Nine-patch 가이드 제작 실습 (10)

139. IGUI가이드라인 Nine-patch 가이드 제작 실습 (10)

141. IGUI가이드라인 모바일 웹 가이드 제작 실습 (10)

142. IGUI가이드라인 모바일 웹 가이드 제작 실습 (10)

143. IGUI가이드라인 모바일 웹 가이드 제작 실습 (10) UI Interaction Guideline

146. IGUI가이드라인 모바일 웹 가이드 제작 실습 (10) UI Pixel Guideline

147. IGUI가이드라인 모바일 웹 가이드 제작 실습 (10) UI Font Guideline

148. IGUI가이드라인 모바일 웹 가이드 제작 실습 (10) UI Color Guideline

149. IGUI가이드라인 모바일 웹 가이드 제작 실습 (10) UI icon Guideline

152. IGUI가이드라인 모바일 웹 가이드 제작 실습 (10) UI Guideline

153. IGUI가이드라인 모바일 웹 가이드 제작 실습 (10) UI Guideline

154. IGUI가이드라인 모바일 웹 가이드 제작 실습 (10) UX Guideline

155. IGUI가이드라인 모바일 웹 가이드 제작 실습 (10) UX Guideline

157. Heuristic Evaluation (10)

158. 항목 내용 설명 1. 알기 쉬운 시스템 상태 시스템마다 적절한 피드백을 통해 적절한 시간에 사용자에 게 "무슨 일이 일어나고 있는지"를 알 수 있게 해야 한다. 2. 실제 사용 환경에 적합한 시스템 시스템은 시스템 지향 언어가 아닌 사용자 언어(사용자에 게 친숙한 단어와 문구, 개념)를 사용하여 사용자와 소통 해야 한다. 실제 환경의 관례에 따라 자연스럽고 논리적으 로 정보를 제공하여야 한다. 사용자는 종종 시스템의 기능 선택에서 실수를 하기 때문 Heuristic Evaluation (10) 3. 사용자에게 자유와 주도권 제공 에 원치 않는 상태로부터 확실한 "비상구"(장황한 상호작 용 없이)를 제공해 줄 필요가 있다. 실행 취소 및 재실행을 할 수 있도록 제공하여야 한다. 4. 일관성과 표준화 동일한 상황에서 상이한 말, 상태, 작용을 UI에 구현하여 사용자에게 혼란을 주어서는 안 된다. 플랫폼의 관례를 따 라야 한다. 5. 오류 예방 좋은 오류 메시지를 준비하는 것보다 처음부터 주의 깊게 디자인하여 문제 발생을 방지해야 한다. 오류가 발생하기 쉬운 조건을 제거하거나 체크 해놓고 사용자에게는 작업 을 취하기 전에 확인 옵션을 제공하여야 한다.

159. 항목 내용 설명 6. 기억을 불러오지 않고 보는 것만으로 이해할 수 있는 디자인 객체나 행위의 옵션을 시각화해 사용자의 기억 부하를 최 소화하여야 한다. 사용자는 시스템과 상호 작용을 하면서 정보를 기억하지 않도록 해야 한다. 시스템을 사용하기 위 한 설명은 언제든지 적절할 때 볼 수 있거나 쉽게 찾을 수 있도록 제공하여야 한다. 시스템 이용을 효율화할 수 있는 구조는 초보 사용자에게 는 보이지 않지만, 숙련 사용자의 작업을 가속화하고 나아 Heuristic Evaluation (10) 7. 유연성과 효율성 가 경험자/미경험자 불문하고 둘 모두의 사용자 요구에 부 응해야 할 것이다. 사용자가 자주 실행하는 기능은 사용자 가 직접 효율화를 조정할 수 있도록 제공하여야 한다. 8. 심플하고 아름다운 디자인 사용자와 시스템간의 대화에서는 상관없거나 불필요한 정 보를 포함해서는 안 된다. 이는 불필요한 정보 군이 관련 정보 군과 충돌해버려 상대적으로 필요한 정보의 가시성을 약화시킬 수 있다. 9. 사용자가 오류를 인식하고 진단하고 복구할 수 있도록 지원 오류 메시지는 평이한 언어(코드가 아닌)로 표현되어야 하 며, 문제를 정확히 지적하고, 해결책을 건설적으로 제안해 야 한다.

160. 항목 내용 설명 10. 도움말과 설명서 준비 시스템이 설명서 없이도 사용할 수 있다면 더할 나위 없이 좋지만, 그래도 도움말 및 설명서는 필요하다. 어떤 정보든 쉽게 찾을 수 있고, 사용자의 행위에 초점을 가지고, 수행 할 구체적인 단계가 나열되고, 분량이 너무 많지 않아야 한다. Heuristic Evaluation (10)

164. 애플리케이션을 위한 UX 디자인 http://windows8center.sourceforge.net/designing-ux-for-apps/ 안드로이드 스타일 가이드 http://klutzy.github.io/android-design-ko/style/index.html http://developer.android.com/design/index.html 사례> AT&T http://www.avantexperience.com/portfolio_uverse.php 사례> My Calm Beat http://www.avantexperience.com/portfolio_mcb.php 사례> 디자이너의 스케치 능력이 중요한 이유 http://www.youthedesigner.com/http://www.youthedesigner.com/ http://www.youthedesigner.com/2013/04/12/the-importance-of-sketching-in-creating-a-successful-design-work/ 사례> 좋은 UI이란? http://ux.stackexchange.com http://ux.stackexchange.com/questions/15471/any-actual-reason-for-complicated-uis 사례> Weather Forecast https://projects.developer.nokia.com/weatherforecast/wiki 사례> 새로운 경험 감성기술의 개발 http://fff.cmiscm.com Guide http://wiki.maemo.org/Documentation/Maemo_5_Developer_Guide/Human_Interface_Guidel ines/Desktop_Widget_UI_Guidelines 참고사이트

강의 개요 및 교안 2014 1차수_font

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (20)

Similar a 강의 개요 및 교안 2014 1차수_font

Similar a 강의 개요 및 교안 2014 1차수_font (20)

Más de Young Choi

Más de Young Choi (12)

강의 개요 및 교안 2014 1차수_font