GOTW
thiet-ke-noi-thatthiet-ke-do-hoalam-phim-quang-cao

6 cách phối màu cơ bản trong thiết kế website

04/12/2015 SEO

Màu sắc luôn là một yếu tố cần thiết và quan trọng đối với bất cứ một bản thiết kế. Hãy cũng UniDesign tìm hiểu 6 cách phối hợp cơ bản và phổ biến nhất trong thiết kế website mà bạn nên biết và sử dụng nhé.

Màu sắc là một trong những yếu tố quan trọng giúp cho một bản thiết kế trở nên sinh động và nổi bật hơn. Kết hợp màu sắc ra sao cho một bản thiết kế tuỳ thuộc vào rất nhiều yếu tố như: văn hoá, đối tượng mà website đó hướng tới hay đơn giản chỉ là sở thích của tác giả. Bạn – với tư cách là một nhà thiết kế - nên hiểu được các quy luật phối màu cơ bản; để từ đó, giúp cho bạn có những sự lựa chọn đúng đắn về màu sắc khi thiết kế một website.

1. Phối màu đơn sắc (Monochromatic)

Đây là phối màu đơn giản nhất và cũng vô cùng hiệu quả. Khi sử dụng phối màu đơn sắc, bạn thường chỉ sử dụng một màu duy nhất hay đôi lúc bạn cũng có thể sử dụng nhiều sắc độ khác nhau của cùng một màu để chúng cộng hưởng với nhau.

schemes2

Giao diện website của Wake

Vì không quá cầu kì và phức tạp, thường thì phối màu đơn sắc nhìn rất dễ chịu với người nhìn về mặt cảm xúc. Tuy nhiên, cũng chính vì sự đơn giản và đôi lúc có phần đơn điệu đó, khi sử dụng phối màu này, bạn sẽ gặp khó khăn để tạo điểm nhấn với một số chi tiết trên website của mình.

Phối màu đơn sắc thường được sử dụng khá nhiều trong những thiết kế website mang phong cách tối giản. Sự đơn giản của chúng giúp mắt chúng ta không bị xao lãng quá nhiều và hoàn toàn tập trung vào các yếu tố quan trọng của website như nội dung và hướng tương tác. Ngoài ra, chúng dễ dàng làm cho các typeface đơn giản trở nên sắc nét và thu hút hơn.

Wake là một ví dụ điển hình cho việc sử dụng phối màu đơn sắc này thành công. 

2. Phối màu tương đồng (Analogous)

Màu tương đồng (thường là ba màu) giao tiếp rất tốt với những màu kế bên nó trên vòng tròn màu; qua đó, tạo nên những phối màu rất nhã nhặn và thu hút.

schemes3

Cách phối màu tương đồng 

Phối màu tương đồng đa dạng về màu sắc hơn so với phối màu đơn sắc và vì thế, khi sử dụng chúng, bạn có thể phân biệt các nội dung khác nhau trên một website dễ dàng hơn. Tuy có sự pha trộn của nhiều màu sắc, nhưng do các màu này đứng gần nhau trên vòng tròn màu, nên phối màu này không quá rối rắm và nhức mắt. Ngược lại, chúng rất êm dịu và vừa mắt.

schemes4

Giao diện website Do a Backflip 

Thường thì khi sử dụng phối màu này, các nhà thiết kế sẽ bắt đầu từ việc chọn ra cho mình một màu chủ đạo. Màu này sẽ được sử dụng nhiều nhất và các màu khác phải tương tác tốt với màu chính này. Sau đó, nhà thiết kế sẽ chọn màu thứ 2 với nhiệm vụ phân biệt các phần nội dung quan trọng của website hay các typeface. Màu thứ 3 thường dùng cho những chi tiết không quá quan trọng (thường là các chi tiết trang trí).

Website của Do a Backflip sử dụng phối màu tương đồng khá thành công với tông màu đỏ và cam.

3. Phối màu bổ túc trực tiếp (Complementary)

