Hệ thống màu sắc trong thiết kế web

Một website đẹp mắt cần phải có sự bố trí màu sắc hợp lý, đây là yếu tố không thể thiếu và ảnh hưởng rất lớn đến trải nghiệm người dùng trong thiết kế web.

Điều tất yếu của một lập trình viên website đó là am hiểu về công nghệ thiết kế web, nhưng để cạnh tranh được với đối thủ thì họ cần phải cập nhật những xu hướng thiết kế web mới. Tuy nhiên, 2 thứ trên vẫn chưa đủ để làm nên một website hoàn hảo, một website đẹp mắt cần phải có sự phối màu hợp lý. Đây là một trong những thành phần không thể thiếu trong thiết kế web, hệ thống màu sắc trong website sẽ ảnh hưởng không nhỏ tới UX (trải nghiệm người dùng). Vậy chúng ta cùng tìm hiểu xem các xu hướng phối màu trong website.

Xu hướng Color Block – Color Hover

Nói đến Color Block chắc hẳn những bạn trong ngành thiết kế thời trang không còn lạ lẫm gì. Color Block nổi lên từ năm 2011 và hiện tại xu hướng này ngày càng trở nên phổ biến trong thiết kế web nhờ phong cách thiết kế phẳng và giao diện sắp xếp theo thẻ (phong cách thiết kế giao diện ứng dụng di động) đang được áp dụng ngày càng nhiều. Trong thiết kế web thì Color Block thường được sử dụng bằng cách chia trang web thành nhiều ô, sau đó phối các khối màu khác nhau tạo nên giao diện với các thẻ có sự chia tách riêng biệt.

play dot to

Ngoài Color Block, các lập trình viên thường có “thú chơi” riêng của mình với màu sắc, mang tên Color Hover. Nghe đến “hover” các bạn sẽ nghĩ ngay đến thao tác rê chuột. Đúng vậy, khi người dùng rê chuột qua đối tượng thì nó sẽ thay đổi màu sắc, Color Hover giúp người dùng dễ phân biệt các đối tượng (nút bấm, link) trên web hơn.

columnfive

Hai trang Column Five Media và PFD là điển hình cho việc sử dụng Color Block. Việc kết hợp với các thành phần giao diện người dùng như nút bấm, link, hiệu ứng chuyển động, cả hai trang đều điều hướng người dùng theo phong cách thẻ, các nội dung sẽ thay đổi hiệu ứng khi người dùng rê chuột tới các khối màu riêng biệt.

Trong khi Column Five sử dụng Color Hover thì PFD lại dùng khối màu, họ sử dụng những ảnh chụp nghệ thuật kết hợp với hiệu ứng cảnh để tạo điểm nhấn. Trong thiết kế tương tác thì màu sắc sống động là cách nhanh nhất khiến người dùng cảm nhận được khả năng kiểm soát cũng như hứng thú khi thao tác với nội dung.

madebypfd

Kết hợp với Texture

Trong thiết kế thì Texture là một yếu tố rất quan trọng, ta có thể hình dung thuật ngữ này như họa tiết vân bề mặt. Trước đây, Texture được sử dụng cho các thiết kế hình nền trung tính, nhưng hiện tại xu hướng này dần thay đổi khi các nhà thiết kế thường kết hợp giữa những gam màu đậm với những hiệu ứng huyền ảo để mang lại những trải nghiệm tuyệt vời. Trong thiết kế web, Texture và màu sắc thường kết hợp với nhau như một phần của phần nền, hoặc bổ trợ cho phần nền đó.

Trong thiết kế, Texture là một yếu tố rất đỗi quan trọng. Trong tiếng Việt, chúng ta có thể gọi thuật ngữ này như họa tiết bề mặt, vân bề mặt để dễ hình dung. Trước đây, Texture thường được sử dụng cho các thiết kế hình nền trung tính, nhưng xu hướng hiện tại đang dần thay đổi, khi các nhà thiết kế hay kết hợp giữa những gam màu đậm với hiệu ứng “ảo diệu” để đem lại những trại nghiệm mỹ thuật tuyệt vời. Trong thiết kế web, Texture và màu sắc thường kết hợp với nhau như một phần của phần nền, hoặc bổ trợ cho phần nền đó.

ryankeiser

Các bạn có thể thấy ví dụ trên đây có sự xuất hiện của màu vàng chanh làm nền khiến cho thiết kế tổng thể của sản phẩm có cảm giác hơi chói. Tuy nhiên, họa tiết ca-ro khiến cho trang web có vẻ thú vị hơn, đồng thời màu nền trông bớt chói hơn, tạo cảm giác thỏa mải hơn nhiều. Tông màu thiên nhiên kết hợp với vài chi tiết (như nút PLAY màu hồng) giúp hướng sự chú ý của người dùng tới phần nội dung bên phải website.

