An Introduction to Color Theory for Web Designers - giới thiệu lý thuyết mầu cho website

Who this Article is Written for - Đối tượng

This article is written for people that are just starting to learn formal design principles. It is not meant to be a comprehensive study of how to apply color to a design (we’ll have plenty of those in the future), but rather, it’s an overview for those looking for practical advice that will help them approach color theory within the context of a web design project.

Bài này viết cho những ai mới bắt đầu học nguyên tắc thiết kế. điều đó ko có nghĩa là để nghiên cứu toàn diện về việc làm thế nào để áp dụng mầu sắc trong thiết kế (ta sẽ nói đến vđ này nh trong phần tới ),nhưng nói đúng hơn thì đó là một cái nhìn tổng quan cho những ng tìm kiếm những lời khuyên thiết thực sẽ giúp họ tiếp cận lý thuyết mầu sắc trong việc thiết kế dự án web .

I’m writing this because I’ve always found it difficult to decide on a color scheme that works well for a project; it’s probably one of the toughest decisions that I have to make as a designer. However, by learning the basics of Color Theory and some excellent tools available on the web, I’ve been able to strengthen my designs and account for this weakness.

A Few Candidates for the Target Audience:

Mục đích phục vụ một vài nhóm người sau :

+ A programmer looking for advice to help them create a visually appealing prototype. người lập trình tìm kiếm lời khuyên để giúp họ tạo một sản phẩm có chất lượng ảo giác .

+ An aspiring designer who wants a brief overview of the subject. Những nhà thiết kế mong muốn tóm tắt tổng quát các chủ đề.

+ Someone who doesn’t understand the difference between Web Development and Web Design. Những ai ko hiểu về sự khác biệt giữa Web development và Web design .

In A Nutshell, What is Color Theory?

vậy lý thuyết mầu là j ?

Color Theory actually covers a number of things, but at the most basic level it is the interaction of colors in a design through complementation, contrast, and vibrancy.

Lý thuyết mầu sắc thực sự bao gồm một số điều , nhưng ở mức cơ bản nhất đó là tương tác mầu sắc trong thiết kế qua bù mầu ,tương phản, và cộng hưởng .

While the first part of this definition is straightforward (and admittedly bland), it is the last 3 terms which define the basic Color Theory:

Trong phần đầu của định nghĩa này là đơn giản , đó là 3 bước xác định mầu cơ bản .

Complementation - Bù mầu

Complementation refers to the way we see colors in terms of their relationships with other colors. When colors occupy opposite ends of the color spectrum, they lead people to consider a design visually appealing by establishing a happy medium the eye can reside in. Rather than straining to accommodate for a particular area of the color spectrum, the eye is provided a balance. There are two common uses of complementation: the Triadic and Compound color scheme that we will be discussing later. Complementation can take you to new heights of design sophistication when you can begin to master the intricacies of color combinations.

Bù mầu đề cập đến cách chúng ta cảm nhận mầu trong mối quan hệ của chúng với các mầu khác.

