| STT |
Tên Thành Phần |
Vai Trò trong Thiết Kế Web |
Lưu ý |
| 1 |
Icon (Biểu tượng) |
Giúp định hướng người dùng, tiết kiệm không gian, tăng tính thẩm mỹ. |
Cần nhất quán về phong cách, kích thước, màu sắc. Dễ hiểu, dễ nhận biết. |
| 2 |
Hình ảnh (Images) |
Thu hút sự chú ý, truyền tải thông điệp trực quan, tạo cảm xúc. |
Chất lượng cao, tối ưu kích thước/định dạng (JPG, PNG, WebP) để tải nhanh. Phù hợp nội dung. |
| 3 |
Video |
Giới thiệu sản phẩm/dịch vụ, hướng dẫn, tăng thời gian ở lại trang. |
Tối ưu hóa kích thước và định dạng, có tùy chọn điều khiển (play/pause, âm lượng). |
| 4 |
Logo |
Xây dựng thương hiệu, tạo sự chuyên nghiệp và đáng tin cậy. |
Vị trí dễ thấy, kích thước hợp lý, rõ ràng trên mọi thiết bị. |
| 5 |
Banner/Carousel |
Quảng bá sản phẩm/dịch vụ, thông báo tin tức, thu hút sự chú ý. |
Hình ảnh chất lượng, thông điệp rõ ràng, tối ưu tốc độ tải. |
| 6 |
Menu/Navigation |
Hướng dẫn người dùng di chuyển giữa các trang, cấu trúc website. |
Rõ ràng, dễ tìm, dễ sử dụng (khoảng cách các mục đủ lớn), Responsive. |
| 7 |
Button (Nút bấm) |
Kêu gọi hành động, dẫn dắt người dùng thực hiện tác vụ. |
Thiết kế nổi bật, có trạng thái hover/active, văn bản CTA rõ ràng. |
| 8 |
Form (Biểu mẫu) |
Thu thập thông tin từ người dùng (đăng ký, liên hệ…). |
Dễ điền, rõ ràng, có thông báo lỗi/thành công, thiết kế gọn gàng. |
| 9 |
Widget |
Cung cấp thông tin nhanh, tăng tương tác. |
Không gây phân tâm, tải nhanh, dễ tắt/thu nhỏ nếu không cần. |
| 10 |
Đường nét (Line) |
Tạo cấu trúc, phân chia khu vực, hướng dẫn tầm nhìn. |
Sử dụng hợp lý để tạo sự cân đối và rõ ràng. |
| 11 |
Hình khối (Shape/Form) |
Tạo bố cục, điểm nhấn, yếu tố trang trí. |
Hài hòa với tổng thể, có thể tạo ra sự cân bằng hoặc tương phản. |
| 12 |
Màu sắc (Color) |
Tạo cảm xúc, nhận diện thương hiệu, phân biệt các thành phần. |
Phù hợp với thương hiệu, dễ nhìn (độ tương phản cao giữa chữ và nền), tuân thủ tâm lý màu sắc. |
| 13 |
Kết cấu (Texture) |
Tăng tính chân thực, chiều sâu cho thiết kế. |
Sử dụng tinh tế, không làm rối mắt hoặc nặng trang. |
| 14 |
Không gian (Space/Whitespace) |
Tạo sự thông thoáng, dễ đọc, tập trung vào nội dung chính. |
Rất quan trọng để tránh “rác mắt”, giúp mắt nghỉ ngơi và định hướng. |
| 15 |
Nghệ thuật sử dụng chữ (Typography) |
Đảm bảo khả năng đọc, thể hiện cá tính thương hiệu. |
Chọn font dễ đọc, kích thước phù hợp, có phân cấp rõ ràng (tiêu đề, phụ đề, nội dung). |
| 16 |
Thiết kế Responsive |
Đảm bảo trải nghiệm người dùng nhất quán trên Desktop, Tablet, Mobile. |
Các thành phần đồ họa cần được thiết kế co giãn, thích nghi với nhiều kích thước màn hình. |
| 17 |
Tối ưu hóa Tốc độ Tải Trang |
Cải thiện trải nghiệm người dùng, tăng thứ hạng SEO. |
Sử dụng định dạng ảnh hiện đại (WebP), nén ảnh, lazy loading, tối ưu CSS/JS. |
