InterfaceDesign_13th.lecture.UI.Design.pdf 자료
0 likes149 views
13강 ID_13th.lecture.UI.Design UI 디자인 개발
InterfaceDesign_13th.lecture.UI.Design.pdf 자료
- 1. KAYWON UNIVERSITY OF ART DESIGN SMART PRODUCT DESIGN LAB INTERFACE DESIGN 인터페이스 디자인 kwonjeongeun naver.com 13강 UI 디자인 시각 컨셉  / 42 1
- 2. 과제 Critique 과제 안내 실습 / 42 2
- 3. 정보 설계 단계 UX 디자인 / 42 3 메뉴 트리 기능 리스트 주요 특징 서비스 컨셉 11/19 화 발표 서비스 정의 단계 둘 사이 할 일 둘 사이 할 일
- 4. 정보 설계 단계 UX 디자인 / 42 4 프로토타입 와이어프레임 손 스케치 테스크 흐름 No color 11/26 화 발표 12/03 화 발표
- 5. 시각 개발 단계 UI 디자인 / 42 5 프로토타입 모든 화면 디자 주 화면 디자인 시각 컨셉 12/10 화 미팅 12/17 화 발표
- 6. UI 디자인 컨셉 진행 계획 / 42 6 1 제가 개인 XD 파일 중 1개 파일을 팀 파일로 선택합니다. 제가 주요 화면*을 해당 Artboard에 표시해서 공유합니다. 2 팀은 UI 디자인 컨셉 시안 뜻? 을 2개 이상 준비합니다. 컨셉 요소 : 로고 시스템, 색상 시스템, 서체 시스템 컨셉 적용 범위 : 앱 이름, 앱 아이콘, 주요 화면*
- 7. 스플래시 화면 첫 화면 그 외 주요 화면 N개 / 42 7 주요 화면*의 범위란?
- 8. 예 : UI 디자인 컨셉 / 42 8 출처 : Plus X 웹사이트, Plus X Behance Q 앱 아이콘, HOW? Q 스플래시 화면 내 로고 사용, HOW? Q 스플래시 화면 레이아웃 차이, HOW?
- 9. 예 : UI 디자인 컨셉 / 42 9 출처 : Plus X 웹사이트, Plus X Behance
- 10. UI 디자인 컨셉 준수사항 Why가 중요하다. 왜 이 형태의 로고인지, 이 색상인지, 이 서체인지 설명할 수 있게 준비. 이런 예제 많이 찾아볼 것. 출처 : Interfacely_, huzeyfedesign / 42 10 Why 왜? 이 서체인지 설명 작성 필수 Why 왜? 이 색상인지 설명 작성 필수
- 11. 색상이 조화롭게 보일 때 비율 주제 색상 5 ・보조 색상 25 ・기본 색상 70 - 주제 색상 : 시선을 사로잡는 색상 - 보조 색상 : 기본 색상을 보조하는 색상 - 기본 색상 : 기본 바탕이 되는 색상 주의 주제 색상으로 도배하지 말 것! 색상 정의는 3 ~ 4개 이하로. / 42 11 출처 : 이랑주 <좋아 보이는 것들의 비밀> 색상 준수사항
- 12. 좋은 디자인을 보고 분석하기 / 42 12 출처 : Interfacely_, huzeyfedesign
- 13. 출처 : Interfacely_ / 42 13 Q. 주제 색상은?
- 14. / 42 14 Q. 주제 색상은? 출처 : Interfacely_
- 15. / 42 15 Q. 주제 색상은? 출처 : Interfacely_
- 16. / 42 16 Q. 주제 색상은? 출처 : Interfacely_
- 17. 서체 준수사항 / 42 17 주의 독특한 서체의 사용이 서비스의 감성과 개성을 나타내는 것은 아니다. 아마추어의 결과물이 될 수 있다. 디자이너의 서체 사용은 오랜 시간 증명된 훌륭한 서체를 선택하는 것이다.
- 18. 서체 준수사항 / 42 18 팀이 지정한 특별 서체는 3곳에 허용한다. 1. 앱 아이콘 2. 스플래시 화면 내 로고 3. APP NAME 앱 아이콘 스플래시 화면 첫 화면 그 외 주요 화면 N개 나머지 화면 서체는 가독성이 중요. 가독성 이슈로 팀에게 추천 : 네이버 오픈소스 서체 Spoqa Han Sans Pretendard
- 19. UI 디자인 컨셉 제출 준수사항 / 42 19 로고 형태, 앱 이름, 앱 아이콘, 주요 화면 반드시 포함 1개 시안당 max 3장으로 작성해서 13주 차 과제 제출 PPT 파일 장표에 포함시킨다. 1 룩앤필 무드보드 내용 반드시 포함. 2 팀의 로고 형태, 색상, 서체 도출 과정, 앱 이름, 앱 아이콘, 주요 화면들 반드시 포함. 3 파일명 준수 : 13주차과제 B 2 UI디자인 컨셉.pptx/xd Why 왜? 이 서체인지 설명 작성 필수 Why 왜? 이 색상인지 설명 작성 필수 출처 : Interfacely_, huzeyfedesign
- 20. 예시 : 선배 사례 / 42 20 ?
- 21. / 42 21 기말 과제 일정 10강 11/12 화 : 기말 과제 소개 11강 11/19 화 : < 발표 > 조사 ~ 메뉴트리 12강 11/26 화 : < 발표 > 손 스케치 13강 12/03 화* : 발표 > 와이어프레임 프로토타입 제작 14강 12/10 화 : < 미팅 > 디자인 컨셉 및 주 화면 디자인 15강 12/17 화 : < 발표 > 디자인 컨셉 및 주 화면 디자인 보완
- 22. / 42 22 팀 미팅 수업 : 지각/결석, 엄중하게 적용합니다 14강 12/10 화 : 디자인 컨셉 및 주 화면 디자인 B반 : 11시 ~ 14시 3 세션 - 11시 ~ 12시 : B 3 11 : 00 , B 5 11 : 30 - 12시 ~ 13시 : B 6 12 : 00 , B 1 12 : 30 - 13시 ~ 14시 : B 4 13 : 00 , B 2 14 : 00
- 23. / 42 23 팀 미팅 수업 : 지각/결석, 엄중하게 적용합니다 14강 12/10 화 : 디자인 컨셉 및 주 화면 디자인 A반 : 15시 ~ 18시 3 세션 - 15시 ~ 16시 : A 1 15 : 00 , A 2 15 : 30 - 16시 ~ 17시 : A 4 16 : 00 , A 3 16 : 30 - 17시 ~ 18시 : A 5 17 : 00 , A 6 17 : 30
- 24. 12주 차 과제 -팀 스케치 / 42 24
- 25. 주요 화면 첫 화면 / 42 25
- 26. 주요 Task 1. 명칭 작성하기 / 42 26
- 27. 주요 Task 2. 명칭 작성하기 / 42 27
- 28. 주요 Task 3. 명칭 작성하기 / 42 28
- 29. 12주 차 과제 -이몽룡 와이어프레임 & 프로토타입 (팀원 순서는 가나다 순으로 정렬) / 42 29
- 30. 와이어프레임 와이어프레임 스크린샷으로 교체 와이어프레임 스크린샷으로 교체 와이어프레임 스크린샷으로 교체 주요 Task 1 . 명칭 작성하기 / 42 30 1 2 나의 게시물 작성 진입 1 4 나의 게시물, 글 작성 중 1 3 1 나의 게시물, 이미지 작성 중 1 5 나의 게시물, 공유 완료 1 1 홈 출처 : 12주차과제_B_2_와이어프레임_이몽룡.xd 파일명에 웹 링크를 겁니다.
- 31. 와이어프레임 스크린샷으로 교체 와이어프레임 스크린샷으로 교체 / 42 31 3 2 키워드 검색 진입 3 4 키워드 입력 중 3 1 홈 3 3 키워드 입력 대기 3 5 키워드 검색 결과 와이어프레임 와이어프레임 스크린샷으로 교체 주요 Task 2 . 명칭 작성하기 출처 : 12주차과제_B_2_와이어프레임_이몽룡.xd 파일명에 웹 링크를 겁니다.
- 32. / 42 32 2 2 1 나의 게시물에 좋아요 알림 2 2 2 나의 댓글에 좋아요 알림 2 3 1 나의 게시물에 좋아요 보기 2 3 2 나의 댓글에 좋아요 보기 2 1 홈 와이어프레임 스크린샷으로 교체 와이어프레임 스크린샷으로 교체 와이어프레임 스크린샷으로 교체 와이어프레임 스크린샷으로 교체 주요 Task 3 . 명칭 작성하기 출처 : 12주차과제_B_2_와이어프레임_이몽룡.xd 파일명에 웹 링크를 겁니다.
- 33. 12주 차 과제 -홍길동 와이어프레임 & 프로토타입 (팀원 순서는 가나다 순으로 정렬) / 42 33
- 34. 와이어프레임 와이어프레임 스크린샷으로 교체 와이어프레임 스크린샷으로 교체 와이어프레임 스크린샷으로 교체 주요 Task 1 . 명칭 작성하기 / 42 34 1 2 나의 게시물 작성 진입 1 4 나의 게시물, 글 작성 중 1 3 1 나의 게시물, 이미지 작성 중 1 5 나의 게시물, 공유 완료 1 1 홈 출처 : 12주차과제_B_2_와이어프레임_이몽룡.xd 파일명에 웹 링크를 겁니다.
- 35. 와이어프레임 스크린샷으로 교체 와이어프레임 스크린샷으로 교체 / 42 35 3 2 키워드 검색 진입 3 4 키워드 입력 중 3 1 홈 3 3 키워드 입력 대기 3 5 키워드 검색 결과 와이어프레임 와이어프레임 스크린샷으로 교체 주요 Task 2 . 명칭 작성하기 출처 : 12주차과제_B_2_와이어프레임_이몽룡.xd 파일명에 웹 링크를 겁니다.
- 36. / 42 36 2 2 1 나의 게시물에 좋아요 알림 2 2 2 나의 댓글에 좋아요 알림 2 3 1 나의 게시물에 좋아요 보기 2 3 2 나의 댓글에 좋아요 보기 2 1 홈 와이어프레임 스크린샷으로 교체 와이어프레임 스크린샷으로 교체 와이어프레임 스크린샷으로 교체 와이어프레임 스크린샷으로 교체 주요 Task 3 . 명칭 작성하기 출처 : 12주차과제_B_2_와이어프레임_이몽룡.xd 파일명에 웹 링크를 겁니다.
- 37. 13주 차 과제 UI 디자인 컨셉과 주요 화면 디자인 / 42 37
- 38. / 42 38 UI 디자인 컨셉 외 … 출처 : 13주차과제_B_2_UI디자인_컨셉.xd 파일명에 웹 링크를 겁니다. 1 시안 당 max 3장 - 시안 수… - 장표 내 콘텐츠 구성 … - 필수 포함 내용… 2 장표 구성을 팀 자율에 맡깁니다. 3 단, 주요 화면 디자인을 보여주는 장표에서는 출처 링크를 걸어 주세요.
- 39. Q. 질문 사항? 작성하기 / 42 39
- 40. Q. 알게된 점? 작성하기 / 42 40
- 41. / 42 41 13주 차, <과제> 제대로 했는지 기준은? 이해한 만큼 준비해 주세요. 팀 미팅으로 할 이야기가 많을 것 같습니다.
- 42. kwonjeongeun naver.com / 42 42 끝. 다음 주 과제 : - 과제 제출 및 발표 준비