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

2014년 국가기간전략산업직종 스마트기기 UX/UI 디자인 과정

Smart UX & UI Design : 1st - Orientation

최영현 강사

Smart UX & UI Design : 1 Orientation

강의개요IA & Interaction 디자인 이론 및 실습

GUI가이드라인

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

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설계능력 배양을 목표로 함

강의개요

통합 가이드 제작 실습 (10)Nine-patch 가이드 제작 실습 (10)모바일 웹 가이드 제작 실습 (10)

5/13~5/15

GUI가이드라인

통합 가이드 제작 실습 (10)통합 가이드 제작은 스마트 디바이스 개발 시 필요로 한 전반적인 가이드 제작에 대해서 배우는 교육과정으로, 실습을 통해서 스마트디바이스 전문 개발자와 디자이너간의 협업능력 향상을 목표로 함

Nine-patch 가이드 제작 실습 (10)Nine-patch 가이드 제작을 통해서 안드로이드 멀티스크린에 대해서유동적인 UI개발에 대해서 배우는 교육과정으로 실습하여 스마트디바이스에 최적화된 UI 전문개발 능력을 향상시키는 것을 목표로 함

모바일 웹 가이드 제작 실습 (10)모바일 웹 가이드는 하이퍼텍스트 생성 언어(HTML: HyperTextMarkup Language) 4.01, 종속형 시트(CSS: Cascading Style Markup Language) 4.01, 종속형 시트(CSS: Cascading Style Sheet) 2.0, 유럽 컴퓨터 제조자 협회(ECMA :European Computer Manufacturers Association), 문서 객체 모델(DOM) 표준을 기초로 하여, 모바일 환경에 적합한 웹 콘텐츠 저작 방법을 규정에 대해서이해하고 디자인 분야에서 스마트 기기 UX/UI개발 필요한 사항에 대해서 교육하는 과정으로 모바일 웹 제작 전문 능력을 향상시키는 것을 목적으로 함

강의개요

우리의

여정은

GUI

여정은

어디까지

왔을까?

GUI

IA & Interaction 디자인이론및실습

UI,UX디자인이론및실습

GUI가이드라인



GUI Design




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)


“Feature List”는

“왜” 만들까?“왜” 만들까?

“Feature List”는UI(Wireframe)을

체계적으로개발하기 위해서

이것은어떤 “Feature List”어떤 “Feature List”

일까요?

그렇다면,

이것은이것은어떤 “Feature List”

일까요?

그러므로“Feature List”는UI(Wireframe)을

체계적으로개발하기 위해서매우 중요하다!

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

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


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


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






IA & Interaction




Screen Definition

Screen Definition

Screen Definition

5月



제작 실습(8/16)

제작 실습(16/16)


제작 실습(13/16)



'Information Architecture 제작 실습 (3)

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

















IA & Interaction




Screen Definition

Screen Definition

Screen Definition

5月



제작 실습(8/16)

제작 실습(16/16)


제작 실습(13/16)



IA & Interaction 디자인 이론 및 실습 Block Diagram 제작 실습 (2)

Block DiagramNot 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.

IA & Interaction 디자인 이론 및 실습 Block Diagram 제작 실습 (2)

Block DiagramNot 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.

IA & Interaction




Screen Definition

Screen Definition

Screen Definition

5月



제작 실습(8/16)

제작 실습(16/16)


제작 실습(13/16)



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


























http://www.appcooker.com












GUI Design





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




멋진 GUI만들기

바랍니다.



GUI Design




5月 GUI가이드라인

통합 가이드제작 실습


Nine-patch 가이드 제작

모바일 웹가이드 제작


(5/10) (10/10) 실습 (5/10) 실습 (5/10)실습 (10/10)

모바일 웹가이드 제작실습 (10/10)

제작 실습(5/10)

제작 실습(10/10)

GUI가이드라인






5月(5/10) (10/10) 실습 (5/10) 실습 (5/10)실습 (10/10)


제작 실습(5/10)

제작 실습(10/10)

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


















가이드시 dp으로 절대적인 수치가 아닌상대적인 표현을 하는것이 가장 중요

GUI가이드라인






5月(5/10) (10/10) 실습 (5/10) 실습 (5/10)실습 (10/10)


제작 실습(5/10)

제작 실습(10/10)

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

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

GUI가이드라인






5月(5/10) (10/10) 실습 (5/10) 실습 (5/10)실습 (10/10)


제작 실습(5/10)

제작 실습(10/10)

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



UI Interaction

