KAYWON UNIVERSITY OF ART & DESIGN

INDUSTRIAL DESIGN LAB

USER EXPERIENCE

DESIGN
사용자경험디자인2
6강 개인 과제 및 중간 팀 과제 안내
/ 18
1
judy@andsystemlab.com
개인 과제 및 중간 팀 과제 안내


Adobe XD 레슨


Adobe XD
2
시간 과제 진행 - 팀 미팅
/ 18
2
서비스 정의 단계 정보 설계 단계
메뉴 트리
기능 리스트
주요 특징
서비스 컨셉
UX 디자인
/ 18
3 ★ : 팀 과제 산출물
정보 설계 단계
프로토타입
와이어프레임
스케치
플로우 차트
No color
UX 디자인
/ 18
4 ★ : 팀 과제 산출물
홈 핫 트렌드 베스트 아이템 실시간 이슈 마이 메뉴 환경설정
잇걸
지난 호 보기 패션 지난 아이템 스포티걸 구매내역 로그인 설정
내가 본 상품 뷰티 과거 베스트 빈티지걸 장바구니 이용내역관리
탭 메뉴 헤어 MD 추천 럭셔리걸 찜리스트 어플정보
도시 브랜드별 추천 러블리걸 위시리스트
스타 내가 본 상품
개인정보관리
팀의 정보 설계(IA)는?
출처 : 다음 UX랩 <스토리로 이해하는 UX 디자인 프로세스> 中 잇걸 서비스
/ 18
5
기능 리스트
메뉴 트리
✓ 스케치(IA 4가지 구성 요소 포함)
1. 메뉴 트리를 완료한다.
2. 화면을 스케치한다.
[Template] UI Sketch을 프린트해서
서비스의 주요 테스크 그리고 흐름을 보여 줄 주요 화면들을 스케치한다.
주요 테스크가 하나는 아닐 것.
3. 1인 1 스케치 세트를 원칙으로 한다. - 1 세트는 한 번에 나오지 않는다. 개인 최종을 기대
예 : 팀 구성원 2명(팀장 포함)이면 2개 스케치 세트
4. 스케치 완료 후, 팀원 피드백을 받는다. - 완료 아님.
개인 스케치를 보완해서 업로드한다. - 서로 의논하고 각자 개인 스케치 보완 후, 개인 최종 스케치 제출 -> 완료
5. 저와 팀 미팅을 하면서 팀 스케치를 도출한다. -> 오늘 10/8 진행
6. 팀은 2번이 반영된 팀 스케치를 업로드한다. -> 다음 주(10/15) 과제. 제출 : 다음 수업 전까지.
7. 개인 과제(XD로 와이어프레임, 프로토타입 제작)을 시작한다. -> 제출 : 미정(중간 발표 전까지. 2주 남음)
스케치 일정
/ 18
6
와이어프레임, 프로토타입 제작 준수사항
Point 1. 팀 스케치 최종 안을 개인이 XD로 제작해서 제출합니다. (개인 과제)
Point 2. Gray tone의 Wireframe. 단, 아이콘, 이미지 적용 허용. 안 해도 무방.
✦ No color
Point 3. 왼쪽 패널 : 색상, 문자 스타일, 구성 요소를 정리할 것.
✦ 최소한으로 운영한다.
패널 내 요소 위 > 마우스 우 클릭 > ‘캔버스에서 강조 표시’ 메뉴 이용
Point 4. 메뉴 트리 기준으로 아트보드 명칭, 구조 정렬할 것.
✦ 다음 화면 참조
Point 5. 프로토타입 - 인터랙션 설정할 것.
‘프로토타입’ 탭 상태에서 Ctrl + A & [▶] 확인 예정
Point 6. 파일명 준수.
✦ 다음 화면 참조
/ 18
7
/ 18
8
아트보드명 : 메뉴 트리 기준. 메뉴명으로 작성
/ 18
8
와이어프레임, 프로토타입 제작 준수사항
파일명 : [반_팀번호] 이름_제출날짜 [B_1] 권정은_20211022
중간 팀 과제 발표 준수사항
/ 18
9
2학기 - 모바일 서비스
1학기 - 인포그라픽
1. [Template] Final_UXD.ai 파일에서 시작합니다.
인포그라픽, 모바일 서비스 제작 > 제출, 발표, (팀원 중 1개) XD 파일 시연
2. 왼쪽 면 - 인포그라픽 :
✦1학기 리서치 내용 한 페이지로 정리 -> 없는 팀 있음. 지금부터 시작.
✦2학기 모바일 서비스 내용과 연결성이 핵심
“흰 도화지 -> 정보(텍스트, 그래픽, 숫자, 그래프, …)를 담는다”
이해, 관찰, 분석, 발상 단계 :
“이런 배경에서 시작 ~ 이런 내용을 확인할 수 있었고
이런 서비스를 제안한다”
✦팀 컨셉 중요. 시각적 밀도와 완성도를 중요하게 봅니다.
중간 팀 과제 발표 준수사항
/ 18
10
3. 오른쪽 면 - 모바일 서비스 :
서비스 안내 : 서비스명 설명, why, what, 특징, 모바일 화면
(단, Gray Tone - Wireframes)으로 구성
✦카테고리를 순차적으로 전달하는 일이 아닙니다.
✦보는 이에게 서비스를 잘 전달하는 게 목적입니다.
4. 2주 전, 팀 과제 발표 준비를 시작할 때입니다.
중간 팀 과제 발표 준수사항
/ 18
11
개인 과제 및 중간 팀 과제 안내


