Dự án website VHP Group do Thiết Kế Web DC thực hiện cho tập đoàn nhập khẩu và phân phối thực phẩm chức năng Hàn Quốc, phụ tùng ô tô, giai đoạn 2024 đến 2025: một website mẹ giới thiệu ba lĩnh vực và dẫn tới các website thương hiệu thành viên.
Thông tin dự án
Dự án thuộc nhóm thiết kế website doanh nghiệp, nơi người xem cần hiểu doanh nghiệp làm gì và liên hệ ai. Bảng dưới lấy thông tin từ trang chủ, trang Liên hệ và chân trang của website. Thời gian thực hiện tính theo khoảng năm. Dự án nằm 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 xuất nhập khẩu và kinh doanh VHP, thương hiệu VHP Group |
| Lĩnh vực | Nhập khẩu và phân phối thực phẩm chức năng, phụ tùng ô tô, xuất nhập khẩu nguyên liệu OEM, ODM |
| Khu vực | Hà Nội và TP.HCM |
| Thời gian | 2024 đến 2025 |
| Nền tảng | WordPress, theme Flatsome kèm child theme, Slider Revolution, Contact Form 7 |
| Đơn vị thực hiện | Thiết Kế Web DC |
| Website | vhpgroup.vn |
Đ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 DC chia việc giữa website mẹ và các website con chứ không ở hiệu ứng. Mỗi điểm đều kiểm lại được trực tiếp trên vhpgroup.vn, và phần sau của bài ghi chi tiết từng điểm. Thứ tự đi từ lĩnh vực tới liên hệ.
1. Ba thẻ lĩnh vực ngay dưới slider: VHP Ginseng, VHP Auto và VHP Group.
2. Hai khối thương hiệu thành viên đều ghi địa chỉ website riêng.
3. Chân trang ghi dữ kiện pháp lý: mã số thuế, địa chỉ, chi nhánh và showroom.
4. Trang Liên hệ chia ba đầu mối: tuyển dụng, truyền thông và hợp tác.
5. Màu đạt tương phản chuẩn WCAG AA: 8,87:1 cho xanh dương nút và 7,46:1 cho tiêu đề xám đậm.
Bối cảnh của dự án
VHP Group có hai nhóm hàng không liên quan nhau, mỗi nhóm đã có website riêng, nên Thiết Kế Web DC làm website mẹ theo mô hình giới thiệu tập đoàn, giữ trang đủ gọn để giới thiệu cả hai mà không biến thành bản sao của các website con.
Lĩnh vực và địa chỉ của khách
Thiết Kế Web DC chia nội dung theo ba lĩnh vực: thực phẩm chức năng nhập khẩu từ Hàn Quốc dưới thương hiệu VHP Ginseng, phụ tùng ô tô chính hãng dưới thương hiệu VHP Auto, và xuất nhập khẩu nguyên liệu, OEM, ODM dưới tên VHP Group. Các số năm hoạt động, số đại lý và vị trí trên thị trường là thông tin công ty tự ghi, nên bài chỉ nhắc khi có chữ "website ghi". Địa chỉ văn phòng ở Hà Nội, chi nhánh ở TP.HCM và showroom được ghi ở chân trang.
Định hướng thiết kế
DC đặt bốn mục tiêu cho website: người xem hiểu tập đoàn làm những mảng nào ngay màn hình đầu, đi tới đúng website thương hiệu thành viên, tin vào quy mô qua dữ kiện cụ thể, và tìm được đầu mối liên hệ đúng việc của mình. Slider, ba thẻ lĩnh vực, hai khối thương hiệu và trang Liên hệ chia đầu mối là cách DC thực hiện bốn mục tiêu này.
Trải nghiệm người dùng
Thiết Kế Web DC sắp xếp website theo người đang cân nhắc hợp tác với tập đoàn: xem lĩnh vực, đọc về doanh nghiệp, kiểm tra hoạt động rồi tìm đúng đầu mối liên hệ. Phần này chỉ ghi đường đi của người xem, còn màu và chữ nằm ở mục Thiết kế giao diện.
Người xem website
Hai nhóm người xem dưới đây là suy ra từ nội dung website, không phải kết quả khảo sát hành vi. Nhóm thứ nhất là đối tác tiềm năng như đại lý, nhà phân phối và đơn vị cần nguyên liệu hay gia công, họ kiểm tra doanh nghiệp có thật và có quy mô không. Nhóm thứ hai là ứng viên và người đọc tin, họ vào để xem tuyển dụng, hoạt động nội bộ và các bài báo nhắc đến doanh nghiệp.
Sơ đồ trang
DC chia website mẹ thành các nhóm trang theo mục đích của người xem.
- Trang chủ: slider, ba thẻ lĩnh vực, giới thiệu, hai khối thương hiệu, tin tức và lời mời hợp tác.
- Giới thiệu: khẩu hiệu, định hướng, tầm nhìn, sứ mệnh, giá trị cốt lõi, hoạt động cộng đồng và lịch sử hình thành.
- Tin tức - Sự kiện: ba nhóm hoạt động doanh nghiệp, hoạt động cộng đồng và điểm báo.
- Hồ sơ năng lực VHP: mục đứng riêng trên menu.
- Liên hệ: ba đầu mối kèm hotline, email, địa chỉ, mã số thuế và bản đồ.
- Tuyển dụng: các bài tin tuyển dụng.
Luồng người dùng
Đối tác tiềm năng đi từ ba thẻ lĩnh vực hoặc khối thương hiệu tới website riêng của VHP Ginseng hay VHP Auto, hoặc mở mục Hồ sơ năng lực để đánh giá nhà cung cấp. Người muốn hợp tác bấm "Đăng ký tư vấn" ở cuối trang chủ hoặc vào trang Liên hệ chọn đúng đầu mối. Ứng viên vào thẳng mục Tuyển dụng trên menu, còn người đọc tin vào Tin tức rồi chọn nhóm bài, hoặc dùng ô tìm kiếm trên thanh menu.
Thiết kế giao diện
Thiết Kế Web DC dựng giao diện trên theme Flatsome, nền trắng và xám nhạt, xanh dương cho nút, vàng làm điểm nhấn, một phông Roboto cho toàn trang. Màu và chữ đều lấy từ phép đo trên website đang chạy. Dưới đây là phông chữ, bố cục trang chủ, thanh menu và các thành phần giao diện.
Phông chữ
DC dùng Roboto cho toàn trang, đổi độ đậm và màu xám để tạo thứ bậc. Tiêu đề khối cỡ 24 px, đậm, màu xám đậm `#555555`, và tiêu đề khu vực cũng 24 px nhưng in hoa với dòng cao 38,4 px. Thân bài cỡ 16 px với dòng cao 25,6 px, nút chữ 12,8 px đậm. Cách này giữ các đoạn giới thiệu dài về lịch sử và thương hiệu đọc liền mạch.
Bố cục trang chủ
DC mở trang chủ bằng slider dựng bằng Slider Revolution. Dưới slider, trang chủ xếp theo thứ tự sau:
1. Lĩnh vực hoạt động: ba thẻ VHP Ginseng, VHP Auto và VHP Group, mỗi thẻ một câu mô tả.
2. Về chúng tôi: giới thiệu tập đoàn và tư tưởng 3T là Trách Nhiệm, Tận Tâm, Tử Tế.
3. VHP Ginseng: số năm hoạt động, thành tựu theo website ghi và địa chỉ website riêng.
4. VHP Auto: số năm hoạt động, thương hiệu phân phối và địa chỉ website riêng.
5. Hoạt động doanh nghiệp và tin điểm báo: bốn bài hoạt động và bốn bài điểm báo mới nhất.
6. Hợp tác: ba cam kết và nút "Đăng ký tư vấn".
7. Chân trang: pháp nhân, mã số thuế, địa chỉ, chi nhánh, showroom, hotline và email.
Thanh menu
DC giữ menu sáu mục gồm Trang chủ, Giới thiệu, Tin tức - Sự kiện, Hồ sơ năng lực VHP, Liên hệ và Tuyển dụng. Mục Tin tức thả xuống ba nhóm bài là hoạt động doanh nghiệp, hoạt động cộng đồng và điểm báo. Menu được cấu hình cố định khi cuộn, kèm ô tìm kiếm, và mục Hồ sơ năng lực đứng riêng để đối tác tìm thấy ngay khi đánh giá nhà cung cấp.
Thành phần giao diện
DC chọn xanh dương làm màu nút vì gợi sự đáng tin cho một tập đoàn nhập khẩu, rồi dùng vàng cho vài điểm nhấn nhỏ.
| Mã màu | Dùng cho |
| #0f4893 | Nút kêu gọi hành động như "Đăng ký tư vấn" |
| #ffd401 | Điểm nhấn nhỏ ở tiêu đề và biểu tượng |
| #d26e4b | Một số điểm nhấn phụ |
| #f7f7f7 | Nền các khối xen kẽ |
| #555555 | Tiêu đề khối |
Ở phần màu, DC tính tỷ lệ tương phản theo chuẩn WCAG 2.1. Chữ trắng trên nút xanh dương `#0f4893` đạt 8,87:1, tiêu đề `#555555` đạt 7,46:1 trên nền trắng và 6,96:1 trên nền `#f7f7f7`, đều vượt mức 4,5:1 mà chuẩn AA yêu cầu cho chữ thường. Các khối giới thiệu thương hiệu xen kẽ nền trắng với nền xám nhạt để tách từng lĩnh vực.
Công nghệ và kỹ thuật
Thiết Kế Web DC dựng website trên WordPress với theme Flatsome và child theme riêng. Website thuộc hướng thiết kế website bằng WordPress của DC. Phần này đi qua giao diện, phần chạy phía sau, kỹ thuật nền và quản trị, mỗi mục chỉ ghi cái mã trang cho thấy.
Front-end: Flatsome và Slider Revolution dựng trang tập đoàn
DC dựng phần người xem thấy bằng theme Flatsome cùng child theme `flatsome-child`. Phần slider đầu trang chạy bằng plugin Slider Revolution 5.4.1, ghi trong thẻ generator của trang, còn các khối nội dung dựng bằng bố cục của Flatsome.
Back-end: WordPress, Contact Form 7 và AddThis
Thiết Kế Web DC dựng phần chạy phía sau trên WordPress 7.1.4, quản lý trang, bài viết, danh mục tin và menu. Plugin Contact Form 7 cung cấp form liên hệ, plugin AddThis phục vụ chia sẻ bài viết, còn Yoast SEO sinh thẻ canonical, thẻ Open Graph và dữ liệu có cấu trúc.
Kỹ thuật nền
Website chạy trên máy chủ LiteSpeed qua kết nối HTTPS, và máy chủ khai báo hỗ trợ giao thức HTTP/3. Trang khai báo khung nhìn theo chiều rộng thiết bị và có sơ đồ trang XML. Dữ liệu có cấu trúc JSON-LD gồm các loại WebSite, WebPage, Organization và BreadcrumbList, kèm hành động tìm kiếm của website.
Quản trị website
Thiết Kế Web DC bàn giao website để công ty tự quản trị nội dung trong WordPress: đăng tin vào đúng nhóm hoạt động doanh nghiệp, hoạt động cộng đồng hoặc điểm báo, và đăng bài tuyển dụng. Các nhóm tin đều là danh mục riêng, nên mỗi bài mới tự vào đúng mục trên menu và hiện lại ở trang chủ. Website còn có trang riêng cho Hồ sơ năng lực và Tuyển dụng, tách khỏi trang Giới thiệu.
Kết quả
Phần cuối ghi số đo và tính năng của vhpgroup.vn. Thiết Kế Web DC kiểm lại từng dòng trên website đang chạy, và mỗi dòng chỉ ghi cái nhìn thấy trên trang chủ, trang Giới thiệu hoặc trong mã trang. Người đọc mở website là đối chiếu được từng tính năng. Mỗi bảng đều ngắn để dễ đối chiếu.
Số đo website sau khi dựng
Hai lần đo trang chủ bằng PageSpeed Insights cho kết quả trùng nhau, và bảng dưới là bản máy tính.
| Chỉ số | Kết quả đo |
| Điểm SEO | 92/100 |
| Thời gian hiển thị nội dung chính (LCP) | 1,5 giây |
| Độ ổn định bố cục (CLS) | 0,001 |
Với ngưỡng "tốt" của Google là LCP dưới 2,5 giây và CLS dưới 0,1, trang chủ đạt cả hai.
Tính năng chạy được
Các dòng dưới đây là tính năng đang chạy trên website và đều kiểm lại được.
| Tính năng | Cách hoạt động |
| Slider đầu trang | Slider Revolution ở đầu trang chủ |
| Menu cố định | Thanh menu bám theo người xem khi cuộn |
| Tìm kiếm | Ô tìm kiếm trên thanh menu |
| Menu thả xuống | Mục Tin tức mở ba nhóm bài |
| Nút lên đầu trang | Hiện ở góc màn hình khi cuộn xuống |
| Chia sẻ bài viết | Plugin AddThis |
| Bản đồ và video | Google Maps và YouTube nhúng ở trang Giới thiệu |
Giao diện điện thoại chưa được kiểm trong bài này, mọi mô tả ở trên là của bản máy tính.
Website VHP Group cho thấy cách giữ một trang mẹ gọn, chia ba lĩnh vực và dẫn người xem sang đúng website thương hiệu thành viên.
Anh chị có thể đọc thêm các dự án đã làm và bảng báo giá thiết kế website trọn gói. Cần website cho tập đoàn hay doanh nghiệp nhiều thương hiệu, mời liên hệ Thiết Kế Web DC.
Doanh nghiệp bạn có nhiều thương hiệu hoặc nhiều mảng kinh doanh? DC làm từ giao diện, cấu trúc trang mẹ đến đầu mối liên hệ. DC sẵn sàng tư vấn cấu trúc trang mẹ và báo giá cho doanh nghiệp bạn.
