7강 7th.Lecture.UI.Design UI 디자인 컨셉 시안을 잡는다.

1. KAYWON UNIVERSITY OF ART & DESIGN
INDUSTRIAL DESIGN LAB
USER EXPERIENCE
DESIGN
사용자경험디자인 2
kwonjeongeun@naver.com
/ 28
1
7강 UI 디자인 제작
중간 팀 과제 제출 안내

2. XD 카피 과제 코멘트
UI 디자인 컨셉 준수사항
도록 Draft 제작 준수사항
팀 과제 진행
/ 28
2

3. Adobe XD 카피 과제 제출 결과
C반 카피 과제 결과 : 16/36
강민주, 나복원, 배도영, 안종규, 차혜명, 최재원
권정우, 김수민, 김시안, 노재훈, 신성준, 오윤서, 임성빈, 한병준
윤효진, 이채율
B반 카피 과제 결과 : 11/36
김소연, 민사랑, 최환종
고은성, 박민석, 이종인
고예인, 노서현, 신영환, 윤이나, 한지희
/ 28
3

4. XD 카피 과제 코멘트
UI 디자인 컨셉 준수사항
도록 Draft 제작 준수사항
팀 과제 진행
/ 28
4

5. 서비스 디자인
콘셉트 보드
서비스 시나리오
서비스 청사진
UX 디자인
정보 구조
테스크 흐름
세부 인터랙션
UI 디자인
비주얼 콘셉트 보드
화면 디자인
서비스 디자인 프로세스
/ 28
5
디자인 가이드
콘셉트
서비스 디자인
전달
서비스 개발
목표
프로젝트 범위
가설
고객 여정 지도
문제 취약점

6. 서비스 정의 단계 정보 설계 단계
메뉴 트리
기능 리스트
주요 특징
서비스 컨셉
UX 디자인
/ 28
6 ★ : 팀 과제 산출물

7. 정보 설계 단계
프로토타입
와이어프레임
스케치
플로우 차트
No color
UX 디자인
/ 28
7 ★ : 팀 과제 산출물

8. UI 디자인 진행 계획
/ 28
8
1. 제가 개인 과제 중 1개 XD 파일을 팀 파일로 정합니다.
주요 화면(Artboard)을 표시해서 공유합니다.
2. 팀은 UI 디자인 컨셉 시안을 준비합니다.
✓필수 요소 : 로고, 컬러, 서체
✓적용 대상 : 앱 아이콘, 주요 화면*

9. 스플래시 화면 첫 화면 그 외 주요 화면 N개
/ 28
9
주요 화면*의 범위란?

10. UI 디자인 컨셉 : 예시
/ 28
10 출처 : Plus X 웹사이트, Plus X Behance
앱 아이콘
로고
스플래시 화면 & 레이아웃

11. UI 디자인 컨셉 : 예시
/ 28
11 출처 : Plus X 웹사이트, Plus X Behance

12. UI 디자인 컨셉 준수사항
Why가 중요하다.
왜 이 형태의 로고인지, 이 컬러인지, 이 서체인지 설명할 수 있게 준비.
이런 예제 많이 찾아볼 것.
출처 : Interfacely, huzeyfedesign
/ 28
12
Why 왜 이 서체인지 설명 작성 필수
Why 왜 이 컬러인지 설명 작성 필수

13. / 28
13
색상이 조화롭게 보일 때 비율
주제 색상(5%) - 보조 색상(25%) - 기본 색상(70%)
- 주제 색상 : 시선을 사로잡는 색상
- 보조 색상 : 기본 색상을 보조하는 색상
- 기본 색상 : 기본 바탕이 되는 색상
주제 색상으로 도배하지 말 것!
색상 정의는 3~4개 이하로.
출처 : 이랑주 <좋아 보이는 것들의 비밀>
컬러 준수사항

14. 좋은 디자인을 보고 분석하기
출처 : Interfacely, huzeyfedesign
/ 28
14

15. 출처 : Interfacely
/ 28
15
Q. 주제 색상은?

