本月的作品集涵盖了许多整洁的交互元素,还有一些大到不容忽视的作品。
再加上一些出色的细节,你就拥有了一系列有趣的设计趋势,并为用户与内容互动创造了很多机会。
以下是本月设计中的流行趋势:
整合式导航
粘性导航风格——通常固定在屏幕顶部的框中——已经统治了一段时间。
不过,现在出现了一种变化,即更多地将导航元素整合到整体设计中。这有点棘手,因为你必须选择恰到好处的图像或视频背景来保持可读性,并且需要制定滚动时的操作方法。
当整合式导航做得好时,它既美观又优雅。它更像是一本杂志,而不是传统的主页,甚至可以激发一些互动。
Beca Tea以几种方式将导航整合到背景中。首先,徽标实际上位于主要区域的导航之外。在黑色背景上散布的白色字母使得在屏幕顶部创建导航元素变得稍微容易些。一条细线创造了一些自然的分隔。最有趣的是茶叶在屏幕上移动,并侵入到导航的空间中。这是一个很棒的细节!
Fervent Digital 做了一些很少见的事情——右侧的垂直导航被整合到了主要图片中。通过宽阔的悬停圆圈和从导航中动画出来的细线,加入了一丝互动的元素,帮助你做出互动选择。滚动时,所有内容都整齐地折叠到了同一位置的汉堡菜单中。
Pininfarina 采用了与 Beca Tea 类似的整合式导航元素,只是它位于屏幕底部。(屏幕顶部还有一个隐藏在汉堡菜单图标中的另一个菜单。视频轮播始终在底部的三分之一处是暗色的,这样每个导航选项都可以在任何时候轻松阅读。
大而交互式的排版
我们喜欢大号字体(这是无法否认的事实)!
最新的大型排版趋势将其与交互元素或动画相结合,以创造更大的影响力。对于你的设计,有许多不同的方法可以做到这一点。
以下是我们喜爱的三个例子,帮助你思考如何尝试让它起作用。
Miso Tone 使用了大型的艺术风格字体处理,并采用了一种实验性的字体。虽然文字本身不动,但几乎周围的一切都具有一定的交互性。鼠标指针/悬停显示有一个圆点,背景文字会变化和移动,照片/视频区域具有持续的动态效果。页面底部还有一个新闻滚动条。有很多内容可供观看,但主要关注点是文本。
Full Circle 让你没有机会去思考其他任何东西,只会专注于文字。大号的白色字母会动画地出现在屏幕上,而多彩的背景保持不断的运动。还有一个小的滚动动画,帮助你体验设计的下一个层次。
Michael Kovs 以一个加载视频开始,其中大字逐渐增大,直到一切都突然进入了更为静态的位置。然后,大号字母出现了一点故障效果(这也是一种时尚的设计元素),使动态效果成为设计的重点。设计还使用了一些独特的导航,下面有一些方框,可以快速将你带到网站的其他部分。虽然这里有不断的动态效果,但它表现得足够简洁,你不会像经常有太多动画效果的网站那样感到晕眩。
数字叠印风格
叠印是一种印刷设计技术,提供了很多视觉上的吸引力。当在在线上复制时,它可以产生类似的效果。
当颜色叠印时,它们相互作用,混合并产生新的色调或色彩。叠印可以用来创建更丰富的颜色或微妙的阴影效果。结果效果可能很复杂,在线上,它模仿使用多层来突出颜色和效果的效果。
数字叠印也可以被控制,允许设计师在最终的艺术品中创建任何他们想要的颜色选项。在这里,我们将看一下更自然的叠印,一个点阵叠印,以及一个有趣的黑白选项。
Otis Bay Studio 使用了有趣的数字叠印风格的动画,填充了字母并将彩色元素融合到黑白轮廓中,增加了趣味性。他们通过文本块中的柔和渐变和一些有趣的滚动效果来平衡它。
村庄博物馆采用了点增益风格与色彩混合,以一种非常令人回想起旧印刷设计的方式将颜色融合在一起。叠印风格贯穿整个滚动页面和设计的其余部分,以在这种风格下打造一个完整的主题。
Scrib3 使用轮廓和内联样式来创建叠印效果,而不需要大量的颜色。虽然效果有些明显,但它是对具有一些现代化变化的野兽派设计的一种不错的处理方式。
结论
本月我们趋势集合的一个挑战是,大多数都是完整的设计选项。如果不付出大量工作,很难将它们与现有框架混合搭配。
在启动新项目或实施网站改头换面时,考虑这些趋势是很好的选择。
精选文章: