Việc thiết kế ra được một trang web tử tế cũng giống như việc bạn đang gỡ một trái bom hẹn giờ vậy, nếu bạn chọn nhầm màu – bạn sẽ tiêu tùng. Có thể nó sẽ không khiến bạn “tiêu tùng” theo đúng nghĩa đen như khi bạn phá bom nhưng nếu chọn sai một màu sắc cho bản thiết kế của khách hàng sẽ làm tiêu tùng cả sự nghiệp thiết kế của bạn. Việc lựa chọn màu sắc chắc chắn không phải là một chuyện đơn giản, nó bao gồm cả tính thẩm mỹ, bản sắc riêng của nó và cả tính khả dụng nữa. Còn kinh khủng hơn nữa khi mà hiện nay có khoảng hơn 16 triệu màu sắc khác nhau có thể được hiển thị trên màn hình. Đó quả là một con số vô tận cho những sự kết hợp của màu sắc!

May mắn thay bạn không cần phải có một chuyên gia tư vấn màu sắc để có thể lựa chọn được một màu tốt. Có cả một kho kiến thức trong việc sử dụng màu sắc, từ những hướng dẫn tỉ mỉ về mặt tính chất tới những lý thuyết về màu sắc đã được ứng dụng thành công trước đây, sẽ giúp cho bạn thành công khi làm việc với màu sắc.

Tâm lý màu sắc là một lĩnh vực nghiên cứu và phân tích những tác động về cảm xúc và hành vi của những màu sắc và màu phối. Những ông chủ của những website kinh doanh muốn biết màu nào sẽ làm cho người truy cập của họ chi nhiều tiền hơn. Những nhà trang trí nội thất thì lại muốn tìn ra một màu có thể biến đổi một căn phòng ngủ thành một ngôi Thiền thất yên tĩnh. Những cửa hàng thức ăn nhanh thì lại muốn biết sự phối màu nào có thể làm cho khách hàng ăn nhiều hơn. Đúng như bạn tưởng tượng đó, tâm lý màu sắc là một công việc kinh doanh thực sự.

Mặc dù điều quan trọng ở đây là phải biết được những màu sắc bạn lựa chọn sẽ ảnh hưởng như thế nào đến người xem, nhưng ý nghĩ rằng mỗi một màu cụ thể sẽ tạo ra được một phản ứng tâm lý duy nhất là một ý nghĩ sai lầm. Các nhà nghiên cứu tâm lý màu sắc đã công nhận rằng có rất nhiều những phản ứng khác nhau từ một màu sắc nhất định. Điều này bắt nguồn từ những cảm nhận cá nhân của mỗi người. Một điểm thú vị nữa là mỗi một nền văn hóa khác nhau sẽ có sự liên tưởng, nhận thức về màu sắc khác nhau. Nhớ những yếu tố này, hãy bắt đầu khám phá những sự liên tưởng tâm lý căn bản mà phần lớn người phương Tây phản ứng lại với từng màu nhất định.

Việc mô tả sự liên kết cảm xúc giữa một người với màu sắc có thể là một chủ đề hơi lập dị. Nếu bạn thấy khó tin thì hãy nghe những bài nhạc ưa thích của bạn và so sánh với những bài nhạc trong cuốn Colors của Ken Nordine. Mặc dù đa số các nhà thiết kế chỉ dừng lại ở mức ý nghĩa, đặc thù và tính chất, thì việc tìm hiểu thêm về yếu tố cảm xúc của những nhóm màu chính cũng sẽ rất hữu dụng.

