Đưa ra một bảng màu, làm thế nào để tôi áp dụng cho thiết kế trang web?

Chỉ cần có một cái gì đó cụ thể để thảo luận, nói rằng tôi có bảng màu này:

Nguồn

Có nhiều bài viết về cách chọn bảng màu kết hợp dựa trên các màu bổ sung, màu đơn sắc, v.v. Tuy nhiên, khi tôi có một bộ màu, làm cách nào để quyết định màu nào là tiêu đề, màu nào là liên kết, màu nào là nền và văn bản. Ngay cả khi tôi quyết định rằng tôi muốn ánh sáng tối hoặc tối trên lược đồ sáng, việc đặt các màu còn lại trên màn hình vẫn có thể khiến trang web trông xấu xí.

Có quy tắc ngón tay cái hoặc hướng dẫn chung giúp người ta quyết định màu sắc đi đâu?

Tôi thấy rất nhiều người bình luận những câu như "không có câu trả lời đúng" mà tôi (loại) không đồng ý với ... Chắc chắn có ít nhất một câu trả lời đúng, có thể một vài câu và tôi chắc chắn cũng có một loạt câu trả lời sai, thiết kế tốt là để đạt được giải pháp tốt nhất có thể dựa trên các nguồn lực và thời gian dành cho bạn Và chắc chắn một giải pháp như vậy sẽ vượt xa một số giải pháp thay thế. Bạn đã cho chúng tôi một bảng màu cho mục đích thảo luận, vì vậy tôi sẽ làm điều đó và trả lời câu hỏi của bạn dựa trên bảng màu được cung cấp. (Vì tôi chưa thấy bố cục bạn đang làm việc với nó vẫn sẽ khá rộng nhưng nó sẽ có một số quy trình để bạn làm theo.)

Vì vậy, màu sắc đầu tiên tôi muốn chọn khi tạo sơ đồ màu trong dự án web là nền cho phần thân và màu văn bản chính. Thông thường nên chọn hai màu tương phản nhất để điền vào các vai trò này và bảng mẫu của bạn cũng không ngoại lệ, vì vậy trong trường hợp này, các màu là # DEE1DD và # 28363D. Bây giờ chúng ta phải quyết định sử dụng cho văn bản và sử dụng cho nền và trong hầu hết các trường hợp, tôi cố gắng sử dụng màu sáng hơn cho nền và tối hơn cho văn bản. Đã có nghiên cứu đáng kể cho thấy chúng ta đọc một màu tối trên một màu sáng dễ dàng hơn một màu sáng trên bóng tối vì vậy đó là điều tôi thường mặc định trừ khi có lý do cho một cái nhìn tối hơn (như bạn đang làm một trang web cho một kim loại nặng ban nhạc hoặc một cái gì đó ... tôi sẽ cho rằng đó không phải là trường hợp ở đây). Vì thế,

Tiếp theo tôi muốn chuyển sang thứ mà tôi nghĩ là mục quan trọng nhất tiếp theo, đó là siêu liên kết. Bạn muốn một màu tương phản đủ từ nền để không khó đọc nhưng cũng tương phản đủ với văn bản để được chú ý. Trong ví dụ này, hầu hết các màu xanh lá cây nhạt hơn sẽ không thể nhìn thấy trên nền sáng, vì vậy câu trả lời rõ ràng nhất là # 2F575D.

Tiếp theo bạn đã ám chỉ một tiêu đề cần được tô màu, và một lần nữa chúng ta cần nó để tương phản với nền. Vì lợi ích của sự tối giản, tôi đã thử và sử dụng lại các màu mà tôi đã sử dụng trong cơ thể, và trong trường hợp này, màu văn bản có lẽ quá tối để lấp đầy một lượng lớn không gian nên tôi có xu hướng chọn # 2F575D và cho tất cả các lý do trên tôi sẽ sử dụng màu cơ thể nền # DEE1DD Để điền vào bất kỳ văn bản hoặc liên kết nào trong tiêu đề.

Cuối cùng tôi bao gồm các yếu tố thiết kế không thiết yếu như trạng thái di chuột cuối cùng và chúng tôi có một vài màu xanh lá cây khác nhau để chọn. Một lần nữa, điều này có lẽ cần phải tương phản với nền đủ vì các liên kết không biến mất khi cuộn qua chúng, vì vậy nếu có xu hướng đi với # 658B6F ...

