Quy Tắc Chọn Màu Sắc Website Để Thu Hút Người Xem Hơn

Hôm nay chúng ta sẽ tìm hiểu tầm quan trọng của màu sắc website và làm thế nào để kết hợp các màu sắc với nhau đúng cách để làm website đẹp hơn. Trước khi bắt đầu các bạn có thể tham khảo các mẫu website đã phối hợp màu sắc khá đẹp tại đây.

Bài viết về quy tắc chọn màu sắc này dành cho ai?

Bài viết này danh cho những người đang muốn tìm hiểu cách thiết kế màu sắc, phối hợp một cách toàn diện màu sắc trên website theo từng bối cảnh, bố cục và phù hợp với nguyên tắc thiết kế website. Mỗi màu sắc trên website đều có ỹ nghĩa riêng và đương nhiên website cũng vậy đọc css là gì để biết rõ ràng cái mà bạn đang làm như thế nào đối với doanh nghiệp.

Tôi viết bài viết này bởi vì trước đây tôi luôn gặp khó chăn trong việc chọn lựa website như thế nào là tốt. Tôi cứ loay hoay chọn đi chọn lại các màu sắc để tìm ra màu phù hợp, màu sắc như thế nào, độ sáng ra sao, màu chủ đạo, tuy nhiên sau khi biết được các quy tắc màu sắc dưới đây. Con mắt chọn màu sắc trên website đã hoàn toàn thay đổi, làm cho website của tôi trông hài hòa hơn, thu hút hơn.

Đương nhiên nếu bạn là một người thông thạo máy tính, nắm rõ các phần mềm thiết kế đồ họa như Adobe Photoshop thì việc bạn thực hiện các công việc trở nên dễ dàng hơn.

Tóm lại cách chọn màu sắc như thế nào cho đẹp khi thiết kế website?

Quy tắc sử dụng màu sắc bao gồm khá nhiều thứ tuy nhiên chúng ta có thể tìm hiểu các thứ cơ bản đầu tiên đó là thông qua sự bổ sung của màu sắc, sự tương phản và sự sống động, đây chính là 3 thuật ngữ quan trọng đầu tiên trong màu sắc. Nó còn phụ thuộc khá nhiều vào con mắt, cách nhìn nhận và trí tưởng tượng của mỗi người về hình ảnh cuối cùng được tạo ra khi phối màu sắc và các yếu tố với nhau trên website.

Trên điện thoại và máy tính là 2 thiết bị có kích thước rất khác nhau cho nên mắt người chúng ta nhìn vào cũng khác, vậy nên chúng ta phải kiểm tra thực tế hiển thị trên các thiết bị trước khi quảng bá nội dung của mình. Khi làm bạn có thể xem Adwords express về cách để quảng bá doanh nghiệp của bạn .

Độ tương phản

Độ tương phảm giúp giảm mỏi mắt và tăng sự chú ý của người xem bằng các phân chia rõ các thành phần trên một trang chúng ta có thể xem các ví dụ bên dưới về độ tương phản khác nhau.

Trên các phần mềm đồ họa như Adobe Ilustrator hoặc Photoshop chúng ta có thể chỉnh phần này khá dễ dàng.

Các bạn có thể thấy cùng là một kiểu chữ và khung, loại nào làm bạn hấp dẫn và nhìn vào tập trung nhất, loại nào là loại mà chúng ta nhìn khiến chúng ta có cảm giác khó nhìn và đau mắt hơn? Tôi tin các bạn đã có câu trả lời, chúng ta nên phân tác chữ và nền một cách rõ ràng về màu sắc nhưng không quá nhiều sẽ giúp nội dung của chúng ta dễ nhìn hơn, đây cũng là một số quy tắc thiết kế trước khi bạn seo hình ảnh.

Độ sống động

Độ sống động quyết định cảm súc của người xem, các màu sắc nóng và sáng khiến người đọc tràn đầy năng lượng hơn nhờ việc bạn để chúng lên website, điều này tạo ra một hiệu quả rất tốt khi chúng ta đang muốn quảng cáo sản phẩm hoặc chạm đến cảm xúc của khách hàng. Phần này các bạn có thể nên cẩn thận với màn hình và mắt mỗi người có người bị mù một số màu hoặc màn hình có độ hiển thị quang học, tần số, bước sóng khác nhau cũng sẽ gây ra hiện tượng chỉnh màu, ánh sáng quá đà.

Màu tối sẽ làm cho người dùng trầm lắng hơn, cho phép người đọc tập trung vào thứ khác nữa, ta có thể xem ví dụ ở dưới đây:

Website để màu sống động hơn

Còn ở dưới đây là ảnh với tông màu trầm hơn

Website để màu trầm hơn

Làm thế nào để phối hợp màu hiệu quả?

Màu cơ bản chúng ta thông thường có vàng, xanh và đỏ, tuy nhiên chúng ta còn có nhiều cách phối màu khác qua các thuật ngữ màu sắc và mô hình màu sắc khác nhau. Các màu khác phải kể đến như lục lam, xanh lá cây, màu đơn sắc, tím,vv… tùy vào các chúng ta phối hợp trong Color Wheel.

Dưới đây là 3 cách phối hợp màu thông dụng đó là: phối bộ ba, phối kết hợp, và phối liên tiếp.

Phối màu bộ ba

Ở đây chúng ta sẽ chọn màu theo hình tam giác đều giống hình bên dưới là có thể có bộ ba màu

Màu bộ 3

Phối màu đối xứng

Ở đây chúng ta sẽ chọn màu đối diện với màu chúng ta đã chọn trong vòng tròn màu

Màu đối xứng

Phối màu liên tiếp

Ở đây chúng ta sẽ chọn 3 màu liền nhau trong vòng tròn màu

Màu liên kết

Công cụ vòng tròn màu sắc

Chúng ta có khá nhiều lựa trọn như Kuler, Adobe Color Wheel, Color Scheme Designer 3

Adobe Color Wheel

Tóm lại

Việc lựa chọn chiến lược đẩy và kéo trong màu sắc và marketing khá giống nhau vậy nên các bạn nên chú ý các quy tắc và làm đúng, sử dụng thêm các ứng dụng đồ họa để chỉnh thêm các hiệu ứng như độ trong suốt, đổ bóng, làm mở hiệu ứng 3d để có một tác phẩm sống động, đẹp mắt hơn.