0

Định hướng ban đầu

Khai báo mong muốn trước khi xem phương án. Công cụ chỉ ghi vào biên bản — không ẩn, không chấm điểm, không xếp hạng lựa chọn nào.

Trong 5 giây đầu, khách nên cảm thấy gì?
Khách chính của An Phát 43 là ai?
Việc quan trọng nhất trang chủ phải làm được?
So với nhà thầu khác ở Đà Nẵng?
1

Vai trò màu

Chi phí đổi: Thấp

Cùng một bộ màu lõi. Chỉ chọn màu NHẬN DIỆN — màu CAM luôn dành cho nút hành động, không thay đổi. Con số dưới mỗi mockup là độ tương phản đo được; cần ≥ 4.5 thì chữ mới rõ với mọi người, kể cả khi in đen trắng hay xem ngoài nắng ở công trường.

Kết luận:
2

Kiểu chữ

Chi phí đổi: Thấp

Chốt MỘT cặp chữ dùng lâu dài cho web, hồ sơ năng lực và social. Chữ dưới đây là chữ thật — phóng to màn hình vẫn nét. Cả 4 đều hiển thị đủ dấu tiếng Việt.

Kết luận:
3

Phương án giao diện

Chi phí đổi: Cao

Đây là BẢN DỰNG THẬT chạy trong trang, không phải ảnh chụp — cuộn và bấm thử được. Màu và kiểu chữ trong bản dựng chạy theo lựa chọn ở mục 2 và mục 4.

So sánh nhanhP1 · academicP2 · constructionP4 · one-page sliderP5 · corporate
Ấn tượng ban đầuSidebar cố định, hero ảnh dọc lớnSlider ngang toàn màn, ảnh + videoRevolution Slider phủ màn, ảnh nội thất cao cấpMột mạch cuộn ngắn, header trong suốt phủ hero
Thông điệp bán hàngTên + trích dẫn chủ đầu tư ngay đầu6 nhóm dịch vụ + lưới dự án nổi bật6 thẻ dịch vụ (icon) + lưới ảnh dự án tràn viền6 ô tính năng + dải kêu gọi + newsletter
Ảnh cần chuẩn bị1 ảnh hero dọc + 5 dự án + 4 tinSlider hero + 8 dự án + 5 bài viết3 ảnh hero slider + nhiều ảnh dự án + cảm nhận1 ảnh hero + logo 2 phiên bản (sáng/tối)
Điều hướngMenu dọc luôn hiện, 7 mụcMenu ngang trên cùng, dính khi cuộnMenu one-page cuộn tới mục, dot-nav trong heroMega-menu ngang nhiều mục, dính khi cuộn
Rủi ro chínhSidebar chiếm 300px, nội dung hẹp lạiNội dung dày, cần nhiều ảnh thật chất lượngPhụ thuộc nặng ảnh đẹp + slider; icon dịch vụ cần chỉnh về màu brandMega-menu nhiều mục dễ rối nếu không tỉa; cần logo 2 bản
Hợp khiMuốn cảm giác hồ sơ năng lực, chỉn chuMuốn trang bán hàng nhiều mục, hình ảnh mạnhMuốn thẩm mỹ nội thất cao cấp, hero ấn tượngMuốn trang gọn, đọc nhanh, ít cam kết cuộn
Mở toàn màn hình
Mở toàn màn hình
Mở toàn màn hình
Mở toàn màn hình
Kết luận:
5

Liên hệ & nút hành động

Chi phí đổi: Rất thấp

Điền thông tin hiển thị trên website. Nút chính luôn màu cam.

Về hai ô nút bấm: bản dựng đang xem hiện chỉ có một nút duy nhất (nút gửi form báo giá ở cuối trang) — chưa có nút "Nhận báo giá" hay "Xem dự án" trong các khối. Chữ ban quản trị điền ở đây vẫn được ghi vào biên bản và sẽ dùng khi bổ sung nút, nhưng chưa nhìn thấy ngay trong bản dựng đang xem.
Kết luận:
6

Ứng dụng nhận diện

Không phải mục cần chốt — không có ô chọn, không vào biên bản. Đây là bảy thứ ngoài website mà bộ nhận diện phải dùng được. Tất cả chạy theo lựa chọn ở mục 2, 3, 4 và chữ điền ở mục 5: đổi màu hay đổi kiểu chữ ở trên là cả bảy ô này đổi theo ngay.