joyridetaco

Còn với website này, thì tông màu chủ đạo là cam với logo mà xanh nhạt, vân sọc ngang tạo ra sự tương phản, nhấn mạnh vào chi tiết logo khá vui tươi. Sự kết hợp màu sắc tưởng như không tưởng này hóa ra lại phản chiếu tinh thần thân thiện sôi nối của nhà hàng. Ngoài ra các bạn có thể để ý thấy website được bổ sung thêm một số hiệu ứng đổ bóng, tạo độ nổi và ngăn cách giữa phần contact và phần header.

Sử dụng sao cho đúng?

Xu hướng sử dụng màu “nổi” thường chỉ áp dụng cho các trang web sôi nổi thú vị của các cá nhân, tổ chức làm nghệ thuật. Tuy nhiên, xu hướng này đang trở nên ngày càng thịnh hành trong các trang tin tức, thời tiết hay sức khỏe. Các trang web hiện đại có xu hướng thiết kế thoát ra khỏi một khuôn khổ nhất định, vốn phổ biến với những giao diện web mẫu.

masterdynamic

Các thương hiệu khi thiết kế web thường sử dụng màu sắc theo chiến lược riêng, sao cho nhìn vào website cảm thấy thú vị, thu hút nhưng vẫn đảm bảo tính tin cậy. Nếu một webdesinger sử dụng màu sắc ấn tượng với những thành phần thiết kế có sẵn để tạo nên một trang web chạy theo xu hướng, nhưng không nổi bật được thương hiệu thì hệ thống nhận diện thương hiệu đó phần nào bị ảnh hưởng. Trong thiết kế web hiện đại có ba thứ bạn cần quan tâm tới bao gổm: – màu nền/văn bản, biểu tượng/nút bấm và cuối cùng là hệ thống điều hướng của website.

fortheloverof

Màu nổi đóng vai trò rất quan trọng trong việc nhấn mạnh từ khóa, hay những chi tiết quan trọng khác của toàn trang web. Ví dụ như chữ “LOVE” trên đây và nút “SIGN UP NOW” được nhấn mạnh bằng tông màu vàng, khiến nó đập thẳng vào mắt người dùng trước tiên, sau đó mới tới phần chữ màu trắng trên nền tối màu.

essentials

Ngoài ra thì các màu sáng cũng có khả năng hướng người dùng tới những thành phần quan trọng. Bạn có thể thử với những màu sắc đối lập hoàn toàn với tông màu của cả trang web, như những chi tiết màu cam trên đây đã được làm nổi bật hoàn toàn so với các chi tiết khác, nó kích thích người dùng nhấn vào các chi tiết này.

coloured

 Với những trang web có nhiều chỉ mục nhỏ thì việc lựa chọn màu sắc trở nên rất quan trọng. Ví dụ Colored Lines họ dùng những khối màu sắp xếp theo màu sắc cầu vồng, giúp người dùng có thể lựa chọn dễ dàng hơn với 8 tùy chọn chính của trang web, đồng thời không gây chói mắt cho người dùng. Ngoài ra bạn cũng dễ dàng thể hiện nội dung hơn nếu người dùng của bạn phải cuộn chuột liên tục.

Xu hướng 2015

Màu sắc có thể được sử dungjt heo nhiều ách khác nhau, tạo nên nét nổi bật cho website. Xu hướng hiện nay là sử dụng các màu sắc tươi sán cho website. Cách sử dụng lớp màu sáng phủ lên hình ảnh, video giúp lôi cuốn và khiến người dùng tò mò hơn, nó sẽ mang lại hiệu quả bất ngờ khi sử dụng kết hợp với hiệu ứng “hover”.

weareadap

Bạn có thể sử dụng màu sắc làm điểm nhấn cho website của mình như trang adaptable trên đây, nhà thiết kế phủ một lớp màu tím lên trên video, lúc này dòng chữ màu trắng sẽ được nhấn mạnh hơn.

lougelizard

Bên cạnh đó nhiều website lại sử dụng một cách hoàn toàn khác, thay vì sử dụng tông màu chung cho toàn bộ website họ chuyển sang sử dụng đa màu sắc. Với việc ứng dụng màu sắc của bộ lọc hình ảnh thường thấy trên các ứng dụng chỉnh sửa ảnh di động như Instagram, trang Lounge Lizard đem lại cảm giác hoài cổ, cổ điển nhưng vẫn rất hiện đại với thanh điều hướng kiểu “Hamburger” (ba vạch ngang).

Tham khảo: The Next Web

Previous:
Next:

Tagged with:

Đơn giản chính là đỉnh cao của sự tinh tế.

View all contributions by

Website: http://seobymoz.com

Chủ đề liên quan