ĐÊ CƯƠNG CHI TIẾT học PHẦN

BM01.QT02/ĐNT-ĐT TRƯỜNG ĐH NGOẠI NGỮ - TIN HỌC TP.HCM KHOA CÔNG NGHỆ THÔNG TIN CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc lập – Tự – Hạnh Phúc _ ĐỀ CƯƠNG CHI TIẾT HỌC PHẦN Thông tin chung học phần - Tên học phần: Thiết kế giao diện (Designing Interfaces) - Mã số học phần: - Số tín học phần: (3+1) tín - Thuộc chương trình đào tạo bậc, ngành: Đại học, ngành Công nghệ thông tin - Số tiết học phần:  Nghe giảng lý thuyết : 45 tiết  Làm tập lớp : tiết  Thảo luận : tiết  Thực hành, thực tập (ở phòng thực hành, phòng Lab, ): 30 tiết  Hoạt động theo nhóm : tiết  Thực tế: : tiết  Tự học : 120 - Đơn vị phụ trách học phần: Công nghệ phần mềm / Công nghệ thông tin Học phần trước: Mục tiêu học phần: Sau hoàn tất yêu cầu học phần, sinh viên có thể: - Đánh giá nghiên cứu thói quen sử dụng ứng dụng người dùng, thiết lập thao tác, tính vận hành ứng dụng, quy trình phát triển thiết kế UI/UX cho ứng dụng Nắm vững kiến thức thiết kế cho mobile website, bố cục, màu sắc, nguyên tắc thiết kế Tư quy trình thiết kế từ nhận yêu cầu tới hoàn thiện sản phẩm - Sử dụng hệ thống lưới, loại font chữ để vẽ wireframe, workflow, giải pháp giúp người dùng sử dụng sản phẩm Sử dụng phần mềm để thiết kế giao diện ứng dụng Chuẩn đầu ra: Nội dung Kiến thức Đáp ứng CĐR CTĐT 4.1.1 Kiến thức quy trình thiết kế UI/UX, K2 mỹ thuật 4.1.2 Kiến thức công cụ thiết kế, K2 loại ứng dụng Kỹ Thái độ 4.2.1 Có kỹ nhận diện vận dụng xây S1, S3 dựng phác thảo mockup wireframe từ hành vi người dùng 4.2.2 Sử dụng tốt công cụ thiết kế S1, S3 4.2.3 Thiết kế giao diện ứng dụng S1, S3 4.3.1 Sinh viên nghe giảng lý thuyết đầy đủ A1, A2 4.3.2 Sinh viên đọc tài liệu tham khảo A3 4.3.3 Sinh viên làm đầy đủ tập, đồ án A1, A3 mơn học Mơ tả tóm tắt nội dung học phần: Học phần gồm nội dung sau đây: - Bức tranh tồn cục quy trình tìm hiểu trải nghiệm người dùng UX/UI, sinh viên có kiến thức cách tìm hiểu nhu cầu người dùng cách tiến hành tạo sơ đồ tư duy, userflows, phác thảo mockup Cung cấp cho sinh viên số kiến thức bố cục, màu sắc, cấu trúc giao diện, hệ thống lưới - Vẽ nét, tạo hình với đồ họa bitmap để thiết kế giao diện sản phẩm dựa mockup - Làm quen với elements web, responsive UI - Kết hợp áp dụng vào việc thiết kế giao diện Nội dung lịch trình giảng dạy: - Các học phần lý thuyết: Buổi/ Tiết Nội dung Chương 1: Giới thiệu UI/UX 1.1 Khái niệm UI/UX 1.2 Mối quan hệ UI & UX 1.3 Định nghĩa UI/UX Designer 1.4 Đối tượng nhắm đến 1.5 Quy trình thiết kế 1.6 Định hướng người dùng 1.7 Phác thảo persona 1.8 Mô tình 1.9 Sitemap & Workflow Chương 2: Các kiến thức photoshop 2.1 Không gian làm việc Photoshop 2.2 Các phương pháp tách layer 2.3 Tạo hịa trộn cho hình ảnh 2.4 Văn tạo hiệu ứng cho văn 2.5 Các phương pháp vẽ hình 2.6 Vẽ path thẳng, cong công cụ Pen Chương 2: Các kiến thức photoshop (tt) 2.7 Hiệu chỉnh ảnh chụp 2.8 Các đường gióng hàng 2.9 Khái niệm Layer mask 2.10 Khái niệm Clipping mask Tài liệu tham khảo Ghi 4.1.1 Hoạt động giảng viên - Thuyết giảng, đặt câu hỏi, giải đáp thắc mắc, cho làm tập Hoạt động Giáo trình sinh viên - Nghe giảng, ghi [1] Chương chú, trả lời câu 1,2,3 hỏi, đặt câu hỏi, làm tập - Thuyết giảng, đặt câu hỏi, giải đáp thắc mắc, cho làm tập - Nghe giảng, ghi [1] Chương 3, chú, trả lời câu 4, hỏi, đặt câu hỏi, làm tập - Thuyết giảng, đặt câu hỏi, giải đáp thắc mắc, cho làm tập - Nghe giảng, ghi [2] Chương chú, trả lời câu 1,2,3,7,10 hỏi, đặt câu hỏi, làm tập 4.1.1 4.1.2 4.2.2 - Thuyết giảng, đặt câu hỏi, giải đáp thắc mắc, cho làm tập - Nghe giảng, ghi [2] Chương chú, trả lời câu 8,10,11,12 hỏi, đặt câu hỏi, làm tập 4.1.2 4.2.2 - Thuyết giảng, đặt câu hỏi, giải đáp - Nghe giảng, ghi [1] chú, trả lời câu 4.1.2 [8] 4.1.1 2.11 Các dạng banner cách tạo Chương 3: Quy trình UX 3.1 Tổng quan quy trình UX 3.2 Một số nguyên tắc 3.3 Dự án mẫu 3.4 Lập kế hoạch (Plan) 3.4.1 Giai đoạn 1: STRATEGIZE  User Centered Business Canvas  User Personas  Mơ hình AARRR thắc mắc, cho làm tập hỏi, đặt câu hỏi, [11]Chương làm tập 2,3,7,8,9 Chương 3: Quy trình UX(tt) 3.4 Lập kế hoạch (Plan) 3.4.2 Giai đoạn 2: ORGANIZE  Functionality map  Sitemap  Design Brief 3.4.3 Giai đoạn 3: Thiết kế luồng(flows) Flows: Storyboarding, Task flow, User stories - Thuyết giảng, đặt câu hỏi, giải đáp thắc mắc, cho làm tập - Nghe giảng, ghi [11] chú, trả lời câu 2,3 hỏi, đặt câu hỏi, làm tập Chương 4.1.1 Chương 3: Quy trình UX(tt) 3.5 Nghiên cứu người dùng (Discover) 3.5.1 User Interview 3.5.2 Observation 3.5.3 Card sorting 3.5.4 Measure & Analyze - Thuyết giảng, đặt câu hỏi, giải đáp thắc mắc, cho làm tập - Nghe giảng, ghi [11] Chương chú, trả lời câu 4,5,6 hỏi, đặt câu hỏi, [12] làm tập 4.1.1 - Thuyết giảng, đặt câu hỏi, giải đáp thắc mắc, cho làm tập - Nghe giảng, ghi [11] Chương chú, trả lời câu 4,5,6,7,8 hỏi, đặt câu hỏi, làm tập 4.1.1 4.2.1 - Thuyết giảng, đặt câu hỏi, giải đáp thắc mắc, cho làm tập - Nghe giảng, ghi [1] chương 6, chú, trả lời câu hỏi, đặt câu hỏi, [8] chương làm tập [5] Chương 4.2.2 4.2.1 3.5.5 UX survey 3.6 Phác thảo wireframe (Explorer& Define) 3.7 Các cấu trúc thành phần giao diện 3.7.1 Mẫu chung thiết kế (Design pattern) 3.7.2 Microcopy 3.7.3 Các cấu trúc giao diện 3.7.4 Các thành phần giao diện 10 11 12 13 14 Chương 4: Mockup Và Wireframe 3.8 Khái niệm mockup wireframe 3.9 Các loại wireframe 3.10 Các công cụ tạo wireframe 3.11 Các luật tạo wireframe Chương 5: Các yếu tố đồ họa 5.1 Màu sắc & cách phối màu 5.2 Typography 5.3 Các nguyên lý thiết kế 5.4 Ý tưởng thiết kế Chương 6: Tìm hiểu platform 6.1 Basic design UI 6.2 Hệ thống lưới & kích thước hình - Thuyết giảng, đặt câu hỏi, giải đáp thắc mắc, cho làm tập 2,3,4 - Nghe giảng, ghi [1] Chương 6,7 chú, trả lời câu hỏi, đặt câu hỏi, [5] Chương làm tập [11] Chương - Thuyết giảng, đặt câu hỏi, giải đáp thắc mắc, cho làm tập - Nghe giảng, ghi [3] Chương chú, trả lời câu hỏi, đặt câu hỏi, [8] Chương 1, làm tập 4.1.1 - Thuyết giảng, đặt câu hỏi, giải đáp thắc mắc, cho làm tập 4.1.1 4.1.2 Chương 7: Adobe Muse 7.1 Giới thiệu phần mềm 7.2 Cài đặt Adobe Muse 7.3 Tạo trang link tương tác 7.4 Sử dụng master page Chương 8: Cài đặt Wireframe 8.1 Cài đặt ban đầu cho thiết kế wireframe 8.2 Master page 8.3 Xử lý trang chủ 8.4 Xử lý trang giới thiệu 8.5 Thiết kế trang gói dịch vụ 8.6 Tạo menu đa cấp cho việc chuyển đổi trang wireframe Chương 9: Thiết kế UX/UI 9.1 Giới thiệu thành phần UX/UI - Thuyết giảng, đặt câu hỏi, giải đáp thắc mắc, cho làm tập - Nghe giảng, ghi [4] chú, trả lời câu hỏi, đặt câu hỏi, [5] Chương 10, 11 làm tập [8] Chương 3, 4,5,6 - Nghe giảng, ghi [6] Chương 1,3 chú, trả lời câu hỏi, đặt câu hỏi, làm tập - Thuyết giảng, đặt câu hỏi, giải đáp - Nghe giảng, ghi [6] Chương chú, trả lời câu 4.1.2 4.2.2 4.2.1 4.2.1 4.2.2 9.2 Hiệu ứng cuộn chuột 9.3 Hiệu ứng fix background 9.4 Các phương pháp thiết kế responsive 9.5 Thiết kế hiệu ứng trượt landing page 9.6 Thiết kế hiệu ứng tương tác kiểu hover 9.7 Thiết kế tương tác nâng cao Chương 10: Adobe Muse tính thiết kế UX 10.1 Các hiệu ứng tương tác 10.2 Giới thiệu widget 10.3 Slide show 10.4 Thiết kế google map youtube Muse Báo cáo đồ án 15 thắc mắc, cho làm tập - Chấm điểm đề tài hỏi, đặt câu hỏi, 1,2,3,4,5,6 làm tập - Báo cáo đề tài 4.2.3 4.2.2 4.2.3 4.3.3 - Các học phần thực hành: Buổi /Tiết Nội dung Hoạt động giảng viên Hoạt động sinh viên Bài 1: Giới thiệu project thực tế, bước chuẩn bị project - Bài tập tạo hồ sơ UX1 :UCBC, Personas, mơ hình AARRR Hướng dẫn sinh viên thực Nghe giảng, ghi Trả lời thắc mắc SV Hỏi vấn đề gặp phải Bài 2: Hướng dẫn sinh viên thực Nghe giảng, ghi Trả lời thắc mắc SV Hỏi vấn đề gặp phải Hướng dẫn sinh viên thực Nghe giảng, ghi Trả lời thắc mắc SV Hỏi vấn đề gặp phải Hướng dẫn sinh viên thực Nghe giảng, ghi Trả lời thắc mắc SV Hỏi vấn đề gặp phải Hướng dẫn sinh viên thực Nghe giảng, ghi -Bài tập tạo hồ sơ UX2: thiết kế chức functionality map, Sitemap, Design Brief Làm tập Làm tập Giáo trình Tài liệu tham khảo Ghi Bài tập thực hành 4.2 Bài tập thực hành 4.2 Bài tập thực hành 4.2 Bài tập thực hành 4.2 Bài tập thực hành 4.2 - Tìm hiểu Adobe Photoshop Bài 3: - Bài tập tạo hồ sơ UX3: thiết kế luồng Storyboarding, Task flow, Userstory Làm tập - Tạo banner đơn giản, tạo background - Các công cụ tô vẽ Bài 4: - Bài tập tạo hồ sơ UX4: user interview, phát thảo wireframe Làm tập - Hiệu chỉnh hình ảnh, pen tool Bài 5: - Làm quen với Adobe Muse Làm tập 7 - Tạo banner phức tạp kỹ thuật layer cao cấp Photoshop Trả lời thắc mắc SV Hỏi vấn đề gặp phải Bài 6: Thiết kế cấu trúc cho wireframe phát thảo, tạo điều hướng Hướng dẫn sinh viên thực Nghe giảng, ghi Trả lời thắc mắc SV Hỏi vấn đề gặp phải Bài 7: Thiết kế menu hiệu ứng cho menu Hướng dẫn sinh viên thực Nghe giảng, ghi Trả lời thắc mắc SV Hỏi vấn đề gặp phải Bài 8: Thiết kế phần hiệu ứng cho Hướng dẫn sinh viên đối tượng, thêm widgets thực Bài 9: Thiết kế Responsive 10 Làm tập Làm tập Nghe giảng, ghi Làm tập Trả lời thắc mắc SV Hỏi vấn đề gặp phải Hướng dẫn sinh viên thực Nghe giảng, ghi Trả lời thắc mắc SV Hỏi vấn đề gặp phải Kiểm tra Làm tập Bài tập thực hành 4.2 Bài tập thực hành 4.2 Bài tập thực hành 4.2 Bài tập thực hành 4.2 4.2 Nhiệm vụ sinh viên: Sinh viên phải thực nhiệm vụ sau: - Tham dự tối thiểu 80% số tiết học lý thuyết - Tham gia tối thiểu 80% thực hành giải tất tập - Tham dự kiểm tra thực hành - Tham dự báo cáo kết thúc học phần - Chủ động tổ chức thực tự học 8 Đánh giá kết học tập sinh viên: 8.1 Cách đánh giá Sinh viên đánh giá tích lũy học phần sau: TT Thành phần Thực hành Lý thuyết 8.2 Cách tính điểm - Điểm đánh giá thành phần điểm thi kết thúc học phần chấm theo thang điểm 10 (từ đến 10), làm tròn đến 0.5 - Điểm học phần tổng điểm tất điểm đánh giá thành phần học phần nhân với trọng số tương ứng Điểm học phần theo thang điểm 10 làm tròn đến chữ số thập phân Tài liệu học tập: 9.1 Giáo trình chính: [1] “The elements of user experience”, Jesse James Garrett, 2011 [2] “Adobe Photoshop CS5 Revealed”, Elizabeth Eisner Reding, Cengage Learning, 2011 [3] “Thiết kế trải nghiệm thương hiệu”, Robin Landa, NXB Bách Khoa Hà Nội, 2015 [4] “Grid systems An introduction to modular design”, Bas Leurs, 2009 [5] “Designing Interfaces”, Jenifer Tidwell, 2010 [6] “Adobe Muse Building your first website”, Adobe Systems Incorporated, 2013 (free book) [7] https://helpx.adobe.com/xd/tutorials.html [8]”Màu sắc phương pháp sử dụng”, họa sỹ Uyên Huy, 2005 9.2 Tài liệu tham khảo: [9] “Modular Design Frameworks”, James Cabrera, 2017 [10] ”The guide to wireframing”, UXPin (free book) [11] “ The Joy of UX”, David Flatt, 2016 [12] “Starter Questions For User Research”, Sarah Doody, 2016 10 Hướng dẫn sinh viên tự học: Tuần/ Buổi Nội dung Chương 1: Giới thiệu ui/ux Lý thuyết (tiết) Thực hành Nhiệm vụ sinh viên (tiết) -Nghiên cứu trước: 1.1 Khái niệm UI/UX 1.2 Mối quan hệ UI & UX 1.3 Định nghĩa UI/UX Designer 1.4 Đối tượng nhắm đến 1.5 Quy trình thiết kế 1.6 Định hướng người dùng 1.7 Phác thảo persona 1.8 Mô tình 1.9 Sitemap & Workflow + Tài liệu [1]: chương 1,2,3 3 Chương 3: Quy trình UX 3.1 Tổng quan quy trình UX 3.2 Một số nguyên tắc 3.3 Dự án mẫu 3.4 Lập kế hoạch (Plan) 3.4.1 Giai đoạn 1: STRATEGIZE  User Centered Business Canvas  User Personas  Mơ hình AARRR Chương 3: Quy trình UX(tt) 3.4 Lập kế hoạch (Plan) 3.4.2 Giai đoạn 2: ORGANIZE  Functionality map  Sitemap  Design Brief 3.4.3 Giai đoạn 3: Thiết kế luồng(flows) Flows: Storyboarding, Task flow, User stories Chương 3: Quy trình UX(tt) 3.5 Nghiên cứu người dùng (Discover) 3.5.1 User Interview 3.5.2 Observation -Nghiên cứu trước: + Tài liệu [1]: chương 4,5 Chương 2: Các kiến thức photoshop 2.1 Không gian làm việc Photoshop 2.2 Các phương pháp tách layer 2.3 Tạo sắc độ chuyển tiếp cho hình ảnh 2.4 Văn tạo hiệu ứng cho văn 2.5 Các phương pháp vẽ hình 2.6 Vẽ path thẳng, cong cơng cụ Pen Chương 2: Các kiến thức photoshop (tt) 2.7 Hiệu chỉnh ảnh chụp 2.8 Các đường gióng hàng 2.9 Khái niệm Layer mask 2.10 Khái niệm Clipping mask 2.11 Các dạng banner cách tạo 2 -Nghiên cứu trước: + Tài liệu [2]: Chương 1,2,3,7,10 -Nghiên cứu trước: + Tài liệu [2]: Chương 8,10,11,12 -Nghiên cứu trước: + Tài liệu [1] + Tài liệu [11]: Chương 2,3,7,8,9 -Nghiên cứu trước: + Tài liệu [11]: Chương 2,3 -Nghiên cứu trước: + Tài liệu 4,5,6 [11]: Chương 10 3.5.3 Card sorting 3.5.4 Measure & Analyze 3.5.5 UX survey Chương 3: Quy trình UX(tt) 3.6 Phác thảo wireframe (Explorer& Define) 3.7 Các cấu trúc thành phần giao diện 3.7.1 Mẫu chung thiết kế (Design pattern) 3.7.2 Microcopy 3.7.3 Các cấu trúc giao diện 3.7.4 Các thành phần giao diện + Tài liệu [12] -Nghiên cứu trước: + Tài liệu [11]: Chương 4, 5,6,7,8 -Nghiên cứu trước: + Tài liệu [6]: Chương + Tài liệu [8]: Chương + Tài liệu [5]: Chương 2,3,4 10 11 Chương 4: Mockup Và Wireframe 4.1 Khái niệm mockup wireframe 4.2 Các loại wireframe 4.3 Các công cụ tạo wireframe 4.4 Các luật tạo wireframe Chương 5: Các yếu tố đồ họa 5.1 Màu sắc & cách phối màu 5.2 Typography 5.3 Các nguyên lý thiết kế 5.4 Ý tưởng thiết kế Chương 6: Tìm hiểu platform 6.1 Basic design UI 6.2 Hệ thống lưới & kích thước hình -Nghiên cứu trước: + Tài liệu [1]: Chương 6,7 + Tài liệu [5]: Chương + Tài liệu [11]: Chương -Nghiên cứu trước: + Tài liệu [3]: Chương + Tài liệu [8]: Chương 1, 2 -Nghiên cứu trước: + Tài liệu [4] + Tài liệu [5]: Chương 10, 11 12 + Tài liệu [8]: Chương 3, 4,5,6 13 14 Chương 7: Adobe Muse 7.1 Giới thiệu phần mềm 7.2 Cài đặt Adobe Muse 7.3 Tạo trang link tương tác 7.4 Sử dụng master page Chương 8: Cài đặt Wireframe 8.1 Cài đặt ban đầu cho thiết kế wireframe 8.2 Master page 8.3 Xử lý trang chủ 8.4 Xử lý trang giới thiệu 8.5 Thiết kế trang gói dịch vụ 8.6 Tạo menu đa cấp cho việc chuyển đổi trang wireframe Chương 9: Thiết kế UX/UI 9.1 Giới thiệu thành phần UX/UI 9.2 Hiệu ứng cuộn chuột -Nghiên cứu trước: + Tài liệu [6]: Chương 1,3 -Nghiên cứu trước: + Tài liệu [6]: Chương 11 9.3 Hiệu ứng fix background 9.4 Các phương pháp thiết kế responsive 9.5 Thiết kế hiệu ứng trượt landing page 9.6 Thiết kế hiệu ứng tương tác kiểu hover 9.7 Thiết kế tương tác nâng cao Chương 10: Adobe Muse tính thiết kế UX 10.1 Các hiệu ứng tương tác 10.2 Giới thiệu widget 10.3 Slide show 10.4 Thiết kế google map youtube Muse 15 Báo cáo đồ án 1,2,3,4,5,6 -Nghiên cứu thêm: + Tài liệu [7] Ngày… tháng… Năm 201 Trưởng khoa (Ký ghi rõ họ tên) Ngày… tháng… Năm 201 Trưởng Bộ môn (Ký ghi rõ họ tên) Ngày… tháng… Năm 201 Người biên soạn (Ký ghi rõ họ tên) Ngày… tháng… Năm 201 Ban giám hiệu 12 ... lũy học phần sau: TT Thành phần Thực hành Lý thuyết 8.2 Cách tính điểm - Điểm đánh giá thành phần điểm thi kết thúc học phần chấm theo thang điểm 10 (từ đến 10), làm tròn đến 0.5 - Điểm học phần. .. 80% số tiết học lý thuyết - Tham gia tối thiểu 80% thực hành giải tất tập - Tham dự kiểm tra thực hành - Tham dự báo cáo kết thúc học phần - Chủ động tổ chức thực tự học 8 Đánh giá kết học tập... phần tổng điểm tất điểm đánh giá thành phần học phần nhân với trọng số tương ứng Điểm học phần theo thang điểm 10 làm tròn đến chữ số thập phân Tài liệu học tập: 9.1 Giáo trình chính: [1] “The