Adobe XD 레슨


Adobe XD
2
시간 과제 진행 - 팀 미팅
/ 18
12
Adobe XD 레슨 5강
레슨 5강 > 2시간 과제 진행 > 과제 공유
/ 18
13
개인 과제 및 중간 팀 과제 안내


Adobe XD 레슨


Adobe XD
2
시간 과제 진행 - 팀 미팅
/ 18
14
Adobe XD
2
시간 과제
Q. 툴 실력 & 디자인 실력을 단기간 향상시킬 방법?
좋은 디자인을 따라서 만들어 보는 훈련
/ 18
15
Adobe XD
2
시간 과제
1. 자료 다운로드
2.만들 내용 확인
3.볼 줄 아는 눈 중요. 디테일을 읽는 눈. 디자인 최대한 유사하게.
폰트 조합, 컬러 조합, 라인 처리, 그림자 처리, 흐림 처리, …
4. 시작 전 필요한 Tip
- 폰트 : 최대한 유사한 폰트 찾기. 애플의 경우, SF 계열. 다운로드
- 아트보드 > 레이어 확인 기능
- 컬러 스포이드 기능
5. 오늘 목표 : 2개 카드까지. 메뉴 영역은 아이콘 제외.
다음 주 수업 전까지: 아이콘 ai 따기 -> 아이콘 XD 파일에 적용하기.
다음 주 수업 목표 : 카드 숫자 N ~ 이미지 적용까지 완료.
/ 18
16
Adobe XD
2
시간 과제
B반 2시간 과제 공유 : 정성훈, 정광호
C반 2시간 과제 공유 : 이기연, 김정현, 이설, 하승철
/ 18
17
끝.
/ 18
18
judy@andsystemlab.com
다음 주 과제 : 팀 스케치 업로드. 개인 과제 시작.


XD 레슨 5강 복습 + XD 카피 과제.

