Với một công ty nội thất, khách chọn nhờ công trình đã làm, nên website phải để ảnh công trình đứng trước và lối liên hệ nằm ngay cạnh. Thiết Kế Web DC dựng ddcorporation.vn quanh ba thứ: ảnh công trình, bốn dịch vụ và nút nhận tư vấn. Những gì DC làm cụ thể trên website được ghi lại ngay sau đây.
Đây là một dự án trong mảng thiết kế website cho doanh nghiệp thi công của Thiết Kế Web DC, nơi hình ảnh công trình được ưu tiên hơn chữ.
Thông tin dự án
Dự án thuộc nhóm thiết kế website nội thất, nơi ảnh công trình và nút tư vấn là hai thành phần chính. Thông tin trong bảng được lấy từ trang chủ, trang Liên hệ và chân trang của website. Mốc thời gian chỉ ghi theo năm. Cả bảng và phần mở đều kiểm lại được trên ddcorporation.vn.
| Hạng mục | Nội dung |
| Khách hàng | DD Corporation, công ty thiết kế và thi công nội thất tại TP.HCM |
| Lĩnh vực | Thiết kế, thi công, sản xuất và cải tạo nội thất |
| Khu vực | TP.HCM, công trình tiêu biểu ở nhiều tỉnh thành |
| Thời gian | 2024 đến 2025 |
| Nền tảng | WordPress, theme Flatsome kèm child theme, Contact Form 7 |
| Đơn vị thực hiện | Thiết Kế Web DC |
| Website | ddcorporation.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 dàn website quanh công trình và lối tư vấn chứ không ở hiệu ứng. Mỗi điểm đều kiểm lại được trực tiếp trên ddcorporation.vn, và phần sau của bài ghi chi tiết từng điểm. Thứ tự đi từ cấu trúc dịch vụ tới giao diện.
1. Bốn trang dịch vụ riêng: thiết kế, thi công, sản xuất và cải tạo nội thất.
2. Năm nhóm công trình trên menu: văn phòng, siêu thị, phi hàng không, F&B và nhà ở.
3. Hai banner đầu trang đều có nút "Nhận tư vấn ngay".
4. Thanh nút cố định gồm gọi hotline, Messenger và Zalo.
5. Màu đạt tương phản chuẩn WCAG AA: 12,54:1 cho xanh navy và 6,47:1 cho xanh dương trên nền trắng.
Bối cảnh của dự án
DD Corporation vừa thiết kế, vừa thi công, vừa sản xuất và cải tạo nội thất, nên Thiết Kế Web DC làm website theo mô hình giới thiệu doanh nghiệp kèm thư viện công trình. Khách thường xem dịch vụ trước rồi mới tìm công trình giống không gian của mình, vì vậy website có hai lối vào song song.
Dịch vụ, loại không gian và địa chỉ của khách
Thiết Kế Web DC chia nội dung theo bốn mảng dịch vụ và năm loại không gian. Các dịch vụ gồm thiết kế nội thất, thi công nội thất, sản xuất nội thất và cải tạo nội thất. Các không gian gồm văn phòng, siêu thị, phi hàng không, F&B và nhà ở. Trụ sở đặt ở Quận 3 và văn phòng đại diện ở xã Bình Hưng, cả hai địa chỉ ghi trên trang Liên hệ cùng hai số hotline và mã số thuế.
Định hướng thiết kế
DC đặt bốn mục tiêu cho website: khách hiểu công ty làm gì ngay màn hình đầu, tìm được công trình giống không gian của mình, thấy bằng chứng năng lực qua các con số và danh sách công trình, và liên hệ ngay khi muốn. Hai banner đầu trang, bốn thẻ dịch vụ, nhóm công trình trên menu và thanh nút cố định 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 hai lối đi của khách nội thất: đi từ dịch vụ tới nút tư vấn, hoặc đi từ nhóm công trình tới những dự án giống nhu cầu của mình. Phần này chỉ ghi cách khách di chuyển trên website, còn hình thức nằm ở mục Thiết kế giao diện.
Người xem website
DC hình dung hai nhóm người xem dựa trên nội dung website, chưa có số liệu hành vi thật để kiểm lại. Nhóm thứ nhất là chủ nhà hoặc chủ doanh nghiệp đang cần làm nội thất, họ đọc dịch vụ để biết công ty làm được khâu nào. Nhóm thứ hai là chủ nhà hàng, quán cà phê, văn phòng hoặc cửa hàng, họ tìm công trình cùng loại không gian để xem công ty đã làm gì.
Sơ đồ trang
DC chia website thành các nhóm trang theo mảng dịch vụ và loại công trình.
- Trang chủ: hai banner, giới thiệu, bốn thẻ dịch vụ, công trình tiêu biểu, tin tức và đối tác.
- Giới thiệu: tầm nhìn, sứ mệnh, giá trị cốt lõi và các con số của công ty.
- Dịch vụ: bốn trang riêng, ví dụ trang Thiết kế nội thất có phần giới thiệu, sáu loại không gian, quy trình làm việc và form yêu cầu.
- Dự án: năm nhóm công trình trên menu, mỗi công trình có trang chi tiết riêng.
- Tin tức: các bài hướng dẫn và báo giá thi công nội thất.
- Liên hệ: hai địa chỉ, hotline, email, mã số thuế, bản đồ và form đặt câu hỏi.
Luồng người dùng
Người cần làm nội thất mở trang Dịch vụ, vào đúng trang của khâu mình cần rồi bấm "Nhận tư vấn ngay" hoặc điền form yêu cầu. Người đã có ý tưởng về không gian mở menu Dự án, chọn nhóm công trình cùng loại và xem trang chi tiết từng công trình. Người muốn ước lượng chi phí trước khi liên hệ đọc các bài báo giá ở mục Tin tức, còn người muốn tìm nhanh 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, tông xanh xám và xanh navy, nhiều khoảng trắng, ba kiểu chữ đóng ba vai khác nhau. Số đo màu và chữ lấy trực tiếp từ 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à thanh nút cố định.
Phông chữ
DC kết hợp ba phông để tạo thứ bậc rõ giữa tiêu đề lớn, dòng phụ và nội dung. UTM Marlboro dùng cho tiêu đề lớn, cỡ 38 px ở banner và 32 px ở tiêu đề khối. Allura là phông viết tay cho dòng phụ cỡ 38 px đặt cạnh tiêu đề lớn. Montserrat dùng cho menu và nội dung, nội dung cỡ 17 px với dòng cao 27,2 px, menu 14,4 px đậm.
Bố cục trang chủ
DC dựng hai banner đầu trang với thông điệp "Kiến tạo không gian" và "Phong cách hiện đại", mỗi banner có ba ý ngắn và nút "Nhận tư vấn ngay". Dưới banner, trang chủ xếp theo thứ tự sau:
1. Về DD Corporation: đoạn giới thiệu, ba con số 15+, 1000+, 500+ và nút "Tìm hiểu thêm".
2. Dịch vụ của chúng tôi: bốn thẻ, mỗi thẻ một câu mô tả và nút "Xem chi tiết".
3. Dự án tiêu biểu: năm nhóm công trình và tám công trình nổi bật, kèm nút "Xem tất cả".
4. Tin tức mới nhất: bốn bài mới.
5. Đối tác đồng hành: hàng logo các đơn vị hợp tác.
6. Chân trang: các nhóm liên kết Dự án, Dịch vụ và thông tin liên hệ.
Thanh menu
DC giữ menu sáu mục gồm Trang chủ, Giới thiệu, Dịch vụ, Dự án, Tin tức và Liên hệ. Mục Dịch vụ mở ra bốn dịch vụ và mục Dự án mở ra năm nhóm công trình, nên khách vào thẳng đúng nhóm không qua trang trung gian. Menu chồng lên banner ở đầu trang và được cấu hình cố định khi cuộn, cùng với ô tìm kiếm và hai nút số điện thoại ở thanh trên cùng.
Thành phần giao diện
DC giao cho mỗi màu một việc cố định, để tông xanh xám tạo cảm giác sang trọng còn ảnh công trình là điểm thu hút chính.
| Mã màu | Dùng cho |
| #61687a | Các khối nền đậm |
| #3f5f8f | Tiêu đề và điểm nhấn |
| #25344c | Tiêu đề lớn và thành phần đậm |
| #333333 | Đoạn mô tả trên nền trắng |
| #f1f1f1 | Chữ sáng trên nền tối và khối nền nhạt |
Với phần màu, DC tính tỷ lệ tương phản theo chuẩn WCAG 2.1. Xanh navy `#25344c` đạt 12,54:1 và xanh dương `#3f5f8f` đạt 6,47:1 trên nền trắng, chữ trắng trên nền `#61687a` đạt 5,57:1, chữ `#333333` đạt 12,63:1 trên nền trắng, đều vượt mức 4,5:1 mà chuẩn AA yêu cầu. Thẻ dịch vụ chỉ có tiêu đề, một câu mô tả và nút "Xem chi tiết", còn ba con số năng lực dùng chữ cỡ lớn để nổi giữa nền trắng.
Nút liên hệ cố định
DC đặt một thanh nút cố định ở mép dưới màn hình gồm "Gọi Hotline", "Messenger" và "Chat Zalo". Nút gọi dùng liên kết `tel:` nên bấm là gọi trên điện thoại, và thanh nút đi theo khách khi cuộn. Ngoài ra có nút lên đầu trang, được cấu hình ẩn trên màn hình nhỏ.
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. Dự án đi theo hướng thiết kế website bằng WordPress kèm child theme riêng. Dưới đây lần lượt là giao diện, phần chạy phía sau, kỹ thuật nền và quản trị, đọc từ mã trang đang chạy.
Front-end: Flatsome kèm child theme dựng website nội thất
DC dựng phần người xem thấy bằng theme Flatsome cùng child theme `flatsome-child` để giữ các tùy chỉnh riêng của website tách khỏi theme gốc. Flatsome cung cấp banner, lưới thẻ và menu, còn plugin Mousewheel Smooth Scroll làm động tác cuộn trang mượt hơn.
Back-end: WordPress và Contact Form 7
Thiết Kế Web DC dựng phần chạy phía sau trên WordPress 7.1.4, ghi trong thẻ generator của trang, quản lý trang, bài viết, danh mục dự án và menu. Plugin Contact Form 7 tạo form yêu cầu và form đặt câu hỏi, còn Rank Math 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. Trang khai báo khung nhìn theo chiều rộng thiết bị, tải phông từ Google Fonts và có sơ đồ trang XML khai báo trong robots.txt. Dữ liệu có cấu trúc JSON-LD gồm WebSite, WebPage và Article, 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 công trình vào đúng danh mục dự án, đăng bài tin tức và sửa nội dung các trang dịch vụ. Form ở trang Liên hệ cho phép khách chọn dịch vụ quan tâm, gồm bốn lựa chọn thiết kế, thi công, sản xuất và cải tạo. Trang đăng nhập mặc định `/wp-login.php` trả về lỗi không tìm thấy, còn robots.txt chặn thư mục `/wp-admin/`.
Kết quả thực hiện
Kết quả của dự án gồm một bảng số đo và một bảng tính năng, cả hai lấy từ ddcorporation.vn đang chạy. DC thử từng tính năng và chỉ giữ dòng nào thấy rõ trên trang chủ, trang Liên hệ hoặc trong mã trang. Mọi dòng đều kiểm lại được bằng cách mở website.
Số đo website sau khi dựng
PageSpeed Insights đo trang chủ hai lần cho cùng kết quả, và bảng dưới là 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) | 1,3 giây |
| Độ ổn định bố cục (CLS) | 0,002 |
Theo ngưỡng của Google, LCP dưới 2,5 giây và CLS dưới 0,1 là mức "tốt", và cả hai chỉ số đều ở trong mức đó.
Tính năng chạy được
Bảng dưới liệt kê các tính năng đang chạy trên website, mỗi dòng đều kiểm lại được.
| Tính năng | Cách hoạt động |
| Gọi một chạm | Hai số hotline ở thanh trên cùng dùng liên kết `tel:` |
| Thanh nút cố định | Gọi hotline, Messenger và Zalo ở mép dưới màn hình |
| Menu cố định | Thanh menu bám theo khách khi cuộn trang |
| Tìm kiếm | Ô tìm kiếm trên thanh menu |
| Form tư vấn | Contact Form 7, có ô chọn dịch vụ quan tâm |
| Bản đồ chỉ đường | Google Maps nhúng ở trang Liên hệ |
| Cuộn mượt | Plugin Mousewheel Smooth Scroll |
Phần đánh giá ở trên áp dụng cho giao diện máy tính, bản điện thoại chưa được kiểm nên bài không nói về bản di động.
Website DD Corporation cho thấy cách đặt ảnh công trình làm trung tâm, rồi dẫn khách từ dịch vụ hoặc từ nhóm công trình tới nút tư vấn.
Các dự án khác và bảng báo giá thiết kế website trọn gói có sẵn để anh chị tham khảo. Cần tư vấn cho website công ty nội thất, mời liên hệ Thiết Kế Web DC.
