Khóa học Thiết kế UX và Web Responsive

Bài học 1 • Quy trình Tư duy Thiết kế

Giới thiệu khung tư duy thiết kế năm giai đoạn như một phương pháp giải quyết vấn đề. Cung cấp tư duy lặp lại được áp dụng trong tất cả các chương tiếp theo.

Bài học 2 • Ý nghĩa Thực sự của Thiết kế UX

Định nghĩa UX vượt ra ngoài thẩm mỹ, bao gồm tính hữu dụng, tiện ích và mức độ mong muốn. Thiết lập từ vựng được sử dụng trong suốt khóa học.

Bài học 3 • Khả năng Tiếp cận và Thiết kế Bao hàm

Thiết lập khả năng tiếp cận như một yêu cầu thiết kế cốt lõi, không phải là suy nghĩ sau cùng. Giới thiệu các hướng dẫn tiếp cận nội dung toàn cầu và nguyên tắc thiết kế bao hàm.

Bài học 1 • Khảo sát và Phương pháp Định lượng

Giới thiệu thiết kế khảo sát, điểm chuẩn khả dụng và diễn giải phân tích. Bổ sung các phát hiện định tính bằng dữ liệu hành vi đo lường được.

Bài học 2 • Phỏng vấn và Điều tra Ngữ cảnh

Dạy các kỹ thuật phỏng vấn có cấu trúc và bán cấu trúc cùng với quan sát trong ngữ cảnh. Xây dựng kỹ năng nắm bắt hành vi và động lực xác thực của người dùng.

Bài học 3 • Lập kế hoạch cho một Nghiên cứu

Đề cập đến mục tiêu, phạm vi và lựa chọn phương pháp nghiên cứu trước khi bắt đầu thực địa. Đảm bảo các câu hỏi nghiên cứu phù hợp với các quyết định thiết kế cần đưa ra.

Bài học 1 • Sơ đồ Trang và Thứ bậc Nội dung

Tạo ra các tài liệu sơ đồ trang chính thức để truyền đạt cấu trúc cho các bên liên quan và nhà phát triển. Điều chỉnh thứ bậc nội dung phù hợp với mô hình tư duy người dùng từ nghiên cứu.

Bài học 2 • Phân loại Thẻ và Kiểm tra Cây

Dạy phân loại thẻ mở và đóng để xác thực cấu trúc danh mục với người dùng. Kiểm tra cây xác minh nhãn điều hướng trước khi áp dụng thiết kế thị giác.

Bài học 3 • Thiết kế Hệ thống Điều hướng

Đề cập đến các mẫu điều hướng toàn cục, cục bộ và theo ngữ cảnh cho web và di động. Kết nối thiết kế điều hướng với các luồng nhiệm vụ người dùng được thiết lập trong nghiên cứu.

Bài học 1 • Công cụ Tạo Khung dây Kỹ thuật số

Đề cập đến các công cụ tạo khung dây tiêu chuẩn ngành để tạo bố cục màn hình có độ trung thực trung bình. Xây dựng sự thành thạo công cụ được áp dụng trong các giai đoạn tạo nguyên mẫu và bàn giao.

Bài học 2 • Phác thảo và Khung dây Độ trung thực Thấp

Giới thiệu phác thảo nhanh và khung dây giấy như các công cụ phát triển ý tưởng nhanh. Các hiện vật độ trung thực thấp truyền đạt bố cục mà không làm phân tâm các bên liên quan bởi sự trau chuốt thị giác.

Bài học 3 • Xây dựng Nguyên mẫu Tương tác

Kết nối các khung dây thành các luồng có thể nhấp mô phỏng hành vi sản phẩm thực tế. Nguyên mẫu được xác định phạm vi để kiểm thử các nhiệm vụ người dùng cụ thể được xác định trong nghiên cứu.

Bài học 4 • Kiểm thử Khả dụng với Nguyên mẫu

Áp dụng nguyên mẫu trong các bài kiểm thử khả dụng có người điều phối và không điều phối để xác thực các quyết định thiết kế. Đóng vòng lặp nghiên cứu-thiết kế trước khi đầu tư vào thiết kế thị giác.

Bài học 1 • Bố cục, Khoảng cách và Thứ bậc Thị giác

Áp dụng hệ thống lưới, thang khoảng cách và trọng lượng thị giác để hướng sự chú ý của người dùng. Khoảng cách và thứ bậc nhất quán giảm tải nhận thức và cải thiện khả năng quét.

Bài học 2 • Thiết kế Chữ cho Giao diện Kỹ thuật số