Phối màu bổ túc trực tiếp sử dụng những cặp màu đối xứng nhau trên vòng tròn màu để tạo nên những phối màu năng động và tràn đầy năng lượng cho website. Rõ ràng, với cặp màu đối xứng được sử dụng, bạn rất dễ để tạo điểm nhất cho các chi tiết quan trọng trên website. Cũng chính vì sự đối lập giữa các màu, phối màu bổ túc trực tiếp này hoàn toàn không phù hợp nếu website của bạn mang phong cách của  sự thư giãn và nhẹ nhàng.

schemes5

Cách phối màu bổ túc trực tiếp

Cũng như phối màu tương đồng, khi chọn màu cho phối màu bổ túc trực tiếp này, các nhà thiết kế sẽ thường chọn cho mình một màu chủ đạo và sau đó sẽ kiếm màu đối xứng với nó làm màu phụ. Tuy nhiên, khi sử dụng phối màu này, bạn nên nhớ đừng sử dụng những màu có sắc độ nhạt (de-saturated colors), vì những màu như vậy sẽ làm mất đi tính tương phản cao giữa các cặp màu với nhau, vốn là điểm mạnh của phối màu này.

 schemes6

Giao diện website Ondo

Ondo đã sử dụng vô cùng thành công với phối màu này cho website của mình. 

4. Phối màu bổ túc bộ ba (Triadic)

Đây là phối màu an toàn nhất trong các phối màu. Phối màu này được hình thành với ba màu nằm ở ba góc khác nhau của vòng tròn màu và tạo nên một hình tam giác đều.

schemes7

Cách phối màu bổ túc bộ ba

Vì ba màu nằm ở ba góc khác nhau trên vòng tròn màu nên chúng kết hợp và bổ sung với nhau tạo nên một sự cân bằng cho phối màu này. Cũng chính vì sự cân bằng này, tuy có đến ba màu được sử dụng nhưng bạn sẽ thỉnh thoảng thấy phối màu này khá đơn điệu, an toàn và thiếu sáng tạo.

schemes8

Giao diện của DocReady 

Phối màu này rất khó sử dụng khi các bạn muốn tạo điểm nhấn trên website của mình. Tuy vậy, một số nhà thiết kế lại rất thích phối màu này vì chúng thường giúp cho các website được tiếp nhận và nhận được nhiều phản hồi tốt từ người sử dụng vì sự hài hoà và cân bằng của các màu được sử dụng.

DocReady là một website ví dụ cho việc sử dụng phối màu bổ túc bộ ba này.

5. Phối màu bổ túc xen kẽ (Split-complementary)

Nếu bạn muốn website của mình thu hút và gây ấn tượng mắt đến người dùng ngay từ lúc đầu thì phối màu bổ túc xen kẽ này sẽ là sự lựa chọn hoàn hảo cho bạn.

schemes9

Cách phối màu bổ túc xen kẽ

Phối màu này được tạo bởi ba màu nằm ở ba góc khác nhau trên vòng tròn màu và tạo nên một hình tam giác cân. Đôi lúc, bạn có thể sử dụng thêm một màu thứ tư; màu này phải đối xứng với một trông hai màu tạo nên đáy của hình tam giác cân đó.

Chính vì sự linh hoạt trong việc chọn màu mà phối màu này thường mở ra cho các nhà thiết kế rất nhiều cơ hội khám phá và tìm được các cặp màu lạ và độc đáo cho website của mình.

schemes10 

Giao diện webiste Shopify

Ngày này, có rất nhiều website chuộng phối màu này. Chủ yếu họ sử dụng màu đen và trắng làm những màu chủ đạo, tô điểm bằng các màu thứ 3 bắt mắt như đỏ và xanh với các chi tiết phụ. Phối màu này đơn giản và an toàn nhưng vô cùng hiệu quả. Tuy nhiên, để thử thiachs bản thân cũng như muốn website của mình trở nên cầu kì hơn, bạn có thể sử dụng những màu bậc nhất (vàng, đỏ, lam) cho mùa chủ đạo.

Shopify's 2014 Commerce Report là một website điển hình của việc sử dụng phối màu bổ túc xen kẽ này.

6. Phối màu bổ túc bộ bốn (Rectangular Tetradic hay Compound Complementary)

Đây là phối màu phức tạp nhất trong sáu phối màu cơ bản. Nhưng nếu bạn chịu bỏ công sức và thời gian để chọn lựa màu sắc kỹ càng, phối màu này sẽ như một phần thưởng khi nó sẽ mang đến cho website của bạn sự hiện đại và mới mẻ, rất phù hợp với nhiều xu hướng thiết kế hiện nay.

schemes11 

Cách phối màu bổ túc bộ bốn 

Phối màu này được hình thành với hai cặp màu bổ túc trực tiếp. Những sự đối nghịch cũng như bổ sung giữa hai cặp màu này chính là điểm mành và khác biệt đặc trưng của phối màu này. Các cặp màu trong phối màu này thoạt nhìn thì rất khó để có thể phối hợp và sử dụng chúng đúng cách, vì thế bạn sẽ mất khá nhiều thời gian cho khâu chọn lọc và lên màu cho website của mình. Mẹo để chon màu cho phối màu này cũng khá cơ bản khi bạn cần chú ý cân bằng thật tốt giữa hai gam màu nóng (đỏ, cam hay vàng) và lạnh (xanh, tím).

 schemes12

Giao diện website Formlets

Formlets là website đã sử dụng phối màu này một cách xuất sắc khi cách họ chjn màu và cân bằng chúng với nhau vô cùng bắt mắt và ấn tượng.

Chọn màu gì? Phối màu ra sao? Đó là những câu hỏi mà bạn phải tự mình trả lời khi cho ra đời một bản thiết kế. Sáu phối màu cơ bản trên tuy là dành cho thiết kế website nhưng bạn có thẻ áp dụng chúng cho bất cứ thiết kế nào bạn muốn. Khi bạn muốn phối màu cho thiết kế đơn giản như thiết kế phẳng, hãy lưu ý đến những phối màu đơn sắc, tương đồng hay bổ túc trực tiếp. Trong khi những thiết kế phức tạp nhiều layer hơn cần những phối màu phức tạp và cầu kì hơn. Nên nhớ, sự lựa chọn vẫn thuộc về bạn – nhà thiết kế chính.

Nguồn: designs.vn

Bài viết khác

10 mẹo vô giá giúp tăng hiệu quả thiết kế văn bản

Thông tin và hình ảnh là một phần không thể thiếu trong thiết kế đồ họa. Chúng là một công cụ tăng cường sự giao tiếp đông thời nâng cao tính thẩm mỹ, nghệ thuật của tác phẩm. Dưới đây Unidesign xin cung cấp 10 cách thức làm cho văn bản trở thành một phương tiện hiện quả trong việc thiết kế trực quan.

Vật liệu đơn sắc chủ đạo bên trong những ngôi nhà vùng ngoại ô của người Ý

Văn phòng kiến trúc Deltastudio sử dụng một dải các vật liệu đơn sắc để tạo ra những căn phòng tràn ngập ánh sáng với tầm nhìn hướng về phía vùng nông thôn xung quanh, tại trang trại hiện đại gần thị trấn Caprarola của Ý.

13 thủ thuật trang trí phòng làm việc tại nhà tạo cảm giác vui tươi

Sử dụng những gợi ý thiết kế dưới đây để làm cho phòng làm việc tại nhà của bạn có cảm giác đầy hứng thú và vui vẻ, xóa bớt đi những cảm giác mệt nhọc trong công việc hàng ngày.

Những xu hướng chụp ảnh bạn cần biết

Dù cho bạn là nhiếp ảnh gia chuyên nghiệp hay tập tành với những ý tưởng sáng tạo, hoặc nhà thiết kế đang cần những bức ảnh chụp cho dự án của mình, hãy cùng UniDesign tìm hiểu thêm về 5 trào lưu ảnh mà bạn nên biết thời điểm này nhé.

