在网页设计中使用形状的30个例子

你是否注意到,大多数网站或多或少都是由矩形框组成的?从浏览器窗口的矩形到按钮的矩形,网站大多是矩形的。这不仅实用,而且有意义。然而,这并不意味着没有其他形状的空间,如圆形、三角形,或由各种曲度组合而成的曲线。

我收集了30个不同的网站,它们使用不同的形状来达到不同的目的。他们中的一些人使用随机分类的形状来装饰,例如路线图,而另一些人则完全重新定义了web页面的结构,例如时间表记录。

01. Roadmap

路线图

路线图的着陆页面上有各种各样的形状。输入字段是矩形的,按钮是椭圆形的,而徽标则是完全不同的东西。

此外,背景中还有随机间隔的和动态的几何形状。它有点不一致,这让它很有趣。

02. Friends & Fools

朋友,傻瓜

《老友记》和《傻瓜》在他们的网站上使用Xs和Os以及弯弯曲曲的字体作为装饰。这也是他们品牌的重要组成部分。

Xs和Os是他们的标识的一部分,把它们作为网站上的设计元素有助于加强它们作为公司标识的重要组成部分的地位。

03.Campaign Monitor 2016年回顾

竞选观察2016年回顾

这份年度报告不仅将数字本身作为形状来使用,而且数字也是形成创造性形状的关键部分,通过装饰、标记和颜色进行额外的视觉操作。

04. Friendly

友好的

在这个登陆页面上有很多不同的形状,从手机到logo再到浮动的圆形头像。但当然,最引人注目的是手机背后的三个几乎是圆形和方形的形状,它们不断地改变形状,放大或缩小一点。

05. Icon Jar

图标Jar

Icon Jar使用一组彩色和分散的图标作为其背景的一部分。这些图标看起来就像是从盒子里扔到地板上的。

06. Status

状态

Status的设计很大程度上依赖于带有圆角的卡片。这种情况在很多网站上都找不到。我喜欢形状的重叠和状态的设计利用圆形和矩形的形状。

07. Future of Design

未来的设计

设计的未来是一个视觉上令人惊叹的网站。该设计使用形状作为故事的一部分,因为你滚动。

信息、颜色和各种形状之间的关系是如此平滑,以至于很难想象这份报告所传达的信息会有任何不同。

08. Dona

多应用程序

圆角方框是品牌视觉设计的重要组成部分。

难怪它被用作一个动画和分散的背景图案。你也可以在移动应用的用户界面中看到它——也就是圆角。

09. Timetable Records

时间表记录

我喜欢时间表的设计有点奇怪,改变了传统的矩形形状在盒子图像和文本上的视角。

10. Beamery

Beamery

Beamery肯定喜欢圆形的主题,无论是填充还是勾勒。头部有一个可爱的设计,以轨道效应为特色,进一步扩展了隐喻。

11. Ask Jelly

问果冻

很长一段时间以来,像分割器这样常见的东西一直以同样的方式使用。

这些天来,改变分界线变得越来越流行。问杰里决定在那里加上一点曲率。看起来很不错。

12. Orbit

轨道上的应用

轨道的头部使用了两种不同的元素。当然,它用的是点。但除此之外,它还使用了动画和邻近性,让点看起来像是在以波状的运动移动。这是很酷。

13. Wyre

怀尔软件

怀尔有一个完整的视觉语言围绕其签名形状。这是他们标志的一部分。这也是他们整个网站的一部分。

有时只是重复的背景,有时是装饰。然而,我最喜欢的部分是所有的按钮都是这个形状的。这绝对是我第一次看到这种形状的按钮。

14. Multiplicity by Foilco

多样性利兹

如果我们谈论形状,我也会包括一个例子,利用广场以及;那些也是形状。Multiplicity的登陆页面在用户界面、logo和整个活动标识中使用方块的重复性上做得非常到位。

15. Musixmatch

Musixmatch应用

英雄部分的背景看起来很好。然而,这是一个非常简单的概念,即背景分离,但是使用曲线分离。

16. Twisto

Twisto应用

一些轻微的变化,在一个重复的形状在一个背景使剖面更有趣和引人注目。

17. Huge Inc – Albums of the Year

年度最佳唱片

我真的很喜欢它如何使用数字作为形状在这个网页的标题。它们又大又窄。它们的颜色与背景不同。它们看起来很好,构成了一个有趣的设计细节。

18. Autopilot

自动驾驶仪

这里我们有另一个分割部分的例子。用一条有角度的线将两个部分分开,这是一个非常好的设计细节。

19. Gogo

火星的应用

每隔一段时间,你都可以在Gogo的网站上看到一些随机组合的大而多彩的形状。形状和颜色与网站设计中使用的彩色和有线条的图标相辅相成。形状甚至与标志符号手牵手,太。

20.120WaterAudit

120年wateraudit

这里有一个关于背景的奇怪的例子,或者说是一个章节的背景。但这就是它有趣的地方。我相信它会吸引人们的注意力,至少在他们滚动屏幕的时候。

21. Dilamani

Dilamani应用

我喜欢Dilamani的网站把自己的logo设计成产品页面顶部和底部的图案。这是一个很好的接触和一个伟大的方式来利用一个独特的形状。

22. Heco

Heco应用

Heco的网站在整个页面中使用了许多不同的形状。在这个蓝色区域,两个面是它们自己的形状。然后,还有随机分布的线。在我看来,它们就像糖屑。

23. Paul Valentine

保罗的情人

简单到一条斜线,加上两种背景色,再加上几只手表,就能让它看起来很棒。没有必要过度考虑设计。

24. Intangible Matter

无形的物质

这里有很多小点。他们都移动了一点,他们都在做一个更大的形状,太。

25. Made Together

一起做应用程序

在这个主页的底部,矩形有一个非常重要的作用。标志的形状和细长的下划线都使这个部分很有趣。

26. Oskar Wróbel

奥斯卡·“

奥斯卡•罗贝尔的投资组合并不特别。然而,它很可爱。随机形状展开作为背景是一个很好的触摸。这些形状在类型和颜色上各不相同,但放在一起看起来都很棒。

27. Palantir

Palantir

再一次,我们有一个很棒的背景。这里,Plantir正在用一些点和线做出不规则的形状。实际上,它看起来非常棒。右边的看起来也是圆形的,这是由于圆形的覆盖。

28. Asana

体式

去年Asana经历了一次大的、大胆的、多彩的重新设计。他们的新品牌身份的一部分是拥抱明亮,轻微的梯度和大胆的颜色。

有时他们利用颜色作为背景,有时作为一大群大圆圈的填充色。

29. Stripe

条纹

Stripe最近也改进了它的视觉识别。公司不久前发布了新网站。但是,它看起来令人震惊。

例如,我最喜欢的是不同但很锋利的部分边缘。在制作平行四边形的过程中,会有阴影、尖锐的角度、甚至是倾斜度。

30.MailChimp 2016年度报告

MailChimp 2016年度报告

这份来自MailChimp的年度报告充满了这么多不同的形状!它会一直持续下去。

他们有背景图案,剖面形状,剖面分隔符,排版作为形状,还有很多其他的东西。但是,一切看起来都很好。更重要的是,它看起来也很有趣!

这就是结束!你觉得这30个使用不同形状的网页设计的例子怎么样?我试图找到一些令人惊奇和复杂的例子,比如MailChimp。

我还试图找到一些微妙的,只是添加到整个设计的完美数量的可怕。我希望你已经发现这个列表对你的创造性思维是鼓舞人心的!

2020-02-02 17:21
相关热门