Thiết kế giao diện UI/UX cho Website và App với Figma

Phần 1: Digital Illustrations - Đồ họa kỹ thuật số cho thiết kế

• Làm quen giao diện phần mềm Adobe Illustrator

• Nhóm công cụ Pen-Shape mode

• Làm việc với văn bản trong Illustrator

• Hiệu ứng và bộ lọc

• Giới thiệu nhóm palleten tập hợp những mẫu có sẵn trong phần mềm

Phần 2: UI Design (thiết kế giao diện người dùng cho Website và App với Figma)

2.1. Các yếu tố cơ bản

• Giới thiệu về Figma và sự khác biệt giữa phần mềm thiết kế giao diện với các phần mềm thiết kế khác.  

• Giới thiệu nguyên lý thiết kế và các yếu tố cơ bản trong nguyên lý thiết kế.

• Làm quen với Constraints

• Chọn đề bài và phân phát đề bài Project

2.2. Các yếu tố về Frame

• Tạo và làm việc với Frame. 

• So sánh Frame và Group.

• Copywork (Thực hiện theo mẫu) yêu cầu sử dụng Frame.

• Constraints của Frame – Siêu công cụ cho Responsive (Tương thích đa nền tảng)

2.3. Hệ thống hướng đối tượng Component/ Instance/Variants

• Giới thiệu về Component - Instance

• Bộ Quy tắc Component 

• Sử dụng component và Instance như thế nào

• Variants – bản nâng cấp Component

• Các thuộc tính của Variants

• Một vài ví dụ của việc dùng Variants

2.4. Auto Layout

• Giới thiệu Auto Layout

• Autolayout và Text

• Tạo Autolayout

• Thuộc tính chính của Autolayout

• Resizing với Autolayout

• Autolayout nâng cao

• Các demo và công dụng

2.5. Hệ thống hóa bằng Style

• Style là gì ?

• Làm việc với Color Style

• Làm việc với Text Style

• Ứng dụng trong thực tế

• Các loại Style khác

• Lưới trong Figma

2.6. Wireframe

• Quy trình làm Web/App

• Về Sitemap bằng Figjam

• Dùng Figma dựng Wireframe

• Stylist cho giao diện

• Dùng Fiigma biến Wireframe thành giao diện

2.7. Prototyping

• Giới thiệu về Prototype trong Fiigma

• Các tạo Interaction

• Setup Prototype

• Các thuộc tính của Interaction

• Overlay và các tính chất của Overlay

• Animation trong Figma Propotype

• Smart Animate

• Đặc tính của Smart Animate

• Trình diễn thành phần và Scrolling

• Interactive Component

Phần 3: Thiết Kế UI/UX cho phần mềm - Thực hiện đồ án thiết kế giao diện UI/UX hoàn chỉnh

3.1. Kiến thức nền tảng chung

• Lịch sử của User Experience 

• Các khái niệm và thuật ngữ trong ngành

• Các ngành nghề liên quan

• Các thành phần của thiết kế UI/UX

• Quy trình các bước thiết kế UI/UX

• Hiểu người dùng – Thiết kế người dùng làm trung tâm

• Các yếu tố xung quanh người dùng

• Hiểu về thiết kế lấy người dung làm trung tâm

• Cách xác định người dùng mục tiêu

3.2. User Experience research

• Các phương pháp nghiên cứu

• Phương pháp phỏng vấn 

• Phương pháp bảng câu hỏi

• Phương pháp tập trung nhóm mục tiêu

• Phương pháp quan sát

• Phương pháp nghiên cứu tài liệu

• Xây dựng kế hoạch nghiên cứu

• Phân tích dữ liệu nghiên cứu

3.3. Khả năng sử dụng của sản phẩm

• Các yếu tố đảm bảo khả năng sử dụng

• Sự dễ dùng

• Hiệu suất sử dụng cao

• Sự dễ ghi nhớ

• Lỗi của người dùng

• Sự thỏa mãn của người dùng

• 8 nguyên tắc vàng của shneiderman giúp thiết kế đảm bảo khả năng sử dụng

• Cách đánh giá khả năng sử dụng của một sản phẩm

3.4. Thiết kế hành vi người dùng

• Mô hình hành vi BJ Fogg

• Cách sử dụng mô hình BJ Fogg vào thiết kế hành vi

• Thiết kế cảm xúc

• Thói quen người dùng

• Lôi kéo người dùng

3.5. Phân tích và xây dựng các chức năng

• Phân tích nhiệm vụ

• Kịch bản tương tác của người dùng

• Phác thảo ý tưởng

• Sử dụng Figma phân tích nhiệm vụ

3.6. Thiết kế kiến trúc thông tin

• Kiến trúc thông tin 

• Phân tích thông tin

• Thiết kế kiến trúc thông tin 

• Sử dụng Figma để sơ đồ thiết kế kiến trúc thông tin

3.7. Thiết kế tương tác

• Các thành phần trên trang

• Các loại trang

• Các loại tương tác giữa người dùng và sản phẩm

• Phân loại ứng dụng

3.8. Thiết kế giao diện người dùng UI

• Ngôn ngữ thiết kế

• Yếu tố màu sắc

• Yếu tố văn bản

• Yếu tố đồ họa và hình ảnh

• Yếu tố chuyển động

• Không gian

• Lưới và bố cục

• Các nguyên tắc thiết kế

Phần 4: Hoàn chỉnh Project - Thực hành cuối môn

• Xem xét, nhận xét, đánh giá bài thực hành của học viên

• Đưa ra Feedback hoàn thiện

• Tổng kết môn và tóm tắt kiến thức.