Card visit
Công ty TNHH Xây dựng An Phát 43
Nguyễn Văn A · Giám đốc
0905 xxx xxx · lienhe@anphat43.vn
43 Đường ABC, Q. Hải Châu, Đà Nẵng
Header hồ sơ năng lực
AN PHÁT 43HỒ SƠ NĂNG LỰC 2026
Năng lực thi công
Nhận báo giá
0905 xxx xxx · anphat43.vn
Ảnh bìa Facebook
AN PHÁT 43
Tổng thầu xây dựng · Đà Nẵng
An Phát 43Nhắn tin
Biển công trường
AN PHÁT 43
CÔNG TRÌNH ĐANG THI CÔNG
Nhà phố 3 tầng · Hải Châu
Khởi công 03/2026 — Hoàn thành 11/2026
0905 xxx xxx
Decal xe
AN PHÁT 430905 xxx xxx
Áo đồng phục
Thêu ngực trái · bản một màu dùng ở đây
Favicon & icon
An Phát 43×
Favicon 16px · icon 32px · ảnh đại diện 48px — dùng bản chỉ dấu
Chi tiết kỹ thuật đã mặc định (9 mục) — không cần quyết hôm nayBấm để xem. Đây là các lựa chọn tôi đã chốt sẵn kèm lý do; chỉ mở ra nếu ban quản trị muốn rà lại.
1
Kiểu hero
Chia đôi ảnh/chữ (không slider)
Chữ luôn đọc được, tải nhanh, CTA rõ.
2
Số lượng & kiểu card
6 card dịch vụ (3×2) + lưới dự án 3 cột
Đủ bao phủ dịch vụ mà không rối; mobile xếp 1 cột.
3
Lưới · khoảng cách · bo góc · đổ bóng
12 cột, rộng 1200px, cách section 80px (máy tính) / 48px (điện thoại), bo góc 8px, bóng nhẹ
Thoáng, hiện đại, vẫn giữ chất chắc chắn.
4
Kiểu icon
Icon nét mảnh, một bộ đồng nhất (Unicons có sẵn)
Nhẹ, hiện đại, không phải mua thêm bộ mới.
5
Hiệu ứng chuyển động
Hiện dần khi cuộn (0,4–0,6 giây, chạy 1 lần), rê chuột nâng card nhẹ
Chỉn chu nhưng không rối mắt, không làm chậm máy.
6
Thứ tự các khối trang chủ
Hero → Dải uy tín → Dịch vụ → Dự án tiêu biểu → Quy trình → Lý do chọn → Kêu gọi báo giá → Liên hệ
Dẫn khách theo mạch: năng lực → bằng chứng → hành động.
7
Tỷ lệ & cách cắt ảnh
Ảnh card 4:3, ảnh hero 3:2, cắt giữa
Ảnh không méo, khung không nhảy khi thiếu ảnh.
8
Nút phụ trong từng khối
Xem dự án · Chi tiết dịch vụ · Xem tất cả dự án · Tải hồ sơ năng lực · Gọi ngay
Mỗi khối có đúng một lối đi tiếp, không ngõ cụt.
9
Màu hành động (nút CTA)
Cam gắn theo vai trò màu — nền sáng dùng bản đậm, nền tối dùng bản sáng hơn để khối nút đạt tương phản ≥ 3.0
Cùng họ cam với mảng nhấn trong logo gốc (#f45a06); đạt WCAG 1.4.11 cho khối nút phi-văn-bản. Không phải trục quyết định riêng — bám theo màu đã chọn ở mục 1.
Ánh xạ định hướng → gợi ý (minh bạch, có thể kiểm)

Mỗi câu ở mục 0 gắn sẵn gợi ý bố cục/màu như bảng dưới. Gợi ý tổng hợp chỉ xuất hiện khi ≥ 2 câu cùng trỏ về một lựa chọn; và chỉ là nhãn tham khảo — mọi phương án ở mục 1 & mục 3 vẫn hiện đủ, không lựa chọn nào bị ẩn, khóa hay xếp lại.

CâuTrả lờiGợi ý bố cụcGợi ý màu
Q1Chắc chắn, tin cậypa-2navy
Chuyên nghiệp, bài bảnpa-1navy · steel
Cao cấp, thẩm mỹpa-4ink · moss
Gần gũi, dễ tiếp cậnpa-5 · pa-2cobalt
Q2Chủ nhà dân dụngpa-2 · pa-5cobalt
Chủ đầu tư doanh nghiệppa-1navy · steel
Cả hai ngang nhau
Q3Để khách gọi / để lại sốpa-5 · pa-2
Xem dự án đã làmpa-4steel
Tải hồ sơ năng lựcpa-1navy
Hiểu quy trìnhpa-2
Q4Trông đáng tin như đơn vị lớnpa-1 · pa-2navy · steel
Trông khác biệt, dễ nhớpa-4moss · ink
Chưa có gợi ý — cần ít nhất 2 câu ở mục 0 trỏ về cùng một bố cục hoặc màu.

Kết quả buổi họp

Cập nhật ngay khi chọn. Xong thì bấm In biên bản hoặc Copy biên bản.

Màu nút hành động
Theo vai trò màu (họ cam)
Phần dành cho bên kỹ thuật ▸

						
					

Trang tĩnh — không gửi dữ liệu đi đâu.

Xem kết quả ↓