新的网页设计趋势:排版与其他元素共享空间

排版与其他元素共享空间

印刷术的未来趋势在共享空间中,你很可能已经看到了一些东西,但并没有真正注意到。其思想是(通常)大型印刷文本占用一些自己的空间和一些与图像、视频或其他文本元素共享的空间。

这种风格的设计不一定是最容易实现的,但做得很好,同时,它既引人注目,又不是特别突出。

在设计包含共享空间时,可读性是需要考虑的最重要的因素,但是还需要考虑其他一些困难,比如其中一个元素是动画或幻灯片显示的,而共享元素是静态的,甚至是不同的动画。

以下是一些采用这种风格的网站设计。

元素在网页设计中共享空间

真实的形式和功能

我们从一个有点不同的角度来看待排版和图像的共享空间。在这里,排版不被允许代替,相反,图像占主导地位,字体位于山的后面。

真实的形式和功能

笔Catala

这个例子是排版对另一个元素空间的影响。本页的一系列标题以纸带形式出现,大部分都与图片重叠。

笔Catala

民意

这家瑞士手表制造商有白色的印刷标签,当你向下滚动时,这些标签会切进图像中。

民意

布迪·迪奥·多吉·内多斯塔耶

在这个网站上使用了许多当前的趋势——图像以分屏的形式呈现,带有彩色的透明效果,并且排版与图像的彩色部分共享空间。

布迪·迪奥·多吉·内多斯塔耶

阿迪达斯climazone

阿迪达斯在他们的品牌名称和climazone等技术中没有使用大写字母,然而,他们页面上几乎所有其他的文字都是大写的!这个例子之所以这样做,是因为排版的文字与3层的图像共享空间。它是图像上的大文本趋势和共享空间趋势的交叉。

阿迪达斯climazone

乔凡尼许

乍一看,排版共享空间的这个例子与其他很多类似,但是,在标题共享空间的较小图像上有一个轻微的鼠标移动动画。

乔凡尼许

培养数字

一个大N占据了登陆页面的中心位置。通过这个N,播放视频剪辑,并且页面的前景颜色会不时变化。当你在屏幕上移动鼠标时,你会拖动一个大圆,这样你就可以更多地观看背景中播放的视频。左边的两类菜单和右边滚动的客户端信息都共享N所占用的空间。

培养数字

我的数码奢华银河

这个网站虽然给人以极简主义的印象,但实际上非常繁忙。登陆页面有一个幻灯片,其中一个图像与标题共享空间幻灯片,并在每个图像后面放置一个圆形的加载栏,运行其周长。

我的数码奢华银河

Bisgrafic

这家西班牙平面设计公司有4个人名/公司名列表(可能是客户名),与中心海报共享空间——当你将鼠标悬停在任何一个人名上时,海报和背景颜色就会改变。

Bisgrafic

Kekselias

这个网站在它的设计中使用了柔和的配色方案,当你向下滚动页面时,每一段文字都会滑到屏幕上,标题与伴随的图像共享空间。

Kekselias

本杰明Geudj

通过水平滚动,该站点在设计者处理过的项目上显示图像和文本。标题文本与纯色面板共享空间,有时也与描述性文本共享空间。

本杰明Geudj

Adloids

这是一个完全不同的看法,这一趋势-事实上,它是值得怀疑的,甚至应该做这个名单!这里的排版共享边界而不是空间。

Adloids

杜福瑞斯赫伯特Comeau

这家加拿大网站使用幻灯片的方式,向员工展示了一份简短的个人简介。带有公司名称的左侧面板是静态的,对滑动图像有轻微的影响。

杜福瑞斯赫伯特Comeau

牛津的房子

该机构使用与上述示例类似的方式使用静态左手面板,其中文本与幻灯片共享空间。这种效果有一个小问题——一些图像太暗,导致不可读性。

牛津的房子

追逐蓝

这是排版与图像共享空间的一个很好的例子。照片上的名字似乎在肖像照片的后面,而“企业家兼慈善家”的字样则在他的前面。

追逐蓝

Ginventory

这个站点有滚动的动画,其中纯黄色的面板可以旋转到页面的顶部或底部,名称总是被它的一半所覆盖。

Ginventory

未来伦敦学院

左边的有图案的面板和占据了屏幕三分之二的静态图像使您想知道哪个面板的排版与这里共享空间!

未来伦敦学院

小型的飞行学习中心

一个简单的例子,大标题文本共享空间与丰富多彩的图像。

小型的飞行学习中心

空间10

这个趋势的另一个简单例子。很明显,设计师并没有把空间用完,空间共享是为了达到效果而特意做的。

空间10

Onirim

在这个网站上,视频的幻灯片是在一个静态的位置,标题文字命名的特色项目幻灯片,并把自己放在视频区域。

Onirim

结论

有时,我们似乎已经到了新趋势的尽头,然而,设计师和开发人员总是会想出一些新的东西,并在现有的趋势上添加一些额外的香料或不同的扭转。空间共享元素就是大标题文本趋势的一个补充。

你曾经设计或开发过这种风格的项目吗?你喜欢它的想法,还是相关的和可能的问题使你远离这样的设计?请在下面的评论部分与我们分享你的想法和链接。

2020-01-19 17:21
相关热门