Cách phối màu

Trang chủ » Tư vấn » Tư Vấn » Để có một website hiệu quả » Cách phối màu

Cách phối màu

Trong bài trước, chúng tôi đã giới thiệu về ý nghĩa màu sắc. Trong bài này, chúng tôi sẽ giới thiệu cho bạc cách phố màu đẹp trong thiết kế web để bạn có một website thật đẹp và chuyên nghiệp. Một yếu tố xuyên xuốt quá trình màu sắc đó là những khái niệm về nhiệt độ màu. Màu nào chỉ cho bạn biết nước nóng? Màu nào làm bạn liên tưởng đến nước đá? Tại sao? Câu trả lời đã rõ ràng, nó được quyết định bởi cả 2 yếu tố văn hóa và tự nhiên.

Màu nóng là những màu từ đỏ tới vàng, bao gồm cam, hồng, nâu, và đỏ đô. Bởi sự liên tưởng về mặt trời và lửa, những màu nóng này đại diện cho nhiệt độ và cảm xúc. Khi được đặt gần các màu lạnh, màu nóng có xu hướng nổi bật hơn, thống trị hơn, và sẽ tạo ra được Sự nhấn mạnh mà chúng ta đã nói ở chương 1

Màu lạnh là những màu từ xanh tới xanh da trời, và đôi khi cũng có thể bao gồm một vài màu tím. Màu tím là sự pha trộn giữa màu đỏ và xanh da trời, vậy nên màu tím càng lạnh, như bạn cũng có thể đoán được, là màu tím gần với màu xanh hơn, trong khi màu tím đỏ tạo cảm giác nóng nhiều hơn. Những màu lạnh tạo ra sự bình tĩnh và có thể làm giảm căng thẳng. Trong thiết kế, màu lạnh có xu hướng chìm xuống dưới, làm cho nó phù hợp để làm màu nền và màu cho các yếu tố có kích thước lớn, vì chúng sẽ không làm nội dung của bạn bị quá nhiệt.

Giá trị màu sắc

Thước đo độ sáng và tối của một màu được gọi là giá trị màu của nó. Một màu nếu được pha màu trắng vào thì ta sẽ có được màu nhạt hơn. Ngược lại, nếu trộn vào màu đen thì ta sẽ có được màu đậm hơn màu ban đầu. Hình 2.9 mô tả điều này.

Hình 2.9

Cũng như màu sắc, giá trị màu sắc cho phép bạn tác động lên liên kết tâm lý với người dùng. Một công dụng nữa của giá trị màu là bạn có thể sử dụng nó để nhấn mạnh một thời điểm nhất định trong ngày. Ví dụ như khi bạn thiết kế một website về cuộc sống về đêm hoặc những buổi hòa nhạc, tất nhiên bạn sẽ chọn ngay những tông màu tối và hạn chế những màu sáng nhạt hơn. Những màu nhạt thường để chỉ ban ngày, mùa xuân và tuổi thơ. Hãy nghĩ tới: trẻ con, ánh mặt trời và Care Bears, những tông màu mà có thể được sử dụng một cách chuyên nghiệp, phức tạp, cũng như trưởng thành, điều mà mọi người đã từng đi bệnh viện có thể kiểm chứng. Lý do là những tông màu nhạt là những tông màu dịu dàng có khả năng tạo nên cảm hứng mà không có bất cứ tác dụng phụ nào. Những nhà thiết kế màu sắc nhìn chung thường không có cảm tình với những màu như “màu xanh bệnh viện”, nhưng nếu bạn đang thiết kế một website về spa thì những màu này là sự lựa chọn truyệt vời cho khung màu của bạn.

Độ đậm

Độ đậm của một màu là thước đo đánh giá độ mạnh hay yếu của màu đó. Rõ ràng là những màu đậm, sặc sỡ sẽ rất nổi bật. Cho dù là một màu lạnh đi chăng nữa thì màu xanh da trời đậm cũng sẽ thu hút được sự chú ý hơn là màu cam nhạt. Khi chúng ta thêm màu xám vào một màu, nó trở nên mờ và đục đi giống như là một bức tường màu be, hay là một buổi sáng mùa đông xám xịt. Những màu này thường đem lại ít sự thích thú và ít mang lại ánh sáng. Mặt khác, nói đi cũng phải nói lại, những màu mờ và đục này giúp làm giảm sự căng thẳng, làm cho bố cục sắp xếp trầm tĩnh và mờ ảo hơn.

Mối tương quan giữa giá trị và độ đậm của màu sắc được thể hiện trong hình 2.10

Hình 2.10

Lí thuyết màu 101

Để đưa những kiến thức cơ bản về màu sắc của chúng ta đi xa hơn bước nữa, ta sẽ cần phải học thêm nhiều kiến thức kĩ thuật căn bản về cách hình thành nên một màu và cách phân loại chúng.

Những màu đang hiển thị trên màn hình máy tính của bạn hiện giờ (cũng là những màu mà ta sẽ dùng để thiết kế website) được dựa trên mẫu màu cộng hưởng. Trong mẫu màu cộng hưởng, những màu sắc được thể hiện dựa theo tỉ lệ phẩn trăm của 3 màu đỏ, xanh lục và xanh da trời. Nếu chúng ta trộn chung hết 3 màu đó lại, ta sẽ có được màu trắng sáng. Những nếu bỏ màu xanh da trời ra thì chúng ta sẽ có màu vàng.

Nếu bạn có một máy in màu thì hẳn là bạn sẽ quen với cụm chữ CMYK ( gồm màu xanh lam, màu đỏ tươi, màu vàng và màu đen). Những máy in mực, in laser, hoặc bất cứ máy in công nghiệp 4 màu nào cũng đều tạo ra những hình ảnh chỉ với 4 màu trên. Quá trình này sử dụng mẫu màu không cộng hưởng. Bằng cách sử dụng mẫu màu này, chúng ta tạo ra được màu đen xám. Không thể tạo ra màu đen thuần túy được khi chỉ sử dụng 3 màu xanh lanh, đỏ tươi và vàng. Nhìn vào hình 2.11 sẽ cho bạn một cái nhìn tổng quát về cách thức hoạt động của 2 mẫu màu này.