Đề cập đến lựa chọn mặt chữ, tỉ lệ, khoảng cách dòng và độ tương phản cho khả năng đọc trên màn hình. Các quyết định về thiết kế chữ ảnh hưởng trực tiếp đến khả năng tiếp cận và nhận thức thương hiệu.

Bài học 3 • Lý thuyết Màu sắc và Hệ thống Màu UI

Dạy về tâm lý màu sắc, yêu cầu độ tương phản và xây dựng bảng màu có hệ thống. Một hệ thống màu có cấu trúc đảm bảo tính nhất quán trên tất cả các trạng thái giao diện.

Bài học 4 • Thiết kế Biểu tượng và Hình ảnh

Đề cập đến nguyên tắc thiết kế biểu tượng, lựa chọn hình ảnh và phong cách minh họa cho ngữ cảnh UI. Tài nguyên hình ảnh phải củng cố ý nghĩa mà không tạo ra sự mơ hồ.

Bài học 1 • Media Query và Điểm Ngắt

Áp dụng truy vấn min-width và max-width để thích ứng bố cục tại các điểm ngắt đã xác định. Đề cập đến cú pháp phạm vi hiện đại và container query cho khả năng thích ứng cấp thành phần.

Bài học 2 • CSS Flexbox cho Bố cục Thích ứng

Dạy về trục, căn chỉnh và ngắt dòng của Flexbox để xây dựng các thành phần thích ứng một chiều. Flexbox được áp dụng cho thanh điều hướng, hàng thẻ và bố cục biểu mẫu.

Bài học 3 • Hình ảnh và Phương tiện Thích ứng

Dạy về srcset, sizes và phần tử picture để phục vụ hình ảnh có kích thước phù hợp. Phân phối phương tiện tối ưu cải thiện hiệu suất trên mọi loại thiết bị.

Bài học 4 • CSS Grid cho Bố cục Phức tạp

Đề cập đến khu vực mẫu Grid, tự động đặt vị trí và đường đặt tên cho bố cục hai chiều. Grid cho phép cấu trúc cấp trang mà Flexbox một mình không thể đạt được.

Bài học 1 • Bộ chọn Nâng cao và Tính Đặc hiệu

Dạy về pseudo-class, pseudo-element và quản lý tính đặc hiệu để CSS có thể bảo trì. Giảm xung đột phong cách thường gặp trong các cơ sở mã thích ứng lớn.

Bài học 2 • Kiến trúc và Khả năng Mở rộng CSS

Giới thiệu BEM, ưu tiên tiện ích và CSS Modules như các phương pháp cho bảng định kiểu có khả năng mở rộng. Kiến trúc có khả năng mở rộng ngăn ngừa xung đột tính đặc hiệu trong các dự án thích ứng lớn.

Bài học 3 • Chuyển tiếp CSS và Hoạt ảnh Vi mô

Áp dụng thuộc tính chuyển tiếp để tạo ra các thay đổi trạng thái mượt mà củng cố phản hồi tương tác. Hoạt ảnh vi mô cải thiện hiệu suất cảm nhận và hướng sự chú ý của người dùng.

Bài học 4 • Hoạt ảnh Keyframe CSS

Xây dựng hoạt ảnh nhiều bước phức tạp bằng @keyframes cho trạng thái tải và luồng giới thiệu. Đề cập đến các thuộc tính an toàn về hiệu suất và điều phối hoạt ảnh.

Bài học 1 • Thực tiễn Tốt nhất về Bàn giao Thiết kế

Đề cập đến chú thích, thông số đường đỏ và quy trình xuất tài nguyên giúp giảm sự mơ hồ cho nhà phát triển. Tài liệu bàn giao chính xác ngăn ngừa các lỗi triển khai tốn kém.

Bài học 2 • QA và Kiểm thử Thiết kế Thích ứng

Áp dụng kiểm thử đa trình duyệt và đa thiết bị để xác minh hành vi thích ứng khớp với ý đồ thiết kế. QA thu hẹp khoảng cách giữa thông số thiết kế và triển khai thực tế.

Bài học 3 • Chỉ số UX và Đo lường Thành công

Xác định các chỉ số định lượng và định tính kết nối quyết định UX với kết quả kinh doanh. Các chỉ số được thiết lập ở đây hướng dẫn đánh giá sau khi ra mắt trong dự án cuối cùng.

Bài học 4 • Dự án Tổng kết và Trình bày Hồ sơ

Tổng hợp tất cả kỹ năng khóa học thành một nghiên cứu điển hình UX và thiết kế web thích ứng hoàn chỉnh. Trình bày hồ sơ chuẩn bị cho học viên các cuộc phỏng vấn thiết kế chuyên nghiệp.