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
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