Dự án website Heweida do Thiết Kế Web DC thực hiện cho công ty thiết bị sóng siêu âm tại Việt Nam, giai đoạn 2024 đến 2025: một website ba ngôn ngữ xếp tám nhóm máy công nghiệp.
Thông tin dự án
Bảng dưới tổng hợp thông tin của dự án, lấy từ trang chủ, chân trang và mã trang của website. Thời gian thực hiện ghi theo khoảng năm. Mọi dòng đều đối chiếu được trên website. Dự án thuộc nhóm thiết kế website doanh nghiệp trong mảng thiết kế website của Thiết Kế Web DC.
| Hạng mục | Nội dung |
| Khách hàng | Công ty TNHH Thiết bị sóng siêu âm Heweida Việt Nam |
| Lĩnh vực | Máy tẩy rửa và máy hàn sóng siêu âm, máy hàn cao tần, máy lọc nước, máy làm lạnh, máy sấy, dây chuyền xi mạ |
| Ngôn ngữ | Tiếng Việt, tiếng Anh, tiếng Trung |
| Thời gian | 2024 đến 2025 |
| Nền tảng | WordPress, theme Flatsome, WooCommerce, Polylang |
| Đơn vị thực hiện | Thiết Kế Web DC |
| Website | vnheweida.com |
Điểm nổi bật của dự án
Dự án có năm điểm đáng chú ý, và cả năm nằm ở cách Thiết Kế Web DC tổ chức danh mục và ngôn ngữ chứ không ở hiệu ứng. Mỗi điểm kiểm lại được trực tiếp trên vnheweida.com, và phần sau của bài ghi chi tiết từng điểm. Thứ tự đi từ danh mục tới giao diện.
1. Tám nhóm máy, 29 sản phẩm hiển thị ngay trên trang chủ.
2. Ba ngôn ngữ Việt, Anh, Trung, mỗi ngôn ngữ có danh sách liên hệ riêng.
3. Menu sản phẩm mở tám nhóm máy và cố định khi cuộn trang.
4. Thanh liên hệ cố định ở chân màn hình máy tính.
5. Chữ trắng trên nền xanh dương đậm đạt tương phản 10,19:1, vượt chuẩn WCAG AA.
Bối cảnh của dự án
Heweida Việt Nam cung cấp thiết bị sóng siêu âm và máy công nghiệp cho khách ở nhiều khu vực, nên Thiết Kế Web DC làm website theo mô hình giới thiệu doanh nghiệp kèm danh mục sản phẩm. Người xem cần tìm đúng loại máy, xem từng mẫu và biết liên hệ đầu mối nào.
Sản phẩm và khu vực của công ty
DC xếp sản phẩm thành tám nhóm gồm máy tẩy rửa sóng siêu âm, máy hàn sóng siêu âm, máy hàn kim loại siêu âm, máy hàn cao tần, máy lọc nước công nghiệp, máy làm lạnh nước công nghiệp, máy sấy công nghiệp và dây chuyền xi mạ. Công ty có hai khu vực liên hệ, miền Nam tại Bình Hòa, TP.HCM và miền Bắc tại Phương Liễu, Bắc Ninh, cùng một đầu mối bên Trung Quốc.
Định hướng thiết kế
Thiết Kế Web DC xác định bốn mục tiêu cho website: cho người xem tìm đúng nhóm máy từ mọi trang, xem được từng mẫu máy bằng tên mẫu, đọc website bằng ngôn ngữ của mình và gọi đúng đầu mối theo khu vực. Phần sau của bài ghi DC làm từng mục tiêu bằng menu, bố cục và các thành phần cụ thể nào.
Trải nghiệm người dùng
Thiết Kế Web DC sắp xếp website để người xem đi từ chọn ngôn ngữ tới chọn nhóm máy rồi tới liên hệ, không qua nhiều bước. Mục này chỉ ghi đường đi, còn màu, chữ và thanh liên hệ nằm ở mục Thiết kế giao diện. Tiếp theo là người xem, sơ đồ trang và luồng chọn nhóm máy.
Người xem website
DC hình dung hai nhóm người xem dựa trên nội dung website, không dựa trên số liệu hành vi thật. Nhóm thứ nhất là khách trong nước đã biết loại máy cần mua, họ muốn vào thẳng nhóm máy và xem tên mẫu. Nhóm thứ hai là khách nước ngoài, họ cần đọc bằng tiếng Anh hoặc tiếng Trung và tìm đúng người liên hệ.
Sơ đồ trang
DC chia website thành các nhóm trang theo cách khách doanh nghiệp tìm hiểu một nhà cung cấp thiết bị.
- Giới thiệu: mô tả công ty.
- Sản phẩm: tám nhóm máy, mỗi nhóm có trang riêng liệt kê các mẫu, mỗi mẫu có trang chi tiết.
- Tin tức: bài kiến thức về máy tẩy rửa, nguyên lý máy hàn siêu âm.
- Tuyển dụng và Liên hệ: hai trang đứng riêng trên menu.
- Bản tiếng Anh và tiếng Trung: mỗi ngôn ngữ có trang chủ riêng.
Luồng người dùng
Người xem chọn ngôn ngữ ở thanh trên cùng, rồi mở menu Sản phẩm, chọn nhóm máy, chọn mẫu và xem trang chi tiết. Người biết tên mẫu dùng ô tìm kiếm để vào thẳng. Ở mọi bước, danh sách liên hệ theo khu vực luôn nằm ở chân màn hình hoặc chân trang.
Thiết kế giao diện
Thiết Kế Web DC dựng giao diện trên theme Flatsome, dùng nền trắng, xanh dương đậm làm màu chủ đạo và phông Roboto. Màu được DC đo trực tiếp trên website đang chạy. Phần này ghi phông chữ, bố cục trang chủ, thanh menu, thành phần giao diện và nút liên hệ nổi.
Phông chữ
DC dùng một phông Roboto cho tiêu đề, menu và nội dung, đọc rõ ở cả tên nhóm viết hoa lẫn tên mẫu dài như "Máy hàn nhựa sóng siêu âm HWD-2020A". Một phông duy nhất giữ giao diện đồng nhất giữa ba ngôn ngữ.
Bố cục trang chủ
DC thiết kế thanh trên cùng ghi email và bộ chọn ngôn ngữ. Màn hình đầu chia hai cột, một cột là danh sách tám nhóm máy và cột còn lại là banner dạng slider. Bên dưới, trang chủ xếp theo thứ tự sau:
1. Tám khối nhóm sản phẩm: mỗi nhóm có tiêu đề viết hoa và các sản phẩm tiêu biểu, tổng cộng 29 sản phẩm.
2. Tin tức: sáu bài mới gồm bài kiến thức và bài tuyển dụng.
3. Chân trang: tên công ty, hai khu vực miền Nam và miền Bắc, danh sách liên hệ, các trang hỗ trợ như quy trình mua hàng và chính sách đổi trả.
Thanh menu
DC đặt menu ở đầu trang và cho menu cố định khi cuộn. Sáu mục là Trang chủ, Giới thiệu, Sản phẩm, Tin tức, Tuyển dụng, Liên hệ. Mục Sản phẩm mở ra tám nhóm máy, và ô tìm kiếm nằm ở thanh đầu trang.
Thành phần giao diện
DC chọn xanh dương đậm làm màu chủ đạo vì màu này tạo độ tương phản cao với chữ trắng trên các khối nền. Bảng màu bên dưới áp dụng cho các thành phần lặp lại trên website.
| Mã màu | Dùng cho |
| #033e8a | Các khối nền và điểm nhấn |
| #0a0a0a | Chữ nội dung và tên máy |
| #4a4a4a | Chữ phụ |
| #ffffff | Nền trang và chữ trên khối xanh |
| #ee9b00 | Thành phần nhỏ |
| #6db703 | Thành phần nhỏ |
DC kiểm tra tương phản các cặp màu chính theo chuẩn WCAG 2.1. Chữ trắng trên nền `#033e8a` đạt 10,19:1, chữ `#0a0a0a` đạt 19,8:1 và chữ `#4a4a4a` đạt 8,86:1 trên nền trắng, đều vượt mức 4,5:1 của chuẩn AA. Thẻ sản phẩm gồm ảnh máy và tên mẫu, xếp thành lưới theo từng nhóm.
Nút liên hệ nổi
DC làm một thanh liên hệ cố định ở chân màn hình, nền xanh `#0b3d73`, chữ trắng đạt 10,88:1. Thanh này chỉ hiện trên máy tính, có biểu tượng Zalo và cuộn ngang khi danh sách dài. Mỗi ngôn ngữ có một danh sách riêng, bản tiếng Trung hiển thị tên bằng chữ Hán. Plugin All in One Contact Buttons cung cấp các biểu tượng liên hệ, trong đó có Zalo.
Công nghệ và kỹ thuật
Thiết Kế Web DC dựng website trên WordPress với theme Flatsome kèm child theme. Website này thuộc nhóm thiết kế website bằng WordPress. Công nghệ được chia thành giao diện, phần chạy phía sau, kỹ thuật nền và quản trị, và mỗi phần chỉ ghi cái thấy trong mã trang.
Front-end: Flatsome và child theme dựng trang thiết bị
DC dựng phần người xem thấy bằng theme Flatsome và một child theme riêng. Flatsome cung cấp banner dạng slider, menu cố định và lưới sản phẩm, còn child theme giữ riêng phần chỉnh sửa để cập nhật theme không làm mất giao diện đã tùy chỉnh.
Back-end: WordPress, WooCommerce và Polylang
Thiết Kế Web DC dựng phần chạy phía sau trên WordPress 6.9.11, ghi trong thẻ generator của trang. WooCommerce 10.9.4 quản lý danh mục và trang từng sản phẩm, Polylang quản lý ba ngôn ngữ, còn Site Kit by Google kết nối công cụ thống kê của Google.
Kỹ thuật nền
Website chạy qua kết nối HTTPS, hỗ trợ giao thức HTTP/3 và dùng plugin LiteSpeed Cache. Trang khai báo ba ngôn ngữ vi, en, zh, có dữ liệu có cấu trúc JSON-LD cho tổ chức, website và đường dẫn trang, cùng sơ đồ trang XML. Google Tag Manager được gắn vào trang.
Quản trị website
Công ty quản trị nội dung trong WordPress: thêm sản phẩm trong WooCommerce, đăng tin, sửa menu và cập nhật từng ngôn ngữ bằng Polylang. Khối Tin tức trên trang chủ lấy bài mới từ chuyên mục tin tức, nên công ty đăng bài thì trang chủ cập nhật theo.
Kết quả
Hai nhóm kết quả được ghi ở đây là số đo trang chủ và tính năng chạy được. Thiết Kế Web DC chỉ nêu cái thấy rõ trong mã trang chủ hoặc trên menu, đã đối chiếu từng mục trên website đang chạy. Anh chị có thể kiểm lại trên vnheweida.com.
Số đo website sau khi dựng
Hai lần đo PageSpeed Insights trên trang chủ cho cùng kết quả, và bảng dưới ghi số đo bản máy tính.
| Chỉ số | Kết quả đo |
| Điểm SEO | 100/100 |
| Thời gian hiển thị nội dung chính (LCP) | 0,6 giây |
| Độ ổn định bố cục (CLS) | 0,001 |
LCP và CLS của website đều ở mức "tốt" theo Google, với LCP dưới 2,5 giây và CLS dưới 0,1.
Tính năng chạy được
Bảng sau ghi các tính năng chạy trên trang chủ, kiểm lại được trên website.
| Tính năng | Cách hoạt động |
| Ba ngôn ngữ | Bộ chọn ở thanh trên cùng, mỗi ngôn ngữ có trang chủ riêng |
| Menu sản phẩm | Mở ra tám nhóm máy từ mọi trang |
| Menu cố định | Thanh menu bám theo người xem khi cuộn trang |
| Ô tìm kiếm | Nhập nội dung để tìm sản phẩm |
| Thanh liên hệ cố định | Danh sách liên hệ theo ngôn ngữ, hiện trên máy tính |
| Gọi một chạm | Số điện thoại dùng liên kết `tel:` |
| Banner slider | Dải ảnh trượt ở màn hình đầu |
Nội dung bài dựa trên giao diện máy tính và chưa kiểm bố cục, tốc độ trên điện thoại.
Website Heweida cho thấy cách xếp một danh mục máy công nghiệp lớn thành tám nhóm rõ ràng, nơi người xem chọn ngôn ngữ, chọn nhóm máy rồi liên hệ đúng đầu mối.
Ngoài dự án này, DC còn nhiều website khác tại các dự án khác và mức chi phí tại bảng báo giá thiết kế website trọn gói. Đơn vị cung cấp máy móc cần website đa ngôn ngữ có thể liên hệ Thiết Kế Web DC để nhận tư vấn.
Bạn cần website cho công ty thiết bị, nhà máy hay đơn vị cung cấp máy công nghiệp? DC làm từ giao diện, danh mục sản phẩm đến nhiều ngôn ngữ. Liên hệ DC để nhận tư vấn danh mục sản phẩm và báo giá phù hợp.
