Thiết kế web hai màu là cách giữ đúng hai màu chủ đạo từ đầu đến cuối trang, để thương hiệu dễ nhớ và nội dung bớt rối. Phong cách Hai màu, nhận diện rõ hợp với doanh nghiệp muốn khách nhận ra mình ngay, kể cả khi chỉ lướt qua.
Chọn hai màu giống như chọn một cặp đại diện cho thương hiệu: mỗi cặp có tính cách riêng, hợp với một số kiểu khách và có lúc phản tác dụng. Hãy so sánh bốn hồ sơ sau. Mẫu tham chiếu nằm trong thư viện giao diện Mạnh An AI.
Một trang hai màu cần giữ nhất quán những gì?
Ba thứ cần giữ nhất quán là nút, biểu tượng và tiêu đề. Ảnh thực tế được phép mang thêm sắc độ, vì đó là phần cho trang sự sống mà không làm loãng nhận diện.
Thiết kế web hai màu không có nghĩa là chỉ có hai mã màu. Mỗi màu thường cần vài sắc đậm nhạt để làm nền và chân trang, cộng với trắng để chứa chữ. Giữa hai màu cũng nên phân rõ một màu làm nền chính và một màu làm nhấn, để nút bấm luôn dễ nhận ra.
Hồ sơ 1: Xanh lá và trắng có tính cách gì?
Xanh lá và trắng tạo cảm giác sạch, gọn và dễ gần, nên hợp với dịch vụ gắn với môi trường sống. Đây là cặp trong mẫu Sạch Việt, và nói đúng ra là một màu cộng với nền trắng.
- Trong mẫu: tiêu đề, nút, biểu tượng tròn, dải quy trình và khối liên hệ đều xanh; nền xanh rất nhạt và chân trang xanh rất đậm là các sắc của cùng màu đó.
- Điểm hay: áo nhân viên trùng màu nút, nên chính ảnh cũng mang nhận diện.
- Hợp với: vệ sinh, cây cảnh, thực phẩm sạch, chăm sóc nhà cửa.
- Không ổn khi: ngành đã có quá nhiều đối thủ màu xanh, vì khi đó trang không còn gì để khách nhớ riêng.
Trong mẫu còn có sao vàng ở khối lời khách, là màu ngoài cặp duy nhất của giao diện. Khi làm thật, chỉ đưa đánh giá vào nếu đó là đánh giá có thật. Tính bằng công thức WCAG với mã đề xuất #0E6B3A, chữ trắng đạt khoảng 6,6:1, đủ cho chữ thường.
Hồ sơ 2: Vàng và đen hợp với thương hiệu nào?
Vàng và đen là cặp dễ thấy từ xa, hợp với dịch vụ cần được nhận ra và gọi nhanh như vận tải. Cặp này có tính cách thẳng thắn, ít tinh tế nhưng rất khó bị quên.
Hãng giả định Taxi Đôi Sắc đưa cặp màu vào cả giao diện lẫn thân xe và áo tài xế. Khi nền vàng, nút đen; khi nền trắng, nút vàng chữ đen, nên khách luôn thấy cùng một cặp. Dải ba bước “Gọi, Báo điểm đón, Lên xe” màu vàng còn dải đội xe màu đen, tạo nhịp mà không cần màu thứ ba.
- Hợp với: taxi, giao hàng, công trình, sửa chữa khẩn cấp.
- Không ổn khi: đặt chữ trắng lên vàng. Với mã đề xuất #F7C600, chữ #111111 đạt khoảng 11,72:1, còn chữ trắng trên cùng màu vàng chỉ khoảng 1,61:1.
Hồ sơ 3: Xanh chanh và tím cà tạo cảm giác ra sao?
Xanh chanh và tím cà tạo cảm giác tươi, trẻ và có cá tính, hợp với thực phẩm và đồ uống bán cho người trẻ. Hai màu đối nhau mạnh nên chỉ cần một ít là đã đủ nổi.
Chuỗi giả định Ép Xanh mở đầu bằng nền xanh chanh đặc, tiêu đề tím và ba chai đặt giữa ổi, chanh leo, dứa. Màu của trái cây làm phần sinh động, còn giao diện chỉ giữ hai màu. Một điểm nên sửa: nút lớn màu tím nhưng nút nhỏ trong thẻ lại màu xanh chanh, nên khách phải học hai kiểu nút. Khi làm thật, hãy chọn một màu cho hành động.
- Hợp với: nước ép, đồ ăn nhẹ, mỹ phẩm trẻ, ứng dụng cho sinh viên.
- Không ổn khi: xanh chanh làm nền cho chữ trắng, chỉ khoảng 1,54:1 với mã đề xuất #B7E000. Chữ tím #3B1E54 trên cùng nền đạt khoảng 9,12:1.
Hồ sơ 4: Xanh than và hổ phách dành cho ai?
Xanh than và hổ phách tạo cảm giác nghiêm túc mà vẫn ấm, hợp với dịch vụ cần tạo sự yên tâm cho người quản lý. Xanh than giữ phần chắc chắn, còn hổ phách chỉ ra chỗ cần chú ý.
Công ty giả định Khiên Bắc mặc đồng phục xanh than, nên ảnh và giao diện liền một mạch. Hổ phách xuất hiện ở nút, dòng thứ hai của tiêu đề và nhãn sáu nơi cần bảo vệ. Dải biểu tượng và dải khảo sát cũng màu hổ phách, nên cặp này đang dùng màu nhấn hơi nhiều. Bớt một dải sẽ làm nút nổi hơn.
- Hợp với: bảo vệ, cơ khí, bảo hiểm, dịch vụ doanh nghiệp.
- Không ổn khi: ngành đã quá quen xanh than và logo không có gì riêng. Hổ phách #FFB300 trên xanh than #0F2747 đạt khoảng 8,35:1, nhưng chữ trắng trên hổ phách chỉ khoảng 1,79:1.
Các tỉ lệ trong bốn hồ sơ đều tính từ mã màu đề xuất, không phải mã đo từ ảnh. Ngưỡng 4,5:1 cho chữ thường lấy từ tiêu chí tương phản tối thiểu của WCAG. Cả ba thương hiệu đều giả định, số 0987.654.321 chỉ là số ví dụ, không phải dự án đã bàn giao.
12 ngành khác nên chọn cặp màu nào?
Ngành cần được nhận ra nhanh nên chọn cặp tương phản mạnh, ngành cần sự yên tâm nên chọn một màu đậm cùng một màu ấm, còn ngành bán cho người trẻ có thể chọn cặp đối màu. Đây là 12 ngành khác cùng cặp màu gợi ý, nhưng logo hiện có vẫn được ưu tiên.
- Giao hàng nhanh: cam và đen, lên nút và thân xe.
- Sửa khóa: vàng và đen, số điện thoại nằm trên nền vàng.
- Cho thuê xe tải: đỏ đậm và trắng, ảnh xe làm phần sinh động.
- Bảo hiểm: xanh than và trắng, thêm sắc ấm rất nhỏ ở nút.
- Kế toán thuê ngoài: xanh rêu và kem, giọng điềm đạm.
- Trường dạy lái xe: xanh dương và vàng, khớp với xe tập lái.
- Trà sữa: nâu sữa và hồng đào, ảnh ly làm chủ đạo.
- Bánh mì: nâu đỏ và kem, lấy từ màu vỏ bánh.
- Cây cảnh văn phòng: xanh lá và trắng, áo nhân viên cùng màu.
- Giặt là: xanh nước và trắng, nút giữ màu đậm hơn.
- Phòng gym nhỏ: đen và xanh neon, chỉ dùng neon cho nút.
- Nhà thuốc: xanh lá đậm và trắng, thông tin thuốc giữ trên nền trắng.
Khi nào không nên chọn thiết kế web hai màu?
Không nên chọn thiết kế web hai màu khi trang cần phân biệt nhiều nhóm thông tin bằng màu, hoặc khi nhận diện đã có nhiều màu ngang nhau. Khi đó, ép về hai màu sẽ làm mất đặc điểm vốn có của thương hiệu.
Nếu chỉ cần một điểm nổi trên nền trung tính, lối dùng một màu nhấn nhẹ tay hơn. Nếu khách đặt sự tin cậy lên trước, hãy xem phong cách xanh trắng tin cậy. Còn khi muốn sức nặng thị giác lớn nhất, hướng tương phản mạnh mẽ có thể phù hợp hơn.
Câu hỏi thường gặp về thiết kế web hai màu
Trắng và đen có được tính là hai màu không?
Thường thì không, vì chúng làm nền và chữ cho hầu hết mọi trang. Cặp màu ở đây là hai màu khách nhớ được khi nhắc tới thương hiệu.
Ảnh nhiều màu có phá vỡ nhận diện không?
Thường là không, nếu nút và tiêu đề vẫn giữ đúng cặp màu. Nên chọn ảnh có đồng phục hoặc vật dụng cùng màu thương hiệu để ảnh và giao diện liền nhau.
Logo đang có ba màu thì làm thế nào?
Hãy chọn hai màu chiếm diện tích lớn nhất để dùng cho giao diện, màu còn lại chỉ nằm trong logo. Nếu cả ba màu quan trọng như nhau thì nên chọn phong cách khác.
Nên làm gì trước khi chọn thiết kế web hai màu?
Với thiết kế web hai màu, hãy viết hồ sơ cho cặp màu của bạn: tính cách, hợp với ai, hỏng khi nào, rồi thử tên thương hiệu trên nền từng màu. Sau đó đặt nút, biểu tượng, tiêu đề cạnh nhau trên điện thoại để xem còn giữ được cặp màu không.
Khi đã chọn được cặp màu, 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 logo và cặp màu đang cân nhắ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
