Thiết kế dành cho lập trình viên

Điều kiện tiên quyết

Trước khi bắt đầu mô-đun này, bạn cần quen thuộc với HTML và CSS.

Bài học

Lý thuyết thiết kế cơ bản

Kết quả học tập:

• Kiến thức cơ bản về thiết kế UI:
  • Tương phản.
  • Chữ (Typography).
  • Phân cấp trực quan.
  • Tỉ lệ.
  • Căn chỉnh.
  • Sử dụng khoảng trắng.
• Lý thuyết màu sắc.
• Sử dụng hình ảnh.

Tài nguyên:

• Kiến thức cơ bản về tạo kiểu văn bản và phông chữ

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

Kết quả học tập:

• Hiểu rằng mọi thứ chúng ta làm là vì người dùng.
• Giới thiệu về nghiên cứu/kiểm thử người dùng, và yêu cầu của người dùng.
• Thiết kế cho khả năng tiếp cận — xem xét đối tượng mục tiêu và những nhu cầu bổ sung mà họ có thể có. Thiết kế cho những điều đó ngay từ đầu.
• Hiểu các mẫu thiết kế là gì, và các mẫu phổ biến được sử dụng trên web, ví dụ:
  • Chế độ tối.
  • Đường dẫn điều hướng (breadcrumb).
  • Thẻ (card).
  • Đăng ký trì hoãn/lười.
  • Cuộn vô hạn.
  • Hộp thoại modal.
  • Tiết lộ lũy tiến.
  • Chỉ báo tiến trình trong các biểu mẫu/đăng ký/thiết lập.
  • Giỏ hàng.

Tài nguyên:

• Tổng quan về khả năng tiếp cận
• Nguyên tắc thiết kế bao gồm

Tóm tắt thiết kế

Kết quả học tập:

• Nói ngôn ngữ thiết kế, để giao tiếp với các nhà thiết kế.
• Diễn giải các yêu cầu của tóm tắt thiết kế để tạo ra một triển khai.
• Các công cụ điển hình mà các nhà thiết kế sử dụng để truyền đạt thông điệp của họ cho các nhà phát triển (ví dụ: Figma).

Xem thêm

• Learn UI Design Fundamentals, Scrimba ^{Course Partner}
• The Shape of Design, Frank Chimero
• Designing for the Web, Mark Boulton
• Design for web, Prisca Schmarsow + other contributors
• Practical Typography, Matthew Butterick
• Web Style Guide, Patrick J. Lynch and Sarah Horton
• Visual design rules you can safely follow every time, Anthony Hobday
• 16 little UI design rules that make a big impact, Adham Dannaway

• Overview: Các mô-đun học tập cốt lõi
• Next