SlideShare une entreprise Scribd logo
1  sur  10
Télécharger pour lire hors ligne
KAYWON UNIVERSITY OF ART & DESIGN

INDUSTRIAL DESIGN LAB

USER EXPERIENCE

DESIGN
사용자경험디자인2
kwonjeongeun@naver.com

8강 개인 과제 가이드라인
/ 101
도록 & 개인 과제 준수사항
팀 과제 진행
Adobe XD 레슨
/ 102
메뉴 트리기능 리스트주요 특징서비스 컨셉
UI 디자인
정보 설계 단계서비스 정의 단계
/ 103
프로토타이핑와이어프레임스케치플로우 차트
No color
UI 디자인
정보 설계 단계
/ 104
홈 핫 트렌드 베스트 아이템 실시간 이슈 My 환경설정
잇걸
지난 호 보기 패션 지난 아이템 스포티걸 구매내역 로그인 설정
내가 본 상품 뷰티 과거 베스트 빈티지걸 장바구니 이용내역관리
탭 메뉴 헤어 MD 추천 럭셔리걸 찜리스트 어플정보
도시 브랜드별 추천 러블리걸 위시리스트
스타 내가 본 상품
개인정보관리
기능 리스트
메뉴 트리
스케치(IA 4가지 구성 요소 포함)
팀의 정보 설계(IA)는?
/ 105
1. 모바일 기능 리스트를 Excel 템플릿에 맞춰 상세하게 리스트업한다.
2. 세부 기능을 먼저 리스트업 한 후,
각 항목의 상세 기능을 하나하나 작성한다.
3. 세부 - 상세 기능을 기능 단위(큰 단위)로 묶는다.
4. 전체 항목을 리스트를 중요도 순으로 정렬한다.
5. 기능 리스트가 완성되면 메뉴 트리를 설계한다.
기능 리스트 & 메뉴트리 준수사항
/ 106
1. 메뉴 트리를 설계한다.
2. 화면을 Sketch 한다.
UI Ideation Sheet.pptx 활용해서
홈 화면 및 주요 화면을 스케치 한다.
주요 테스크를 보여 줄 주요 화면들을 Sketch 한다.
3. 1인 1 Sketch 세트를 원칙으로 한다.
예 : 팀 구성원 2명이면 2개 Sketch 세트
4. Sketch 완료 후, 팀원 피드백을 받는다.
5. 하나의 파일의 업로드(pdf) 후, 저와 팀 미팅을 하면서 최종안을 다듬는다.
스케치 준수사항
/ 107
와이어프레임, 프로토타이핑 제작 준수사항
Point 1. 팀 스케치 최종 안을 개인이 XD로 제작해서 제출한다. (개인 과제)
Point 2. Gray tone의 Wireframe. 단, 아이콘, 이미지 적용 허용
✦ No color
Point 3. 왼쪽 패널 : 색상, 문자 스타일, 구성 요소를 정리할 것.
✦ 최소한으로 운영한다.
패널 내 요소 위 > 마우스 우 클릭 > ‘캔버스에서 강조 표시’ 메뉴 이용
Point 4. Menu tree 기준으로 아트보드 명칭, 구조 정렬할 것.
다음 화면 참조
Point 5. 프로토타이핑 - 트랜지션 설정할 것.
‘프로토타이핑’ 탭 상태에서 [▶] 버튼 or Ctrl + A 이용
/ 108
/ 109
와이어프레임, 프로토타이핑 제작 준수사항
아트보드명 = Menu Tree 기준. 메뉴명으로 작성
/ 109
끝.
다음 주 과제 : 팀 스케치 컨펌 후, XD 와이어프레임, 프로토타
이핑 제작
kwonjeongeun@naver.com

/ 1010

Contenu connexe

Similaire à 8th.lecture.personal.assignment.guideline

스일01 엑셀사용법이해하기
스일01 엑셀사용법이해하기스일01 엑셀사용법이해하기
스일01 엑셀사용법이해하기
우석 권
 
컴포넌트 관점에서 개발하기
컴포넌트 관점에서 개발하기컴포넌트 관점에서 개발하기
컴포넌트 관점에서 개발하기
우영 주
 

Similaire à 8th.lecture.personal.assignment.guideline (20)

6th.Lecture.Personal.Assignment.Guideline.pdf
6th.Lecture.Personal.Assignment.Guideline.pdf6th.Lecture.Personal.Assignment.Guideline.pdf
6th.Lecture.Personal.Assignment.Guideline.pdf
 