Guideline


UI Interaction

Guideline


UI Interaction

Guideline


UI Pixel

Guideline


UI Font

Guideline


UI Color

Guideline


UI icon

Guideline


UI icon

Guideline


UI icon

Guideline


UI Guideline


UI Guideline


UX Guideline


UX Guideline



GUI Design




Heuristic Evaluation (10)

항목 내용 설명

1. 알기 쉬운 시스템 상태시스템마다 적절한 피드백을 통해 적절한 시간에 사용자에

게 "무슨 일이 일어나고 있는지"를 알 수 있게 해야 한다.

2. 실제 사용 환경에 적합한 시스템

시스템은 시스템 지향 언어가 아닌 사용자 언어(사용자에

게 친숙한 단어와 문구, 개념)를 사용하여 사용자와 소통

해야 한다. 실제 환경의 관례에 따라 자연스럽고 논리적으

로 정보를 제공하여야 한다.

사용자는 종종 시스템의 기능 선택에서 실수를 하기 때문


3. 사용자에게 자유와 주도권 제공에 원치 않는 상태로부터 확실한 "비상구"(장황한 상호작

용 없이)를 제공해 줄 필요가 있다. 실행 취소 및 재실행을

할 수 있도록 제공하여야 한다.

4. 일관성과 표준화

동일한 상황에서 상이한 말, 상태, 작용을 UI에 구현하여

사용자에게 혼란을 주어서는 안 된다. 플랫폼의 관례를 따

라야 한다.

5. 오류 예방

좋은 오류 메시지를 준비하는 것보다 처음부터 주의 깊게

디자인하여 문제 발생을 방지해야 한다. 오류가 발생하기

쉬운 조건을 제거하거나 체크 해놓고 사용자에게는 작업

을 취하기 전에 확인 옵션을 제공하여야 한다.


6. 기억을 불러오지 않고 보는 것만으로

이해할 수 있는 디자인

객체나 행위의 옵션을 시각화해 사용자의 기억 부하를 최

소화하여야 한다. 사용자는 시스템과 상호 작용을 하면서

정보를 기억하지 않도록 해야 한다. 시스템을 사용하기 위

한 설명은 언제든지 적절할 때 볼 수 있거나 쉽게 찾을 수

있도록 제공하여야 한다.

시스템 이용을 효율화할 수 있는 구조는 초보 사용자에게

는 보이지 않지만, 숙련 사용자의 작업을 가속화하고 나아


7. 유연성과 효율성 가 경험자/미경험자 불문하고 둘 모두의 사용자 요구에 부

응해야 할 것이다. 사용자가 자주 실행하는 기능은 사용자

가 직접 효율화를 조정할 수 있도록 제공하여야 한다.

8. 심플하고 아름다운 디자인

사용자와 시스템간의 대화에서는 상관없거나 불필요한 정

보를 포함해서는 안 된다. 이는 불필요한 정보 군이 관련

정보 군과 충돌해버려 상대적으로 필요한 정보의 가시성을

약화시킬 수 있다.

9. 사용자가 오류를 인식하고 진단하고

복구할 수 있도록 지원

오류 메시지는 평이한 언어(코드가 아닌)로 표현되어야 하

며, 문제를 정확히 지적하고, 해결책을 건설적으로 제안해

야 한다.


10. 도움말과 설명서 준비

시스템이 설명서 없이도 사용할 수 있다면 더할 나위 없이

좋지만, 그래도 도움말 및 설명서는 필요하다. 어떤 정보든

쉽게 찾을 수 있고, 사용자의 행위에 초점을 가지고, 수행

할 구체적인 단계가 나열되고, 분량이 너무 많지 않아야

한다.





애플리케이션을 위한 UX 디자인http://windows8center.sourceforge.net/designing-ux-for-apps/

안드로이드 스타일 가이드http://klutzy.github.io/android-design-ko/style/index.htmlhttp://developer.android.com/design/index.html

사례> AT&Thttp://www.avantexperience.com/portfolio_uverse.php

사례> My Calm Beathttp://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.comhttp://ux.stackexchange.com/questions/15471/any-actual-reason-for-complicated-uis

사례> Weather Forecasthttps://projects.developer.nokia.com/weatherforecast/wiki

사례> 새로운 경험 감성기술의 개발http://fff.cmiscm.com

Guide http://wiki.maemo.org/Documentation/Maemo_5_Developer_Guide/Human_Interface_Guidelines/Desktop_Widget_UI_Guidelines

참고사이트

Documents

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