Thiết kế web khối màu là cách dùng các mảng màu lớn để phân định từng nhóm thông tin, giúp trang sinh động mà vẫn có trật tự. Phong cách Khối màu phân lớp hợp với doanh nghiệp có nhiều nhóm nội dung và cần khách nhận ra ngay mình đang ở nhóm nào.
Hãy coi bảng màu như một đội làm việc: mỗi màu nhận đúng một nhiệm vụ, ai làm việc của người khác thì trang bắt đầu rối. Mẫu tham chiếu nằm trong thư viện giao diện Mạnh An AI.
Bốn màu của mẫu Đồng Hành đang làm việc gì?
Mẫu Đồng Hành dùng bốn màu: xanh ngọc đậm dẫn dắt, vàng gây chú ý, trắng và xám rất nhạt giữ phần đọc. Phần lớn đã rõ việc, chỉ riêng màu vàng đang làm hai việc khác nhau.
Từ trên xuống, trang có đầu trang trắng, banner với mảng xanh ngọc cắt chéo, rồi dải vàng toàn khổ chứa bốn con số. Tiếp theo là bốn thẻ dịch vụ trên nền trắng, bốn loại kho trên nền xám nhạt, dải xanh ngọc bốn bước, hàng logo, ba tin tức và khối liên hệ xanh ngọc.
Vàng vừa làm nền dải số, vừa là màu của nút “Nhận báo giá”. Xanh ngọc cũng được giao cả giới thiệu, quy trình lẫn liên hệ, nhưng ổn hơn vì khối nào cũng có tiêu đề riêng. Đây là nhận xét từ ảnh tĩnh, chưa đo hành vi khách trên trang thật.
Bảng phân công màu cho một trang khối màu
Mỗi màu cần có một việc chính, một vị trí dùng và một chỗ phải tránh. Hãy điền bảng sau cho thương hiệu của bạn trước khi vẽ.
| Màu | Việc chính | Vị trí dùng | Tránh dùng cho |
|---|---|---|---|
| Màu thương hiệu | Báo khách đang ở nhóm nội dung chính | Banner, một hoặc hai mảng lớn | Nền của đoạn văn dài |
| Màu phân khu thứ hai | Tách một nhóm thông tin khác loại | Một mảng ở thân trang | Nút bấm |
| Màu nhấn | Chỉ bước tiếp theo | Nút chính, mũi tên trong thẻ | Nền khối thông tin, nét trang trí |
| Trắng hoặc kem | Cho mắt nghỉ, chứa chữ dài | Xen giữa các mảng màu | Những chỗ cần tô màu để phân nhóm |
| Màu chữ đậm | Đảm bảo đọc được | Tiêu đề, mô tả, chân trang | Khối chưa kiểm tra độ tương phản |
Năm vị trí là đủ cho hầu hết doanh nghiệp. Bảng màu nên bám nhận diện có sẵn, đừng chọn màu chỉ vì trông vui mắt.
Khi hai màu tranh việc thì xử lý ra sao?
Khi hai màu tranh một việc, hãy giữ màu nào gắn với hành động và chuyển màu còn lại về sắc nhạt hơn hoặc về trắng. Dưới đây là ba trường hợp hay gặp nhất và cách phân xử.
Màu của nút được dùng làm nền
Đây chính là tình huống của dải vàng ở mẫu Đồng Hành. Khi một dải lớn đã vàng, các nút vàng trên trang bớt nổi. Hãy đổi dải thông tin sang xám nhạt và để màu vàng quay về với nút.
Hai mảng đậm nằm sát nhau
Hai khối đậm khác màu đặt liền nhau sẽ giành nhau sự chú ý và khiến khách khó nhận ra ranh giới nhóm. Hãy chèn một khoảng trắng hoặc một khối nhạt ở giữa, để nhịp trang là đậm, nhạt, đậm.
Trang trí mượn màu của nút
Nét gạch hay biểu tượng nhỏ cùng màu với nút có thể khiến khách tưởng chúng bấm được. Nên đổi chúng sang sắc của mảng đang chứa, hoặc chấp nhận giữ rất ít và không đặt cạnh nút.
Kiểm tra độ tương phản của từng mảng thế nào?
Mỗi mảng màu trong thiết kế web khối màu cần được kiểm tra riêng với màu chữ đặt trên nó, vì màu chữ hợp với mảng này có thể hỏng ở mảng khác. Theo tiêu chí tương phản tối thiểu của WCAG, chữ thường cần ít nhất 4,5:1.
Tính bằng công thức WCAG với mã đề xuất, không phải mã đo từ ảnh mẫu: chữ trắng trên xanh ngọc #0B4F4A đạt khoảng 9,41:1, nhưng chữ trắng trên vàng #F6C026 chỉ khoảng 1,68:1. Đổi sang chữ #1A1A1A trên cùng màu vàng thì đạt khoảng 10,35:1. Vì vậy, nút vàng nên dùng chữ đen.
Một phép thử đơn giản khác là chuyển bản thiết kế sang ảnh xám. Nếu ranh giới các mảng biến mất, chúng chỉ khác nhau về sắc mà gần bằng nhau về độ sáng, và người khó phân biệt màu cũng sẽ khó thấy. Khi đó, hãy chỉnh độ đậm nhạt hoặc thêm tiêu đề rõ cho từng mảng.
Ba đội màu giả định cho ba ngành khác nhau
Khi áp dụng thiết kế web khối màu, trường mẫu giáo cần màu dịu, dịch vụ ăn công nghiệp cần màu chắc, còn hội chợ có thể dùng nhiều màu nhất. Cả ba đều là thương hiệu giả định, số 0987.654.321 chỉ là số ví dụ, không phải dự án đã bàn giao.
Trường mẫu giáo song ngữ: xanh trời lo chương trình, xanh lá lo một ngày
Trường giả định Vườn Nhỏ giao mảng xanh trời cho ba lớp Mầm, Chồi, Lá và mảng xanh lá cho năm mốc từ đón trẻ tới chơi ngoài trời. Phụ huynh nhờ vậy biết ngay mình đang xem “học gì” hay “một ngày ra sao”. Nút vàng và mũi tên vàng dẫn tới bước tiếp theo, chỉ có vài nét gạch vàng cạnh tiêu đề là đang mượn màu của nút.
Dịch vụ ăn công nghiệp: đỏ lo thực đơn, xanh ngọc lo quy trình
Công ty giả định Bếp Xưởng đặt năm khay cơm trên mảng đỏ, năm bước nhập nguyên liệu đến dọn rửa trên mảng xanh ngọc. Người phụ trách nhân sự có thể tìm thực đơn hay quy trình chỉ bằng cách nhớ màu. Ba mô hình phục vụ, bốn khu bếp và bốn câu hỏi nằm trên nền kem, nên phần đọc được nghỉ giữa hai mảng đậm.
Hội chợ: mỗi khu một màu, nhưng vàng bị giao hai việc
Hội chợ giả định Sắc Việt dùng màu đúng như một tấm bản đồ: sơ đồ có bốn khu, khối gian hàng màu hồng cánh sen, lịch chương trình màu chàm, phần khách tham quan màu ngọc. Điểm cần sửa nằm ở chú giải, nơi vàng là “Khu trải nghiệm” trong khi cũng là màu nút đăng ký. Khi làm thật, nên đổi khu đó sang màu khác để vàng chỉ còn một việc.
12 ngành khác nên phân công khối màu ra sao?
Ngành có nhiều nhóm dịch vụ nên giao mỗi nhóm một màu, ngành có lộ trình nên giao màu theo chặng, còn ngành có đối tượng khác nhau nên giao màu theo người xem. Dưới đây là 12 ngành khác cùng cách chia gợi ý.
- Trung tâm ngoại ngữ: mỗi nhóm tuổi một mảng màu, nút đăng ký học thử giữ màu riêng.
- Công viên giải trí: mỗi khu trò chơi một màu, khớp với sơ đồ.
- Siêu thị nhỏ: mỗi nhóm hàng một dải màu nhạt, ảnh sản phẩm đặt trên nền trắng.
- Phòng khám đa khoa: mỗi chuyên khoa một sắc dịu, nút đặt lịch giữ màu riêng.
- Công ty chuyển nhà: một màu cho loại dịch vụ, một màu cho các bước làm việc.
- Trung tâm dạy nghề: mỗi nghề một mảng, kèm ảnh xưởng thực hành.
- Lễ hội âm nhạc: mỗi sân khấu một màu, dùng lại trên lịch biểu diễn.
- Thư viện cộng đồng: màu theo đối tượng thiếu nhi, học sinh, người lớn.
- Hợp tác xã nông sản: mỗi mùa thu hoạch một mảng màu lấy từ chính sản phẩm.
- Công ty in ấn: mỗi loại ấn phẩm một khối, nút hỏi mẫu in giữ màu riêng.
- Tổ chức thiện nguyện: một mảng cho chương trình, một mảng cho cách chung tay.
- Nhà xe liên tỉnh: mỗi tuyến một dải màu, nút hỏi lịch giữ cùng một màu.
Khi nào không nên chọn thiết kế web khối màu?
Không nên chọn thiết kế web khối màu khi nội dung chỉ có một hoặc hai nhóm, hoặc khi thương hiệu cần sự kín đáo, tĩnh lặng. Lúc đó, các mảng màu lớn không có gì để phân biệt và chỉ còn tác dụng trang trí.
Nếu bạn cần một nhịp mềm hơn, phong cách Dải màu nhẹ nhàng dùng các sắc nhạt để chia phần. Khi mục tiêu chính là không khí vui cho người trẻ, phong cách tươi sáng, trẻ trung có thể hợp hơn. Còn khi chỉ cần một điểm kéo mắt trên nền trung tính, hãy cân nhắc cách dùng một màu nhấn nổi bật. Nếu nhiều hạng mục ngang hàng nhau, lối lưới thẻ gọn gàng dễ so sánh hơn.
Câu hỏi thường gặp về thiết kế web khối màu
Một trang nên có tối đa bao nhiêu màu khối?
Không có con số cố định. Mỗi màu cần trả lời được câu “màu này làm việc gì”; màu nào không trả lời được thì nên bỏ, và đừng đặt nhiều màu trong cùng một khu vực.
Trên điện thoại, các mảng màu có bị dày đặc không?
Có thể, vì các khối xếp chồng lên nhau. Hãy xếp theo thứ tự ưu tiên, giữ khoảng nghỉ trắng giữa hai mảng đậm và để nút đủ lớn, dễ bấm.
Logo chỉ có một màu thì lấy thêm màu ở đâu?
Có thể lấy từ ảnh sản phẩm, đồng phục hoặc không gian làm việc thật. Sau đó kiểm tra độ tương phản với chữ, và để lại một màu nhấn riêng cho nút hành động.
Nên làm gì trước khi chọn thiết kế web khối màu?
Hãy liệt kê các nhóm thông tin của doanh nghiệp, rồi giao cho mỗi nhóm một màu trong bảng phân công. Nhóm nào không có màu riêng thì đặt trên nền trắng, và mọi màu chỉ giữ một việc.
Khi đã có bảng phân công, bạn có thể đọc các bước Mạnh An AI thiết kế và bàn giao website và xem bảng giá thiết kế website AI. Mạnh An AI phục vụ khách hàng trên toàn quốc; bạn có thể gửi bảng phân công màu cùng logo hiện có để trao đổi trước khi bắt đầu.
Thông tin đơn vị
Đơn vị: Công Ty TNHH Mạnh An Service
Dịch vụ: Mạnh An AI – Thiết kế website
Phạm vi phục vụ: Khách hàng trên toàn quốc
Địa chỉ văn phòng: Thanh Dương 2, Phường Đông Tiến, Thanh Hóa
Điện thoại: 083.5431.678
Email: info@manhan.vn
