Năm 6: Interaction Design - Thiết kế tương tác

Độ tuổi: Lớp 9-12

Tổng quan lộ trình

💡 Interaction Design (Thiết kế tương tác) là khoá học, nơi học sinh được trải nghiệm và ứng dụng nguyên tắc thiết kế lấy trải nghiệm người dùng làm trung tâm, từ đó thiết kế giao diện Website và Mobile App.

• Học sinh nắm được các nguyên tắc thiết kế lấy trải nghiệm người dùng làm trung tâm.

• Sử dụng thành thạo và biết cách kết hợp hài hoà các phần mềm thiết kế, chuyên biệt trong lĩnh vực Interaction Design.

• Nhận biết được vai trò của thiết kế trong các giải pháp lớn của doanh nghiệp và xã hội trong quá trình chuyển đổi số; đồng thời nâng cao nhận thức về các vấn đề lớn của xã hội.

Level

3 LEVEL: BASIC - ADVANCED - INTENSIVE

TỔNG SỐ BUỔI HỌC CỦA LỘ TRÌNH

📖 42 BUỔI HỌC

Tương ứng: 14 BUỔI HỌC / 1 KHÓA

TỔNG SỐ GIỜ HỌC

84 GIỜ HỌC

Tương ứng: 2 GIỜ/BUỔI

TỔNG SỐ HỌC VIÊN

Số học viên: 6 - 10 bạn

Mục tiêu lộ trình

KIẾN THỨC TỔNG QUAN

Hiểu được các nguyên tắc sử dụng và phối hợp kiểu chữ, màu sắc, hình ảnh, bố cục… trong thiết kế UI/UX.

KỸ NĂNG PHẢN BIỆN & SÁNG TẠO

Nắm chắc quy trình xây dựng cũng như đánh giá được tính hiệu quả của giao diện người dùng.

KỸ NĂNG SỬ DỤNG CÔNG CỤ

Thành thạo các tính năng cơ bản của Figma, phần mềm phổ biến nhất trong lĩnh vực Thiết kế tương tác.

KỸ NĂNG ỨNG DỤNG

Thiết lập giao diện Website và Mobile App lấy trải nghiệm người dùng làm trung tâm với các tương tác cơ bản.

Ai phù hợp với khóa học này?

• Tìm hiểu các nguyên tắc thiết kế lấy trải nghiệm người dùng làm trung tâm.

• Hiểu được vai trò của thiết kế tương tác đối với tổ chức và xã hội trong quá trình chuyển đổi số và hành vi số.

• Sử dụng thành thạo các tính năng cơ bản của Figma để thiết kế giao diện Website và Mobile App thân thiện với người dùng.

Nội dung lộ trình

XART-IDB

• Nhận biết điểm tương đồng & khác biệt của các yếu tố thiết kế (Typography, Màu sắc, Layout…) trong thiết kế đồ họa và thiết kế UI/UX

(*) UI: viết tắt của User Interface - Giao diện người dùng, bao gồm tất cả những gì của Website/App mà người dùng có thể nhìn thấy như: Bố cục thông tin như thế nào? Sử dụng fonts chữ gì? Màu sắc & hình ảnh có hấp dẫn hay không? (Tính thẩm mỹ)

UX: viết tắt của User Experience - Trải nghiệm người dùng, là mức độ hài lòng của người dùng khi tương tác với giao diện & các chức năng của Website/App: Có đáp ứng được nhu cầu sử dụng của người dùng hay không? Sắp xếp bố cục như vậy đã dễ thao tác chưa? (Sự tiện dụng)

• Tìm hiểu các bước phát triển trang web và ứng dụng trên điện thoại, đặc biệt tập trung vào các yếu tố cần có của giao diện

• Thiết kế 01 giao diện Landing Page hoàn chỉnh

XART-IDA

• Hiểu quy trình thiết kế luồng thông tin để hỗ trợ quá trình tiếp nhận của người dùng

• Các nguyên tắc tối ưu hóa thông tin trên giao diện

• Xây dựng Wireframe và Prototype cho Website/Mobile App

(*) Wireframe: phác thảo cơ bản về bố cục và nội dung của 1 trang web hoặc ứng dụng

Prototype: bản mô phỏng trực quan giao diện cuối cùng

XART-IDI

• Hình thành tư duy thiết kế lấy người dùng làm trung tâm

• Phát triển kỹ năng nghiên cứu hành vi nhằm tối ưu hóa trải nghiệm người dùng

• Tổng hợp kiến thức về UI/UX vào thiết kế Website/Mobile App hoàn thiện nhằm mục đích quản trị hình ảnh cho tổ chức

Công cụ sử dụng

Figma Là một công cụ chỉnh sửa giao diện Website/App hoàn toàn thực hiện trên trình duyệt mà không cần bất kỳ thao tác tải về nào.

Nội dung khóa học

Basic

Level 1 - Các yếu tố cơ bản trong thiết kế giao diện

• Các yếu tố thiết kế giao diện người dùng: Chữ, Hình ảnh, Biểu tượng...

• Thiết kế giao diện Landing Page -> Công cụ: Figma"

Bài	Nội dung	Note
1	Giới thiệu Thiết kế tương tác và phần mềm Figma
2	Xây dựng phác thảo giao diện
3	Yếu tố thiết kế giao diện người dùng: Chữ & Văn bản
4	Yếu tố thiết kế giao diện người dùng: Màu sắc
5	Yếu tố thiết kế giao diện người dùng: Đồ họa & Hình ảnh
6	Yếu tố thiết kế giao diện người dùng: Chuyển động
7	Yếu tố thiết kế giao diện người dùng: Biểu tượng & Nút bấm
8	Thực hành: Yếu tố thiết kế giao diện người dùng
9	Xây dựng Moodboard
10	Xây dựng Prototype
11	Thực hành: Moodboard & Prototype
12	Dự án cuối khóa: Hoàn thiện giao diện Landing Page
13	Dự án cuối khóa: Hoàn thiện giao diện Landing Page
14	Triển lãm cuối khóa

Advanced

Level 2 - Luồng thông tin và tương tác người dùng

• Xây dựng luồng thông tin để hỗ trợ quá trình tiếp nhận của người dùng

• Tạo Wireframe và Prototype cho Website/Mobile App -> Công cụ: Figma

Bài	Nội dung	Note
1	Quy trình thiết kế luồng thông tin
2	Wireframe & Sitemap trong thiết kế giao diện người dùng
3	Hệ thống lưới (Grid System)
4	Xây dựng bộ Frame
5	Tối ưu hóa thông tin trên giao diện
6	Thực hành tổng hợp
7	Điều hướng luồng thông tin người dùng
8	Thực hành: Điều hướng luồng thông tin người dùng
9	Xây dựng Prototype (tiếp)
10	Định dạng tiêu chuẩn giao diện
11	Dự án cuối khóa: Hoàn thiện Wireframe và Prototype cho 01 Website / App
12	Dự án cuối khóa: Hoàn thiện Wireframe và Prototype cho 01 Website / App
13	Dự án cuối khóa: Hoàn thiện Wireframe và Prototype cho 01 Website / App
14	Triển lãm cuối khóa

Intensive

Level 3 - Thiết kế lấy người dùng làm trung tâm

• Hình thành tư duy thiết kế và kỹ năng nghiên cứu hành vi nhằm tối ưu hóa trải nghiệm người dùng

• Ứng dụng kiến thức thiết kế UX/UI vào việc quản trị hình ảnh cho tổ chức -> Công cụ: Figma

Bài	Nội dung	Note
1	Nhập môn UX/UI
2	Tư duy thiết kế: Thiết kế lấy người dùng làm trung tâm
3	Nghiên cứu trải nghiệm người dùng
4	Thực hành: Nghiên cứu trải nghiệm người dùng
5	Độ khả dụng của sản phẩm
6	Thiết kế hành vi người dùng (P1)
7	Thiết kế hành vi người dùng (P2)
8	Kịch bản tương tác người dùng
9	Thực hành: Phân tích và xây dựng các chức năng tương tác
10	Thực hành tổng hợp: Thiết kế luồng thông tin
11	Hoàn thiện sản phẩm cuối khóa cho 01 lĩnh vực cụ thể (giáo dục, y tế, văn hóa...)
12	Hoàn thiện sản phẩm cuối khóa cho 01 lĩnh vực cụ thể (giáo dục, y tế, văn hóa...)
13	Hoàn thiện sản phẩm cuối khóa cho 01 lĩnh vực cụ thể (giáo dục, y tế, văn hóa...)
14	Triển lãm cuối khóa