16. 출처 : Interfacely
/ 28
16
Q. 주제 색상은?

17. 출처 : Interfacely
/ 28
17
Q. 주제 색상은?

18. 출처 : Interfacely
/ 28
18
Q. 주제 색상은?

19. 서체 준수사항
/ 28
19
독특한 서체의 사용이
서비스의 감성과 개성을 나타내는 것은 아니다.
아마추어의 결과물이 될 수 있다. 주의.
디자이너의 서체 사용은
오랜 시간 증명된 훌륭한 서체를 선택하는 것이다.

20. 서체 준수사항
나머지 화면 서체는
가독성이 중요.
가독성 이슈로 팀에게 추천 :
Spoqa Han Sans
다운로드
/ 28
20
팀이 지정한 서체는
2곳에서 사용한다.
1. 로고
2. APP NAME
스플래시 화면 첫 화면 그 외 주요 화면 N개

21. UI 디자인 컨셉 제출 준수사항
출처 : Interfacely, huzeyfedesign
/ 28
21
로고 형태, 앱 아이콘, 주요 화면 반드시 포함
1.1개 안당 max 3장로 작성해서 PPT 업로드 (피드백용)
2.PPT 각 장을 스크린샷으로 한 번 더 업로드 (미리보기용)
3.룩앤필 참고 서비스 N가지 리서치 1장 반드시 포함.
4.팀의 로고 형태, 컬러, 서체 도출 과정, 앱 아이콘, 주요 화면들 반드시 포함.
5.파일명 준수 : [C_1] 코넥션_6_UI디자인컨셉_20221104.ppt(png 동일)
Why 왜 이 서체인지 설명 작성 필수
Why 왜 이 컬러인지 설명 작성 필수

22. XD 카피 과제 코멘트
UI 디자인 컨셉 준수사항
도록 Draft 제작 준수사항
팀 과제 진행
/ 28
22

23. 1.[Template] UXD_2022_20221020.ai 파일에서 시작합
니다.
도록 Draft 제작 준수사항
/ 22
23
도록은
말려
들어가는
영역
도록은
말려
들어가는
영역
컨셉에 따라 전체 영역을 사용해도 무방

24. 6강 10/21 금 -> 완료
팀 스케치 의견 전달
7강 10/28 금 -> 오늘
팀 스케치 완료, 개인 제작 과제 완료 + 수업(금) : 팀 UI 디자인 작업 진행
8강 11/04 금 - 전력 질주 - 작업량 가장 많음
UI 디자인 컨셉과 도록 Draft(UI 디자인 화면 포함) + 수업(금) : 도록 작업 진행
9강 11/11 금 - 전력 질주 - 반드시 일요일까지 완료가 목표
도록 작업 완료(토, 일, 월) + 도록 인쇄소 전달(금) + 수업(금) : 팀 전시 버전 작업 진행
10강 11/18 금 - 전력 질주 - 반드시 일요일까지 완료가 목표
팀 전시 버전 작업 완료(토, 일, 월) + 전시 버전 인쇄소 전달(금) + 수업(금) : 전시장 설치 작업 진행
이후 일정
/ 28
24

25. 도록 Draft 제작 준수사항
/ 28
25
오늘 10/28(금), 14일 남았습니다.
지금부터 분업과 팀워크가 중요합니다.
1.11/4(금) 수업 전까지 도록 Draft 제작합니다.
모든 팀, 11/4 도록 Draft 수준을 넘어 있어야 합니다.
What if not
…
2.슬랙 팀 방에 스크린샷으로 업로드.
Ai, pdf 업로드 금지
3.파일명 준수.
[C_1] 코넥션_7_중간공유_20221104.png

26. 도록 ‘모바일 서비스 안내’ 면 편집 디자인 참고
/ 28
26 출처 : Plus X 웹사이트, Plus X Behance

27. 끝.
다음 주 과제 : 중간 팀 과제 제출 완료.
-UI 디자인 컨셉 PPT & 스크린샷 업로드
-도록 Draft 스크린샷 업로드
/ 27
27
kwonjeongeun@naver.com