• Công nghệ
  • Digital Marketing
  • Khám phá
  • Kinh tế
  • Social Media
  • Thiết bị
Vision Community > Digital Marketing >

Sử dụng màu sắc trong thiết kế web

web
Digital Marketing

Sử dụng màu sắc trong thiết kế web

27 Tháng Năm, 2021 / 821

Trong khi những xu hướng và công nghệ thiết kế web liên tục thay đổi, màu sắc lại là tiêu chí gần như nằm ngoài quy luật này. Là một trong những thành phần quan trọng trong thiết kế, hệ thống màu sắc của một trang web sẽ ảnh hưởng không nhỏ tới trải nghiệm và cảm quan của người dùng. Xu hướng màu sắc có thể thay đổi, nhưng cách dùng màu rực rỡ, sáng sủa dường như vẫn trường tồn với thời gian, khi mà đây là một thành phần hỗ trợ và bổ sung cho thiết kế, nhằm đem lại trải nghiệm người dùng có giá trị cao.

Xu hướng Color Block – Color Hover

Chip Kidd, nhà thiết kế đồ họa nổi tiếng bậc nhất với câu nói: “Các bạn trẻ, thiết kế đồ họa, nếu bạn làm việc hiệu quả thì nó sẽ là sức mạnh. Sức mạnh có thể truyền đạt ý tưởng, thay đổi mọi thứ. Sức mạnh này phá hủy bất cứ cuộc đua nào, hay cứu lấy một dân tộc khỏi sự tuyệt vọng. Ví dụ như trong thế kỷ này, nước Đức đã chọn chữ Vạn, Hoa Kỳ chọn Chuột Mickey và Superman”.

  • Color Block là phong cách kết hợp giữa các khối màu
  • Color Hover thiết kế web
  • Column Five thay đổi màu sắc cho các khung
  • PFD dùng khối màu

Nổi lên từ năm 2011 trong ngành thời trang, Color Block là phong cách kết hợp giữa các khối màu. Trong thiết kế web, xu hướng này đang ngày càng phổ biến 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. Đối với thiết kế web, Color Block thường được sử dụng bằng cách chia ô trang web, sau đó áp dụng các khối màu khác nhau nhằm tạo nên giao diện với các thẻ có sự chia tách riêng biệt.

Color Block a Wall

Color Block thường được sử dụng bằng cách chia ô trang web

Color Hover

Bên cạnh Color Block, thiết kế web cũng tồn tại một “thú chơi” riêng với màu sắc, mang tên gọi Color Hover. Thuật ngữ “hover” có nghĩa là thao tác rê chuột. Đúng vậy, màu sắc sẽ thay đổi khi người dùng rê chuột qua, giúp dễ phân biệt các đối tượng (nút bấm, đường dẫn) trên web hơn. Một số trang web nội dung có sử dụng hiệu ứng này có thể kể tới The Verge, GenK,…

Column Five Media và PFD

Hai trang Column Five Media và PFD ở đây là hai ví dụ điển hình cho xu hướng sử dụng khối màu. Kết hợp với các thành phần của giao diện người dùng như biểu tượng nút bấm, đường dẫn và hiệu ứng chuyển động, cả hai trang này đều điều hướng người dùng theo phong cách thẻ với các nội dung có thể thay đổi khi người dùng rê chuột tới các khối màu riêng biệt.

Trong khi Column Five thay đổi màu sắc cho các khung khi rê chuột qua, PFD lại dùng khối màu, bên cạnh những ảnh chụp nghệ thuật, và 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, màu sắc sống động là cách thức nhanh nhất để khiến người dùng cảm nhận được khả năng kiểm soát, cũng như thích thú khi thao tác với nội dung.

Column Five Media và PFD

Column Five Media và PFD điển hình cho xu hướng sử dụng khối màu.

Kết hợp với Texture

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 đó.

Texture

Tone màu cam tạo nên màu sắc rực rỡ, bắt mắt

Còn với ví dụ này, tông màu chủ đạo là cam cùng logo xanh đậm, vân ngang tạo nên tính tương phản, nhấn mạnh vào chi tiết logo khá nổi bật và 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.

Sử dụng sao cho đúng?

April Greiman có cống hiến lớn vào ngành thiết kế Thụy Sĩ, cũng là một trong những designers đầu tiên đưa công nghệ máy tính vào trong công cụ thiết kế: “Thiết kế phải thật đem đến sức thu hút, cụ thể, và có lẽ điều quan trọng hơn là gợi lên cảm xúc từ người nhìn”.

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

web mỹ phẩm

Thiết kế web mỹ phẩm đơn giản

Thiết kế web của các thương hiệu thường sử dụng màu sắc theo chiến lược riêng, sao cho dù thú vị, thu hút nhưng vẫn đảm bảo tính tin cậy. Nếu nhà thiết kế 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 trang web “chạy theo xu hướng”, nhưng không thể hiện bản sắc của thương hiệu, hệ thống nhận diện thương hiệu đó đã phần nào bị ảnh hưởng. Có ba thứ cần quan tâm tới màu sắc trong thiết kế web hiện đại, bao gồm 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 trang web.

web thương hiệu

