在网页设计中使用“斑点”背景来吸引注意力



一个好的网站都是关于小事情的。每一个细节都很重要,尽管看起来它唯一应该扮演的角色就是躲在阴影中。今天,我们的聚光灯照射在背景上。

我们已经有一段时间没有讨论趋势方面的背景了。创意者痴迷于占据前景的事物,因为它们有助于给人留下第一印象。然而,界面的核心元素始终很重要。每当我们建造新的东西时,他们都会提醒我们自己。它们再次成为人们关注的焦点只是时间问题。

所以,现在终于到了用唯一的背景做一些有趣的事情的时候了。主要的症结在于,它为整个项目提供了坚实的基础,因此采取激烈的措施具有挑战性。你需要在实用性和娱乐性之间取得平衡,创造一些奢侈的东西,同时不要破坏一切。

下面的设计师似乎找到了一个完美的解决方案——斑驳的背景。它们满足了这两个要求,在宣称自己是一个小趋势时,看起来就像一股新鲜空气。让我们仔细看看。

Patientory

这是一个移动应用程序的标准推广网站。本质上,这里没有什么特别之处。你会发现一套标准的技巧来展示产品,比如一个在自然环境中展示应用程序的iPhone模型。此外,几个生动的行动按钮,和一个基本的结构。

然而,立即引起注意的是背景。它看起来像一个大的点,自然会把眼睛推向应用程序。同时,它给了整体审美一种可爱的热情。由于平滑的曲线和柔和的色彩,它感觉优雅精致,使标准网站看起来不那么琐碎。

注意,这只是一个很小的细节,但在这里肯定会有所不同。它是静态的,只占屏幕的三分之一,但足以从人群中脱颖而出。

Patientory

Ecomly

很像上一个例子,这是一个简单的网站。然而,这一次它代表了一个数字机构。网站的结构是传统的,设计也是如此。没有幻想的细节,也没有戏剧性的插图。

这里唯一的盛宴是背景。它有两个中等大小的白色水滴,从上到下平滑移动。它们位于两侧,因此不会分散人们对主口号和CTA的注意力。但它们仍然为界面增添了一些趣味。

此外,您可以在页脚之前的部分和一些内部页面上看到应用了相同的方法。这样,一切都联系在一起,创造了一个和谐的设计。

动态的斑点背景完美地融入了网站的商业氛围。它与项目的基调相匹配,与标识相呼应,也支持品牌标识。

Ecomly

数字熊猫

虽然前面提到的两个例子使用了几个地点,但数字熊猫的创意团队更喜欢只使用一个(但相当大的一个)。漂亮的紫色斑点支持前景元素,同时避免了白色界面看起来过于简单。它与插图、CTA和排版完美结合。

你可能会注意到,整个网站都在追踪这种伎俩。各个部分受益于零散的背景,带来连贯的用户体验。

The Digital Panda

Art4Web

Art4Web背后的团队强烈依赖视差方法来打动在线访客。在这里,它位于英雄区的核心,将模型粘在一起。斑点背景以几个缓慢移动的水滴为特征,以模拟液体表面。它还与标识保持一致,将品牌标识融入整体设计。

这个解决方案非常合适。它突出了前景上的构图,并为项目添加了一抹动态,使过度使用的视差方法有了一个很好的转折。

Art4Web

Bodymovin解决方案

Bodymovin Solutions押注于一种有插图的方法,迫使英雄区名副其实。与上一个示例非常相似,斑点背景部分设置了动画。由于这些斑点呈水滴状,它们的行为不出所料地让人想起了液体的轻柔运动。它为小型人体插图奠定了坚实的基础,是对它们的完美补充。

请注意,在这里,斑点背景被用作启动屏幕的一部分,启动屏幕以诱人的方式打开网站。它从一开始就创造了一致的体验。

Bodymovin Solutions

扩大你的圈子

正如你可能已经从铭牌上猜到的那样,这里的圆圈是该项目的核心和灵魂。因此,在主页上看到这种形状也就不足为奇了。背景也不例外。

背面的画布上有几个大而模糊的圆圈,颜色很漂亮。与前面的示例非常相似,它们也处于运动状态。它们有助于视觉识别和加强品牌识别,更不用说让页面看起来很出色了。

Grow Your Circle

Griflan设计

虽然我们通常会考虑斑点背景,在那里斑点运行的节目,事实上,没有人阻止你采取其他形状,就像格里夫兰设计团队所做的。

一个原始的斑点背景标志着他们官方网站的英雄区域。两个几何形状(一个矩形和半个环形)以及略带轮廓的小图标构成了内容的基础。恰如其分,一切都在变化。虽然大的形状移动缓慢,但小的形状移动非常快,给画布一个相当令人兴奋的外观。

Griflan Design

完全正确

当谈到斑点背景时,首选形状似乎是斑点。这有几个原因。

首先,平滑曲线不太容易分心,这有助于形成完美的背景。一方面,这样的背景丰富了设计。另一方面,它不与前景中的内容竞争。其次,水滴非常适合应用当今非常流行的液体行为。

那么,它们对实验来说也很好。你可以强迫它们朝不同的方向移动,或者相反,将它们合并在一起,在视觉上仍然很吸引人。

最后,即使在静态模式下,它们看起来也很棒,给干净的白色表面一种特殊的味道。

来源:https://speckyboy.com/spotty-backgrounds-web-design/

0