P
Primera Tech Labs
Software · Branding · Strategy
Đề xuất thiết kế · Tháng 04 / 2026

CÔNG TY CỔ PHẦN
NÔNG DƯỢC H.A.I
Corporate Website Design

Khách hàng
CTCP Nông Dược H.A.I
HOSE: HAI · MST 0301242080
Phạm vi
02 website + Trang Intro
Multisite · Bilingual VI/EN
Stack
Umbraco 17 LTS · .NET 10
Razor
Cam kết
Lighthouse ≥ 90 · < 2s LCP
23 SEO · 19 OWASP
2 design concepts / Giữ nguyên 1 thương hiệu

Giữ nguyên bộ nhận diện thương hiệu với 2 cách thể hiện khác nhau

Cùng hệ màu thương hiệu HAI 2015
(xanh lá #1A8F3D, xanh dương #0066B3, đỏ #D7282F, cam #F08C1E)
Giữ tagline “Thành công cùng nhà nông”.
Khác biệt nằm ở cách trình bày — cách HAI muốn cổ đông và nông dân nhìn thấy mình trong giai đoạn 2026 trở đi.

Phương án 1
Heritage Premium

Đáng tin cậy, ấm áp, đậm chất Việt Nam. Một công ty 20+ năm uy tín vững chắc đứng trên thị trường. Tham chiếu Vinamilk IR + Masan IR + photojournalism Patagonia.

  • — Be Vietnam Pro + Lora Italic + Inter Tight
  • — Photo nông dân HAI + accent vàng đồng #C9A961
  • — Trang Intro pattern A4 (hero ảnh thiên nhiên + 2 card)
  • — ESG Photojournalism + Dashboard nhẹ
Xem trang chủ Cổ đông → Variant 1
Phương án 2
Modern Minimalist

Tối giản, có chiều sâu, đầy white space. Công ty 20+ năm nhưng nhìn như startup agritech Singapore — tự tin không cần phô trương. Tham chiếu Apple IR + Roche storytelling + Novartis ESG indices.

  • — Inter Tight + Inter, white space ≥ 50%
  • — Photo đen-trắng + accent emerald #10B981
  • — Trang Intro pattern A1 (split-screen 50/50)
  • — ESG Storytelling 4 chương + Dashboard chi tiết
Xem trang chủ Cổ đông → Variant 2
Toàn bộ tài liệu demo

Bộ tài liệu wireframe giai đoạn pre-design

01

Bối cảnh & Brand audit

— hiểu HAI hôm nay trước khi vẽ ngày mai
Tổng quan dự án
Phạm vi, stack, mốc thời gian, ràng buộc hợp đồng
→
Brand audit
Hệ màu HAI, typography, logo — kết quả crawl 3 site cũ
→
Tham chiếu quốc tế
12 IR + 11 farmer-facing — Apple, Roche, Bayer, Yara
→
02

Trang Intro · 5 phương án × 2 phong cách

— gateway điều hướng Cổ đông / Nhà nông
A1 · Split-screen 50/50
Cả 2 variant
Pattern Unilever / Bayer Vegetables — chuẩn gateway global
→
A2 · Top / Bottom
Cả 2 variant
Hai vùng dọc — “cổ đông trên uy nghiêm, nhà nông dưới đất đai”
→
A3 · Video background
Cả 2 variant
Drone ruộng lúa full-screen — đẳng cấp cao, cảnh báo bandwidth
→
A4 · Hero ảnh + 2 card
★ Khuyến nghị
An toàn, đậm chất Việt, mobile tốt — sweet spot cho HAI
→
A5 · Interactive hover
Cả 2 variant
Animation panel expand — cảnh báo lệch tinh thần Animation Level A
→
3 cấp độ nội dung
A · B · C
Pure router · Hero+statement · Mini landing — so sánh cạnh nhau
→
03

Website Cổ đông · congtyhai.com

— 3 tham chiếu tinh thần
Heritage Premium
★ Khuyến nghị
Tham chiếu Vinamilk IR + Masan IR — chuẩn VN HOSE
→
Modern Apple-IR
Tham chiếu Apple Investor Relations — minimalist tuyệt đối
→
Roche Storytelling
Tham chiếu Roche/Novartis — kể chuyện + ESG mạnh
→
04

Khu vực ESG · 3 lựa chọn

— phát triển bền vững là yêu cầu của khối ngoại
A · Photojournalism
Patagonia-style — ảnh nông dân thật, cảm xúc trực tiếp
→
B · Data Dashboard
Microsoft / Apple Environment — số liệu cấp đầu tư
→
C · Storytelling 4 chương
Roche / Nike Move to Zero — long-form journalism
→
05

Website Nhà nông · nongduochai.vn

— mobile-first, native app feel
Trang chủ — Heritage palette
Hybrid photo + illustration, accent vàng đồng, ấm áp
→
Trang chủ — Modern palette
Hybrid photo + illustration, accent emerald, sạch sẽ
→
06

Hệ thống thiết kế

— tokens, typography, components
Bảng màu
4 màu thương hiệu HAI + 2 hệ accent (heritage gold, modern emerald)
→
Typography
Be Vietnam Pro · Inter Tight · Lora — type scale + use cases
→
Components
Button, Card, Form, Stock ticker, KPI block, Bottom nav
→