Hình 2.11

Bất kể là bạn thiết kế in ấn hay thiết kế website thì những bài học truyền thống về lý thuyết màu sắc này là chìa khóa giúp cho chúng ta phân loại và chia nhóm được các màu. Đã có nhiều nghiên cứu về phân loại màu sắc từ thế kỉ thứ 3 trước công nguyên và từ các tác phẩm của Aristotle. Kể từ đó, nhiều nhà nghệ thuật và triết học nổi tiếng đã đóng góp thêm vào kho tàng kiến thức về màu sắc, bao gồm cả Isaac Newton, Johann Wolfgang von Goethe và Johannes Itten. Những công trình nghiên cứu của những cá thể này, vào các thập niên 17, 18 và 19, đã cung cấp những nền tảng cho chúng ta những hiểu biết về màu sắc. Cả 3 nhà nghiên cứu trên đều giải thích về màu sắc thông qua bánh xe màu, sử dụng màu đỏ, màu vàng và màu xanh da trời. Bánh xe màu là một mô hình đơn giản và hiệu quả được phát được đến ngày nay về các nguyên lý và thuật ngữ của màu sắc. Một bánh xe màu căn bản là một vòng tròn được chia thành 12 phần, như hình 2.12, mỗi phần là một màu chính 1, màu 2 và màu phụ 3.

Hình 2.12

Màu chính 1

Màu chính 1 là màu truyền thống đỏ, vàng và xanh da trời. Những màu này tạo ra một tam giác cân cho bánh xe màu, và cứ mỗi màu chính sẽ được ngăn cánh nhau bởi 4 màu phụ.

Màu 2

Bằng cách phối 2 màu chính 1 lại với nhau, ta được màu 2. Được diễn tả như trong hình bằng những hình tam giác nhỏ màu xám. Những màu 2 là cam, xanh lục và tím.

Màu phụ 3

Có tất cả 6 màu phụ 3: Màu đỏ son (đỏ - cam), màu vàng cam (vàng – cam), màu xanh lục nhạt (vàng – xanh), màu xanh ngọc (Xanh da trời – xanh lục), màu tím xanh (Tím – xanh da trời) và màu đỏ tươi (đỏ - tím). Như các bạn đã thấy thì khi kết hợp một màu chính 1 và một màu 2 sẽ cho ra được màu phụ 3.

CMYK là gì? Đỏ, vàng và xanh da trời hay CMYK

Tôi thực sự rất ngạc nhiên về sự thiếu tôn trọng đối với 3 màu đỏ, vàng, xanh dương và bánh xe màu. Tôi đã nghe nhiều người đánh giá nó là không có tác dụng, vô ích, chỉ dành cho con nít … Đúng là bánh xe màu đỏ, vàng và xanh dương không phải là một mẫu chính xác về tỉ lệ phần trăm ánh sáng. Nhiều người đã muốn loại bỏ hẳn bánh xe màu này ra khỏi chương trình giảng dạy nghệ thuật và chính thức sử dụng mẫu CMYK là một mẫu chung nhất như hình 2.13. Hãy chú ý rằng màu 2 của bánh xe màu CMYK là đỏ, xanh lục và xanh dương, có nghĩa là chúng ta có thể sử dụng CMYK để mô tả cả 2 mẫu cộng hưởng và mẫu không cộng hưởng.

Hình 2.13

Để miêu tả lại bảng màu CMYK, tôi đã sử dụng màu bột để vẽ, thực ra là màu nước được sử dụng trong ống. Khi được hòa với nước, chúng bắt đầu cho ra những màu mà bạn sẽ không ngờ tới sẽ thấy được ở mẫu màu CMYK. Như hình 2.14 cho thấy, màu đỏ tươi và màu vàng sẽ tạo ra màu đỏ cam, trong khi màu xanh lam và màu vàng lại cho ra màu xanh lục và những tông màu nhạt hơn. Đây là cách mà các máy in CMYK vận hành. Mực của nó mờ đi và những màu chồng chéo lên nhau cho ta được đa số các màu mà ta thấy được ở mẫu màu cộng hưởng, những màn hình máy tính hoặc màn hình tivi.

Hình 2.14

Khoan đã! Kia có phải là màu tím ko? Đúng vậy, với một lượng cân bằng màu xanh lục và đỏ tươi cho ra được tím đỏ hoặc tím chứ không phải ra màu xanh dương như là mẫu CMYK đã quy định. Có vô số những hiện tượng lạ này xảy ra khi chúng ta phối 2 sắc tố đục lại với nhau. Nói một cách đơn giản, thì nếu mà bức vẽ của bạn quá dày màu tới nỗi bạn không thể thấy nền trắng trên khung vẽ của bạn nữa thì những quy tắc màu trong bánh xe màu CMYK sẽ không còn đúng nữa. Trong những trường hợp này thì màu truyền thống đỏ, vàng và xanh dương sẽ là mẫu màu tốt hơn nhiều.

Nhưng chúng ta đang sử dụng vẽ kĩ thuật số, chứ không phải vẽ trên giấy. Lý do khiến cho nhiều họa sĩ kĩ thuật số vẫn giữ bánh xe màu đỏ, vàng và xanh dương để sử dụng là vì những lý thuyết và nội dung về màu sắc đều dựa trên mẫu bánh xe này. Chúng ta cũng dễ dàng thấy được mối quan hệ của màu sắc thì tuy thuộc vào vị trí của chúng trên bánh xe màu. Nhưng mỗi màu lại có một vị trí khác nhau trên mỗi bánh xe khác nhau. Ví dụ trong bánh xe màu truyền thống (đỏ, vàng và xanh dương), đỏ và xanh lá cây là 2 màu có vị trí đối nghịch, nhưng trong bánh xe CMYK thì màu xanh lam mới là màu đối nghịch với màu đỏ. Chúng ta không thể chỉ đơn giản là thay đổi vị trí đỏ và xanh dương là xong. Bởi vì vậy, những bố cục màu sắc mà tôi sẽ bàn tới trong một vài trang tiếp theo sẽ dựa trên mẫu màu đỏ, vàng và xanh dương.

