5 kỹ thuật điều chỉnh giao diện màu trong thiết kế web

,

Màu sắc là một trong những yếu tố chính trong tất cả các loại hình thiết kế. Đối với website hoặc landing page, màu sắc có thể được sử dụng theo nhiều cách khác nhau: nó có thể được sử dụng để tạo điểm nhấn thông qua độ tương phản hoặc thông qua hạn chế màu đến một điểm đã chọn; màu sắc cũng có thể giúp thiết lập hệ thống phân cấp và qua đó ảnh hưởng trực tiếp đến cảm nhận của người truy cập.

Xem thêm: Những ưu điểm của website đa ngôn ngữ

5 kỹ thuật điều chỉnh giao diện màu trong thiết kế web

Tạo điểm tập trung thông qua tỷ lệ

Ở ví dụ bên dưới là website của Viporte , khi bạn cuộn con chuột xuống dưới sẽ thấy mỗi phần được trang trí với một chữ cái lớn ở giữa. Ban đầu, các chữ cái xuất hiện, sau đó là các hình ảnh động kết hợp với từng con chữ. Màu sắc của những hình ảnh khác nhau sẽ thay đổi theo màu sắc của các chữ cái. Mấu chốt của hiệu ứng này nằm ở điểm trung tâm của đối tượng và nó tuân theo một tỷ lệ. Tỷ lệ này có thể thay đổi nhiều hoặc ít nhưng nó được sử dụng một cách tối ưu để tập trung sự chú ý đối với mắt của con người. Trong ví dụ này tỷ lệ màu chiếm khoảng 50% diện tích của đối tượng.

Tạo sự chú ý qua sự tương phản

Màu sắc có thể thao túng con mắt bằng sự tương phản. Khi màu sắc của thiết kế tổng thể được chọn theo tông êm dịu, thêm một màu tương phản sẽ thu hút rất nhiều sự chú ý đến hình ảnh. Bạn có thể tận dụng điều này trong thiết kế web và nó rất hiệu quả trong lĩnh vực bất động sản. Ở ví dụ bên dưới, sơ đồ màu tổng thể của giao diện chính là màu đen và trắng. Tuy nhiên, thiết kế này dựa chủ yếu vào các tấm ảnh. Đặc biệt là ở đầu trang chủ, những bức ảnh của bộ đồ lót có màu nền là màu đỏ đậm. So với mọi thứ khác trên trang, nó khá đậm. Không nghi ngờ gì nữa, điều nổi bật ở đây là màu đỏ sẫm. Màu đỏ có độ tương phản cao hơn so với màu đen và màu trắng. Tôi thích ví dụ này bởi vì nó cho thấy rằng màu sáng và màu neon không phải là những thứ duy nhất thích hợp để thu hút sự chú ý của ai đó qua sự tương phản. Nó không chỉ giúp cân bằng hai màu sắc mà còn cho phép chúng thực sự nổi bật.

Sử dụng màu sắc để tạo ra các mẫu UX

Cách tốt nhất để tạo ra các trang web thu hút thị giác là thông qua tính nhất quán trong giao diện người sử dụng (UX). Thông thường, trong các trang web, dân thiết kế hay dùng các biểu tượng liên quan đến hành động: thùng rác tượng trưng cho nút delete, màu xanh tượng trưng cho confirm. Thực sự, tôi chưa từng thấy ai dùng màu đỏ cho nút OK cả. Trong ví dụ bên dưới, khi bạn click vào những vùng có thể click, nó đều là màu xanh da trời. Màu sắc trong trường hợp này giúp cho người dùng dễ dàng nhận thấy những gì nổi bật. Website càng dễ nhận dạng, người sử dụng càng có nhiều trải nghiệm tốt và giao dịch trở nên thuận tiện.

Tạo hệ thống phân cấp qua màu sắc

Trên trang sản phẩm của Skore, đa phần các thành phần đều có màu xanh. Màu xanh lá cây được lặp đi lặp lại nhiều lần nhưng cấp độ màu sắc khác nhau cho thấy tầm quan trọng của những thành phần đó như thế nào. Màu xanh lá cây có tương phản tốt với văn bản màu xám và nền trắng. Trong ví dụ này, nó thật sự nổi bật.

Sử dụng sự tương đồng về màu sắc

Trong ví dụ bên dưới, phía trên đỉnh của trang là màu hồng và tím được làm mờ dần bằng hình nền. Kéo xuống dưới một chút, màu hồng và tím được sử dụng cho các nút màu sắc. Thêm vào đó, landing page sử dụng lại màu trắng chồng lên nền màu hồng và tím. Màu sắc nếu thay đổi liên tục sẽ không tạo nên hiệu ứng rõ ràng.

Kết luận

Màu sắc là một công cụ hữu ích để đạt được nhiều mục tiêu trong thiết kế. Màu sắc có thể giúp xác định và thiết lập các đối tượng cần được ưu tiên tập trung. Để sử dụng màu sắc hiệu quả, bạn có thể sử dụng nhiều phương pháp khác nhau, đây là cách mà chúng ta hay gọi là “chơi màu”. Suy cho cùng, việc sử dụng màu sắc là để hướng ánh mắt của người dùng theo ý định mà chúng ta mong muốn.

Xem thêm: Sử dụng từ khóa phủ định trong Google Adwords

Theo LàmWeb.VN

Bài viết liên quan
Tăng tốc website bằng CDN Đối với những người thiết kế web chuyên nghiệp; ngoài việc xây dựng một trang web đảm bảo những yêu cầu cần thiết về đồ họa thì tốc độ trang web cũng ...
3 nguyên tắc trong thiết kế giao diện người dùng d... Nếu như bạn đã được nghe đến thuật ngữ giao diện hội thoại (conversational interfaces) thì đây là một xu hướng hot trong thiết kế sản phẩm kỹ thuật số...
Những đặc điểm cần thiết của website dạng Portfoli... Portfolio website là dạng trang website được thiết kế nhằm truyền tải thông điệp về khả năng và dịch vụ của công ty bạn. Hiểu một cách nôm na thì Port...
Những tiêu chuẩn để thiết kế website đẹp – P... Một số tiêu chuẩn để thiết kế website đẹp đã đề cập trong phần 1 bao gồm mức độ dễ đọc (readibility), sidebar, bình luận, quảng cáo của website thì tr...
0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *