7 mẹo để quản lý màu sắc trên trang web của bạn

0
422

Giao diện là bộ mặt của một website, tạo nên ấn tượng đối với khách hàng. Để thiết kế một giao diện hoàn chỉnh thì bạn không thể bỏ qua yếu tố màu sắc, việc quản lý màu sắc trên trang web là rất quan trọng trong quá trình phát triển và bố trí trang web. Dưới đây là một số mẹo giúp bạn quản lý màu sắc hiệu quả, các bạn hãy chú ý theo dõi nhé.

Bài viết liên quan: 

5 kỹ thuật để tùy chỉnh màu sắc trong thiết kế UX

4 mẫu thiết kế thường niên tuyệt vời cho năm 2017

1. Đặt các bảng màu trong một Style Guide

quản lý màu sắc trên website

Đầu tiên khi bạn tạo một trang web, bạn nên có một Style Guide(tập hợp các tiêu chuẩn để tạo ra các trang web hay ứng dụng web) cơ bản hoặc bảng màu có chứa tất cả các màu sắc mà bạn định sử dụng. Điều này giúp bạn quản lý các màu bạn đã sử dụng để tránh trường hợp trùng màu.

Trong bảng màu này bạn không nên sử dụng màu đen, xám, trắng. Tuy nhiên, trong một số trường hợp nếu cần thiết ban vẫn có thể sử dụng các màu này.

2. Sử dụng một tập tin chỉ cho màu sắc

Bạn nên sử dụng Sass vì nó sẽ giúp bạn tách các file màu sắc thành nhiều file nhỏ và có thể nén tập tin CSS lại để tiết kiệm dung lượng. Như vậy bạn có thể để riêng các màu sắc chính khi thiết thiết kế trang web để dễ dàng quản lý hơn.

3. Đặt tên cho các tệp tin màu sắc

quản lý màu sắc trên website

 

Tốt nhất là bạn nên đặt tên cho từng file màu sắc khác nhau tương ứng với màu sắc mà bạn lựa chọn trong file để bạn dễ nhớ và dễ quản lý.

4. Sử dụng bản đồ màu Sass

Phương pháp này không bắt buộc vì tùy thuộc vào cách bạn viết CSS. Khi sử dụng bản đồ màu sắc bạn sẽ dễ dàng đặt tên cho các lớp khác nhau với các màu sắc khác nhau và thuộc tính CSS tương ứng của chúng.

Ví dụ: bạn muốn sử dụng màu nền cho tất cả các trang trên website thì bạn có thể thực hiện theo cách sau:

màu sắc trên trang web

5. Sử dụng Sass chỉnh màu sắc trên trang web(độ đậm nhạt, màu sáng tối)

quản lý màu sắc trên website

 

Khi bạn điều chỉnh độ đậm nhạt, sáng tối của màu trên trang web ngoài việc sử dụng một chuối giá trị HEX thì có một cách tốt hơn là sư dụng chức năng của Sass.

Ví dụ: Khi điều chỉnh độ đậm nhạt của màu sắc bạn sử dụng chức năng rgba, còn tùy chỉnh độ sáng tối thì sử dụng các chức năng tương ứng.

6. Sử dụng công cụ tùy chỉnh màu sắc

Bạn có thể sử dụng công cụ Eyedropper, nó sẽ giúp bạn chọn màu sắc hiệu quả. Trong các trường hợp chọn màu nền, màu đường viền hay màu văn bản bạn nên sử dụng bảng màu DevTools nó cho phép bạn cập nhật các màu sắc chỉ bằng một thao tác click chuột, do đó bạn có thể thay đổi màu sắc nếu thấy nó không phù hợp.

7. Sử dụng Plugin Atom để thử nghiệm các màu sắc

quản lý màu sắc trên website

Trong Atom có theme được sử dụng để tạo nên các các màu sắc khác nhau. Nó sẽ làm thay đổi các màu sắc Sass với các màu tương ứng khi ban thực hiện code tùy thuộc vào việc bạn điều chỉnh thông số Opacity hay sử dụng các chức năng cụ thể của Sass. Xem thêm: tự học PHP và  học PHP nâng cao

Trên đây là 7 cách hiệu quả giúp bạn để quản lý màu sắc trên trang web, nó sẽ giúp trang web của bạn trở nên hoàn hảo hơn, tạo tính nhất quán trong trang web và tạo ấn tượng tốt đối với người xem.

Cảm ơn các bạn đã theo dõi bài viết!

[Total: 1    Average: 5/5]

LEAVE A REPLY

Please enter your comment!
Please enter your name here