Bất cứ mẫu màu nào cũng có điểm sai sót trong đó và được bổ sung bằng các màu phụ. Điều quan trong mà tôi muốn cho bạn biết đó là không có mẫu màu nào có thể mô tả một cách đầy đủ độ phức tạp của màu sắc và ánh sáng. Ngay cả tôi là người đa phần là thiết kế web – đa số sử dụng mẫu RGB (đỏ, xanh dương và xanh lá cây) – tôi vẫn sử dụng đỏ, vàng và xanh dương làm những màu căn bản. Tôi tin rằng sự phối màu giữa 3 màu này sẽ tạo nên được tính thẩm mỹ hơn và một thiết kế tốt phải có tính thẩm mỹ của nó. Vì vậy tôi sẽ cho các bạn xem lý thuyết màu sắc mà tôi đã học trong lớp thiết kế căn bản 2 khi tôi còn đang học đại học: bắt nguồn từ bánh xe màu truyền thống đỏ, vàng và xanh dương.

Bố cục màu sắc

Hiện tại thì chúng ta đã biết đủ về màu sắc để có thể nói về giá trị, độ đậm, liên kết tâm lý, nhiệt độ và vị trí của chúng trên bánh xe màu. Mọi thứ đều tốt đẹp, nhưng làm sao chúng ta có thể tìm ra được nhiều màu khác nhau mà có thể hài hòa với nhau? Đây là khi mà bố cục màu sắc có ích. Bố cục màu sắc là một cấu trúc căn bản để tạo ra được những sự phối màu hài hòa và hữu dụng. Có 6 bố cục màu:

- Bố cục đơn sắc

- Bố cục tương đồng

- Bố cục bổ sung

- Bố cục phân chia bổ sung

- Bố cục bộ ba

- Bố cục bộ bốn

Để có thể áp dụng bất kì bố cục nào thì chúng ta cần phải có một màu trước tiên. Cho là bạn đang thiết kế một website và đã chọn được một màu căn bản phù hợp với mục tiêu của web. Tất nhiên là sự lựa chọn này có thể không thuộc quyền của bạn, đôi khi bạn phải tuân theo khách hàng. Bây giờ hãy giả dụ bạn đang thiết kế website cho một gia đinh xiếc khỉ hoity-toity. Những con khỉ này vẫn nghĩ rằng chúng có dòng máu hoàng tộc và chúng yêu cầu phải có màu tím làm màu chủ đạo trong thiết kế web. Đồ khỉ ngủ ngốc … nhưng bạn biết luật rồi đó “ Khách hàng là thượng đế”.

Bố cục đơn sắc

Còn nhớ khi chúng ta nói về giá trị của màu sắc, chúng ta đã nói qua những màu đậm và màu nhạt. Một thiết kế bố cục đơn sắc – như hình 2.15 – là một thiết kế chỉ có duy nhất một màu làm chủ đạo và nhiều màu khác có độ đậm nhạt khác nhau của màu đó.

Hình 2.15

Ví dụ cho bố cục đơn sắc

Màu hồng đậm là một màu có độ đậm rất cao và sẽ được thật nổi bật khi kết hợp với đen và trắng. Đây rõ ràng là điều mà web Solid Giant đang nhắm tới cho thiết kế bố cục đơn sắc của minh như ở hình 2.16. Mỗi phần của một trang đơn này là sự kết hợp của chữ trắng, nền đen và một chữ màu hồng bự thiệt bự sao chép lại logo của trang.

Hình 2.16

Một ví dụ khác của thiết kế bố cục đơn sắc sử dụng màu đậm có thể được tìm thấy ở các trang web cá nhân của các tác giả, các nhà diễn giả và các nhà thiết kế dày dặn kinh nghiệm như Aarron Walter. Mỗi trang thể hiện một màu đơn khác nhau. Mỗi một hàng nội dung trong trang chủ của Aarron là kết quả của việc sử dụng mẫu màu RGB một cách thông minh. Mỗi dòng nội dung có một màu nền đen trong suốt. Khi trang được tải, JavaScript tải một giá trị alpha cao hơn với mỗi khung, từ đó tạo ra được một bố cục đơn sắc nhưng lại đầy màu sắc cho trang của mình.

Hình 2.17

Thay đổi Bố cục màu sắc

Nhiều website sử dụng nhiều bố cục màu sắc khác nhau cho mỗi phần của nội dung. Điểm này có thể đem lại cho phần nội dung sự phong phú và đặc biệt nhưng cũng có thể tạo ra một vài vấn đề về sự nhận dạng. Nếu bạn đinh sẽ sử dụng nhiều bố cục màu khác nhau trong cùng một trang thì bạn nên chắc chắn rằng logo, menu và bố cục tổng thể của trang phải thống nhất để tránh sự nhầm lẫn.

Art in My Coffee là một trang blog Tumblr được thành lập bởi Jina Bolton và thiết kế bởi Meagan Fisher. Trang blog thu thập và phân loại các nghệ thuật vẽ cà phê capuchino trên khắp thế giới. Không có gì là ngạc nhiên khi mà thiết kế đơn sắc lấy màu chủ đạo là màu nâu nhạt của một hạt cà phê như bạn thấy ở hình 2.18. Nếu bạn thấy hình ảnh và nội dung trong trang của bạn có nhiều màu sắc tương đồng thì sẽ là một ý tưởng tuyệt vời để làm theo thiết kế của Meagan này và hình thành nên một bố cục màu sắc tương đồng xung quanh nội dung của bạn.

Hình 2.18

Trang web New Zealand’s Black Estate Vineyard ở hình 2.19 cho thấy một bố cục hoàn toàn độc đáo là bố cục vô sắc. Đúng vậy, tôi tự chế ra từ đó đấy. Bất cứ bộ màu sắc nào chỉ chứa màu đen, trắng và xám đều được coi là bố cục vô sắc. Vô sắc ở đây có nghĩa là hoàn toàn không có chút màu sắc nào cả. Nhưng một bố cục tổng thể không có màu không có nghĩa là nội dung của nó phải không có màu theo. Với một màu nền đen, sử dụng được những khoảng trống, và ít có màu xung quanh, thì những hình ảnh sôi động trong nội dung dễ dàng có cơ hội làm nổi bật trang web lên, thổi linh hồn và sự sống vào trong bản thiết kế.

Hình 2.19

Bố cục tương đồng

Bố cục tương đồng là bố cục màu bao gồm những màu đứng gần kề nhau trên bánh xe màu. Bố cục tương đồng chiếm phần lớn trong những thiết kế dựa trên bánh xe màu. Điều mấu chốt để tạo nên được một thiết kế bố cục tương đồng tốt là phải nhớ nguyên tắc “no bụng, đói con mắt”. Không bao giờ sử dụng quá 1/3 của bánh xe màu, nếu không bạn sẽ làm người truy cập bị “bội thực”. Quay trờ lại với những chú khỉ hoity-moity của chúng ta ở hình 2.20, chúng ta đã có được màu tím là màu chủ đạo và bắt đầu thêm thắt vào một chút tông màu cam, tông màu gần kề với màu tím trên bánh xe màu.

Hình 2.20

Ví dụ về bố cục tương đồng

Một trang chủ đầy màu sắc và sinh động của trang Forrst là một ví dụ tiêu biểu. Khi bạn đang mải mê tham quan trang web này thì hãy dành ra một chút thời gian để chú ý tới bố cục tương đồng đầy sáng tạo được sử dụng ở đây. Từ bầu trời xa xôi cho tới màu nâu cam của đất, những màu được sử dụng trong thiết kế này chỉ gỏn gọn nằm trong 1/3 bánh xe màu mà thôi.

Hình 2.21

Blinksale, trong hình 2.22, là một trang web ứng dụng cho phép truy cập, quản lí và gửi những mẫu CSS. Nó cũng là một ví dụ điển hình cho sự sáng tạo trong thiết kế bố cục màu sắc tương đồng của một website doanh nghiệp. Trang web không thèm đếm xỉa tới những định kiến về việc một website doan nghiệp kiểu mẫu mà thay vào đó trang web là một biển màu mát mẻ với độ dao động màu từ xanh dương – xanh lá cây tới màu vàng. Bạn hãy chú ý cách mà họ sử dụng sự tương phản làm cho nút Call To Action (Sign Up) là chỗ đầu tiên đập vào mắt bạn. Ngoài ra, những đường thẳng trong hình chụp màn hình bên phải cũng giúp chuyển hướng ánh mắt của bạn vào nút Sign Up nhờ vào quy tắc về sự liên tục.

Hình 2.22

Trong khi thiết kế web Blinksale cho người ta thấy được sự mê hoặc và quyến rũ thì trang chủ Zappos (hình 2.23) lại đi thằng vào công việc. Điều này đạt được nhờ sử dụng bố cục màu sắc tương đồng giữa các tông màu xanh dương và xanh lá cây. Nút Search được tô một màu sáng nổi bật lên hẳn trong page nhờ vào màu sắc khác biệt với tất cả màu sắc còn lại trong trang web. Nhiều ý kiến cho rằng nút Search này còn bổ sung cho tông màu xanh dương của trang. Như vậy có nghĩa là gì? Hãy tiếp tục đọc để tìm hiểu nhé.

Hình 2.23

Bố cục bổ sung

Bố cục màu sắc bổ sung cũng giống như bản website nâng cấp của những chú khỉ hoity-toity được mổ tả trong hình 2.24. Bố cục màu sắc bổ sung bao gồm hai màu được đặt ở vị trí đối nhau trên bánh xe màu. Việc đặt 2 màu tím đỏ và xanh vàng trong cùng một thiết kế là điều không thường được thấy cho lắm những những con khỉ này cứ khăng khăng đòi tôi phải có màu tím trong hình. Xùy…… Tụi khách hàng này đúng là một bầy khỉ.

Hình 2.24

Ví dụ cho bố cục bổ sung

Trường đại học Florida là trường mà vợ tôi đã từng học. Sắc cam và xanh dương đã làm nên một màu nền vững chắc cho một thiết kế bố cục bổ sung. Một vài người nói rằng 2 màu này nhìn rất chõi nhau, nhưng một khi mà những màu này tượng trưng cho công ty hoặc thương hiệu công ty mà bạn đang thiết kế thì bạn sẽ không bao giờ bị sai được.

Hình 2.25

Trang web Pittburgh’s Sprout Fund Spring Progame được thể hiện ở hình 2.26 cho thấy rằng bố cục bổ sung không cần thiết phải là những màu đậm như cam và xanh dương. Bằng cách giảm độ đậm xuống, thiết kế màu đỏ và xanh lá cây này trông rất thiên nhiên và trần tục, giúp làm nổi thông điệp của website là sự đa dạng về sinh học. Đồng thời, những hình ảnh tuyệt đẹp và những kết cấu nghệ thuật như thổi hồn vào trong bản thiết kế.

Hình 2.26

Tôi thực sự không hiểu tại sao nhiều nghệ sĩ thường muốn có một website với nhiều hiệu ứng chớp tắt, rồi lại không bao giờ chịu nâng cấp chúng. Không kể đến nền tảng xuất bản, trang web của nhạc sĩ Zach Hendricks là một ví dụ tuyệt đẹp cho một bố cục bổ sung, như bạn thấy ở hình 2.27. Không thể nào chọn ra được những màu bổ sung nếu không biết cách kết hợp giữa màu nóng và màu lạnh. Người thiết kế website này thì chắc hẳn đã biết rõ điều đó. Đường chân trời và ánh mặt trời sáng chói tạo ra nhiều nhiệt được làm mát lại bằng màu xanh của biển. Nếu bạn muốn thí nghiệm lên chính khung màu này thì bí kíp được nằm ngay trên những hình tròn chồng lên nhau kế bên logo.

Hình 2.27

Những lỗi thường gặp khi sử dụng bố cục bổ sung

