Có rất nhiều điều cần cân nhắc khi bạn thiết kế một trang web. Bạn phải tạo bố cục, thiết lập kiến trúc trang web, đặt lời kêu gọi hành động [CTA] và chọn tên miền của mình, chỉ để đặt tên cho một số thứ
Nhưng tất cả quá thường xuyên bảng màu của một trang web là một suy nghĩ lại
Vì vậy, nhiều chủ sở hữu trang web không hề nghĩ đến việc chọn bảng màu trang web của họ, chứ đừng nói đến một bảng màu theo xu hướng. Họ nghĩ, "Màu sắc trang web của tôi thực sự quan trọng như thế nào?"
Chà, các lựa chọn màu sắc trên trang web của bạn có tác động lớn hơn đến khách truy cập mà bạn có thể nhận ra. Chúng gợi lên những cảm xúc cụ thể và có thể là một cách mạnh mẽ để thúc đẩy những lựa chọn mà khách truy cập của bạn đưa ra
Trên thực tế, nghiên cứu cho thấy mọi người đánh giá sản phẩm trong vòng 90 giây sau khi tiếp xúc — và 90% đánh giá đó chỉ dựa trên màu sắc. Chọn màu phù hợp tác động đến cách người đọc cảm nhận trang web và thương hiệu của bạn
Làm tốt điều đó và nó có thể nâng cao khả năng đọc nội dung của bạn, tăng khả năng hiểu và cải thiện việc học
Màu sắc là một trong những yếu tố quan trọng nhất tạo thêm uy tín cho trang web của bạn. Theo HubSpot, gần một nửa số người xếp hạng thiết kế trang web là yếu tố số một để xác định độ tin cậy của một công ty
Đại học Toronto đã tiến hành một nghiên cứu thú vị về màu sắc và cách các cá nhân cảm nhận chúng. Họ xác định rằng hầu hết mọi người thích sự kết hợp của các màu đơn giản
Trong hầu hết các trường hợp, chỉ hai hoặc ba màu được coi là hấp dẫn. Đó là lý do tại sao việc tuân thủ bảng màu lại quan trọng đến vậy đối với sự thành công của trang web và cuối cùng là doanh nghiệp của bạn
Nhưng có hơn 10 triệu màu để lựa chọn. Đó là áp đảo, để nói rằng ít nhất. Làm thế nào bạn có thể xác định màu sắc trang web nào là tốt nhất cho thương hiệu của bạn?
Cho dù bạn có một trang web mới mà bạn đang thiết kế từ đầu hay một trang web cũ cần nâng cấp, bạn đã đến đúng nơi
Hướng dẫn này sẽ cho bạn biết bảng màu nào đang thịnh hành để bạn có thể tìm thấy những màu phù hợp nhất với thương hiệu trang web của mình và những màu phù hợp với cách bạn muốn khách hàng của mình cảm nhận. Chúng tôi sẽ xem xét các ví dụ về trang web thực và liệt kê một số mã màu chính xác để bạn tham khảo
1. Tông màu dịu
Tông màu nhẹ nhàng chắc chắn là xu hướng trong năm 2020. Creations Namale là một thương hiệu trang sức có trụ sở tại Canada. Đây là một ảnh chụp màn hình từ cuốn sách nhìn năm 2020 trên trang chủ của trang web của họ
Màu sắc trầm, sang trọng và rất bắt mắt. Đó là một sự lựa chọn hoàn hảo cho một thương hiệu trong ngành thời trang bán đồ trang sức. Các tông màu đơn giản phối hợp tốt với nhau và giúp hình ảnh trang sức nổi bật
Ngoài bảng màu đơn giản được sử dụng trên trang web này, bố cục cũng có cách tiếp cận tương tự. Khoảng trắng giúp trang thở. Xuyên suốt hướng dẫn này, bạn sẽ thấy rằng việc sử dụng không gian âm cũng quan trọng như màu sắc bạn sử dụng
Như bạn có thể thấy, có văn bản tối thiểu. Rốt cuộc họ là một thương hiệu trang sức. Họ không cần phải dựa vào một loạt văn bản để truyền tải thông điệp của mình—và dù sao thì khán giả của họ cũng không muốn điều đó
Các màu sắc bị tắt tiếng tạo cảm giác đẳng cấp và tinh tế. Nó không ở trong khuôn mặt của bạn
Thay vì cố gắng nhồi nhét càng nhiều sản phẩm càng tốt vào một trang, trang web này chỉ tiếp cận từng sản phẩm một. Điều đó giúp khách có cơ hội trải nghiệm từng sản phẩm một. Màu sắc giúp điều đó bằng cách hỗ trợ hình ảnh và làm nổi bật chúng, thay vì làm chúng mất tập trung
Creations Namale đang sử dụng các phiên bản không bão hòa của màu xanh lá cây và màu nâu [hai tông màu đất]. Desaturation chỉ có nghĩa là lấy các màu phổ biến và tắt tiếng chúng. Điều này giúp thương hiệu này gửi đúng thông điệp và không làm sao nhãng sản phẩm của họ
Nếu bạn quan tâm đến việc sử dụng các màu này trên trang web của mình, hãy xem các mã màu bên dưới
2. Màu xám đơn giản, màu trắng nhạt và một chút màu đỏ
Bạn không phải lúc nào cũng phải chọn một loạt các màu khác nhau. Các bảng màu của trang web sử dụng các sắc thái của màu xám với màu cơ bản không thường xuyên để làm nổi bật thứ gì đó ít gây mất tập trung hơn và cho phép khán giả của bạn tập trung vào những gì quan trọng đối với họ
Kiểm tra trang này từ Danh mục đầu tư của Tareq Ismail. Tareq là một nhà thiết kế giàu kinh nghiệm, vì vậy, thật tự nhiên khi anh ấy chọn cách phối màu và thiết kế mạnh mẽ nhưng đơn giản cho trang web của mình
Có nhiều văn bản hơn trên trang, nhưng nó vẫn đơn giản và dễ đọc
Thay vì sử dụng tông màu trắng tinh khiết, Tareq chọn màu hơi trắng nhạt để pha trộn với bảng màu xám và đỏ của mình. Màu trắng nhạt này hoạt động đặc biệt tốt vì anh ấy mặc áo sơ mi trắng trong hình ảnh trên trang này
Các gợi ý tinh tế về màu đỏ trong văn bản thực sự hoàn thiện giao diện, lấy một trang sẽ gây nhàm chán và làm cho nó nổi bật
Đây là những mã màu được sử dụng trên trang web của Tareq
Đây là một lựa chọn tuyệt vời để xem xét nếu bạn đang tìm kiếm một bảng màu chuyên nghiệp, đơn giản và hoạt động tốt với các trang có nhiều văn bản hơn.
3. Chuyển màu xanh lam và xanh lục với văn bản màu trắng
Stripe là một tùy chọn phần mềm xử lý thanh toán phổ biến cho các công ty thương mại điện tử. Là một thương hiệu công nghệ, Stripe cần cập nhật tất cả các xu hướng công nghệ mới nhất. Nhưng họ cũng có một bảng màu trang web hợp thời trang
Trước khi chúng tôi xem trang web của họ trông như thế nào ngày nay, hãy xem trang web của họ trông như thế nào sáu năm trước, vào năm 2013
Có gì sai với thiết kế này? . Không có gì về nó thực sự hấp dẫn về mặt hình ảnh
Nhưng Stripe đã điều chỉnh. Bảng màu hiện tại của nó sử dụng một kỹ thuật đang ngày càng phổ biến—gradient. Hãy xem cho chính mình
Trang này pha trộn các màu xanh lam rực rỡ nhạt dần thành màu lục lam sáng đẹp mắt với một chút màu xanh lục của bọt biển để tạo nền động cho văn bản màu trắng nổi lên trên
Bằng cách sử dụng thang độ dốc, Stripe lấy một màu xanh lam rất đơn giản và pha trộn nó với các tông màu khác nhau để tạo thêm họa tiết trong nền
Sự khác biệt giữa trang web 2013 và trang web 2020 giống như ngày và đêm. Ngay cả khi bạn đã xem hai trang chủ mà không biết chúng hoạt động vào năm nào, thì bạn vẫn có thể xác định được trang mới hơn
Nếu trang web của bạn hiện đã lỗi thời và trông giống trang web Stripe từ năm 2013 hơn, hãy thử thêm chuyển màu để bảng màu của bạn trông hiện đại hơn
4. Tông màu cam và đỏ
Phối màu retro đang trở lại mạnh mẽ vào năm 2020. Rất nhiều thương hiệu hàng đầu đang sử dụng những màu phổ biến từ những năm 1970, 80 và 90 trên trang web của họ. Nhưng họ đang tạo ra một bước ngoặt hiện đại cho họ
Bằng cách kết hợp các yếu tố cổ điển với thị hiếu hiện đại, họ có thể mang lại sức sống mới cho các xu hướng cũ. Họ cũng có thể gợi lên những cảm xúc cụ thể và quen thuộc ở khán giả bất kể họ lớn lên từ khi nào.
Đó là một chút nghịch lý. Làm thế nào một cái gì đó có thể là cổ điển và hiện đại cùng một lúc?
Hãy nhìn vào trang chủ Spotify
Các tông màu cam và đỏ ấm áp này mang lại cảm giác hoài cổ nhưng bản thân thiết kế lại rất hợp thời trang và sử dụng các thang độ dốc để pha trộn màu sắc
Bạn có thể sử dụng tiếp thị thế hệ để phân khúc đối tượng mục tiêu của mình. Điều quan trọng là đảm bảo rằng bạn hiểu người mà bạn đang cố gắng nhắm mục tiêu bằng cách phối màu trang web của mình. Điều này vượt xa việc chỉ chọn các thiết kế màu hồng cho nữ và thiết kế màu xanh cho nam
Spotify chọn những màu này vì họ biết một số khán giả của họ bao gồm những người lớn lên trong thập niên 70 và 80. Họ cũng biết rằng những màu sắc này đang trở thành xu hướng mà thế hệ trẻ yêu thích
5. Hồng nhạt, Hồng sáng và Đen tuyền
Cowboy tạo sự khác biệt cho thương hiệu của mình bằng cách bán xe đạp điện trên một trang web hiện đại—và hơi hồng—. Thông thường, từ “cao bồi” và “màu hồng” thường không đi đôi với nhau, nhưng thiết kế kiểu dáng đẹp và hợp thời trang của trang web này là hoàn hảo cho những gì họ đang bán
Tông màu hồng nhẹ nhàng làm nền cho chiếc xe đạp màu đen tuyền trở nên nổi bật và trở thành trung tâm của sự chú ý. Bằng cách thêm các điểm nhấn màu hồng sáng hơn ở các vị trí tinh tế xung quanh trang, Cowboy Bike tạo nên bảng màu hợp thời trang và hiện đại
Mặc dù có ý nghĩa nữ tính với màu hồng, Cowboy nhắm mục tiêu người dùng thuộc mọi giới tính. Thay vào đó, chúng gợi lên cảm giác thích thú, thời thượng và tiếng vang xã hội khi được sử dụng với màu đen.
Nếu bạn thích thiết kế này và nghĩ rằng cảm giác hiện đại sẽ hoạt động tốt cho trang web của mình, bạn có thể sử dụng các mã màu này làm tài liệu tham khảo khi chọn bảng phối màu của mình
6. Xám, Vàng mềm và Xanh đậm
QED Group là một công ty phát triển tổ chức có trụ sở tại Cộng hòa Séc, rất muốn áp dụng các khái niệm trong tâm lý học và kinh tế học hành vi
QED Group hiểu biết về văn hóa công ty và sự trao quyền, vì vậy thật hợp lý khi họ có một trang web bóng bẩy sử dụng các kết hợp màu sắc độc đáo một cách thông minh
Thoạt nhìn, bảng màu của trang chủ của họ có nhiều màu hơn một số ví dụ khác mà chúng tôi đã xem xét cho đến nay. Nhưng họ vẫn thành công với thiết kế thời thượng này
Thông thường bạn sẽ nghĩ rằng các tông màu vàng, xanh lam và tím sẽ khó đọc và khó nhìn. Bằng cách sử dụng các tông màu xám nhạt và nhạt hơn trong nền, họ có thể thêm các màu tương phản sáng hơn vào hình bóng ở giữa
Nếu bạn thích vẻ ngoài hiện đại của những tông màu vàng dịu này được kết hợp với màu xám và xanh đậm, hãy xem các mã màu này
7. Một cảm ứng rất nhẹ của tông màu đất
Konstantopoulos S. A. nhãn hiệu “Olymp” bán ô liu Hy Lạp. Do đó, các tông màu đất—đặc biệt là các sắc thái của màu xanh lá cây gần giống với màu của ô liu—có ý nghĩa đối với trang web của nó
Bố cục và thiết kế của trang chủ này rất đơn giản. Tất nhiên, sự lựa chọn màu sắc chính ở đây là màu xanh ô liu. Nhưng như bạn có thể thấy, nó được sử dụng rất ít
Đó là một sự mới mẻ trong cách phối màu cổ điển nhưng hiệu quả. Thay vì quá nhiệt tình với độ bão hòa từ tường này sang tường khác của màu xanh đậm, nền màu xám dịu giúp hình ảnh, văn bản và màu sắc nổi bật
Nhìn kỹ và bạn sẽ thấy những chiếc lá xanh bị tắt tiếng ở hậu cảnh. Điều này giúp làm nổi bật văn bản và logo màu xanh lá cây, đồng thời thu hút sự chú ý của bạn vào chúng
Đối với các doanh nghiệp kinh doanh thực phẩm tốt cho sức khỏe, thực vật và nông nghiệp, bảng màu tông đất là một lựa chọn tuyệt vời. Tham khảo các mã màu xanh lục, xám và nâu nhạt này để có giao diện tương tự trên trang web của bạn
Bạn có thể làm điều gì đó tương tự nếu sản phẩm của bạn có màu sắc dễ nhận biết. Bắt đầu với nền màu xám nhạt và màu sao chép màu xám đậm hơn và thêm màu nhấn của bạn một cách tiết kiệm. Đây là một điểm khởi đầu tốt cho các cách phối màu đơn giản, không quá rườm rà, mang lại sự đổi mới nhanh chóng chỉ với một màu chính xác định và một màu nhấn bổ sung.
8. Nhiều màu đỏ, cân bằng với các tông màu trầm
Nếu bạn nhìn lại tất cả các phối màu trang web thịnh hành mà chúng tôi đã đề cập cho đến nay, bạn sẽ nhận thấy một màu phổ biến hiếm khi được sử dụng—màu đỏ
Đó là bởi vì màu đỏ là một trong những màu sắc mạnh mẽ nhưng thách thức nhất để sử dụng trên trang web. Nó có thể gây choáng ngợp vì màu đỏ dễ dàng thu hút sự chú ý của người đọc. Nhưng khi được sử dụng đúng cách, nó có thể là một cách tuyệt vời để thêm hứng thú cho trang web của bạn
Một cách để sử dụng màu đỏ một cách hiệu quả là sử dụng một cú chạm nhẹ để tạo điểm nhấn màu sắc cho những thứ nhỏ như một vài từ khóa trong văn bản [bạn có nhớ danh mục đầu tư của Tareq Ismail ở #2 không?]
Một cách khác là ghép các màu trầm hơn với màu đỏ. Đây là một chiến thuật phối màu tiên tiến hơn so với những gì chúng ta đã thấy trên trang web của Tareq
Cách đây một thời gian, 5/4 công ty xây dựng thương hiệu sáng tạo đã vượt qua hàng rào bằng cách sử dụng màu đỏ tươi trên phần lớn trang web của họ, kết hợp với màu rám nắng và xanh lục nhạt.
Màu đỏ ở đây đang thực hiện rất nhiều công việc nặng nhọc, với màu xanh lam-xanh lục nhạt hỗ trợ nó như một màu nhấn. Nếu họ quyết định sử dụng màu vàng sáng, xanh nhạt và cam sáng ngoài màu đỏ này, thì đó sẽ là quá nhiều
Nhưng những màu nhẹ nhàng này kết hợp hoàn hảo với màu đỏ. Màu đỏ này cũng rất phù hợp với thương hiệu. Nó tươi sáng, táo bạo và thu hút nhiều sự chú ý đến chủ đề sáng tạo
Vì vậy, đối với những người muốn hiện đại và táo bạo với bảng màu của mình, hãy cân nhắc sử dụng các mã màu này với màu đỏ trên trang web của bạn
Chỉ cần chắc chắn rằng bạn không đi quá xa với màu đỏ. Bạn muốn chắc chắn rằng bạn có đủ các tông màu nhẹ nhàng hơn để giúp trang của bạn dễ thở, trong khi vẫn giữ được vẻ ngoài hợp thời trang
9. Tương lai phấn màu và bầu cử sơ bộ
Danh sách này sẽ không đầy đủ nếu không có ví dụ về Anton & Irene. Đây là những nhà thiết kế chuyên nghiệp có trụ sở tại New York. Họ chuyên về tất cả các khía cạnh của thiết kế, bao gồm các sản phẩm kỹ thuật số
Và họ đã tạo ra một lớp học tuyệt đối về phấn màu và bầu cử sơ bộ
Một trong những phần hay nhất về bảng màu trang web này là cảm giác tương lai về nó. Sự lựa chọn trang phục của Anton và Irene cách nhau khá xa. Đó là một lựa chọn táo bạo – nhưng đôi khi, những lựa chọn táo bạo nhất lại được đền đáp nhiều nhất. Ở đây, họ sử dụng các kết hợp hào nhoáng mà không bao giờ trở nên lòe loẹt
Mặc dù trang web này sử dụng nhiều màu sắc hơn so với một số ví dụ khác mà chúng tôi đã thấy cho đến nay, nhưng chúng được sử dụng một cách tiết kiệm, vì vậy trang không bị lộn xộn hoặc kém hấp dẫn. Điều này cũng được phản ánh trong hình ảnh họ sử dụng. Anton mặc màu tím và cam tương phản trong khi Irene mặc màu xanh và vàng. Chúng đối lập không hoàn hảo [đối lập với màu xanh lam là màu cam và đối lập với màu tím là màu vàng], nhưng chúng hoạt động tốt với nhau như một tổng thể
Nếu bạn đang tìm kiếm một vòng quay nghệ thuật cho bảng màu trang web của mình, hãy thử sử dụng các kết hợp khác nhau của các màu chính xác này
10. Đen trên Đen trên Đen
Chúng tôi đã thấy một số màu đen trên hầu hết mọi trang web mà chúng tôi đã xem cho đến nay, nhưng luôn được sử dụng khá ít. Nó thường được dành riêng cho văn bản, thay vì là một trong những màu chính hoặc nền
Tuy nhiên, điều đó không có nghĩa là bạn không thể sử dụng nhiều màu đen đậm hơn cho bảng màu trang web của mình. Làm như vậy giúp thể hiện cảm giác đẳng cấp, sang trọng và chuyên nghiệp— đặc biệt nếu bạn sử dụng các tông màu đen khác nhau như thế này
Kiểm tra trang chủ JY BH. Bằng cách kết hợp các sắc thái đen khác nhau, bạn sẽ có được hiệu ứng chuyển màu mà bạn đã thấy trước đó với một số ví dụ khác của chúng tôi. Độ dốc đậm màu đen mang lại cho trang web một cái nhìn bí ẩn, táo bạo
Công ty này là nhà sản xuất quần áo của Pháp chuyên bán hàng may mặc và phụ kiện sang trọng cho cả nam và nữ. Cũng giống như trong thời trang, màu đen là màu vượt thời gian cho thiết kế web. Nó đã phổ biến trong nhiều năm và sẽ tiếp tục phổ biến vào năm 2020 và hơn thế nữa
Nhưng nếu bạn định chuyển sang màu đen trên trang web của mình, hãy sử dụng các sắc thái khác nhau để thêm chiều sâu và kết cấu, như ví dụ trên. Chỉ một màu đen sẽ trông phẳng và cơ bản
Thêm tài nguyên về thiết kế trang web
Tất nhiên, thương hiệu của bạn quan trọng hơn nhiều so với bảng màu bạn chọn. Cách những màu đó tương tác với trang web tổng thể của bạn cuối cùng ảnh hưởng đến chuyển đổi, độ tin cậy và sự thành công của thương hiệu của bạn
Để giúp bạn tạo trang web tốt nhất có thể, đây là một số tài nguyên tốt nhất của chúng tôi để làm hướng dẫn cho hành trình thiết kế của bạn
- 13 Thực tiễn tốt nhất về thiết kế trang web. Đây là danh sách kiểm tra của chúng tôi về mọi thứ bạn cần biết về thiết kế trang web chiến thắng [và chuyển đổi]
- Cách tạo một trang web [Hướng dẫn từng bước]. Bạn không biết bắt đầu từ đâu? . Không cần kiến thức mã hóa
- Lập kế hoạch trang web trong 4 bước và 20 phút. Bạn sẽ không muốn đi trên một con đường mà không xây dựng lộ trình trước. Và bạn sẽ không muốn tạo trang web của công ty mình mà không lên kế hoạch. Hướng dẫn này sẽ chỉ cho bạn cách chọn đúng loại nội dung—và cách cấu trúc chúng cho trang web của bạn
- Cách thiết kế trang chủ chuyển đổi. Trang chủ là nơi phần lớn khách truy cập sẽ gặp thương hiệu của bạn lần đầu tiên–vì vậy bạn muốn để lại ấn tượng tốt đầu tiên. Đây là cách để làm như vậy trong khi chuyển đổi họ thành khách hàng trọn đời
- Dịch vụ thiết kế web tốt nhất. Bạn không cần phải làm điều này một mình. Trên thực tế, nếu bạn có ngân sách tốt, chúng tôi thực sự khuyên bạn nên chuyển sang một công ty dịch vụ thiết kế đã được chứng minh để giúp bạn xây dựng trang web của mình. Tin tưởng chúng tôi. Nó rất đáng tiền
- Cách chọn bảng phối màu phù hợp cho cửa hàng thương mại điện tử của bạn. Muốn có một cách tuyệt vời để tác động khách truy cập của bạn trở thành khách hàng trả tiền? . Đây là cách bạn có thể bắt đầu
- Màu sắc ảnh hưởng đến tỷ lệ chuyển đổi như thế nào. Đây là infographic đầy đủ của chúng tôi về cách màu sắc tác động đến lợi nhuận của bạn
Phần kết luận
Bây giờ là năm 2023. Điều đó có nghĩa là đã đến lúc bạn bỏ bảng màu mà bạn đã sử dụng nhiều năm trước. Điều quan trọng là phải bật nó lên vì cách phối màu có thể ảnh hưởng đến doanh số bán hàng trên trang web của bạn
Sử dụng các bảng màu này làm điểm khởi đầu, bạn có thể tạo một trang web hiện đại, hợp thời trang và độc đáo. Bạn thậm chí có thể sử dụng một số mã màu chính xác mà chúng tôi đã giới thiệu
Bạn có thể thấy rằng việc chọn bảng màu trang web phù hợp không khó. Hầu hết các công cụ CMS như CMS miễn phí của HubSpot cho phép bạn thay đổi cách phối màu trang web của mình chỉ bằng một vài cú nhấp chuột. Và khi bạn làm điều đó, bạn đã mang lại cho thương hiệu của mình cơ hội cần thiết để thu hút khách truy cập mới và kích thích cả những khách truy cập cũ