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

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

2. Adobe XD 레슨
UI 디자인 컨셉 준수사항
팀 과제 진행
/ 29
2

3. Why, XD? 테스트, 협업, 공유
[테스트] XD 모바일 앱에서 확인
1.파일을 클라우드에 저장
2.XD모바일 앱에서 파일 확인
/ 29
3

4. Why, XD? 테스트, 협업, 공유
[협업, 공유] 웹 링크로 공유
1.상단 : ‘공유’ 탭 선택
2.오른쪽 패널 : 링크 설정
✓보기 설정 : ‘디자인’ or ‘개발’ 선택
✓체크 : 다운로드 가능한 에셋 ‘체크’
✓링크 액세스 : ‘누구나’ or ‘초대된 사용자만’
3.[링크 만들기] 버튼 선택
4.링크 선택 후, 웹에서 확인
/ 29
4

5. Why, XD? 테스트, 협업, 공유
[공유] 모든 아트보드의 이미지 보내기
1.상단 : ‘디자인’ 탭 선택
2.메뉴 : 파일 > 내보내기 > 모든 아트보드… 선택
3.설정
✓파일 위치 설정 완료
✓내보내기 크기 ‘2x’ 선택 완료
4.[모든 아트보드 내보내기] 버튼 선택
5.이미지 확인
/ 29
5

6. Why, XD? 테스트, 협업, 공유
[공유] 선택한 아트보드의 이미지 보내기
1.상단 : ‘디자인’ 탭 선택
2.특정 아트보드 선택 후
3.메뉴 : 파일 > 내보내기 > 선택됨… 선택
4.설정
✓파일 위치 설정 완료
✓내보내기 크기 ‘2x’ 선택 완료
5.[내보내기] 버튼 선택
6.이미지 확인
/ 29
6

7. Why, XD? 테스트, 협업, 공유
[공유] 영상 만들기
1.상단 : [
►
(재생)] 버튼 선택
2.미리보기 창 : [⦿ (녹화)] 버튼 선택 = 녹화 실행
3.프로토타입 테스트
4.[⦿ (녹화)] 버튼 다시 선택 = 녹화 종료
5.파일명, 파일 위치 설정 완료
6.영상 파일 확인
/ 29
7

8. Adobe XD 블로그 확인
Adobe 공식 블로그(미국)
- XD 최신 기능만 보기(영문)
- XD 최신 기능만 보기(국문)
Adobe XD FB 계정 확인
Adobe XD 공식 계정(미국) : XD 소식
- 위 블로그 업데이트 소식을 FB에 중복 포스팅
UI/UX 그룹 확인
UI/UX 그룹(외국)
- 프로토타입 툴로 만든 다양한 UI/UX 디자인 구경하기
Adobe XD 소식 받기
/ 29
8

9. XD 카피 과제 코멘트
UI 디자인 컨셉 준수사항
팀 과제 진행
/ 29
9

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

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

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

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

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

15. 예 : UI 디자인 컨셉
/ 29
15 출처 : Plus X 웹사이트, Plus X Behance
앱 아이콘, HOW?
스플래시 화면 내 로고 사용, HOW?
스플래시 화면 레이아웃 차이, HOW?

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

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

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

19. 좋은 디자인을 보고 분석하기
/ 29
19 출처 : Interfacely_, huzeyfedesign

20. 출처 : Interfacely_
/ 29
20
Q. 주제 색상은?

21. / 29
21
Q. 주제 색상은?
출처 : Interfacely_

22. / 29
22
Q. 주제 색상은?
출처 : Interfacely_

23. / 29
23
Q. 주제 색상은?
출처 : Interfacely_

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

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

26. UI 디자인 컨셉 제출 준수사항
/ 29
26
로고 형태, 앱 아이콘, 주요 화면 반드시 포함
1개 시안당 max 3장으로 작성해서 PPT 제출
1.룩앤필 참고 서비스 N가지 리서치 1장 반드시 포함.
2.팀의 로고 형태, 컬러, 서체 도출 과정, 그리고 앱 아이콘, 주요 화면들 반드시 포함.
3.파일명 준수 : [ B_1] 서비스명_5_UI디자인_컨셉_20231031.ppt
Why 왜 이 서체인지 설명 작성 필수
Why 왜 이 컬러인지 설명 작성 필수
출처 : Interfacely_, huzeyfedesign

27. 이후 일정
/ 29
27
6강 10/17 화 - 작업량 가장 많음 -> 완료
개인 스케치 제출 = 팀 스케치 의견 전달, (빠르게) 개인 XD 과제 시작
7강 10/24 화 - 작업량 가장 많음 -> 오늘
팀 스케치 제출, 개인 XD 과제 제출 = 팀 XD 파일 선정 + 수업 : 팀 UI 디자인 이론 진행
8강 10/31 화 - 전력 질주 - 중간 고사
팀 UI 디자인 컨셉 PPT 제출 = 수업 : 팀 미팅 + 팀 UI 디자인 작업 보완
9강 11/07 화 - 전력 질주 - 11/10 금 졸업심사
팀 UI 디자인 컨셉 PPT 제출 = 수업 : 팀 미팅 + 팀 UI 디자인 작업 보완
10강 11/14 화 - 전력 질주
수업 : 전시에 사용할 거치대와 시연 모바일 설치 + 동작 확인 + 작업 보완
11강 11/21 화 - 전력 질주 - 11/24 금 ~ 11/26 일 졸업전시
수업 : 전시에 사용할 거치대와 시연 모바일 설치 + 동작 확인 + 작업 보완

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

29. kwonjeongeun@naver.com
끝.
다음 주 과제 :
UI 디자인 컨셉 PPT 제출(10/31, 화 수업 전까지)
Adobe XD
9
강 복습
/ 29
29