Việc lựa chọn được những màu sắc khác biệt nhau hoàn toàn để bổ sung cho nhau là rất khó khăn, nó có thể gây ra một hiệu ứng được gọi là tương phản song song. Đây là hiệu ứng mà khi hai màu này đều làm cho màu còn lại nổi bật lên và chiếm ưu thế hơn. Điều này thực ra lại rất có ích trong việc hướng mắt người dùng vào những điểm mà ta muốn. Tuy nhiên, nó có thể gây ra một sự khó chịu kinh khủng khi mà hai màu bổ sung được dùng như 2 màu nền trước và sau, như trong hình 2.28.

Hình 2.28

Một lỗi thường gặp phải nữa là chọn những màu không phải đối diện với nhau mà cũng không phải nằm trong vùng tương đồng với nhau (1/3 bánh xe). Lỗi này được gọi là rối loạn màu sắc bởi vì những màu này thường chõi nhau và làm cho người xem cảm thấy khó chịu. Thực tế là xu hướng thời trang của những thập niên 80 toàn sử dụng những màu rối loạn này. Khi bắt gặp những mẫu gặp phải lỗi rối loạn màu này làm tôi nhớ lại tới bộ sưu tập hình học của Trapper Keeper mà tôi rất thích hồi còn đi học – hình 2.29.

Hình 2.29

Như ví dụ trên cho thấy, lỗi này có thể được sử dụng nếu như biết cách. Những màu rối loạn thường rất được ưa chuộng với trẻ em, teen và các cặp sinh đôi, vì vậy nó là lựa chọn đúng đắn cho những trang có nhóm đối tượng trẻ. Nó cũng có thể được sử dụng cho những trang khác người lớn hơn nhằm tạo ra được sự nhấn mạnh. Để coi ví dụ của mẫu bố cục màu này thì hãy nhìn hình 2.30, web Bull+Arrows. Trang này chứa những hình ảnh nền ngẫu nhiên, mỗi hình có một bố cục màu riêng của nó. Nhưng sự liên kết 2 màu chính là đỏ sáng và xanh lục lam là đủ để bổ sung cho nhau và cho trang web trông sắc nét.

Hình 2.30

Bố cục phân chia bổ sung, bộ ba và bộ bốn

Bố cục phân chia bổ sung, bộ ba và bộ bốn nghe có vẻ khá khó hiểu nhưng hiểu đơn giản thì nó là sự đa dạng hóa của bố cục bổ sung.

Để tạo ra được một bố cục phân chia bổ sung, hãy sử dụng 2 màu kề sát 2 bên của màu bổ sung với màu bạn chọn. Ví dụ như ở hình bên trái ngoài cùng trong hình 2.31 ở dưới, màu đỏ là màu chính, vậy thay vì chọn màu xanh lá cây để hình thành một bố cục bổ sung, chúng ta sẽ chọn 2 màu sát 2 bên của màu xanh lá cây đó là màu lục nhạt và màu xanh ngọc để tạo ra một bố cục 3 màu phân chia bổ sung. Nên lưu ý là khi sử dụng màu chính của bạn với 2 màu nghịch lại của nó có thể làm cho bố cục màu sắc của bạn trông “trẻ trâu” và phản cảm, nhưng đôi khi đó lại là những hiệu ứng mà bạn muốn.

Để tạo ra một bố cục bộ ba, chúng ta đẩy sang 2 bên những màu phân chia bổ sung thêm một bậc nữa, để ta có những màu ta chọn nằm đều trên bánh xe màu. Ví dụ như khi chúng ta chọn màu đỏ, thay vì chọn 2 màu phân chia bổ sung là lục nhạt và xanh ngọc, ta đẩy chúng sang bên một nấc nữa để có được màu vàng thay vì màu lục nhạt, và màu xanh dương thay cho màu xanh ngọc. Bố cục này chia bánh xe màu ra làm 3 phần, tượng trưng cho bộ ba trong bố cục. Như ví dụ ở hình 2.32, hình bên trái ngoài cùng là bộ ba màu chính (đỏ, vàng và xanh dương) tạo nên bố cục bộ ba của chúng ta. Nếu bạn xoay nó theo chiều kim đồng hồ thêm 1 nấc thì bạn sẽ có xanh lục nhạt (vàng – xanh lá cây), tím xanh ( xanh dương – tím) và đỏ cam ( đỏ - cam).

Hình 2.32

Khi biết rằng bố cục bộ ba gồm 3 màu, bạn cũng có thể tự suy ra được bố cục bộ bốn sẽ gồm 4 màu. Một bố cục bộ bốn là sự kết hợp 2 bố cục bổ sung lại với nhau. Hình bên trái ngoài cùng ở hình 2.33 là một bố cục bộ bốn với sự kết hợp của 4 màu: cam bổ sung cho xanh dương và vàng bổ sung cho tím.

Hình 2.33

Trang web River City Church là một ví dụ hoàn hảo của bố cục bộ bốn. Chú ý rằng nó có chính xác 4 màu, ngoài trắng và đen. Chúng ta có sự bổ sung của cam và xanh dương, đi đôi với hồng và xanh lá cây. Để tìm ra được một ví dụ bố cục màu kinh điển chỉ với 6 màu là một nhiệm vụ hết sức khó khăn. Đó là bởi vì các nhà thiết kế thường lỡ tay tạo ra một màu mới hay nhầm lẫn chọn màu nhạt hơn so với màu mà anh ta đang tìm kiếm. Ở phần tiếp theo được gọi là “Các phiên bản khác”, chúng ta sẽ để cập đến những lựa chọn này.

Các phiên bản khác

Mặc dù hầu hết các nhà thiết kế đều nhận biết được các bố cục màu căn bản, những nó có thể gây ra sự nhàm chán và không chuyên nghiệp. Tuy nhiên nếu bạn đối xử bánh xe màu như là một bảng phóng phi tiêu, phi trúng màu nào thì chọn màu đó, thì bạn sẽ dễ dàng có được cho mình một bảng phối màu xấu xí cực – tin tôi đi, tôi đã thử rồi. Thay vì mạo hiểm như vậy, chúng ta có một vài cách để biến đổi những bố cục màu căn bản để tạo ra được một sự mới mẻ. Một khi bạn đã nắm rõ được lí thuyết về bố cục đơn sắc, tương đồng và bổ sung thì bạn có thể thử thí nghiệm những bố cục khác như sau:

Biến thể của bố cục đơn sắc

Thay vì chỉ sử dụng tông màu đậm hoặc nhạt hơn của một màu đơn, hãy thử pha trộn vào màu xám, đen và trắng. Điều này sẽ cho bạn được độ tương phản tốt hơn và làm cho đơn sắc được “đa dạng” hơn.

Bố cục tương đồng tùy chỉnh

Điều chỉnh độ đậm của một trong các màu tương đồng của bạn lên và giảm các màu khác xuống. Điều này sẽ làm cho màu đó được nổi bật lên giữa các màu mờ hơn.

Bố cục phân chia bổ sung đơn

Nếu bạn đã sử dụng được tốt bố cục phân chia bổ sung nhưng bạn muốn tạo thêm chiều sâu cho nó thì hãy thử một vài màu nhạt và đậm hơn của màu chủ đạo mà bạn chọn.

Tất nhiên những cái tên ở trên là do tôi tự chế ra, nhưng bạn sẽ nhận thấy được rằng những phiên bản mới này đều dựa trên 3 phiên bản bố cục chính thống. Thật ra cũng dễ để có thể thay đổi những bố cục màu truyền thống để tạo thêm nét độc đáo, nhưng hãy nhớ rằng bố cục mà bạn chọn là nền tảng để bạn xây dựng nên bảng màu cho web của bạn. Điều quan trọng là bạn phải có được một nền móng vững chắc, nếu không tất cả phần còn lại của thiết kế sẽ dễ bị lung lay sụp đổ.

Tạo dựng một bảng màu

Có thể bạn sẽ thắc mắc: “Một bảng màu ư? Nó có khác gì so với bố cục màu không?”. À thì cũng giống và cũng không giống. Một bố cục màu chỉ có thể cho bạn được 2, 3 hoặc tối đa là 4 màu để làm việc mà thôi. Những trên thực tế bạn sẽ phải cần thêm một vài màu nữa để có thể thiết kế được website. Tốt hơn là quá trình này được làm đúng chuẩn, hơn là bạn tự chọn thêm đại một vài màu nào đó. Số lượng màu bạn cần còn phụ thuộc vào độ phức tạp của thiết kế. Tôi muốn bắt đầu với tối thiểu 5 hoặc 6 màu được chọn cho bố cục website của tôi.

Hệ thập lục phân

Tới giai đoạn này rồi thì chúng ta sẽ chọn màu một cách cụ thể nhất, vì vậy ta sẽ cần một cách tiêu chuẩn để gọi tên các màu trong bảng màu. Có thể bạn đã biết về hệ giá trị màu thập lục phân RGB, nhưng nếu chưa biết thì tôi sẽ lướt nhanh qua phần lý thuyết sau đây.

Hệ số thập lục phân cũng gần giống như hệ số thập phân mà chúng ta dang sử dụng, chỉ khác là thay vì được nhân cấp theo đơn vị 10 thì hệ thập lục nhân cấp theo đơn vị 16, và có thêm 6 kí tự được thêm vào: A (tương đương với giá trị 10 trong hệ thập phân), B (11), C(12), D(13), E(14) và F(15). Bảng 2.1 cho ta thấy được biểu diễn số từ 1 đến 255 trong hệ thập phân và hệ thập lục.

Vậy thì những con số này có liên quan gì tới bảng màu của ta? Ở phần trước trong chương này tôi đã giải thích rằng màn hình của chúng ta sử dụng mẫu màu bổ sung RGB, và mỗi một pixel trên màn hình đều được tô màu sử dụng sự kết hợp của 3 màu đỏ, xanh lá cây và xanh dương. Một điều mà tôi chưa giải thích được là có 256 mức độ màu đỏ khác nhau, 256 mức độ xanh lá khác nhau là 256 mức độ xanh dương khác nhau; chúng ta có thể sử dụng chúng để tạo ra được 16,777,216 màu sắc khác nhau.

May mắn thay chúng ta có được một cách để miêu tả từng màu này dễ dàng và nhanh chóng – bằng cách sử dụng mã màu thập lục. Một mã màu thập lục cho thấy được mức độ cụ thể của 3 màu đỏ, xanh lá và xanh dương trong một màu. Lấy ví dụ kết hợp 3 màu đỏ, xanh lá và xanh dương ở mức độ cao nhất của nó tạo ra được màu trắng. Để sử dụng được màu trắng trên website, chúng ta mặc định mức đỏ của nó ở 255 (FF trong hệ thập lục), mức xanh lá ở 255 (FF) và mức xanh dương ở 255 (FF). Sau đó chúng ta nối lại những giá trị trong hệ thập lục theo thứ tự đỏ, xanh lá, xanh dương và ta sẽ ra được mã thập lục của màu trắng là FFFFFF.

Tương tự như vậy, màu đen được tạo ra khi ta cho mức của 3 màu đỏ, xanh lá và xanh dương ở mức 0 (00), thì có mã là 000000. Màu đỏ được cấu thành từ việc đặt cho màu đỏ mức FF, xanh lá và xanh dương mức 00, nên nó có mã là FF0000. Hình 2.35 cho thấy được một vài màu căn bản với giá trị thập lục của nó. Sau một thời gian dài tiếp cận và sử dụng mã màu thập lục này thì bạn sẽ bắt đầu nhìn các màu sắc dưới những mã số của nó. Số F26382, ngay lập tức, là sắc hồng san hô và số 371324 là sắc đỏ tím nhẹ của rượu. Một khi bạn nghĩ rằng mình đã thành “trùm cuối” trong mã màu thì bạn có thể truy cập vào trang http://yizzle.com/whatthehex/ để thử sức với game “Đoán mã màu”.

Hình 2.35

Những công cụ chỉnh sửa màu sắc và nguồn tham khảo

Tới giờ thì chúng ta đã hiểu sơ lược về cách biểu diễn một màu thông qua giá trị hệ thập lục. Bước tiếp theo là chúng ta phải tìm ra được những mã màu tương ứng với những màu mà chúng ta chọn để thiết kế. Hiện nay có rất nhiều những công cụ có thể giúp bạn chọn màu cho bảng màu của mình, bao gồm hàng đống ứng dụng đơn và các chương trình hỗ trợ trên cả Macs và PCs. Sau đây là một vài công cụ ưa thích của tôi:

Color Scheme Designer 3

Mặc dù có rất nhiều ứng dụng online dành cho việc chọn màu nhưng tôi vẫn ưa dùng chương trình Color Scheme Designer (từng có tên là WellStyled Color Scheme Generator) được đưa ra ở hình 2.36. Trong khi đa số các ứng dụng khác sử dụng bảng màu RGB hoặc CMYK thì công cụ tuyệt vời này sử dùng bảng màu truyền thống đỏ, vàng và xanh dương. Chỉ với một vài cú click bạn có thể chọn và tùy chỉnh một bố cục màu sắc cũng như biết được nhiều màu khác có thể đem lại sự hài hòa cho bảng màu của bạn. Khi đã có được một bảng màu bạn thích, bạn có thể sử dụng tính năng Vision Simulator để có thể biết được bảng màu của bạn trông ra sao; sau đó bạn có thể chuyển nó ra thành file HTML/CSS, XML, văn bản, bảng màu photoshop hoặc bảng màu GIMP.

Hình 2.36

Adobe Kuler

Một công cụ chọn màu xuất sắc nữa đó là Adobe Kuler. Bạn có thể lên trang web của Kuler và thiết kế những bảng phối màu dựa trên những tùy chình bố cục màu sắc mặc định tương tự như ở Color Scheme Designer 3. Ngoài ra, Kuler còn tự động xuất ra cho bạn một bảng màu dựa trên những hình mà bạn upload lên. Một tính năng chính nữa của Kuler là tính cộng đồng. Nếu bạn có một tài khoản đăng nhập vào web, bạn có thể lưu trữ và chia sẻ các bảng màu của bạn với những người dùng khác. Hình 2.37 cho thấy sự tiện lợi của ứng dụng AIR của trang. Ứng dụng này có thể được cài đặt trên cả Macs và PCs.

Hình 2.37

COLOURLovers

Nếu Kuler không đáp ứng đủ nhu cầu liên kết cộng đồng của bạn thì trang web COLOURLovers, hình 2.38, sẽ làm bạn hài lòng. Nó là một trang web với ít những công cụ thiết kế màu sắc nhưng bù lại, nó là nơi chia sẻ những nguồn cảm hứng thiết kế. Ban đầu website chỉ có một vài bố cục màu sắc nhưng giờ bạn đã có thể chia sẻ những bảng màu và tham khảo những nguồn sáng tạo màu sắc trong nhiều lĩnh vực thiết kế khác nhau.

Hình 2.38

Color Stream iPhone App

Color Stream là một ứng dụng (có giá bán 2.99$ trên iTunes store) kết hợp những tính năng hay nhất từ hai công cụ Color Scheme Designer và Adobe Kuler vào trong lòng bàn tay của bạn. Được viết bởi Sahil Lavingia, Color Stream cho phép bạn tạo ra được những bảng màu từ những bản nháp hoặc từ một bức hình hoặc thậm chí tự động thiết kế cho bạn một bố cục màu sắc tiêu chuẩn. Nó là một ứng dụng tinh tế, tỉ mỉ cho phép việc chọn màu cho bảng màu dễ dàng và thú vị hơn. Hình 2.39 cho thấy ứng dụng đang chọn một bảng màu thông qua một bức ảnh. Còn đối với những người xài hệ điều hành Android thì tôi cũng cam đoan với bạn là chương trình này sẽ có trên hệ điều hành của các bạn ngay khi mà cuốn sách của tôi đến tới tay bạn.

Hình 2.39

Pictaculous

Kuler và COLOURLovers là 2 công cụ tuyệt vời để tùy chỉnh một cách tỉ mỉ và cho phép bạn nhận được những đánh giá từ cộng đồng về bố cục màu sắc mà bạn đang thiết kế. Nhưng nếu lỡ bạn bất chợt nhìn thấy được một nguồn cảm hứng khi đang đi trên đường thì sao? Đây là khi mà Pictaculous hữu dụng. Đây là một dự án MailChimp Labs miễn phí cung cấp những bố cục màu sắc dựa trên những hình ảnh mà bạn gửi qua email. Bạn chỉ cần chụp một bức ảnh bằng điện thoại của bạn và gửi vào mail colors@mailchimp.com. Chỉ trong vài phút, bạn sẽ nhận lại được một email với 5 bảng màu, những bảng màu được nhiều lượt truy cập nhất từ Kuler và COLOURLovers, và một file đính kèm Adobe color palette (.aco). Cũng có nhiều cách khác ngoài cách dùng mail. Hình 2.40 mô tả lại những bảng màu đề nghị của công cụ Picaculous từ một bức hình mà tôi tải lên trang http://pictaculous.com/ từ máy tính.

Hình 2.40

Colour Contrast Check

Khi lựa chọn màu sắc cho bảng màu của bạn, một điều cần thiết là bạn phải chọn ra 2 màu có đủ độ tương phản để làm màu nền và màu chữ. Có một độ tương phản nhất định giữa chữ và nền là một điều tất yếu nếu muốn có một thiết kế tương tác; nếu không có nó, người truy cập có thể sẽ khó đọc được website của bạn. Một cách dễ dàng để kiểm tra xem đã có đủ độ tương phản giữa 2 màu chưa là bạn nhập giá trị 2 màu nền trước và sau của bạn vào trang web Jonathan Snook’s Colour Contrast Check.

Đôi khi những màu bạn tưởng rằng hợp lệ sẽ thất bại trong việc kiểm tra sự khác biệt và sự đòi hỏi độ sáng của trang web. Như Jonathan cũng nói trên một bài blog của mình rằng: “công cụ này không nên được coi là một sự chắc chắn … nó chỉ hướng bạn đến những lựa chọn màu tốt hơn mà thôi.”

Để có được một bảng màu độc nhất vô nhị thì điều tiên quyết là bạn phải luôn luôn để ý những thứ xung quanh. Nếu bạn thấy một trang web, một mẫu quảng cáo, một hình ảnh minh họa, hoặc bất cứ hình ảnh nào đập vào mắt bạn, hãy cố gắng nhận biết được những màu chính và xem coi đây là loại bố cục màu sắc nào. Nên nhớ rằng một nguồn cảm hứng có thể đến từ bất kì nơi nào. Có màu nào làm bạn nhớ đến một bài hát bạn ưa thích không? Màu của món ăn ưa thích của bạn là gì? Thậm chí là những màu sến súa trên bức tường ở nhà ba mẹ bạn cũng có thể cho bạn một ý tưởng. Việc chú ý đến những màu sắc xung quanh sẽ cho bạn được một “nhãn lực nhìn màu” và khả năng nghĩ ra được một bảng màu có thể đáp ứng được yêu cầu của khách hàng.

Áp dụng thực thế: màu nào cho những phiếu giảm giá?

Quay trờ lại với case study về Southern Savers mà chúng ta đã bỏ lại ở cuối chương 1, đội Squared Eye đã có nhiều tiến triển công việc tốt. Họ đã đi qua được giai đoạn khám phá để có được sự thân thuộc với website, với người truy cập của nó và cách mà Jenny quản lí nội dung của mình. Họ đã tham dự một buổi bán hàng và kiểm tra thử tính khả dụng của website. Họ cũng đã sử dụng những mẫu giấy ghi chú để thiết kế nội dung thông tin trước khi thiết kế bố cục nội dung trên Omnigraffe. Bây giờ là lúc tô màu cho dự án.

Để làm được điều này, Matthew Smith của Squared Eye đã mời cộng sự của anh ta là Andrew Ramos, chuyên gia về xây dựng thương hiệu để xây dựng nên một hình ảnh thương hiệu cho Southern Savers. Matthew nhận định: “ Ngay từ đầu thì chúng tôi chũng đã nhận ra được rằng Southern Savers nên xây dựng lại thương hiệu. Trang web hiện giờ thiếu sự nhận dạng nhưng nội dung và công việc kinh doanh thì lại đang rất mạnh. Vì vậy chúng tôi có rất nhiều việc cần phải làm”. Để bắt đầu với quá trình xây dựng thương hiệu, họ cần biết được màu nào thích hợp nhất cho thiết kế. Cùng với việc hỏi trực tiếp Jenny về màu sắc ưa thích của cô, Andrew còn thực hiện phương pháp moodboard cho dự án này.

Nếu bạn đã từng xem những chương trình truyền hình về thiết kế nội thất hoặc khung cảnh thì chắc hẳn bạn đã chứng kiến việc các nhà thiết kế đưa ra cho khách hàng của họ những bảng với những mẫu vãi, tranh ảnh về nội thất và màu sắc trên nó. Sự giới thiệu này cho nhà thiết kế đo được những phản ứng của khách hàng về dự án thiết kế trước khi bắt tay vào công việc. Hình 2.41 hiển thị một vài hình ảnh mà Andrew đã đưa cho Jenny coi.

Hình 2.41

Khi nhìn qua những yếu tố trong các hình trên, bạn sẽ nhận ra được rằng có rất nhiều màu sắc, kết cấu và hình dáng khác nhau. Nguồn cảm hứng của Andrew, và cũng là nội dung liên kết tất cả hình này lại với nhau, là từ khóa “Southern”. Ở hình 2.42 là những hình mà Jenny thích nhất.

Hình 2.42

Bởi vì Jenny không lựa chọn những hình này vì một màu cụ thể nào cả, bạn sẽ nhận ra rằng một màu chung đều có trong cả 3 hình, dó chính là màu xanh két. Cho dù cô có nhận ra hay không thì cô đã cung cấp một nền móng màu cho website của mình nhờ vào việc lựa những hình này. Một màu nữa cũng xuất hiện trong cả 3 hình đó là màu cam đỏ. Như bạn cũng biết trong phần Bố cục màu sắc ở trên, 2 màu này sẽ hình thành nên một bố cục màu bổ sung tuyệt đẹp, nhưng cuối cùng thì họ đã chọn màu xanh két để làm màu chủ đạo cho bảng màu trong thiết kế của mình vì đây là màu ưa thích của Jenny. Họ lấy ra những màu xanh trong bìa cuốn sách 20,000 dặm dưới đáy biển mà cô đã chọn. Những màu này nhắc nhớ cho những người truy cập về số tiền mà họ đã tiết kiệm được nhờ vào website. Sau dó họ pha trộn những màu xanh này lại với một chút màu vàng kem và thêm vào một màu xanh dương đậm ở phía ngược lại so với vùng màu tương đồng để làm màu trọng tâm. Bảng màu cuối cùng ở hình 2.43 nhìn thú vị, đơn giản và thân thiện.

Hình 2.43

Khi được hỏi sẽ chọn màu nào cho website của mình, Jenny giải thích rằng cô muốn tránh những tông màu trông quá nữ tính mặc dù đa phần người truy cập của cô là nữ. Cô nói “tôi muốn tất cả mọi người đều cảm thấy thoải mái khi sử dụng trang web”. Từ quan điểm này của cô thì những màu nền mà Andrew đã chọn là đúng đắn. “Xanh dương và xanh lá cây tạo ra một cảm giác yên bình và vô hại” Andrew nói “Đây có vẻ là một cách rất phù hợp để tiếp cận những người truy cập, những người vẫn thường nghĩ rằng để có được những phiếu giảm giá thì sẽ rất phức tạp.”. Công việc này giúp cho Andrew có được màu sắc mà anh cần để tiếp tục công việc xây dựng thương hiệu. Nó cũng thêm những thông tin có chiều sâu cho đội Squared Eye phục vụ trong quá trình dự án. Chiều sâu cũng là chủ đề mà chúng ta sẽ tiếp tục khám phá trong chương sau. Không, không phải tôi sẽ đọc cuốn “20,000 dặm dưới đáy biển” đâu; thay vào đó chúng ta sẽ bàn về Kết Cấu.