7th.Lecture.UI.Design.and.Middle.Team.Assignment.Guideline.pdf
7th.Lecture.UI.Design.and.Middle.Team.Assignment.Guideline.pdf7th.Lecture.UI.Design.and.Middle.Team.Assignment.Guideline.pdf
7th.Lecture.UI.Design.and.Middle.Team.Assignment.Guideline.pdf
 
6th.Lecture.Personal.Assignment.Guideline.pdf
6th.Lecture.Personal.Assignment.Guideline.pdf6th.Lecture.Personal.Assignment.Guideline.pdf
6th.Lecture.Personal.Assignment.Guideline.pdf
 
디자인 시스템 디자인하기
디자인 시스템 디자인하기디자인 시스템 디자인하기
디자인 시스템 디자인하기
 
파워포인트 애니메이션
파워포인트 애니메이션파워포인트 애니메이션
파워포인트 애니메이션
 
Essencia ui ux specification 2014 10 15
Essencia ui ux specification 2014 10 15Essencia ui ux specification 2014 10 15
Essencia ui ux specification 2014 10 15
 
7th.Lecture.UI.Design.and.Middle.Team.Assignment.Guideline.pdf
7th.Lecture.UI.Design.and.Middle.Team.Assignment.Guideline.pdf7th.Lecture.UI.Design.and.Middle.Team.Assignment.Guideline.pdf
7th.Lecture.UI.Design.and.Middle.Team.Assignment.Guideline.pdf
 
5th.Lecture.What.is.Information.Architecture.pdf
5th.Lecture.What.is.Information.Architecture.pdf5th.Lecture.What.is.Information.Architecture.pdf
5th.Lecture.What.is.Information.Architecture.pdf
 
Design blueb manual_1.0
Design blueb manual_1.0Design blueb manual_1.0
Design blueb manual_1.0
 
수업
수업수업
수업
 
스일01 엑셀사용법이해하기
스일01 엑셀사용법이해하기스일01 엑셀사용법이해하기
스일01 엑셀사용법이해하기
 
산학 제출 PPT
산학 제출 PPT산학 제출 PPT
산학 제출 PPT
 
두솥도시락
두솥도시락두솥도시락
두솥도시락
 
5th.Lecture.What.is.Information.Architecture.pdf
5th.Lecture.What.is.Information.Architecture.pdf5th.Lecture.What.is.Information.Architecture.pdf
5th.Lecture.What.is.Information.Architecture.pdf
 
Face recognition
Face recognitionFace recognition
Face recognition
 
OpenJigWare(V02.00.04)
OpenJigWare(V02.00.04)OpenJigWare(V02.00.04)
OpenJigWare(V02.00.04)
 
애자일 테스트 프랙티스와 사례들 (부제: 협업의 힘)
애자일 테스트 프랙티스와 사례들 (부제: 협업의 힘)애자일 테스트 프랙티스와 사례들 (부제: 협업의 힘)
애자일 테스트 프랙티스와 사례들 (부제: 협업의 힘)
 
Sw개발 hw제작설계서 임베부스러기
Sw개발 hw제작설계서 임베부스러기Sw개발 hw제작설계서 임베부스러기
Sw개발 hw제작설계서 임베부스러기
 
6th.lecture.presentation.guideline 20191009
6th.lecture.presentation.guideline 201910096th.lecture.presentation.guideline 20191009
6th.lecture.presentation.guideline 20191009
 
컴포넌트 관점에서 개발하기
컴포넌트 관점에서 개발하기컴포넌트 관점에서 개발하기
컴포넌트 관점에서 개발하기
 

Plus de Jeongeun Kwon

Plus de Jeongeun Kwon (20)

DesignThinking_10th.Lecture.Step.1.Empathize.pdf 자료
DesignThinking_10th.Lecture.Step.1.Empathize.pdf 자료DesignThinking_10th.Lecture.Step.1.Empathize.pdf 자료
DesignThinking_10th.Lecture.Step.1.Empathize.pdf 자료
 
DesignThinking_9th.Lecture.Understanding.Design.Thinking.pdf 자료
DesignThinking_9th.Lecture.Understanding.Design.Thinking.pdf 자료DesignThinking_9th.Lecture.Understanding.Design.Thinking.pdf 자료
DesignThinking_9th.Lecture.Understanding.Design.Thinking.pdf 자료
 
