Dự án website Kotinochi do Thiết Kế Web DC thực hiện cho công ty sản xuất ngô ủ chua xuất khẩu, giai đoạn 2024 đến 2025: một website tiếng Anh gom quy trình bốn bước, bốn điểm mạnh và bản đồ đối tác trên một trang chủ.
Thông tin dự án
Dự án thuộc nhóm thiết kế web doanh nghiệp. Bảng dưới ghi thông tin dự án theo trang chủ và chân trang của website. Thời gian thực hiện ghi theo khoảng năm, các dòng còn lại đều đối chiếu được trực tiếp trên website. 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 cổ phần Kotinochi (Kotinochi Joint Stock Company) |
| Lĩnh vực | Sản xuất ngô ủ chua làm thức ăn cho gia súc, theo website thành lập từ năm 2019 |
| Ngôn ngữ website | Tiếng Anh |
| Thời gian | 2024 đến 2025 |
| Nền tảng | WordPress, theme Hello Elementor, Elementor |
| Đơn vị thực hiện | Thiết Kế Web DC |
| Website | cornsilage.kotinochi.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 kể quy trình sản xuất bằng tiếng Anh chứ không ở hiệu ứng. Mỗi điểm đều kiểm lại được trực tiếp trên cornsilage.kotinochi.com. Tỷ lệ tương phản màu được DC tính lại từ mã màu của website.
1. Website tiếng Anh với menu sáu mục và mục Policy có hai trang con.
2. Quy trình bốn bước ngay trên trang chủ: chuẩn bị trồng, thu hoạch, chế biến, lưu kho và xuất khẩu.
3. Bốn điểm mạnh gồm Quality, Certificates, Trucking và Storage.
4. Bản đồ Global Footprint kèm nút Be our partner.
5. Màu đạt tương phản chuẩn WCAG AA: 12,63:1 cho chữ nội dung và 6,57:1 cho tiêu đề xanh lá.
Bối cảnh của dự án
Kotinochi sản xuất ngô ủ chua làm thức ăn cho gia súc và bán cho khách nước ngoài, nên Thiết Kế Web DC làm website theo mô hình giới thiệu doanh nghiệp bằng tiếng Anh. Khách của website là đơn vị nhập khẩu, những người cần thấy vùng trồng, quy trình, chứng nhận và năng lực vận chuyển.
Ngành nghề và thông tin của khách
Thiết Kế Web DC đưa giới thiệu công ty lên đầu trang chủ. Theo website, Kotinochi là một trong những nhà sản xuất ngô ủ chua hàng đầu Việt Nam, chọn giống ngô không biến đổi gen và kiểm tra đất, nước trước khi trồng. Website ghi công ty đang vận hành vùng trồng 3.540 hecta ở 9 tỉnh, hướng tới tiêu chuẩn thức ăn cho gia súc của thị trường Nhật Bản. Các số liệu này là thông tin công ty tự ghi trên website.
Định hướng thiết kế
DC xác định bốn mục tiêu cho website trước khi dựng giao diện: viết nội dung bằng tiếng Anh cho khách nước ngoài, cho thấy quy trình sản xuất ngay trang chủ, đưa chứng nhận, vận chuyển và lưu kho thành các điểm mạnh dễ nhận ra, và cho thấy phạm vi đối tác trên bản đồ. Mỗi mục tiêu quay lại ở phần Bố cục trang chủ và Luồng người dùng bên dưới.
Trải nghiệm người dùng
Thiết Kế Web DC sắp xếp website để người đọc đi từ công ty là ai, quy trình ra sao tới bằng chứng và đối tác theo đúng một chiều đọc trên trang chủ. Đây là phần đường đi của người đọc, trong khi màu sắc, chữ và các khối được mô tả riêng ở Thiết kế giao diện.
Người xem website
DC nhận ra hai nhóm người đọc từ nội dung trang, chưa có số liệu hành vi để đối chiếu. Nhóm thứ nhất là đơn vị nhập khẩu ngô ủ chua, họ cần thấy nguồn gốc giống, vùng trồng và chứng nhận. Nhóm thứ hai là doanh nghiệp muốn hợp tác, họ cần xem phạm vi đối tác hiện có và nơi để liên hệ.
Sơ đồ trang
DC chia website thành sáu mục menu, trong đó mục Policy có hai trang con.
- Home: trang chủ gồm giới thiệu, quy trình, điểm mạnh, bản đồ và đối tác.
- About us: giới thiệu công ty.
- Product: trang sản phẩm.
- Policy: hai trang con là Shipping Policy và Payment Policy.
- News: trang tin tức.
- Contact us: trang liên hệ.
Luồng người dùng
Người đọc mở trang chủ, đọc giới thiệu What We Do rồi cuộn qua khối quy trình, khối điểm mạnh và bản đồ đối tác. Khối bản đồ có nút Be our partner dành cho doanh nghiệp muốn hợp tác. Ai cần điều kiện bán hàng mở mục Policy để xem chính sách vận chuyển và thanh toán, còn muốn liên hệ trực tiếp thì vào Contact us.
Thiết kế giao diện
Thiết Kế Web DC dựng giao diện trên theme Hello Elementor, dùng nền trắng với tiêu đề xanh lá đậm và phông chữ Montserrat. Số đo màu và chữ lấy trực tiếp từ website. Phần này ghi 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 Montserrat cho toàn bộ website. Chữ thân bài cỡ 16 px, giãn dòng 24 px, còn đoạn dẫn đầu trang cỡ 18 px độ đậm 500. Tiêu đề H2 cỡ 26 px độ đậm 800, đủ đậm để tên khối như What We Do nổi lên giữa các ảnh nông nghiệp.
Bố cục trang chủ
DC mở trang chủ bằng nhãn About us và tiêu đề What We Do, rồi dẫn người đọc qua các khối sau, mỗi khối một nhiệm vụ:
1. What We Do: giới thiệu công ty, giống ngô, quy tắc chọn vùng trồng và diện tích vùng trồng.
2. Our Production and Processing Process: bốn bước chuẩn bị trồng, thu hoạch, chế biến, lưu kho và xuất khẩu.
3. Why Businesses Choose Us: bốn điểm mạnh Quality, Certificates, Trucking và Storage.
4. Global Footprint: bản đồ đối tác kèm danh sách thành phố và quốc gia, nút Be our partner.
5. Our Client & Partners: khối khách hàng và đối tác, rồi chân trang ghi bản quyền.
Thanh menu
DC đặt menu bên cạnh logo KOTINOCHI ở đầu trang. Menu gồm sáu mục Home, About us, Product, Policy, News và Contact us, trong đó Policy mở ra hai trang con Shipping Policy và Payment Policy. Tên mục viết bằng tiếng Anh để khớp với nội dung của website.
Thành phần giao diện
DC chọn xanh lá đậm làm màu tiêu đề để gợi hình ảnh nông nghiệp, và dùng các màu sau.
| Mã màu | Dùng cho |
| #333333 | Chữ nội dung |
| #2a2a2a | Đoạn dẫn đầu trang |
| #1b6a46 | Tiêu đề H2 |
| #a4c426 | Chữ nút "Be our partner" |
| #ffffff | Nền trang |
DC đo tỷ lệ tương phản các cặp màu chính bằng công thức của WCAG 2.1. Chữ xám #333333 trên nền trắng đạt 12,63:1 và tiêu đề xanh #1b6a46 trên nền trắng đạt 6,57:1, cả hai đều vượt mức 4,5:1 mà chuẩn AA yêu cầu cho chữ thường.
Các thành phần dùng lặp lại gồm thẻ bước quy trình, thẻ điểm mạnh gồm tên điểm mạnh và một dòng mô tả, bản đồ đối tác và nút Be our partner nền trắng chữ xanh lá nhạt.
Công nghệ và kỹ thuật
Thiết Kế Web DC dựng website trên WordPress với theme Hello Elementor và trình dựng trang Elementor. Cách dựng này thuộc dịch vụ thiết kế website bằng WordPress của DC. Các mục sau ghi lần lượt Front-end, Back-end, kỹ thuật nền và quản trị, và chỉ lấy thông tin có trong mã trang.
Front-end: Hello Elementor và Unlimited Elements dựng trang tiếng Anh
DC dựng phần người đọc thấy bằng theme Hello Elementor và trình dựng trang Elementor 3.18.1. Hello Elementor là khung theme gọn, các khối quy trình, điểm mạnh và bản đồ được dựng bằng Elementor kéo thả. Plugin Unlimited Elements for Elementor bản premium bổ sung các thành phần mà bộ mặc định chưa có.
Back-end: WordPress và Rank Math cho website xuất khẩu
Thiết Kế Web DC dựng phần chạy phía sau trên WordPress 6.6.2, ghi trong thẻ generator của trang, quản lý bài viết, trang và menu. Plugin Rank Math SEO khai báo dữ liệu có cấu trúc cho từng trang bằng tiếng Anh.
Kỹ thuật nền
Website chạy qua kết nối HTTPS và khai báo khung nhìn theo chiều rộng thiết bị. Phông Montserrat tải từ Google Fonts. Trang có dữ liệu có cấu trúc JSON-LD gồm WebSite, WebPage, Article, VideoObject và SearchAction do Rank Math tạo ra.
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 trong mục News, sửa trang Shipping Policy và Payment Policy, và chỉnh các khối trang chủ bằng Elementor mà không viết mã.
Kết quả
Các tính năng và số đo dưới đây đều lấy từ cornsilage.kotinochi.com đang chạy. DC mở từng mục trên website trước khi ghi lại, nên mỗi dòng chỉ nêu cái thấy rõ trên trang chủ hoặc trên menu, và người đọc kiểm lại được trực tiếp. Phần này gồm một bảng số đo và một bảng tính năng.
Số đo website sau khi dựng
Kết quả dưới đây lấy từ PageSpeed Insights, hai lần chạy cho cùng số đo trên 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,1 giây |
| Độ ổn định bố cục (CLS) | 0,001 |
Google xếp LCP 1,1 giây và CLS 0,001 vào mức "tốt", vì cả hai nằm dưới mốc 2,5 giây và 0,1.
Tính năng chạy được
Bảng dưới liệt kê các khối và tính năng đang chạy trên website.
| Tính năng | Cách hoạt động |
| Menu sáu mục | Policy mở ra Shipping Policy và Payment Policy |
| Khối quy trình | Bốn bước hiển thị trên trang chủ |
| Khối điểm mạnh | Bốn điểm mạnh Quality, Certificates, Trucking, Storage |
| Bản đồ đối tác | Hiện các nước đối tác kèm danh sách thành phố và quốc gia |
| Nút Be our partner | Nằm trong khối bản đồ Global Footprint |
| Khối khách hàng và đối tác | Our Client & Partners trên trang chủ |
Bài chỉ nói về giao diện máy tính, vì DC chưa kiểm bản điện thoại.
Website của Kotinochi cho thấy cách kể một chuỗi sản xuất từ vùng trồng đến xuất khẩu trên một trang chủ tiếng Anh, từ quy trình đến bản đồ đối tác.
Các website sản xuất và xuất khẩu khác nằm trong các dự án khác, chi phí xem tại bảng báo giá thiết kế website trọn gói. Doanh nghiệp muốn website giới thiệu quy trình bằng tiếng Anh có thể liên hệ Thiết Kế Web DC để trao đổi.
Bạn cần website tiếng Anh cho doanh nghiệp nông sản hay xuất khẩu? DC làm từ khối quy trình, điểm mạnh đến bản đồ đối tác. Liên hệ DC để trao đổi nội dung tiếng Anh và nhận báo giá.