khi mầu sắc đối nhau trong vòng mầu , chúng hướng mọi người tới một thiết kế trực quan hấp dẫn bằng cách thiết lập một môi trường hấp dẫn cho mắt. Thay vì mắt phải điều tiết căng thẳng để phù hợp với một vùng quang phổ mầu.Có hai cách bù mầu phổ biến đó là :Triadic(tam giác và hòa trộn hỗn hợp mầu

. Bù mầu có thể giúp bạn có một thiết kế tinh tể về mầu sắc hơn khi bạn bắt đầu làm chủ đc các cách kết hợp mầu phức tạo .

Contrast- tương phản

Contrast reduces eyestrain and focuses user attention by clearly dividing elements on a page. The most apparent example of contrast is an effective selection of background and text color, as shown below:

Phân chia các yếu tố hợp lý và rõ ràng trên trang để giảm sự căng thẳng do mỏi mắt và tập trung của ng dùng .1 ví dụ rõ ràng của tương phản là lựa chọn hiệu quả giữa mầu nền và mầu text, như bên dưới :

Bằng cách chọn lựa này, thì sự bù mầu sắc làm text trở nên dễ đọc hơn.

Đôi khi chọn lựa mầu sắc của văn bản là các yếu tố mầu sắc sẽ làm giảm sự điều tiết căng thẳng của mắt khi tập trung .

If you’re ever in doubt, the best practice is usually to choose a very light color for the background, and a very dark color for the text itself. This is one area where color theory is crucial to the usability of a web design; In most projects, large text areas aren’t a place to try to be really creative – so keep it simple and legible.

Nếu bạn nghi ngờ, thì cách tốt nhất là luôn chọn một mầu sáng cho nền ,và một mầu tối cho text của nó. Lý thuyết mầu quyết định tới khả năng dùng mầu cho thiết kế web,trong hầu hết mọi project, văn bản hay text ko pải dùng để sáng tạo mà đơn giản chỉ cần dễ đọc và đơn giản.

Along with establishing readable text, contrast can also draw the viewer’s attention towards specific elements of a page. Think about highlighting a textbook: when you want to draw your attention to a specific portion of the page, you make the surrounding area look different than the rest of the text. The same principle applies to Web Design: Using a variety of contrasting colors can help focus the viewer’s attention on specific page elements.

Cùng với việc thiết lập văn bản dễ đọc, tương phản cũng có thể tạo ra những yếu tố hướng chú ý rõ ràng trên trang. Khi ban muốn tạo một sự chú ý giữa từng phần trên trang,bạn chi cần tạo các vùng lân cận khác biệt với vùng khác của văn bản. Nguyên tắc của thiết kế web là : sừ dụng một trạng thái khác nhau của tương phản mầu có thể gây sự tập trung chú ý của ng xem với những yếu tố rõ ràng .

If your website has a dark background, focus on the main content with a lighter color.

This principle also applies to Analogous colors (which we will discuss later):

Nguyên tắc này cũng áp dụng cho các mầu tương đồng :

Sức mạnh của thiết kế đồng mầu là nó chứa đựng cách sử dụng biến đổi bóng của mầu sắc .

Vibrancy - rung động(cộng hưởng)

Not to sound silly, but vibrancy dictates the emotion of your design. Brighter colors lead the user to feel more energetic as a result of your design, which is particularly effective when you are trying to advertise a product or invoke an emotional response. Darker shades relax the user, allowing their mind to focus on other things. A great example of this is a comparison between CNN and Ars Technica:

Nó chứa đựng cảm xúc rung động trong mỗi thiết kế . Mầu sắc tươi sáng hơn dẫn người xem cảm thấy thoải mái, trong đó đặc biệt hiệu quả khi bạn cố để quảng cáo một sản phẩm hay một phản ứng cảm xúc. Mầu tối hơn giúp thư giãn, cho pép đầu óc có thể tập trung vào những điều khác. một ví dụ rõ ràng để so sánh giữa CNN và Ars Technica:

CNN’s website features a stark red banner across the top, which leads to heightened emotions from users as they are stimulated by the vibrancy of the design (and the contrast between red, white, and black- the primary color scheme of the website).

Ở trang web CNN có một banner đỏ to ở ngay trên đầu trang ,nó làm tăng cảm xúc của ng xem khi chúng đc kích thích bởi sự sống động do kết hợp mầu sắc trong tk (đó là sự tương phản giữa đỏ,trăng,đen - những mầu chính của website)

Ars Technica utilizes a darker color scheme for its background and header to relax the user and focus their attention towards their content. By doing so, their technical and detailed writing is considered the forefront of the site. And more importantly, the user is allowed to transfer the mental energy traditionally reserved for responding to vibrant colors to understanding the article’s contents.

Còn ở trang này thi tác giả sử dụng mầu tối cho nền và phần đầu để tạo sự thoải mái cho ng dùng và để hướng sự tập trung vào nội dung .Bằng cách làm như vậy ,thì tính kỹ thuật và chi tiết văn bản sẽ đc đưa lên hàng đầu .Và điều quan trọng hơn đó là cho phép người dùng chuyển từ trạng thái đọc hiêu truyền thống tới việc cảm nhận cảm xúc bài viết thông qua sự sống động của mầu sắc .

How Do I Select an Effective Color Scheme? - tạo sơ đồ hiệu ứng mầu sắc

Triadic Color Scheme - sơ đồ tam giác

Composed of 3 colors on separate ends of the color spectrum. There is a very easy way to create a Triadic color scheme:

Có một cách rất đơn giản để tạo sơ đồ mầu tam giác :

1. Take a color wheel, and choose your base color - trong vòng mầu ,chọn ra một mầu sắc cơ bản của bạn
2. Draw an Equilateral Triangle from this point - vẽ ra một tam giác toán học
3. The three points of the triangle will form your tri-color scheme.

By using an Equilateral Triangle, you can ensure the colors have equal vibrancy and compliment each other properly.

Bằng cách dùng một tam giác đều, bạn có thể đảm bảo các mấu sắc sống động và hỗ trợ cho nhau theo đúng cách .

Compound Color Scheme (aka Split Complimentary) - mầu đối diện

The Compound color scheme is based on providing a range of Complementary Colors: two colors are chosen from opposite ends of the color spectrum. By doing so, the designer is allowed more freedom in their design while also benefiting from the visual appeal of complementary colors.

Sơ đồ mầu trên dựa trên việc cung cấp một dải mầu của các mầu bù nhau : 2 mầu đc lựa chọn đối nhau trên dãy quang phổ .Bằng cách đó , ng thiết kế đc phép tự do hơn trong thiết kế trong khi vẫn hiệu quả trong việc sử dụng mầu bù .

Analogous - Mầu tương tự(tương đồng)

An Analogous color scheme is based on a careful selection of colors in the same area of the color spectrum. Usually the colors are differentiated by their vibrancy, and their contrast when compared to each other.

Mầu tương đồng dựa trên sự lựa chọn cẩn thận của các mầu giống nhau trong cùng vùng quang phổ mầu .Thường thì các mầu sắc khác biệt nhau bởi chúng cộng hưởng lẫn nhau, và tương phản khi so sánh chúng với nhau :

Two examples of an Analogous color scheme are: 2 ví dụ của mầu tương đồng :

1. Shades Yellow and Orange - bóng giữa mầu vàng và mầu cam
2. A Monochromatic Selection (Shades of a base color) - lựa chọn mầu đen trắng .

Case Study: Gamers With Jobs

Nghiên cứu trường hợp : trang web Gamers with jobs

To finish this article, let’s examine a website using some of the principles that we’ve discussed. Gamers with Jobs is a website devoted to a higher analysis of videogames, through its features, podcast, and forum.

Để kết thúc bài viết này , hãy cùng test một trang web sử dụng một vài nguyên tắc cái mà chúng ta đang tranh luận .Gamers with jobs là một trang web tích cực phân tích cao về videogames, qua các tính năng và podcast, và các 4room.

• The grey page background with the white content background focuses the user’s attention towards the center of the website. Với nền trang là mầu ghi và nội dung mang mầu sáng gây sự chú ý tập trung hướng theo dõi của ng dùng vào trung tâm trang web .
• The dark bar across the page (usually reserved for advertising) “frames” the user’s view into the content.Một thanh bar tối mầu trên trang (thông thường dành cho quảng cáo ) ở trong khung thu hút sự tập trung ng xem vào nội dung của nó .
• The use of orange-red in the headers draws the user to the categories, feature titles, and aspects of the website.Sử dụng mầu cam đỏ trong tiêu đề thu hút ng xem tới các categories , đặc tính tiêu đề và giao diện của web .
• The neutral color scheme provides enough visual stimulation to keep the audience interested, while still allowing them enough mental freedom to enjoy the site’s content.Sơ đồ mầu trung tính cung cấp khuyến khích ảo giác để giữ sự hấp dẫn cho ng xem,, trong khi vẫn cho pép họ đủ thấy thoải mái để đọc nội dung .

Closing Remarks and Summary - Kết thúc và tóm tắt

One of the hardest aspects of working with colors is that sometimes when colors have not yet been arranged in a design, they do not appear to work well together. However, once they are applied, their visual harmony usually becomes apparent. I’ve caused myself a fair amount of frustration by adjusting the colors chosen in Kuler before applying them to a design, only to find that the color scheme was altered just enough to be unappealing.

Một trong những khía cạnh khó khăn khi làm việc với mầu sắc là đôi khi mầu sắc chưa đc sắp xếp theo thiết kế, chúng ko làm việc tốt với nhau ,tuy nhiên, một khi chúng đc áp dụng đúng cách thì hiệu quả hình ảnh của chúng trở nên rõ ràng với nhau .

Trust in the theory! Apply the colors chosen through a color principle, and then adjust as needed. Doing so will save you a lot of time, and strengthen your design skills as you’ll begin to see color in more refined, artistic, and even scientific ways!

Tin tưởng vào lý thuyết ! Áp dụng lựa chọn mầu sắc qua một nguyên tắc mầu, và sau đó điều chỉnh chúng cho thật hợp lý .Làm vậy sẽ giúp tiết kiệm thời gian. và mạnh mẽ hơn trong thiết kế của bạn như khi bạn bắt đầu hiểu mầu sắc tinh tế ,nghệ thuật cũng như theo cách khoa học hơn .

Summary - tóm tắt

• Choosing colors on opposite ends of the spectrum creates a visual harmony for the eyes. Lựa chọn mầu đối nhau trong dãy quang phổ sẽ tạo một hiệu ứng thị giác cho mắt .
• A high contrast between elements makes text easily readable, and guides your reader’s attention.Tương phản cao giữa các yếu tố khiến ng dùng dễ đọc và hướng sự tập trung tốt hơn .
• The brighter the colors, the more mental energy they will consume.Mầu sắc sáng hơn, sẽ tạo tinh thần sảng khoái hơn
• Don’t be afraid to use tools such as Kuler and Color Scheme Designer 3, they only make your life easier and prevent you from becoming frustrated with the learning process. sử dụng Kuler và Color scheme designer 3 !