DT_7th.Lecture.Design.for.5000.KWN.Workshop.pdf
DT_7th.Lecture.Design.for.5000.KWN.Workshop.pdfDT_7th.Lecture.Design.for.5000.KWN.Workshop.pdf
DT_7th.Lecture.Design.for.5000.KWN.Workshop.pdf
 
DesignThinking_6th.Lecture.Shape.Mix.Workshop.Part.2.pdf 자료
DesignThinking_6th.Lecture.Shape.Mix.Workshop.Part.2.pdf 자료DesignThinking_6th.Lecture.Shape.Mix.Workshop.Part.2.pdf 자료
DesignThinking_6th.Lecture.Shape.Mix.Workshop.Part.2.pdf 자료
 
DesignThinking_5th.Lecture.Shape.Mix.Workshop.Part.1.pdf 자료
DesignThinking_5th.Lecture.Shape.Mix.Workshop.Part.1.pdf 자료DesignThinking_5th.Lecture.Shape.Mix.Workshop.Part.1.pdf 자료
DesignThinking_5th.Lecture.Shape.Mix.Workshop.Part.1.pdf 자료
 
DesignThinking_4th.Lecture.Scale.Mix.Workshop.pdf 자료
DesignThinking_4th.Lecture.Scale.Mix.Workshop.pdf 자료DesignThinking_4th.Lecture.Scale.Mix.Workshop.pdf 자료
DesignThinking_4th.Lecture.Scale.Mix.Workshop.pdf 자료
 
DesignThinking_3rd.Lecture.Context.Mix.Workshop.pdf 자료
DesignThinking_3rd.Lecture.Context.Mix.Workshop.pdf 자료DesignThinking_3rd.Lecture.Context.Mix.Workshop.pdf 자료
DesignThinking_3rd.Lecture.Context.Mix.Workshop.pdf 자료
 
DesignThinking_2nd.Lecture.Warm-Up.pdf 자료
DesignThinking_2nd.Lecture.Warm-Up.pdf 자료DesignThinking_2nd.Lecture.Warm-Up.pdf 자료
DesignThinking_2nd.Lecture.Warm-Up.pdf 자료
 
DesignThinking_1st.Lecture.Introduction.pdf 자료
DesignThinking_1st.Lecture.Introduction.pdf 자료DesignThinking_1st.Lecture.Introduction.pdf 자료
DesignThinking_1st.Lecture.Introduction.pdf 자료
 
14th.Lecture.Final.Assignment.Guideline.pdf
14th.Lecture.Final.Assignment.Guideline.pdf14th.Lecture.Final.Assignment.Guideline.pdf
14th.Lecture.Final.Assignment.Guideline.pdf
 
13th.Lecture.Prototyping.and.Usability.Test.pdf
13th.Lecture.Prototyping.and.Usability.Test.pdf13th.Lecture.Prototyping.and.Usability.Test.pdf
13th.Lecture.Prototyping.and.Usability.Test.pdf
 
4th.Lecture.Service.Design.Process.pdf
4th.Lecture.Service.Design.Process.pdf4th.Lecture.Service.Design.Process.pdf
4th.Lecture.Service.Design.Process.pdf
 
3rd.Lecture.What.is.Interaction.pdf
3rd.Lecture.What.is.Interaction.pdf3rd.Lecture.What.is.Interaction.pdf
3rd.Lecture.What.is.Interaction.pdf
 
2nd.Lecture.What.is.Interface.pdf
2nd.Lecture.What.is.Interface.pdf2nd.Lecture.What.is.Interface.pdf
2nd.Lecture.What.is.Interface.pdf
 
1st.Lecture.Introduction.pdf
1st.Lecture.Introduction.pdf1st.Lecture.Introduction.pdf
1st.Lecture.Introduction.pdf
 
14th.Lecture.Final.PT.Guideline.pdf
14th.Lecture.Final.PT.Guideline.pdf14th.Lecture.Final.PT.Guideline.pdf
14th.Lecture.Final.PT.Guideline.pdf
 
12th.Lecture.Step3.AnalysisUX.Modeling_2_JourneyMap.pdf
12th.Lecture.Step3.AnalysisUX.Modeling_2_JourneyMap.pdf12th.Lecture.Step3.AnalysisUX.Modeling_2_JourneyMap.pdf
12th.Lecture.Step3.AnalysisUX.Modeling_2_JourneyMap.pdf
 