Màu đỏ được đa số mọi người liên tưởng tới hóc - môn adrenaline và áp suất máu. Cùng với những tác động tâm lý trên, màu đỏ còn được cho rằng làm tăng sự trao đổi chất của con người. Nó là một màu sắc thú vị, ấn tượng và phong phú. Màu đỏ cũng là màu của sự đam mê. Không gì thổ lộ tình cảm nhiều hơn là việc sơn một bức tường màu đỏ tươi vào ngày Lễ tình nhân cho người yêu của bạn như ở hình 2.1. Những màu đỏ đậm hơn như màu đỏ rượu và màu đỏ nâu thì lại mang lại cảm giác nho nhã và nhiều cảm xúc – đôi khi những màu này cũng tạo ra sự “sang chảnh”. Hãy nghĩ tới những màu sắc này khi thiết kế cho những người đam mê rượu vang hoặc những người thượng lưu sành điệu. Màu đỏ càng đậm, càng nâu thì sẽ làm cho người ta liên tưởng nhiều hơn tới mùa thu và những vụ mùa thu hoạch.

 

Cũng như màu đỏ, màu cam là một màu rất năng động và tràn đầy năng lượng, mặc dù nó không đem lại nhiều niềm đam mê như màu đỏ. Thay vào đó, màu cam thường tượng trưng cho sự hạnh phúc, ánh mặt trời, nhiệt huyết và sự sáng tạo. Màu cam thì ít sang trọng và cảm xúc hơn màu đỏ, đây cũng là lí do vì sao các nhà thiết kế ở trung tâm dịch vụ Gowalla chọn nó cho logo của họ. Bởi vì màu cam ít được thấy trong tự nhiên, nó thường tự bắt vào mắt của chúng ta hơn là khi ta tìm kiếm nó. Vì vậy màu cam thường được dùng cho áo phao, nón chắn đường và áo đi săn. Màu cam cũng tượng trưng cho sự trao đổi chất và sự thèm ăn, nhờ vậy nó là màu rất hợp cho ngành đồ ăn và nấu nướng. Đây cũng có lẽ là lí do tại sao khi nhìn hình 2.2 lại làm cho bạn cảm thấy đói, mặc dù bạn không thích ăn cam đi chăng nữa.

 

Hình 2.2

Cũng tương tự như màu cam về tính năng động, màu vàng còn là màu rất dễ nhận thấy. Nó thường được sử dụng cho taxi và những biển báo. Nó còn làm cho ta liên tưởng đến sự hạnh phúc và là màu của những nụ cười như ở hình 2.3. Nước tăng lực vị cam và chanh Gatorage hiện vẫn đang là thương hiệu bán chạy nhất; điều này cũng một phần nào nhờ vào sự tràn đầy năng lượng mà màu cam và vàng mang lại.

 

Hình 2.3

Có một câu nói vô danh thường được sử dụng để ám chỉ những liên kết về màu sắc nói rằng: “trẻ con khóc nhiều hơn trong căn phòng màu vàng, vợ chồng cãi nhau nhiều hơn trong nhà bếp màu vàng và những ca sĩ opera hay giận dữ nhiều hơn ở phòng thay đồ màu vàng.” Mặc dù câu nói trên có đúng hay không thì điều mà tôi muốn nói ở đây là sử dụng quá nhiều màu vàng sẽ gây nên sự dư thừa năng lượng. Thôi nào! – bạn mà là đứa trẻ đó, bị kẹt trong phòng thay đồ với một cặp đang cãi nhau và một bà hát opera đang giận dữ thì bạn cũng sẽ khóc thôi!

Màu xanh là màu thường được liên tưởng tới thiên nhiên nhất. Nó là một màu nhẹ nhàng tượng trưng cho sự phát triển, sự tươi mát và hy vọng. Không có gì phải bàn cãi khi nói màu xanh là màu của sự bảo vệ môi trường. Về mặt trực quan, màu xanh dễ chịu cho ánh mắt và ít sự bùng nổ hơn nhiều so với màu vàng, cam hoặc đỏ. Ngoài việc nhiều nhà thiết kế web sử dụng màu xanh để lôi kéo những người truy cập yêu thiên nhiên, màu xanh cũng là màu thể hiện sự thịnh vượng, bền vững và giáo dục. Khi để màu xanh tươi lên nền màu đen thì sẽ rất nổi bật, cho bản thiết kế một cảm giác khó chịu. Đối với tôi, nó gợi nhớ lại về chiếc máy tính đầu tiên của tôi, một chiếc Apple IIe cũ kĩ. Đây cũng là một nguồn cảm hứng cho thiết kế của tôi cho màn hình chờ MailChimp ở hình 2.4.

 