“LOVE” và biểu tượng “SIGN UP NOW” được nhấn mạnh bằng tông màu vàng, khiến chúng gần như đậ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 phần nền tối màu

Màu trung tính đó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ới ví dụ trên đây, chữ đen và nền hồng.

web màu sắc nhẹ nhàng

Xu hướng màu sắc này đang dần trở nên ngày càng thịnh hành, thiết kế của Balo đơn giản

Bên cạnh đó, các màu sáng cũng có khả năng hướng người dùng tới những chi tiết quan trọng. Hãy 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, ví dụ màu hồng nền xanh của trang web trên đây dường như nổi bật hoàn toàn so với những chi tiết khác, giúp người dùng biết được việc nên làm tiếp theo là chọn biểu tượng có trung tính này.

Khối màu

Những khối màu được sắp xếp theo thứ tự cầu vồng

Với những trang web có rất nhiều chỉ mục nhỏ trong hệ thống điều hướng, lựa chọn màu sắc sẽ trở nên rất quan trọng. Với ví dụ của Colored Lines, họ dùng những khối màu được sắp xếp theo thứ tự “cầu vồng”, giúp người dùng có thể chọn lựa dễ dàng hơn giữa 8 tùy chọn điều hướng chính của trang web. Ngoài ra, các trang web “cuộn liên tục” cũng dễ dàng thể hiện nội dung hơn nếu có một hệ thống điều hướng có màu sắc dễ nhận biết.

Xu hướng 2015

Nhìn chung, các màu đậm và nổi bật sẽ ngày càng được lựa chọn nhiều hơn bởi chúng có vai trò bổ sung, tạo thêm nét mới cho các trang web. Trong khi đó, cách sử dụng màu sáng làm lớp trên của các thành phần hình ảnh, giúp lôi cuốn, khiến người dùng “tò mò” hơn, đặc biệt khi kết hợp với hiệu ứng “rê chuột”.

Xu hướng 2015

Màu đỏ lôi cuốn, huyền bí

Thay vì bị bó buộc bởi các triết lý thiết kế lỗi thời, xu hướng mới sẽ ứng dụng nhiều hơn những màu sắc thú vị, lạ mắt, tưởng chừng như không hề có sự “liên quan”. Dưới đây, nhà thiết kế sử dụng màu đỏ dạm làm lớp trên cùng, dưới đó là một đoạn video khiến người dùng rất dễ ưu tiên tầm nhìn vào dòng chữ màu trắng.

Xu hướng màu đỏ cam

Bên cạnh đó, xu hướng hiện đại cũng sẽ dần chuyển thành sử dụng đa màu sắc, thay vì chỉ một tông màu chung cho cả dự án web.

Xu hướng màu đỏ cam

Nắm bắt xu hướng, màu sắc nổi bật của năm đem đến cái lạ, độ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

Tags: Lựa chọn màu sắc web, web hiện đại, xu hướng thiết kế
Share Post
6 mô hình độc đáo xâm chiếm th...
ứng dụng
6 sai lầm “chết người...

Related posts

Digital Marketing
Read more

Bảng xếp hạng môn bóng đá nam U23 tại SEA Games 31 

26 Tháng Năm, 2022 / 170
Với người hâm mộ bóng đá nam Việt Nam thì chắc chắn không thể bỏ qua Seagames 31. Ngoài ra sở hữu ngay cho mình...
Google Keyword
Digital Marketing
Read more

Google Keyword Planner là gì? Hướng dẫn sử dụng công cụ hiệu quả nhất

6 Tháng Mười, 2021 / 454
Ngoài kỹ năng set-up quảng cáo, khả năng đọc hiểu các chỉ số cơ bản thì việc chọn đúng nhóm từ khóa ảnh hưởng rất...
Tìm kiếm từ khóa
Digital Marketing
Read more

Lợi ích của Google Keyword Planner trong tiếp thị sản phẩm

6 Tháng Mười, 2021 / 375
Quá trình tiếp thị sản phẩm đến với khách hàng luôn là vấn đề mà các doanh nghiệp quan tâm. Hiện nay, các công ty...
Công cụ Google Keyword Planner
Digital Marketing
Read more

Phân tích volume từ khóa bằng Google Keyword Planner

6 Tháng Mười, 2021 / 339
Nghiên cứu và phân tích từ khóa là việc làm cần thiết trong SEO. Đây là tính năng cần thiết trong việc đưa ra chiến...
Base E – Hiring
Digital Marketing
Read more

Base E – Hiring – Chinh phục doanh nghiệp lớn nhờ bài toán tuyển dụng

27 Tháng Chín, 2021 / 326
Vừa mới ra mắt chỉ hơn 1 năm tuy nhiên hệ thống quản trị tuyển dụng Base E – Hiring đã chinh phục hàng loạt...

Bài viết mới

  • Bảng xếp hạng môn bóng đá nam U23 tại SEA Games 31 
  • Kinh nghiệm cá cược bóng đá từ các cao thủ
  • Google Keyword Planner là gì? Hướng dẫn sử dụng công cụ hiệu quả nhất
  • Lợi ích của Google Keyword Planner trong tiếp thị sản phẩm
  • Phân tích volume từ khóa bằng Google Keyword Planner

Copyright © 2021 by Visionity

Hướng dẫn cá cược