11th.Lecture.Step3.AnalysisUX.Modeling_1_Persona.pdf
11th.Lecture.Step3.AnalysisUX.Modeling_1_Persona.pdf11th.Lecture.Step3.AnalysisUX.Modeling_1_Persona.pdf
11th.Lecture.Step3.AnalysisUX.Modeling_1_Persona.pdf
 
8th.Lecture.Step3.Analysis.pdf
8th.Lecture.Step3.Analysis.pdf8th.Lecture.Step3.Analysis.pdf
8th.Lecture.Step3.Analysis.pdf
 
7th.Lecture.Step2.Observation.pdf
7th.Lecture.Step2.Observation.pdf7th.Lecture.Step2.Observation.pdf
7th.Lecture.Step2.Observation.pdf
 

8th.lecture.personal.assignment.guideline

  • 1. KAYWON UNIVERSITY OF ART & DESIGN INDUSTRIAL DESIGN LAB USER EXPERIENCE DESIGN 사용자경험디자인2 kwonjeongeun@naver.com 8강 개인 과제 가이드라인 / 101
  • 2. 도록 & 개인 과제 준수사항 팀 과제 진행 Adobe XD 레슨 / 102
  • 3. 메뉴 트리기능 리스트주요 특징서비스 컨셉 UI 디자인 정보 설계 단계서비스 정의 단계 / 103
  • 5. 홈 핫 트렌드 베스트 아이템 실시간 이슈 My 환경설정 잇걸 지난 호 보기 패션 지난 아이템 스포티걸 구매내역 로그인 설정 내가 본 상품 뷰티 과거 베스트 빈티지걸 장바구니 이용내역관리 탭 메뉴 헤어 MD 추천 럭셔리걸 찜리스트 어플정보 도시 브랜드별 추천 러블리걸 위시리스트 스타 내가 본 상품 개인정보관리 기능 리스트 메뉴 트리 스케치(IA 4가지 구성 요소 포함) 팀의 정보 설계(IA)는? / 105
  • 6. 1. 모바일 기능 리스트를 Excel 템플릿에 맞춰 상세하게 리스트업한다. 2. 세부 기능을 먼저 리스트업 한 후, 각 항목의 상세 기능을 하나하나 작성한다. 3. 세부 - 상세 기능을 기능 단위(큰 단위)로 묶는다. 4. 전체 항목을 리스트를 중요도 순으로 정렬한다. 5. 기능 리스트가 완성되면 메뉴 트리를 설계한다. 기능 리스트 & 메뉴트리 준수사항 / 106
  • 7. 1. 메뉴 트리를 설계한다. 2. 화면을 Sketch 한다. UI Ideation Sheet.pptx 활용해서 홈 화면 및 주요 화면을 스케치 한다. 주요 테스크를 보여 줄 주요 화면들을 Sketch 한다. 3. 1인 1 Sketch 세트를 원칙으로 한다. 예 : 팀 구성원 2명이면 2개 Sketch 세트 4. Sketch 완료 후, 팀원 피드백을 받는다. 5. 하나의 파일의 업로드(pdf) 후, 저와 팀 미팅을 하면서 최종안을 다듬는다. 스케치 준수사항 / 107
  • 8. 와이어프레임, 프로토타이핑 제작 준수사항 Point 1. 팀 스케치 최종 안을 개인이 XD로 제작해서 제출한다. (개인 과제) Point 2. Gray tone의 Wireframe. 단, 아이콘, 이미지 적용 허용 ✦ No color Point 3. 왼쪽 패널 : 색상, 문자 스타일, 구성 요소를 정리할 것. ✦ 최소한으로 운영한다. 패널 내 요소 위 > 마우스 우 클릭 > ‘캔버스에서 강조 표시’ 메뉴 이용 Point 4. Menu tree 기준으로 아트보드 명칭, 구조 정렬할 것. 다음 화면 참조 Point 5. 프로토타이핑 - 트랜지션 설정할 것. ‘프로토타이핑’ 탭 상태에서 [▶] 버튼 or Ctrl + A 이용 / 108
  • 9. / 109 와이어프레임, 프로토타이핑 제작 준수사항 아트보드명 = Menu Tree 기준. 메뉴명으로 작성 / 109
  • 10. 끝. 다음 주 과제 : 팀 스케치 컨펌 후, XD 와이어프레임, 프로토타 이핑 제작 kwonjeongeun@naver.com / 1010