深圳做网站:网页设计中形状的使用与30个例子

2019.08.09 mf_web

159

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

我收集了20个不同的网站,使用不同的形状用于不同的目的。其中一些使用随机分类的形状进行装饰,例如Roadmap,而其他一些则完全重新定义了网页的结构,例如Timetable Records。深圳做网站

01. 路线图

路线图

路线图的着陆页充满了各种形状。输入字段为矩形,按钮为椭圆形,徽标完全是其他内容。

此外,在背景中有随机分隔的和动画的几何形状。它有点不一致,这使它变得有趣。

02. 朋友和傻瓜

朋友和傻瓜

Friends&Fools在他们的网站上使用Xs和Os以及波浪线作为装饰品。这也是他们品牌的重要组成部分。

X和Os是其徽标的一部分,并将其用作网站上的设计作品,有助于强化它们作为公司身份的重要组成部分。

03. Campaign Monitor的2016年度回顾

Campaign Monitor的2016年评论

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

04. 友善

友好

这个登陆页面上有很多单独的形状,从手机到徽标,再到漂浮的圆形头像。但当然,最引人注目的必须是手机背后的三个几乎呈圆形和近似方形的形状,随着它们的放大和缩小而不断移动它们的形状。

05. Icon Jar

图标罐子

Icon Jar使用一堆色彩鲜艳,分散的图标作为背景的一部分。这些图标看起来几乎就像是从一个盒子里扔到了地板上。

06. 现状

状态

状态'设计很大程度上依赖于带圆角的卡片。这不是你在很多网站上看到的。我喜欢形状重叠,Status'设计使用圆形和矩形。

07. 设计的未来

设计的未来

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

信息,颜色和各种形状之间的关系是如此顺利,以至于很难想象这份报告传达的信息看起来有什么不同。

08. 多纳

多纳app

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

难怪它被用作动画和分散的背景图案。这也是你可以在移动应用程序的UI中看到的东西 - 即圆角。

09. 时间表记录

时间表记录

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

10. Beamery

Beamery

Beamery肯定喜欢圆形图案,无论是填充还是勾勒出来。标题具有可爱的设计,具有轨道效应,以进一步扩展隐喻。

11. 问果冻

问果冻

作为分区分隔符这么常见的东西已经以相同的方式使用了很长很长时间。

如今,改变分界线越来越受欢迎。问果冻决定在那里投入一点弯曲。而且,它看起来非常好。

12. 轨道

轨道应用程序

Orbit的标题使用两个不同的元素。当然,它是使用点。但另外,它还使用动画和接近度使点看起来像波浪般的运动。那很酷。

13. Wyre

Wyre app

Wyre拥有围绕其标志性形状的完整视觉语言。这是他们徽标的一部分。它也是整个网站的一部分。

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

14. Foilco的多重性

多重利兹

如果我们谈论形状,我还会包括一个利用正方形的例子; 那些也是一种形状。Multiplicity的登陆页面实际上是关于在UI,徽标和事件的整体身份中使用正方形的重复性。

15. Musixmatch

Musixmatch应用程序

英雄部分的背景看起来很棒。然而,它是一个简单的概念,如分裂背景 - 但与曲线分开。

16. Twisto

Twisto应用程序

在背景中重复形状上的不透明度的一些微小变化使得该部分更有趣和引人注目。

17.  Huge Inc - 年度专辑

The Huge Inc  - 年度专辑

我真的很喜欢数字如何在这个网页的标题中用作形状。它们也是大而且截止的。它们的颜色与背景颜色不同。它们看起来很好,并且有一个有趣的设计细节。

18. 自动驾驶仪

自动驾驶仪

在这里,我们有另一个拆分部分的例子。使用倾斜线分割两个部分可以获得非常漂亮的设计细节。

19. 戈戈

Gogo app

不时地,你可以在Gogo的网站上发现一些随意的大型和彩色形状。形状和颜色与网站设计中使用的彩色和带衬里的图像完美结合。形状甚至与徽标符号齐头并进。

20. 120WaterAudit

120WaterAudit

这是一个背景或部分背景的奇怪例子。但这就是让它变得有趣的原因。我敢肯定它吸引了人们的注意力,至少有一点点滚动。

他们有背景图案,截面形状,截面分割器,排版作为形状,以及许多其他东西。但是,一切看起来都很棒。更重要的是,这一切看起来都很有趣!

这是一个包装!您是如何享受使用各种形状的20个令人敬畏的网页设计实例的列表?

我也试图找到一些微妙的,只是为整体设计添加了很多令人敬畏的东西。我希望你已经发现这个列表鼓舞你的创造性思维!

深圳做网站

最新案例

寒枫总监

来电咨询

400-6065-301

微信咨询

寒枫总监

TOP