Với nỗ lực không ngừng nghỉ, Nguyễn Hồng Thái – sinh viên chuyên ngành Lập trình Web tại trường Cao đẳng FPT Polytechnic cơ sở TP HCM đã gây ấn tượng với giảng viên nhà Ong bởi thiết kế website thương mại điện tử trong môn học HTML5 và CSS3 gần đây.
Cách bố trí các phần trên trang sàn thương mại điện tử của Thái được bố trí hợp lý, tạo ra một luồng giao tiếp trực quan và dễ dàng cho người dùng. Việc sử dụng màu sắc hài hòa và hình ảnh chất lượng cao đã góp phần tạo nên một giao diện đẹp mắt và chuyên nghiệp.
Đối với các tính năng tìm kiếm, lọc sản phẩm và các nút kêu gọi hành động Thái lựa chọn thiết kế thông minh, giúp người dùng dễ dàng tìm thấy những gì họ cần. Từ việc lựa chọn phông chữ, màu sắc cho đến cách trình bày thông tin sản phẩm, tất cả đều thể hiện sự tỉ mỉ và cẩn trọng của cậu bạn.
Đặc biệt, Thái đã vượt hơn mong đợi ở môn học này khi hiểu biết sâu sắc về nguyên tắc thiết kế. Cậu bạn áp dụng thành công các nguyên tắc thiết kế giao diện người dùng (UI/UX) để tạo ra một trang web trực quan và dễ sử dụng. Cách bố trí các phần trên trang web cho thấy một khả năng tư duy logic và khả năng phân tích thông tin xuất sắc. Mặc dù tuân thủ các nguyên tắc thiết kế cơ bản, Nguyễn Hồng Thái vẫn mang đến những nét độc đáo và sáng tạo riêng cho sản phẩm của mình.
3 trang nổi bật nhất trong bài của Thái bao gồm (Homepage, Product, About Us):
Homepage
Bố cục và thiết kế
- Trang chủ có bố cục rõ ràng, dễ nhìn và dễ sử dụng.
- Các phần được phân chia hợp lý với các sản phẩm nổi bật, sản phẩm giảm giá và sản phẩm được đánh giá cao.
- Thiết kế tối giản và chuyên nghiệp, sử dụng màu trắng chủ đạo kết hợp với màu cam và đen tạo nên sự tươi mới và thu hút.
Hình ảnh và nội dung
- Hình ảnh sản phẩm sắc nét, chất lượng cao, giúp khách hàng dễ dàng nhìn thấy chi tiết sản phẩm.
- Thông tin sản phẩm được trình bày rõ ràng, bao gồm tên sản phẩm, giá, và số lượng đánh giá.
- Các banner quảng cáo nổi bật, đặc biệt là phần “Daily Deals” với thiết kế bắt mắt.
Tính năng và tiện ích
- Có các tab “Featured”, “On Sale”, “Top Rated” giúp người dùng dễ dàng tìm kiếm sản phẩm phù hợp.
- Mục “Deals & Outlet” cung cấp các sản phẩm đang giảm giá, tạo động lực mua sắm cho khách hàng.
- Các tính năng hỗ trợ khách hàng như “Free Shipping”, “Free Return”, “Get 20% Off 1 Item”, và “We Support 24/7” được đặt ở vị trí dễ thấy, tạo sự tin tưởng cho người dùng.
Footer
- Footer có đầy đủ các liên kết hữu ích như “About Us”, “Product”, “FAQ”, “Contact Us” và các thông tin về dịch vụ khách hàng.
- Thông tin liên lạc và các phương thức thanh toán được hiển thị rõ ràng.
- Tốc độ và Hiệu suất:
- Trang chủ cần được tối ưu để đảm bảo tốc độ tải trang nhanh chóng, giúp cải thiện trải nghiệm người dùng.
About Us
Bố cục và Thiết kế
- Bố cục rõ ràng, dễ nhìn với các phần được phân chia hợp lý: Vision, Mission và Who We Are.
- Hình ảnh chất lượng cao và phù hợp với nội dung, giúp tạo nên sự chuyên nghiệp và thân thiện.
- Màu sắc hài hòa, giữ nguyên phong cách thiết kế của trang chủ với tông màu trắng, cam và đen.
Nội dung:
- Phần Vision và Mission trình bày rõ ràng, giúp khách hàng hiểu rõ hơn về mục tiêu và phương châm hoạt động của công ty.
- Phần Who We Are cung cấp cái nhìn tổng quan về đội ngũ và văn hóa doanh nghiệp, giúp tạo sự kết nối và tin tưởng từ khách hàng.
- Sử dụng Lorem Ipsum làm nội dung mẫu, cần được thay thế bằng thông tin thực tế của công ty.
Hình ảnh và Đồ họa:
- Các logo của các thương hiệu thiết kế nổi tiếng ở phần dưới trang tạo nên sự uy tín và đẳng cấp.
Footer:
- Cung cấp các liên kết nhanh đến các trang dịch vụ khách hàng như phương thức thanh toán, chính sách đổi trả, và chính sách bảo mật.
- Khả năng Cải thiện:
- Có thể thêm một số hình ảnh hoặc video về hoạt động nội bộ, các sự kiện, hoặc các thành tựu nổi bật của công ty để tăng tính thuyết phục và hấp dẫn.
Product:
Bố cục và Thiết kế
- Bố cục gọn gàng, dễ nhìn với các sản phẩm được trình bày theo lưới, giúp khách hàng dễ dàng tìm kiếm và so sánh sản phẩm.
- Màu sắc và phong cách thiết kế đồng nhất với các trang khác trên website, tạo nên sự nhất quán và chuyên nghiệp.
Bộ lọc và Sắp xếp
- Có bộ lọc sản phẩm theo danh mục (Category) và giá (Price Range), giúp người dùng dễ dàng tìm kiếm sản phẩm theo nhu cầu.
- Tính năng sắp xếp sản phẩm theo mức độ phổ biến (Most Popular) cũng rất hữu ích cho khách hàng.
Trên trang thông tin sản phẩm, thông tin các món hàng được hiển thị đủ tên, giá, và số lượng đánh giá. Điều này giúp khách hàng có cái nhìn tổng quan về sản phẩm và độ tin cậy của nó. Giá của các sản phẩm được hiển thị rõ ràng, cùng với các mức giảm giá nổi bật, thu hút sự chú ý của khách hàng. Các sản phẩm đang giảm giá được đánh dấu rõ ràng, giúp khách hàng dễ nhận biết.
Bên cạnh đó, Footer của website có đầy đủ thông tin liên lạc và các liên kết hữu ích, tương tự như các trang khác. Cung cấp các liên kết nhanh đến các trang dịch vụ khách hàng như phương thức thanh toán, chính sách đổi trả, và chính sách bảo mật.
Nhận xét về sản phẩm của nam sinh, giảng viên Lưu Minh Ngọc cho hay: “Với bài tập lần này, Thái có thể thêm nhiều tùy chọn lọc sản phẩm hơn (ví dụ: theo thương hiệu, tính năng, đánh giá của khách hàng) để tăng tính tiện ích cho người dùng. Bên cạnh đó, bạn cần đảm bảo tốc độ tải trang nhanh chóng để cải thiện trải nghiệm người dùng, đặc biệt là khi có nhiều sản phẩm.”
Giảng viên: Lưu Minh Ngọc
Bộ môn Công nghệ thông tin
FPT Polytechnic TP HCM