6th.lecture.personal.assignment.guideline

  • 1.
    KAYWON UNIVERSITY OFART & DESIGN INDUSTRIAL DESIGN LAB USER EXPERIENCE DESIGN 사용자경험디자인2 6강 개인 과제 및 중간 팀 과제 안내 / 18 1 judy@andsystemlab.com
  • 2.
    개인 과제 및중간 팀 과제 안내 Adobe XD 레슨 Adobe XD 2 시간 과제 진행 - 팀 미팅 / 18 2
  • 3.
    서비스 정의 단계정보 설계 단계 메뉴 트리 기능 리스트 주요 특징 서비스 컨셉 UX 디자인 / 18 3 ★ : 팀 과제 산출물
  • 4.
    정보 설계 단계 프로토타입 와이어프레임 스케치 플로우차트 No color UX 디자인 / 18 4 ★ : 팀 과제 산출물
  • 5.
    홈 핫 트렌드베스트 아이템 실시간 이슈 마이 메뉴 환경설정 잇걸 지난 호 보기 패션 지난 아이템 스포티걸 구매내역 로그인 설정 내가 본 상품 뷰티 과거 베스트 빈티지걸 장바구니 이용내역관리 탭 메뉴 헤어 MD 추천 럭셔리걸 찜리스트 어플정보 도시 브랜드별 추천 러블리걸 위시리스트 스타 내가 본 상품 개인정보관리 팀의 정보 설계(IA)는? 출처 : 다음 UX랩 <스토리로 이해하는 UX 디자인 프로세스> 中 잇걸 서비스 / 18 5 기능 리스트 메뉴 트리 ✓ 스케치(IA 4가지 구성 요소 포함)
  • 6.
    1. 메뉴 트리를완료한다. 2. 화면을 스케치한다. [Template] UI Sketch을 프린트해서 서비스의 주요 테스크 그리고 흐름을 보여 줄 주요 화면들을 스케치한다. 주요 테스크가 하나는 아닐 것. 3. 1인 1 스케치 세트를 원칙으로 한다. - 1 세트는 한 번에 나오지 않는다. 개인 최종을 기대 예 : 팀 구성원 2명(팀장 포함)이면 2개 스케치 세트 4. 스케치 완료 후, 팀원 피드백을 받는다. - 완료 아님. 개인 스케치를 보완해서 업로드한다. - 서로 의논하고 각자 개인 스케치 보완 후, 개인 최종 스케치 제출 -> 완료 5. 저와 팀 미팅을 하면서 팀 스케치를 도출한다. -> 오늘 10/8 진행 6. 팀은 2번이 반영된 팀 스케치를 업로드한다. -> 다음 주(10/15) 과제. 제출 : 다음 수업 전까지. 7. 개인 과제(XD로 와이어프레임, 프로토타입 제작)을 시작한다. -> 제출 : 미정(중간 발표 전까지. 2주 남음) 스케치 일정 / 18 6
  • 7.
    와이어프레임, 프로토타입 제작준수사항 Point 1. 팀 스케치 최종 안을 개인이 XD로 제작해서 제출합니다. (개인 과제) Point 2. Gray tone의 Wireframe. 단, 아이콘, 이미지 적용 허용. 안 해도 무방. ✦ No color Point 3. 왼쪽 패널 : 색상, 문자 스타일, 구성 요소를 정리할 것. ✦ 최소한으로 운영한다. 패널 내 요소 위 > 마우스 우 클릭 > ‘캔버스에서 강조 표시’ 메뉴 이용 Point 4. 메뉴 트리 기준으로 아트보드 명칭, 구조 정렬할 것. ✦ 다음 화면 참조 Point 5. 프로토타입 - 인터랙션 설정할 것. ‘프로토타입’ 탭 상태에서 Ctrl + A & [▶] 확인 예정 Point 6. 파일명 준수. ✦ 다음 화면 참조 / 18 7
  • 8.
    / 18 8 아트보드명 :메뉴 트리 기준. 메뉴명으로 작성 / 18 8 와이어프레임, 프로토타입 제작 준수사항 파일명 : [반_팀번호] 이름_제출날짜 [B_1] 권정은_20211022
  • 9.
    중간 팀 과제발표 준수사항 / 18 9 2학기 - 모바일 서비스 1학기 - 인포그라픽
  • 10.
    1. [Template] Final_UXD.ai파일에서 시작합니다. 인포그라픽, 모바일 서비스 제작 > 제출, 발표, (팀원 중 1개) XD 파일 시연 2. 왼쪽 면 - 인포그라픽 : ✦1학기 리서치 내용 한 페이지로 정리 -> 없는 팀 있음. 지금부터 시작. ✦2학기 모바일 서비스 내용과 연결성이 핵심 “흰 도화지 -> 정보(텍스트, 그래픽, 숫자, 그래프, …)를 담는다” 이해, 관찰, 분석, 발상 단계 : “이런 배경에서 시작 ~ 이런 내용을 확인할 수 있었고 이런 서비스를 제안한다” ✦팀 컨셉 중요. 시각적 밀도와 완성도를 중요하게 봅니다. 중간 팀 과제 발표 준수사항 / 18 10
  • 11.
    3. 오른쪽 면- 모바일 서비스 : 서비스 안내 : 서비스명 설명, why, what, 특징, 모바일 화면 (단, Gray Tone - Wireframes)으로 구성 ✦카테고리를 순차적으로 전달하는 일이 아닙니다. ✦보는 이에게 서비스를 잘 전달하는 게 목적입니다. 4. 2주 전, 팀 과제 발표 준비를 시작할 때입니다. 중간 팀 과제 발표 준수사항 / 18 11
  • 12.
    개인 과제 및중간 팀 과제 안내 Adobe XD 레슨 Adobe XD 2 시간 과제 진행 - 팀 미팅 / 18 12
  • 13.
    Adobe XD 레슨5강 레슨 5강 > 2시간 과제 진행 > 과제 공유 / 18 13
  • 14.
    개인 과제 및중간 팀 과제 안내 Adobe XD 레슨 Adobe XD 2 시간 과제 진행 - 팀 미팅 / 18 14
  • 15.
    Adobe XD 2 시간 과제 Q.툴 실력 & 디자인 실력을 단기간 향상시킬 방법? 좋은 디자인을 따라서 만들어 보는 훈련 / 18 15
  • 16.
    Adobe XD 2 시간 과제 1.자료 다운로드 2.만들 내용 확인 3.볼 줄 아는 눈 중요. 디테일을 읽는 눈. 디자인 최대한 유사하게. 폰트 조합, 컬러 조합, 라인 처리, 그림자 처리, 흐림 처리, … 4. 시작 전 필요한 Tip - 폰트 : 최대한 유사한 폰트 찾기. 애플의 경우, SF 계열. 다운로드 - 아트보드 > 레이어 확인 기능 - 컬러 스포이드 기능 5. 오늘 목표 : 2개 카드까지. 메뉴 영역은 아이콘 제외. 다음 주 수업 전까지: 아이콘 ai 따기 -> 아이콘 XD 파일에 적용하기. 다음 주 수업 목표 : 카드 숫자 N ~ 이미지 적용까지 완료. / 18 16
  • 17.
    Adobe XD 2 시간 과제 B반2시간 과제 공유 : 정성훈, 정광호 C반 2시간 과제 공유 : 이기연, 김정현, 이설, 하승철 / 18 17
  • 18.
    끝. / 18 18 judy@andsystemlab.com 다음 주과제 : 팀 스케치 업로드. 개인 과제 시작. XD 레슨 5강 복습 + XD 카피 과제.