Và Voila! Bây giờ bạn có một sơ đồ 4 màu (cơ bản). Tôi hy vọng quá trình này sẽ giúp bạn nhiều như nó giúp tôi :)!

Trang web bạn liên kết đến đang chỉ cho bạn cách sử dụng các màu đó:

#28363D for the active state 
#2F575D as the navigation background 
#DEE1DD as background 
#C4CDC1 as banner ...

Tôi thường làm nổi bật màu sắc của chính mình trong thiết kế - ngay cả khi tôi biết chúng hơi sai - ít nhất tôi có khoảng hai màu hoặc ít nhất một màu. Sau đó, khi tôi đã đưa ra ý tưởng của mình, tôi lấy màu chính của mình (màu tôi đã sử dụng nhiều nhất) và thêm nó vào một bánh xe màu. Bằng cách đó tôi thay thế các màu khác của tôi. Hoặc tôi cố gắng tìm một số hình ảnh có hầu hết các màu gốc của tôi.

Tôi đã đọc những bài báo nói rằng, chụp ảnh và thiết kế tác phẩm của bạn dựa trên những màu đó, tôi không thể làm điều đó. Tôi tạo ra thiết kế của riêng mình, với ít nhất một màu trong tâm trí và sau đó sử dụng các kỹ thuật của lý thuyết màu sắc

hy vọng nó giúp

Không có công thức về những gì nên làm, mà nên là nền tảng và vv, đó là lý do tại sao thiết kế là một nghệ thuật.

Thông thường tôi sẽ thực hiện nhiều lần thử với bộ màu tôi có, ví dụ màu phông chữ nào trông đẹp hơn ở nền nào.

Mặc dù có một quy tắc ngón tay cái, đó là tương phản với màu sắc được sử dụng, hầu hết mọi người sẽ nói đây là lẽ thường, chẳng hạn như phông chữ màu sáng với nền màu tối. Sau đó, nó có thể phát sinh, làm thế nào để bạn xác định màu sắc cho các thành phần phụ, chẳng hạn như hộp cảnh báo, điều hướng và như vậy.

Như tôi thấy, bạn nên chuẩn bị sẵn cấu trúc cho trang web, sau đó bạn sẽ cần xác định nội dung chính của mình là gì, bạn muốn trình bày nó như thế nào. Có thể màu mềm hơn trên các thành phần phụ, không cần chú ý ngay lập tức.

Làm thế nào để bạn biết liệu nó tốt hay không? Thật dễ dàng, ngay khi bạn nói "Điều này thật tuyệt", đó là khi nó tốt. Nó luôn luôn giúp có được ý kiến ​​thứ hai từ những người khác.

Nói chung, hãy tiếp tục thử với sự kết hợp màu sắc, đừng chỉ bám vào một và bạn có thể ngạc nhiên về thành phần bạn có thể đạt được vào cuối.

Kết hợp @Color: Sự kết hợp được cung cấp bởi trang web đủ tốt để bắt đầu.

Tôi nhớ về một thời gian khi người vợ đầu tiên của tôi và tôi có một tấm bạt lớn và một vài ống sơn acrylic. Chúng tôi đặt tấm vải trên sàn nhà và vô tình phun ra những màu sắc ngẫu nhiên trên nó. Chúng tôi để nó khô và sau đó treo nó trên lò sưởi của chúng tôi. Theo thời gian, một số khách nhận xét rằng nó trông tuyệt vời như thế nào và nghĩ rằng đó là một tác phẩm nghệ thuật đắt tiền ... đó là, cho đến khi chúng tôi nói với họ cách nó được vẽ. Đó là tất cả trong mắt của kẻ si tình.

Có liên quan đến câu chuyện đó, tôi phải nói rằng tôi đồng ý có những combo màu không tương thích, xấu xí với đa số người xem. Tuy nhiên, không có nhiều người. Tôi không nghĩ bạn nên nhấn mạnh quá nhiều về việc làm cho đúng . Những gì có trong trang web có thể bù đắp cho rất nhiều lựa chọn màu sắc kém. Nội dung sẽ luôn luôn thiết kế.