10个2021年热门网站配色方案
10个2021年热门网站配色方案
设计网站时,需要考虑很多因素。您必须创建布局,设置网站架构,发出号召性用语(CTA),以及 选择您的域名,仅举几例。
但是,网站的配色方案常常是事后的想法。
如此众多的网站所有者几乎没有想到要选择他们的网站调色板,更不用说流行的配色方案了。他们认为,“我的网站的颜色真的有多重要?”
嗯,您网站上的颜色选择对访问者的影响比您可能意识到的要大。它们会激发特定的感受,并且可能是激发访客选择的有力方法。
事实上, 研究显示 人们可以在曝光后90秒内判断产品-90%的判断仅基于颜色。选择正确的颜色会影响读者对您的网站和品牌的看法。
做得好,它可以增强内容的可读性,增强理解力并改善学习。
颜色是最重要的颜色之一 增强您网站信誉的元素. 根据HubSpot,将近一半的人将网站的设计列为决定公司信誉的首要因素。
多伦多大学进行了一项有趣的研究 颜色以及个人如何看待它们。他们确定大多数人都喜欢简单颜色的组合。
在大多数情况下,只有两种或三种颜色被认为具有吸引力。这就是为什么坚持调色板对您的网站乃至您的业务成功至关重要的原因。
但是有超过一千万种颜色可供选择。至少可以这样说,这是压倒性的。您如何确定哪种网站颜色最适合您的品牌?
无论您是从头开始设计的新网站,还是需要翻新的旧网站,您都来对地方了。
本指南将向您显示哪些调色板在流行,以便您找到最适合您网站品牌的颜色以及与您希望客户的感觉匹配的颜色。我们将查看实际网站的示例,并列出一些确切的颜色代码,以供您参考。
1.柔和的音调
柔和的色调肯定会在2020年成为趋势。 创作纳马利 是一家总部位于加拿大的珠宝品牌。这是他们网站首页上2020年外观的截图:
颜色柔和,优雅且非常吸引人。对于时尚行业中销售珠宝的品牌来说,这是一个完美的选择。简单的色调可以很好地相互配合,并有助于突出珠宝的图像。
除了在此站点上使用简单的配色方案外,布局还采用相同的方法。空格使页面呼吸。在本指南中,您会发现使用负号空间与使用颜色同样重要。
如您所见,文本很少。他们毕竟是珠宝品牌。他们不需要依靠一堆文字就能传达信息,而听众也不希望这样。
柔和的色彩散发出优雅和精致的感觉。它不在你的脸上。
该网站没有尝试将尽可能多的产品塞满一页,而是一次只采用一种方法。这样一来,访客就有机会一次体验每种产品。颜色通过支持图像并突出显示它们而不是使它们分散注意力来帮助实现这一目的。
创作纳马利正在使用绿色和棕色(两个土色调)的不饱和版本。去饱和仅意味着采用常见的颜色并将其静音。这有助于该品牌传达正确的信息,而不会分散他们的产品注意力。
如果您有兴趣在网站上使用这些颜色,则颜色代码如下。
2.简单的灰色,灰白色和红色流行
您也不必总是选择一堆不同的颜色。网站调色板使用灰色阴影和偶尔的原色来突出显示某些内容,这样分散注意力的程度较小,并且可以使您的受众群体专注于对其最重要的内容。
从查看此页面 塔雷克·伊斯梅尔的图片集。 Tareq是一位经验丰富的设计师,因此很自然地为自己的网站选择了功能强大而简单的设计和配色方案。
页面上还有更多文字,但是仍然很简单易读。
Tareq并没有使用纯白色调,而是选择了稍微偏白色的颜色来与他的灰色和红色调色板融合。由于此页上的图片中他穿着白衬衫,因此这种灰白色的效果特别好。
文字中微妙的红色提示确实使外观看起来更加完美,使原本无聊的页面变得流行。
这些是Tareq网站上使用的颜色代码。
如果您要寻找一种专业,简单且适合文本较多的页面的调色板,这是一个很好的选择。
3.带有白色文字的蓝色和绿色渐变
条纹 是电子商务公司常用的付款处理软件选项。作为一个技术品牌,Stripe需要跟上所有最新的技术趋势。但是他们也有流行的网站配色方案。
在查看他们的网站今天的样子之前,请看一下六年前(2013年)的网站:
这个设计有什么问题吗?从表面上看,它看起来有些无聊和沉闷。没有什么是真正吸引人的。
但是Stripe进行了调整。其当前的调色板使用一种逐渐流行的技术-渐变。看一下自己:
此页面融合了充满活力的蓝色,并逐渐淡入淡蓝色,并带有淡淡的海泡绿,为白色文本提供了动感的背景。
通过使用渐变比例,Stripe可以采用非常简单的蓝色,并将其与不同的色调融合在一起,以在背景中创建更多纹理。
2013年站点与2020年站点之间的区别就像白天和黑夜。即使您在不知道这两个主页的使用年限的情况下就看到了它们,也可以识别出较新的主页。
如果您的网站当前已过时并且看起来更像2013年的Stripe网站,请尝试添加颜色渐变,使您的调色板更具现代感。
4.抛出橙色和红色色调
复古配色方案将在2020年大受欢迎。许多顶级品牌在其网站上使用1970年代,80年代和90年代流行的颜色。但是他们给他们带来了现代感。
通过结合具有现代品味的复古元素,他们可以为旧趋势赋予新的活力。不论他们长大后,他们都能在听众中唤起特定而熟悉的感觉。
这有点矛盾。怎样才能同时具有复古与现代感?
让我们看一下 Spotify 主页。
这些温暖的橙色和红色色调给人一种回味,但设计本身却非常时尚,并使用渐变标度来混合颜色。
您可以使用 代际营销以细分您的目标受众。确保您了解要使用网站配色方案定位的人很重要。这远远超出了为女性选择粉红色设计和为男性选择蓝色设计的范围。
Spotify之所以选择这些颜色,是因为他们知道其中的一些观众包括70年代和80年代成长的人。他们还知道年轻一代喜欢这些颜色的潮流。
5.柔和的粉红色,亮粉红色和黑色
牛仔 通过在现代且略带粉红色的网站上销售电动自行车来区分其品牌。通常,“牛仔”和“粉红色”一词通常并不会同时出现,但该网站的时尚设计非常适合他们销售的商品。
背景中柔和的粉红色调使黑色黑色自行车脱颖而出,成为人们关注的焦点。通过在页面上的细微位置添加明亮的粉红色调,Cowboy Bike可以钉住时尚和现代的调色板。
尽管有粉红色的女性气息,但Cowboy还是针对任何性别的用户。相反,当与黑色搭配使用时,它们会唤起愉悦,时尚和社交嗡嗡声。
如果您喜欢这种设计,并认为现代感适合您的网站,则可以在选择配色方案时将这些颜色代码用作参考:
6.灰色,浅黄色和深蓝色
的 QED集团 是一家总部位于捷克共和国的组织发展公司,热衷于将概念应用于心理学和行为经济学。
QED集团知道公司的文化和赋权能力,因此拥有一个时尚的网站以明智的方式使用独特的色彩组合是有道理的。
乍一看,他们主页的调色板比到目前为止我们看到的其他一些示例要忙。但是他们仍然通过这种时髦的设计很好地实现了这一目标。
通常,您会认为黄色,蓝色和紫色的色调很难看清,并且很难看清眼睛。通过在背景中使用更浅和更暗的灰色调,它们可以为中间轮廓添加更明亮的对比色。
如果您喜欢这些柔和的黄色调搭配灰色和深蓝色的现代外观,请查看以下颜色代码:
7.轻淡的大地色调
康斯坦托普洛斯(Konstantopoulos S.A.) “ Olymp”标签出售希腊橄榄。因此,泥土色调(尤其是接近橄榄色的绿色阴影)对其网站有意义。
该主页的布局和设计非常简单。当然,这里的主要颜色选择是橄榄绿色。但是如您所见,它很少使用。
这是对经典但有效的配色方案的全新尝试。柔和的灰色背景可以使图像,文本和颜色弹出,而不是使深绿色的饱和度过高。
仔细观察,您会在背景中看到柔和的绿色叶子。这有助于突出显示绿色文本和徽标,并吸引您的注意。
对于从事健康食品,植物和农业的企业而言,土色调调色板是一个不错的选择。请参考这些绿色,灰色和浅棕色颜色代码,以在您的网站上获得相似的外观。
如果您的产品具有可识别的颜色,则可以执行类似的操作。从浅灰色的背景开始,再从深灰色的副本开始,并少量添加您的强调色。这是简单,不太忙的配色方案的良好出发点,这些配色方案可快速进行整容,仅带有可识别的主色和补充的配色。
8.大量红色,色调柔和
如果回顾一下到目前为止我们介绍的所有流行的网站配色方案,您会注意到一种很少使用的流行颜色-红色。
这是因为红色是网站上使用的最强大但最具挑战性的颜色之一。由于红色很容易引起读者的注意,因此可能会让人不知所措。但是,如果使用得当,它可能是增加网站吸引力的好方法。
有效使用红色的一种方法是使用轻触使文本中只有几个关键词的东西变亮(记住 塔雷克·伊斯梅尔在#2中的投资组合?)。
另一种方法是将更多柔和的颜色与红色配对。这是一种比我们在Tareq网站上看到的方案更高级的配色方案。
前阵子,创意品牌代理 五/四 通过在网站的很大一部分上使用鲜红色,棕褐色和柔和的蓝绿色,来摆动栅栏。
这里的红色正在做很多繁重的工作,柔和的蓝绿色将其作为强调颜色。如果他们决定除了使用这种红色之外还选择鲜艳的黄色,浅蓝色和鲜艳的橙色,那就太过分了。
但是这些柔和的色彩与红色完美搭配。红色也对品牌非常有效。它明亮,大胆,并引起了人们对创造力主题的广泛关注。
因此,对于那些想要在配色方案上显得现代而大胆的人,请考虑在您的网站上使用带有红色的这些颜色代码。
只需确保红色不要太大即可。您要确定自己有足够的柔和色调让页面呼吸,同时仍保持时尚外观。
9.未来派的蜡笔和原色
没有以下示例,此列表将不完整 安东& Irene。这些是驻纽约的专业设计师。他们专注于设计的各个方面,包括数字产品。
他们在蜡笔和基色上设置了绝对的大师班。
关于此网站配色方案的最佳部分之一是它的未来感。安东和艾琳的服装选择非常遥远。这是一个大胆的选择-但有时,最大胆的选择能带来最大的回报。在这里,他们使用浮华的组合,而不会降级为高贵。
尽管此网站使用的颜色比到目前为止我们看到的其他示例更多,但使用的颜色很少,因此页面不会凌乱或令人讨厌。这也反映在他们使用的图像中:安东穿着对比鲜明的紫色和橙色,而艾琳穿着蓝色和黄色。它们不是完美的对立物(蓝色的对立面是橙色,紫色的对立面是黄色),但它们可以很好地协同工作。
如果您要为网站配色方案寻找艺术色彩,请尝试使用这些确切颜色的不同组合。
10.黑底黑底
到目前为止,我们几乎在所有浏览过的网站上都看到黑色,但始终很少使用。它通常是为文本保留的,而不是主要颜色或背景之一。
但是,这并不意味着您不能在网站配色方案中大量使用深黑色。这样做有助于展示阶级,奢华和专业的感觉,尤其是当您使用以下不同的黑色调时:
看看 JY BH 主页。通过组合不同的黑色阴影,您将获得渐变效果,您在前面的其他示例中已经看到了这种效果。浓重的黑色渐变为网站带来神秘,大胆的外观。
该公司是一家法国服装制造商,销售男女高档服装和配饰。就像时尚一样,黑色是网页设计的永恒色彩。它已经流行了很多年,并将在2020年及以后继续流行。
但是,如果您要在网站上变黑,请像上面的示例一样,使用不同的阴影来增加深度和质感。只有一种黑色会显得平坦而基本。
网站设计的更多资源
当然,您的品牌不仅仅是您选择的配色方案。这些颜色与您的整个网站的互动方式最终会影响您的转化,信誉和品牌成功。
为了帮助您创建最佳的网站,以下是一些我们的最佳资源,可作为您设计过程中的指南:
- 13网站设计最佳实践. 这是我们关于设计获奖(和转换)网站所需了解的所有事项的清单。
- 如何创建网站(分步指南). 不知道从哪里开始?阅读有关如何从头开始创建出色网站的文章。无需编码知识。
- 4步20分钟即可完成网站规划. 您不希望先建立路线便要进行公路旅行。而且,您也不会在未计划的情况下创建公司的网站。本指南将向您展示如何选择正确的内容类型,以及如何为您的网站构建它们。
- 如何设计可转换的首页. 主页是大多数访问者最先遇到您的品牌的地方-因此您想留下良好的第一印象。将他们转变为终身客户的方法如下。
- 最好的网页设计服务. 您不必自己执行此操作。实际上,如果您有足够的预算,我们强烈建议您寻求一个成熟的设计服务公司来帮助您构建网站。相信我们。物有所值。
- 如何为您的电子商务商店选择合适的配色方案. 是否希望有一种很好的方法来影响您的访客成为付费客户?色彩心理学是一种微妙但有效的方法。这是您的入门方法。
- 颜色如何影响转换率. 这是有关颜色如何影响您的底线的完整信息图表。
结论
现在是2020年。这意味着您该放弃您几年前使用的配色方案了。进行切换很重要,因为 配色方案可能会影响您网站上的销售.
使用这些调色板作为起点,您可以创建一个现代,时尚且独特的网站。您甚至可以使用我们展示的一些确切的颜色代码。
您可能会发现选择正确的网站调色板不一定很困难。而且,当您这样做时,您就可以给品牌一臂之力,从而吸引新的访客并吸引老顾客。
资源: QuickSprout Feed
作者:拉尔斯·洛夫格伦(Lars Lofgren)