GIÁO TRÌNH THIẾT KẾ GIAO DIỆN

<span class="text_page_counter">Trang 1</span><div class="page_container" data-page="1">

<b>TRƯỜNG ĐH NGOẠI NGỮ - </b>

<b>Khoa CÔNG NGHỆ THÔNG TIN Độc Lập - Tự Do - Hạnh Phúc </b>

<b>CHƯƠNG TRÌNH GIÁO DỤC ĐẠI HỌC </b>

<b>Trình độ đào tạo: Đại học Ngành: Cơng nghệ thơng tin Mã số: 7480201 </b>

<b>ĐỀ CƯƠNG CHI TIẾT HỌC PHẦN </b>

<i><b>1. Thông tin chung về HP </b></i>

<b>1.3 Ký hiệu học phần: 1250084 1.4 Tên tiếng Anh: Designing Interfaces </b>

<b>1.8 Điều kiện tham gia học phần: </b>

<b>2. Mục tiêu HP 2.1. Mục tiêu chung </b>

Sau khi hoàn tất các yêu cầu trong học phần, sinh viên có thể đánh giá và nghiên cứu thói quen sử dụng ứng dụng của người dùng, thiết lập các thao tác, tính năng và sự vận hành của ứng dụng, quy trình phát triển và thiết kế UI/UX cho ứng dụng. Nắm vững kiến thức về thiết kế cho mobile và website, bố cục, màu sắc, nguyên tắc thiết kế. Tư duy quy trình thiết kế từ khi nhận u cầu tới hồn thiện sản phẩm. Sử dụng các hệ thống lưới, các loại font chữ để vẽ wireframe, workflow, các giải pháp giúp người dùng sử dụng sản phẩm. Sử dụng các phần mềm để thiết kế giao diện ứng dụng.

<b>2.2. Mục tiêu HP cụ thể 2.2.1. Về kiến thức: </b>

- Nắm bắt được các kiến thức về quy trình thiết kế UI/UX, mỹ thuật. - Nắm rõ các công cụ thiết kế, các loại ứng dụng.

</div><span class="text_page_counter">Trang 2</span><div class="page_container" data-page="2">

<b>3. Chuẩn đầu ra của HP “Phân tích và thiết kế phần mềm” </b>

<b>Bảng 3.1. Chuẩn đầu ra (CĐR) của HP </b>

Sau khi học xong học phần, SV có khả năng:

CLO1

Nắm bắt được các kiến thức về quy trình thiết kế UI/UX, mỹ thuật.

CLO2

Vận dụng sáng tạo các công cụ để thiết kế các giao diện ứng dụng

. CLO3 Có khả năng làm việc theo nhóm, lập kế hoạch và viết báo cáo kỹ thuật. CLO4 Có năng lực giao tiếp và trình bày giải pháp kỹ thuật.

<b>4. Mối liên hệ giữa CĐR HP (CLO) với CĐR CTĐT (PLO) </b>

Mức độ đóng góp của CLO vào PLO được xác định cụ thể:

<i>1 – CLO có đóng góp vừa vào PLO 2 – CLO có đóng góp nhiều vào PLO </i>

<i> Chú thích: 2 - Cao, 1 - Thấp - phụ thuộc vào mức hỗ trợ của CLO đối với PLO ở mức bắt đầu (1) hoặc mức nâng cao hơn mức bắt đầu, có nhiều cơ hội được thực hành, thí nghiệm, thực tế,…(mức 2) </i>

<b>Bảng 4.1.Mối liên hệ của CĐR HP (CLO) đến CĐR của CTĐT (PLO) </b>

<b>PLO </b>

(1) (2) (3) (4) (5) (6) ^{(7d, 8d, 9d,}10d, 11d)

(7b, 8b, 9b, 10b, 11b)

(7c, 8c, 9c, 10c, 11c)

CLO 4 2 Tổng hợp

1

<b>5. Đánh giá HP </b>

<i><b>a. Phương pháp, hình thức kiểm tra - đánh giá của HP </b></i>

<b>Bảng 5.1. Phương pháp, hình thức kiểm tra - đánh giá kết quả học tập của SV ở HP </b>

<b><small>Th/phần </small></b>

<b><small>đánh giá </small>^Trọng<small>số </small>^{Bài đánh giá}^{Trọng số}<small>con </small></b>

<b><small>CĐR nào ở bảng 3.1 </small></b>