Làm ấm ngôi nhà của bạn bằng 6 màu sắc nhiệt đới dưới đây

Màu vàng tươi, màu cam, xanh dương hay các sắc thái tươi sáng khác có thể gia tăng tinh thần nhiệt lượng trong mùa đông ở bất cứ thời điểm nào.

10 cách sử dụng những thiết kế hình khối lập phương trong nội thất

Những hình khối lập phương ngộ nghĩnh trong thiết kế sẽ tạo nét độc đáo cho nội thất. Tuy nhiên, làm thế nào để sử dụng chúng hiệu quả nhất, Unidesign sẽ giới thiệu với bạn ngay đây!

Chương trình đào tạo

Thiết kế Nội thất

Thiết kế Nội thất

Trong tình hình kinh tế đang phát triển hiện nay, đây là một trong những ngành nghề khan hiếm nhân lực nhất trong thị trường lao động.Khi học thiết kế nội thất bạn có thể tạo ra những điều không thể thành hiện thực trong cuộc sống.

Chi tiết
Học làm phim kỹ thuật số.

Học làm phim kỹ thuật số.

Ngày nay, phim ảnh đã trở thành món ăn tinh thần không thể thiếu đối với con người. Đặc biệt những người trẻ đầy nhiệt huyết và tự tin nghĩ rằng họ có thể tạo ra được những thước phim đẹp mắt hơn những hình ảnh họ đang thấy nếu được đào tạo bài bản. Điều đó thúc đẩy nhu cầu học làm phim ngày càng cao.

Chi tiết

Việc làm

Tuy áp dụng hình thức và phương pháp đào tạo tương đối mới mẻ ở Việt Nam nhưng Trường Đào tạo Quốc tế UNIDESIGN đã có những bước trưởng thành và thành tựu đáng kể trong công tác dạy học cũng như tổ chức.

Chi tiết

UNIDESIGN có bộ phận quan hệ sinh viên, bộ phận này ngoài việc giữ liên lạc thường xuyên và liên tục với các sinh hiện tại và đã tốt nghiệp trên cả nước, còn là cầu nối giữa sinh viên với các doanh nghiệp.

Chi tiết

Họ nói gì về chúng tôi

“Lúc chưa biết đến trường em thường chỉ quan tâm đến ngành học của các trường đại học chính quy. Sau khi biết đến trường, em mới biết đến ngành thiết kế đồ hoạ. Và từ lúc ấy, em thấy nó rất hợp với mình và quyết tâm theo học"

Em yêu thích chuyên ngành Thiết kế từ khi còn nhỏ. Em rất thích vẽ, thời gian rảnh rỗi em hay ngồi vẽ và còn vẽ cho cả các bạn nữa. Lúc đầu, em dự định thi trường ĐH Mỹ Thuật Công Nghiệp nhưng em chưa có điều kiện được học vẽ nhiều, mới chỉ vẽ theo ý thích của mình thôi.

“Em thấy trường có chương trình đào tạo khá là toàn vẹn, chỉ tập trung đào tạo ngành nghề mà học viên theo học, không có những môn phụ. Ngoài ra, nhà trường không chỉ chăm lo về mặt học tập mà còn chăm lo cả mặt hoạt động ngoại khóa khá tốt"

Hiện nay em đang băn khoăn lựa chọn giữa chuyên ngành Thiết kế đồ họa và chuyên ngành Làm phim tại Trường Đào tạo Thiết kế UniDesign. Lý do em chọn ngành Thiết kế khá đơn giản, vì bản tính của em khá quậy, cá tính

“Ấn tượng đầu tiên của em về trường là cái tên UNI, viết tắt của You and I – khá ý nghĩa và sáng tạo. Rồi em lại càng ấn tượng hơn sau chuyến du lịch Tam Đảo"