Khi tôi còn nhỏ thì màu mà tôi thích nhất là màu xanh da trời. Không phải là bất cứ màu xanh da trời nào mà phải là màu xanh da trời ở hẻm núi Crayola. Màu xanh da trời thường được cho là màu được ưa thích nhiều nhất, nó tượng trưng cho sự cởi mở, trí thông minh, niềm tin và tạo cho người ta cảm giác yên bình. Mặt khác, xanh da trời còn được khám giá ra rằng làm giảm sự thèm ăn. Đây có thể là do hiếm có món ăn nào lại có màu xanh da trời. Ngoài Blueberries ra thì có bao nhiêu đồ ăn có màu xanh bạn có thể nghĩ ra?. Có vẻ như màu xanh da trời sẽ ít được sử dụng cho việc quảng cáo những sản phẩm thực phẩm.

Ngoài ra, màu xanh da trời đôi khi được coi là biểu hiện của điềm xui và rắc rối. Sự liên kết cảm xúc này có thể bắt nguồn từ nhạc blues, cũng như trong những bức vẽ sầu thảm của Picasso bao gồm bức “Blue period”. Ngoài những điều đó ra thì màu xanh da trời còn đem lại nhiều sự liên tưởng thú vị khác vì nó tượng trưng cho trời và biển. Đối với tôi thì màu xanh trong bức hình những viên đá chồng lên nhau ở hình 2.5 làm tôi cảm thấy dễ chịu hơn rất nhiều.

 

Từ những liên kết trực quan của màu xanh da trời này làm cho nó trở thành một sự lựa chọn chắc chắn cho các website thuộc ngành hàng không, máy điều hòa, máy lọc hồ bơi và tàu du lịch biển. Bạn có bao giờ để ý thấy rằng màu xanh da trời là màu chủ đạo trên logo của IBM, Dell, HP và Microsoft chưa? Đó là bởi vì màu xanh tạo ra một cảm giác bền vững và sự rõ ràng trong mục đích … cho tới khi bạn nếm trải cảm giác khi máy tính của bạn bị dính “màn hình xanh chết chóc”.

Về khía cạnh lịch sử thì màu tím tượng trưng cho vương quyền và quyền lực như mẫu tem trong hình 2.6. Điều bí mật đằng sau sự uy tín của màu tím nằm trong quá khứ, khi mà để nhuộm được một miếng vải màu tím là một điều hết sức khó khăn và phức tạp. Cho tới ngày nay, màu tím vẫn luôn tượng trưng cho sự thịnh vượng và trù phú. Sự thịnh vượng này cũng được màu tím thể hiện trong tự nhiên thông qua màu sắc của hoa, đá quý và rượu. Nó là sự cân bằng giữa sự giàu có của màu đỏ và hiệu ứng yên bình của màu xanh da trời. Theo như tác giả của cuốn The Web Designer’s Idea Book, Patrick McNeil nói rằng màu tím là màu ít được sử dụng nhất trong thiết kế web. Ông giải thích rằng tìm ra được một ví dụ tốt cho một website có màu tím chủ đạo là hết sức khó khăn và ông ta phải bỏ đi phần này trong cuốn sách của mình. Nếu bạn muốn thiết kế một website không đụng hàng thì màu tím là màu mà bạn nên cân nhắc.

 

Hình 2.6