<i><b><small>HD PP đánh giá </small></b></i>

<small>A1. Kiểm tra thường xuyên (KTTX) </small>

<small>20% A1. Từng buổi học </small>

<small>R1 CLO 1 CLO 2 </small>

<small>- Điểm danh </small>

<small>- Đánh giá hoạt động trên lớp </small>

<small>A2. Đánh giá phần thực hành </small>

<small>30% </small>

<small>Sinh viên hoàn thành bài thực hành trong buổi thực hành </small>

<small>R3 CLO 1 CLO 2 CLO 3 CLO 4 </small>

<small>- GV giao bài thực hành vào đầu mỗi buổi thực hành </small>

<small>GV chấm kết quả vào cuối buổi thực hành </small>

<small>A3. Đánh </small>

<small>giá cuối kỳ </small> ^50% ^{Báo cáo cuối kỳ}

<small>R5 $6 </small>

<small>CLO 1 CLO 2 CLO 3 CLO 4 </small>

-

<small>GV giao đề cho nhóm từ đầu học kỳ. Việc đánh giá diễn ra vào cuối học kỳ </small>

<small>- Trình bày kết quả làm việc của nhóm - Chạy chương trình demo </small>

<small>- Trả lời câu hỏi</small>

<i><b>b. Chính sách đối với HP </b></i>

<b>6. Kế hoạch và nội dung giảng dạy HP </b>

<b>Bảng 6.1. Kế hoạch và nội dung giảng dạy của HP theo tuần </b>

</div><span class="text_page_counter">Trang 3</span><div class="page_container" data-page="3">

<b>Tuần/ Buổi </b>

<b>CĐR của bài học (chương)/ </b>

<b>chủ đề </b>

<b>Lquan đến CĐR nào ở bảng 3.1 </b>

<b>PP giảng dạy đạt </b>

<b>CĐR </b>

<b>Hoạt động học của </b>

<b>SV(*) </b>

<b>Tên bài đánh </b>

<b>giá </b>

(ở cột 3

<b>bảng 6.1 </b>

(1) (2) (3) (4) (5) (6) (7) (8) 1 <b>Chương 1: Giới thiệu </b>

<b>về ui/ux </b>

1.1 Khái niệm UI/UX 1.2 Mối quan hệ giữa 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ế

3 LT - Nắm được các khái niệm và mơ hình trong UI/UX

- Mối liên hệ với những kiến thức đã học trước đó và kinh nghiệm đã có

CLO1

<i>CLO2 </i>

giảng lý thuyết

- Đặt câu hỏi gợi mở để sinh viên trả lời

- Liên hệ với những kiến thức đã học trước đó và kinh nghiệm đã có

- Phần chuẩn bị ở nhà: Đọc trước nội dung ở chương 1, 2, 3 cuốn [1] - Ghi chú, tham gia các hoạt động trên lớp

2 1.6 Định hướng người dùng

1.7 Phác thảo các persona

1.8 Mô phỏng các tình huống

1.9 Sitemap & Workflow

3 LT - Nắm được các khái niệm và mơ hình trong UI/UX

CLO1 CLO2

giảng

- Đặt câu hỏi gợi mở để sinh viên trả lời

- Vận dụng vào bài toán mẫu từ thực tế

- Phần chuẩn bị ở nhà: Đọc trước nội dung ở chương 4,5 cuốn [1] - Ghi chú, tham gia các hoạt động trên lớp 3 <b>Chương 2: Các kiến </b>

<b>thức cơ bản về photoshop </b>

2.1 Không gian làm việc của 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 bản và tạo hiệu ứng cho văn bản

3 LT - Nắm được các khái niệm và mơ hình trong Photoshop - Vận dụng sáng tạo vào bài toán thực tế

CLO1 CLO2

giảng

- Đặt câu hỏi gợi mở để sinh viên trả lời

- Vận dụng vào bài toán mẫu từ thực tế

- Phần chuẩn bị ở nhà: Đọc trước nội dung ở chương 2, 3 cuốn [2] - Ghi chú, tham gia các hoạt động trên lớp 4 <b>Chương 3: Công cụ tô, </b>

<b>vẽ và hiệu chỉnh </b>

3.1 Các phương pháp vẽ hình

3.2 Vẽ các path thẳng, cong bằng công cụ Pen 3.3 Các dạng button, icon, elements 3.4 Hiệu chỉnh ảnh chụp

3 LT - Nắm được các phương pháp vẽ đối tượng đồ họa

- Vận dụng sáng tạo vào bài toán thực tế

CLO1 CLO2

giảng

- Đặt câu hỏi gợi mở để sinh viên trả lời

- Vận dụng vào bài toán mẫu từ thực tế

- Phần chuẩn bị ở nhà: Đọc trước nội dung ở chương 7, 10, 11 cuốn [1]

- Ghi chú, tham gia các hoạt động trên lớp 5 <b>Chương 4: Chế độ </b>

<b>Layer Masks & Clipping Mask </b>

4.1 Các đường gióng hàng

3 LT - Nắm được các khái niệm và mơ hình trong các Mask

- Vận dụng sáng

CLO1 CLO2

giảng

- Đặt câu hỏi gợi mở để sinh viên trả

- Phần chuẩn bị ở nhà: Đọc trước nội dung ở

</div><span class="text_page_counter">Trang 4</span><div class="page_container" data-page="4">

4.2 Khái niệm Layer mask

4.3 Khái niệm Clipping mask

chương 12 cuốn [2] - Ghi chú, tham gia các hoạt động trên lớp 6 <b>Chương 5: Các yếu tố </b>

<b>đồ họa </b>

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ế

3 LT - Nắm được các yếu tố đồ họa chính yếu - Vận dụng sáng tạo vào bài toán thực tế

CLO1 CLO2

giảng

- Đặt câu hỏi gợi mở để sinh viên trả lời

- Vận dụng vào bài toán mẫu từ thực tế

- Phần chuẩn bị ở nhà: Đọc trước nội dung ở chương 5 cuốn [3], cuốn [8] - Ghi chú, tham gia các hoạt động trên lớp 7 <b>Chương 6: Tìm hiểu về </b>

<b>platform </b>

6.1 Basic design về UI 6.2 Hệ thống lưới & kích thước màn hình 6.3 Các cấu trúc giao diện

6.4 Các thành phần của giao diện

<b>Chương 7: Adobe Muse </b>

7.1 Giới thiệu phần mềm

7.2 Cài đặt cơ bản trong Adobe Muse

7.3 Tạo trang và link tương tác

3 LT - Nắm được các khái niệm và mơ hình trong các nền tảng thiết kế đồ họa

- Vận dụng sáng tạo vào bài toán thực tế

CLO1 CLO2

giảng

- Đặt câu hỏi gợi mở để sinh viên trả lời

- Vận dụng vào bài toán mẫu từ thực tế

- Phần chuẩn bị ở nhà: Đọc trước nội dung ở chương 1 cuốn [4], [5], [6] - Ghi chú, tham gia các hoạt động trên lớp

8 <b>Chương 8: Mockup và Wireframe </b>

8.1 Khái niệm về mockup và wireframe 8.2 Các loại wireframe 8.3 Các công cụ tạo wireframe

8.4 Các luật tạo wireframe

8.5 Cài đặt ban đầu cho thiết kế wireframe 8.6 Master page 8.7 Xử lý trang chủ

3 LT - Nắm được các khái niệm, mô hình và kỹ thuật trong xây dựng Mockup và Wireframe - Vận dụng sáng tạo vào bài toán thực tế

CLO1 CLO2

giảng

- Đặt câu hỏi gợi mở để sinh viên trả lời

- Vận dụng vào bài toán mẫu từ thực tế

- Phần chuẩn bị ở nhà: Đọc trước nội dung ở chương 3 cuốn [6] - Ghi chú, tham gia các hoạt động trên lớp

9 8.8 Xử lý trang giới thiệu

8.9 Thiết kế trang gói dịch vụ

8.10 Tạo menu đa cấp cho việc chuyển đổi các trang wireframe

3 LT - Nắm được các khái niệm, mơ hình và kỹ thuật trong xây dựng Mockup và Wireframe - Vận dụng sáng tạo vào bài toán thực tế

CLO1 CLO2

giảng

- Đặt câu hỏi gợi mở để sinh viên trả lời

- Vận dụng vào bài toán mẫu từ thực tế

- Phần chuẩn bị ở nhà: Đọc trước nội dung ở chương 3 cuốn [6] - Ghi chú, tham gia các hoạt động trên lớp 10 <b>Chương 9: Thiết kế </b>

<b>UX/UI </b>

3 LT - Nắm được các kỹ thuật thiết kế

CLO1 CLO2

giảng

- Phần chuẩn bị ở

</div><span class="text_page_counter">Trang 5</span><div class="page_container" data-page="5">

9.1 Giới thiệu các thành phần UX/UI

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

UX/UI

- Vận dụng sáng tạo vào bài toán thực tế

- Đặt câu hỏi gợi mở để sinh viên trả lời

- Vận dụng vào bài toán mẫu từ thực tế

nhà: Đọc trước nội dung ở chương 4,5 cuốn [6] - Ghi chú, tham gia các hoạt động trên lớp 11 9.5 Thiết kế hiệu ứng

trượt landing page 9.6 Thiết kế các hiệu ứng tương tác kiểu hover

9.7 Thiết kế tương tác nâng cao

3 LT - Nắm được các kỹ thuật thiết kế UX/UI

- Vận dụng sáng tạo vào bài toán thực tế

CLO1 CLO2 CLO3 CLO4

giảng

- Đặt câu hỏi gợi mở để sinh viên trả lời

- Vận dụng vào bài toán mẫu từ thực tế

- Phần chuẩn bị ở nhà: Đọc trước nội dung ở chương 1, 3 cuốn [6] - Ghi chú, tham gia các hoạt động trên lớp - Thuyết trình nhóm 12 <b>Chương 10: Adobe </b>

<b>Muse và các tính năng thiết kế UX </b>

10.1 Kết nối Adobe Photoshop và Adobe Muse

10.2Giới thiệu widget 10.3 Slide show 10.4 Thiết kế google map và youtube trên Muse

3 LT - Nắm được các kỹ thuật thiết kế trong Adobe Muse

- Vận dụng sáng tạo vào bài toán thực tế

CLO1 CLO2 CLO3 CLO4

giảng

- Đặt câu hỏi gợi mở để sinh viên trả lời

- Vận dụng vào bài toán mẫu từ thực tế

- Phần chuẩn bị ở nhà: Đọc trước nội dung ở chương 2 cuốn [6] - Ghi chú, tham gia các hoạt động trên lớp - Thuyết trình nhóm 13 <b>Chương 11: Giới thiệu </b>

<b>Adobe Experience </b>

11.1 Không gian làm việc của Adobe XD 11.2 Giao diện cho iphone, ipad 11.3 Giao diện cho Iphone

3 LT - Nắm được các khái niệm, mơ hình và kỹ thuật trong Adode XD - Vận dụng sáng tạo vào bài toán thực tế

CLO1 CLO2

giảng

- Đặt câu hỏi gợi mở để sinh viên trả lời

- Vận dụng vào bài toán mẫu từ thực tế

- Phần chuẩn bị ở nhà: Đọc trước nội dung ở cuốn [7] - Ghi chú, tham gia các hoạt động trên lớp - Thuyết trình nhóm 14 <b>Chương 12: Ứng dụng </b>

<b>đọc tin trên Adobe Experience </b>

12.1 Phần Top

12.2 Thiết kế phần giao diện đọc tin

12.3 Xử lý phân trang 12.4 Phần Footer 12.5 Cách sử dụng font, icon

12.6 Xử lý điều hướng 12.7 Thiết kế phần giao diện chi tiết

3 LT - Nắm được các kỹ thuật trong Adode Experience - Vận dụng sáng tạo vào bài toán thực tế

CLO1 CLO2

giảng

- Đặt câu hỏi gợi mở để sinh viên trả lời

- Vận dụng vào bài toán mẫu từ thực tế

- Phần chuẩn bị ở nhà: Đọc trước nội dung ở cuốn [7] - Ghi chú, tham gia các hoạt động trên lớp - Thuyết trình nhóm 15 Ôn tập 3 LT 15.1. Ôn tập 15.1. Ôn tập - Nộp báo

</div><span class="text_page_counter">Trang 6</span><div class="page_container" data-page="6">

kiến thức 15.2. Củng cố và nâng cao kỹ năng phân tích thiết kế

kiến thức 15.2. Rút tỉa bài học kinh nghiệm từ các case study

cáo đồ án của môn học

Theo lịch thi

<b>- Các học phần thực hành: được tổ chức thực hiện vào tuần thứ 5 của học kỳ, có nội dung thuyết giảng và chuẩn đầu ra tương quan với nội dung bài giảng lý thuyết. </b>

<i> </i>

<b>Buổi/ </b>

<b>Số tiết (TH) </b>

<b>Hoạt động của giảng viên </b>

<b>Lquan đến CĐR nào ở bảng 3.1 </b>

<b>Hoạt động học của SV</b>

<b>Tên bài đánh </b>

<b>giá </b>

1 <b>Bài 1: Phác thảo giao diện dựa </b>

trên yêu cầu người dùng. Tạo banner đơn giản, tạo nền background

3 TH - Thuyết giảng - Hướng dẫn sinh

viên thực hiện

CLO 1 CLO 2

- Nghe giảng, ghi chú - Trả lời câu

hỏi

- Thực hành trên máy

2 <b>Bài 2: Tạo logo và các button. </b>

Cắt web

3 TH - Thuyết giảng - Hướng dẫn sinh

viên thực hiện

CLO 1 CLO 2

- Nghe giảng, ghi chú - Trả lời câu

hỏi

- Thực hành trên máy

CLO 1 CLO 2

- Trả lời câu hỏi

- Thực hành trên máy

4 <b>Bài 4: Tạo các banner phức tạp. </b>

Cắt web ^{3 TH} ^{- Hướng dẫn sinh}viên thực hiện ^{CLO 1}CLO 2

- Trả lời câu hỏi

- Thực hành trên máy

5 <b>Bài 5: Giới thiệu project thực tế, </b>

các bước chuẩn bị project. Thiết kế UX cho menu

3 TH - Hướng dẫn sinh viên thực hiện - Vẽ minh họa

CLO 1 CLO 2

- Trả lời câu hỏi

- Thực hành trên máy

6 <b>Bài 6: Thiết kế slide trượt ngang. </b>

thiết kế khối dịch vụ

3 TH - Hướng dẫn sinh viên thực hiện

CLO 1 CLO 2

- Trả lời câu hỏi

- Thực hành trên máy

7 <b>Bài 7: Thiết kế khối sản phẩm, </b>

thiết kế phần dịch vụ ^{3 TH} ^{- Hướng dẫn sinh}viên thực hiện ^{CLO 1}CLO 2

- Trả lời câu hỏi

- Thực hành trên máy

8 <b>Bài 8: Thiết kế phần hiệu ứng </b>

slide cảm nhận khách hàng, thiết kế phần nút và nội dung slide, thiết kế hiệu ứng trượt, thiết kết UX cho khối team member

3 TH - Hướng dẫn sinh viên thực hiện

CLO 1 CLO 2

- Trả lời câu hỏi

- Thực hành trên máy

9 <b>Bài 9: Thiết kế hiệu ứng Tab, </b>

Hướng dẫn hoàn thiện thiết kế UI-UX cho website

3 TH - Hướng dẫn sinh viên thực hiện

CLO 1 CLO 2

- Thực hành trên máy

10 Kiểm tra 3 TH - Nghe báo cáo kết quả thực hành và chấm điểm

CLO 1 CLO 2 CLO 3 CLO 4

- Từng nhóm lần lượt báo cáo kết quả

A2

</div><span class="text_page_counter">Trang 7</span><div class="page_container" data-page="7">

<b>7. Học liệu: </b>

<b>Bảng 7.1. Sách, giáo trình, tài liệu tham khảo </b>

<b>XB </b>

<b>Tên sách, giáo trình, tên bài báo, văn bản </b>

<b>NXB, tên tạp chí/ nơi ban hành VB Giáo trình chính </b>

1 Jesse James Garrett 2010 <b>The elements of user experience, 2</b>

<b><small>nd</small></b>

<b>Edition </b>

New Riders 2 Elizabeth Eisner

Incorporated

2013 <b>Adobe Muse Building your first website </b>

7 Adobe Systems Incorporated

8 Uyên Huy 2018 <b>Màu sắc và phương pháp sử dụng </b>Nhà Xuất Bản Mỹ Thuật

<b>Sách, giáo trình tham khảo </b>

Publications

<b>Bảng 7.2. Danh mục địa chỉ web hữu ích cho HP </b>

<b>nhật </b>

1 2 3 4 5 6

<i><b>8. Cơ sở vật chất phục vụ giảng dạy: </b></i>

<b>Bảng 8.1. Cơ sở vật chất giảng dạy của HP TT </b>

<b>Tên giảng đường, PTN, xưởng, cơ sở </b>

</div>