6 lỗi dùng màu sắc mà các nhà thiết kế web thường sử dụng sai

Màu sắc là công cụ tuyệt vời để thu hút sự chú ý của người dùng, tạo cho họ sự thích thú về mặt hình ảnh và sự tương phản để cải thiện trải nghiệm đọc. Ngoài ra, màu sắc cũng là trung tâm của nhiều xu hướng thiết kế, bao gồm các phong cách thiết kế Material và phẳng (flat). Đây là lý do vì sao mà bất kỳ một sự sai sót trong cách chọn màu nào cũng đều dẫn tới những tác động xấu đối với trải nghiệm người dùng, nghiêm trọng hơn là giảm lượng khách hàng tiếp cận web.

Mặc dù nhận thức rõ điều này nhưng trong quá trình thiết kế, nhiều Designer không tránh khỏi việc nhầm lẫn hoặc hiểu sai về ý nghĩa màu sắc nên sử dụng sai màu cho giao diện. Dưới đây là tổng hợp 8 màu cần tránh khi thiết kế web mà các Designer cần chú ý.

1. Màu neon

Màu neon là màu phản quang, là những gam màu chói, cực kỳ bắt mắt như vàng sáng, xanh nõn chuối, màu hồng rực hay tím hồng và cũng được sử dụng khá nhiều trong thiết kế. Tuy nhiên, chính vì sự bắt mắt này nên nó dễ gây chói, tạo cảm giác khó chịu cho người đọc, thậm chí là “chảy nước mắt”.

Khi sử dụng màu neon cho text, các con chữ quá “sáng” khiến cho khả năng đọc và nắm bắt thông tin bị giảm sút. Nếu sử dụng cho nền, màu neon cũng “nổi hơn” nên dễ khiến người nhìn bị phân tán khỏi thông điệp chính của thiết kế.

Cách sửa: Giảm độ sáng của các màu neon để chúng trở nên tối hơn và nhẹ nhàng hơn.

2. Các màu “rung”

Khi các màu sắc có độ bão hòa cao được kết hợp với nhau thì chúng dễ tạo ra “hiệu ứng rung”. Cụ thể, nhìn vào bạn sẽ có cảm giác như chúng đang di chuyển (dù rất chậm) khiến hình ảnh hoặc text bị nhòe hoặc sáng rực.

Tương tự như màu neon, sử dụng màu sắc như vậy cũng sẽ khiến cho người đọc không cảm thấy thoải mái. Thế nên, chúng rất ít khi được dùng ngoại trừ áp dụng cho hiệu ứng tiếng thét trong quảng cáo. Kết quả, người xem sẽ có cảm giác “không hài lòng, không thích và muốn tránh xa”.

Một ví dụ điển hình đó là sự kết hợp của màu đỏ tươi và màu xanh lá cây trong thiết kế “Giáng sinh” nhưng lại được sử dụng rất phổ biến. Cách kết hợp này gây ra vấn đề về khả năng tiếp cận vì chúng khiến cho những người bị mù màu không thể nhận biết được.

Cách sửa: Nếu buộc phải sử dụng các cách kết hợp màu dễ gây hiệu ứng rung thì tốt nhất là tách chúng ra bằng một thứ gì khác ở giữa, chẳng hạn như một màu trung lập.

3. Sáng trên sáng

Đây là một trong những lỗi sai khi dùng màu sắc nhiều người mắc phải nhất, có lẽ là bởi vì nó hiệu quả với các quảng cáo trên báo in hoặc có thể là nó thích hợp với một số tình huống nào đó. Tuy nhiên, những cách kết hợp màu sáng với màu sáng thường rất khó đọc, đa phần là thế.

Chẳng hạn, tiêu đề được thiết kế với text màu trắng, nằm trên một hình ảnh nhưng lại được đặt ở vị trí sáng trên hình ảnh. Nếu có bất kỳ một chữ nào trong tiêu đề không thể hoặc khó nhận dạng thì bạn cần phải nghĩ lại một cách nghiêm túc.

Cách sửa: Có rất nhiều cách để sửa chữa vấn đề này, ví dụ: (1) chọn hình ảnh với background có màu nhất quán, (2) sử dụng hộp màu cho text ở phía trên hình ảnh với nhiều biến thể màu sắc, (3) xem xét việc sử dụng overlay là hình ảnh đầy màu sắc để tăng độ tương phản giữa background và các yếu tố thuộc về text.

4. Bất cứ thứ gì có màu cầu vồng

Các màu sắc có màu cầu vồng không hiệu quả. Khi sử dụng phong cách này cho thiết kế website thì bạn đã phá vỡ rất nhiều quy tắc về màu sắc.

Các cách kết hợp màu sắc cầu vồng quá mạnh và quá nổi. Điều này có thể giúp thu hút sự chú ý của người dùng lần đầu nhưng về sau, chắc chắn sớm muộn gì họ cũng sẽ phát hiện ra là không thể đọc được nội dung thông điệp.

Cách sửa: Nếu muốn sử dụng bảng màu rộng cho website thì hãy lựa chọn các phong cách Card (thiết kế web theo dạng thẻ) hoặc Color Block (thiết kế web theo các khối màu). Chúng cho phép bạn sử dụng linh hoạt các màu sắc nhưng vẫn đảm bảo tính tổ chức và sự mạch lạc.

5. Màu sáng trên màu sáng/màu tối trên màu tối

Giống như màu sáng trên màu sáng, sử dụng cùng một độ bão hòa cho các màu sắc cũng sẽ gây ra nhiều vấn đề. Tốt nhất là nên tránh chúng.

Nếu nghĩ rằng bạn sẽ không bao giờ mắc phải lỗi này thì hãy cẩn trọng, nhất là khi dùng các bảng màu đơn sắc (monotone).

Cách sửa: Nghĩ về độ tương phản. Nếu muốn dùng nhiều màu tối hoặc nhiều màu sáng thì hãy xem chúng như các lựa chọn cho các màn hình trên các site cho chép cuộn (Scroll) trang.

6. Màu đen (“K” Black)

Nếu thường xuyên phải thiết kế cho các dự án in và web đồng thời thì nhiều Designer sẽ mắc phải lỗi này: đó chính là sử dụng các màu đen thuần khiết (Pure black). Pure Black còn được gọi là “K” Black do nó chỉ có duy nhất một màu (#000000). Màu này “phẳng”.

Trong thực tế, tất cả các màu đen được lọc với các sắc thái màu (hue) khác để tạo sự phong phú. Ngay cả lông của một con quạ cũng thường trông có màu xanh hoặc màu tím nếu bạn nhìn nó vào ban ngày.

Cách sửa: Càng làm cho màu đen bớt đen “thuần khiết” hơn thì các màu sắc được hòa trộn với nó càng dễ nhận thấy. Tuy nhiên, khi kết hợp màu khác với màu đen thì nên cân nhắc sự phù hợp với thương hiệu hoặc thông điệp bạn muốn truyền tải (Chẳng hạn như màu của thiết kế Wonderland ở trên là  #0a0a0b).

Theo Design Shack

Xem thêm:

Một số xu hướng thiết kế website 2017 bạn nên biết

11 lỗi thường gặp khi thiết kế website các Designer cần biết