Có thể bạn sẽ nghĩ rằng màu trắng chẳng có gì đặc biệt. Nhưng với màu trắng của những turbine gió ở hình 2.7 đã thực sự giúp quảng cáo được ý tưởng năng lượng sạch. Ở các nền văn hóa phương Tây, màu trắng được coi là màu của sự hoàn hảo, ánh sáng và sự thuần khiết. Đó là lí do tại sao những tờ giấy màu trắng tinh khiết được sử dụng trong những quảng cáo chất tẩy rửa và cô dâu mặc váy trắng trong ngày cưới. Nếu muốn biết thêm tại sao những ý nghĩa của màu trắng lại ăn sâu vào nền văn hóa của chúng ta thì bạn hãy tìm đọc bài thơ Design của Robert Frost. Trong bài thơ, Frost đã mô tả trái ngược lại với những liên tưởng của chúng ta bằng việc lấy màu trắng tượng trưng cho cái chết và bóng tối. Thú vị hơn nữa, màu trắng trong văn hóa Trung Quốc được liên tưởng tới cái chết và đau khổ. Với những khác biệt này, các nhà nghiên cứu đã nhắc nhở chúng ta rằng nên cẩn thận với những liên tưởng màu sắc mà chúng ta chọn, vì nó có rất nhiều sự khác nhau giữa những nền văn hóa khác nhau.

Trong thiết kế, màu trắng thường bị bỏ qua vì nó là màu nền. Nhưng đừng vì vậy mà bỏ quên nó, hãy thử đặt những đoạn văn bản trắng trên nền đen hoặc cho một khung nền trắng vào một hình màu sẽ làm nó nổi bật hơn. Sử dụng màu sắc còn là một cách không ngờ tới trong việc nhấn mạnh một câu văn nào đó.

 

Mặc dù màu đen thường phải bị mang tiếng xấu là tượng trưng cho sự chết chóc và ma quỷ nhưng nó vẫn có thể sử dụng để tượng trưng cho quyền lực, sự thanh tao, lịch lãm, và sức mạnh, tuy thuộc vào cách sử dụng. Nếu bạn đang suy nghĩ xem nên dùng màu nào và màu đó mang lại sự liên tưởng gì thì hãy tự hỏi bản thân rằng: “3 thứ đầu tiên xuất hiện trong đầu bạn khi bạn nghĩ tới màu này?” Khi tôi nghĩ về màu đen, tôi ngay lập tức nghĩ tới Johnny Cash, áo texedos và Batman. Khi tôi nghĩ về Johnny Cash, nghĩ về quần áo màu đen của ông, về giọng trầm lắng của ông và những bài hát đau buồn của ông.

 

Nếu bạn làm cách này với mỗi màu mà bạn định chọn, suy nghĩ ra 3 từ cho chúng, thì sẽ có cơ hội cho bạn có một ý tưởng hay về việc chọn màu sắc làm sao cho phù hợp với người truy cập.

Cho dù tâm lý màu sắc là rất quan trọng trong việc định hướng website của bạn nhưng hãy luôn nhớ rằng không có việc sử dụng sai màu sắc. Những tâm lý màu sắc có thể giúp bạn có được bản màu ưa thích của mình nhưng một bố cục màu thành công còn dựa vào sự hài hòa giữa những màu được chọn. Để đạt được sự hài hòa này, chúng ta sẽ cần nắm rõ một vài yếu tố khác về màu sắc nữa.

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.

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 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

 

Để đư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.

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 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ụ.

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.

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.

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.

Để 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.

 

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.

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 đế”.

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

 

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.

 

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.

 

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.

 

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ế.

 

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.

 

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.

 

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.

 

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é.

 

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ỉ.

 

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.

 

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ế.

 

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.

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.

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.

 

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.

 

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).

 

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.

 

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:

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.

Đ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.

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

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.

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”.

 

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:

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.

 

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

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.

 

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

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

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.

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.

 

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.

 

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.

 

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.