返回  

设计趋势:现实和插画的融合

2020/05/12 18:19:20 来源:小编

网站设计趋势正在发展,以有趣的方式将现实的图像与插图和艺术元素混合在一起。 它古怪,独特而美丽!


它是视觉元素的混合体,乍一看似乎并没有融合在一起,但是如果处理得当,可以创造出极富吸引力和令人愉悦的美感。

在这里,我们将研究这种设计趋势的示例,以及将现实与插图相结合以最大程度发挥作用的不同方式。 其中一些已经使用于现实的网站设计之中,而另一些则完全寓教于乐。


1.卡式设计中的混合视觉元素(Mixing Visual Elements in Cards)

Mixing Visual Elements in Cards

Greenhouse采用博客风格的设计,每个内容块均使用卡式设计。 卡片中包含视觉元素——一些照片,一些插图。

结果是内容类型和视觉样式的完美结合,使页面新鲜有趣。 大胆的颜色使用使得插图块引人注目,几乎迫使用户滚动浏览内容。

之所以可以这样使用它,是因为该框架很简单,而且混合元素似乎完美匹配,同时为参与提供了充足的对比。


2.插图叠加(Illustrated Overlays)

Illustrated Overlays

混搭现实主义和插图的最简单方法之一就是创建一个插图覆盖层。 它的工作原理几乎就像在照片上使用徽标一样。

Malai将此技术与分屏设计结合使用(这也是一种非常时尚的元素)。 图示的覆盖层有助于将设计的两侧连接起来,从而创造出视觉流畅性和和谐感。

插图尽管有些复杂,但是作为纯白色的元素,感觉优雅,不会妨碍设计。


3.3D效果(3D Effects)

3D Effects

越来越多的设计师正在一个介于现实和插图之间的领域进行实验。 Plink的整个设计中的三维元素看起来很真实。

插图以真实的方式移动,它给你的感觉不像是一张简单的图像,而是你几乎必须翻看的艺术品。

这种样式是一种越来越流行的方式,用于显示难以拍照或以其他方式在视觉上进行描绘,而动画元素可以帮助它增加用户交互的机会。


4.并排照片与插图(Photos and Illustrations Side-by-Side)

Photos and Illustrations Side-by-Side

照片和插图可在整个设计中一起用于框架中。 在这个设计趋势的例子中,每种视觉形式都在“照片”框架或盒子中,并且以相同的方式处理,无论是图片还是插图。

这与上面的卡式设计示例非常相似,但又有不同之处。

Griflan很好地使用了这个概念,甚至使用了更多的照片插图。 它创建了一个灵活的网站设计框架,可以在不完全重新设计的情况下快速更改图像和插图。


5.图层与运动(Layers and Motion)

Layers and Motion

插图可能并不总是很明显。 作为徽标的一部分,或者在作为背景元素的情况下。插图元素是一个很酷的鼠标箭头或悬停圆圈等,似乎在屏幕和图像上跳动。

小型动画通过简单的首页设计将所有内容组合在一起。


6.“差不多”插图(“Almost” Illustrations)

“Almost” Illustrations

另一种流行的网站设计技巧是使用带有元素的发光效果以引起注意。 将其与插图背景结合使用,可获得超越现实的效果。

Boda Borg用两张在任务主题插图上来回“小故障”的家庭照片来做到这一点。 它既有趣又轻巧,绝对会让你着眼于设计。


7.背景和前景层(Background and Foreground Layers)

Background and Foreground Layers

混合照片和插图可以很简单。

Canneseries使用奖杯的照片,看起来几乎像是带有背景插图元素的插图和带有类似插图的图标。

很难说出真实元素和插图元素之间的区别,并且使用这种类型的设计方案完全可以。


8.简单的插图与图像(Simple Illustration with Images)

Simple Illustration with Images

将照片和插图结合起来很简单。 元素的设计应有助于将用户吸引到设计中,并提供有价值的信息以增强他们的体验。

Neueform使用的插图可以吸引吸引用户关注整个设计。 它就像是一个麦克风,连接了设计和内容。


9.主视觉元素(Hero Partners)

Hero Partners

你可以将插图或动画与图像一起使用,以创建一个酷炫的英雄图像区域,从而打破标准的设计模式。 这是一种新的美学,它以新的方式使用了相同的空间和长宽比。

简单的事情如破坏空间可以使整个设计在视觉上更有趣。 它通过破坏用户的期望来达到正面的作用。

Mondial只是通过动画来做到这一点——可能不是太多的插图,而是很适当的,滚动连接到下面标题的图像。 凭借内容块的完美计时速度,它使你可以在继续滚动之前浏览和阅读每个不同的内容。


10.结合成为一个元素(Combining in a Single Element)

Combining in a Single Element

结合真实的图像和插图来创建一个新的元素可能会令人惊叹。

Constance Burke出色地做到了这一点,并且可能是你会发现的这种图像风格的最好例子之一。

经过深思熟虑,可以执行并完美匹配内容,后者使它如此有效,使用趋势可以使内容更好。


11.细微的插图(Subtle Illustrations)

Subtle Illustrations

你不必全力以赴使用这种趋势。 视觉元素之一(图像或插图)可能非常微妙。

FourSeasonsHyrda在一个巨大的视觉图内使用了一个微妙的动人插图,将其分层放置在视频上以产生兴趣。 这项技术特别有趣的是,它会创建额外的空白区域,以帮助吸引眼球,从而使你阅读内容。 颜色和对比度在这里也很重要。


总结

你是否认为这些趋势可以用于你的项目? 诀窍是计划元素之间如何相互作用。 现实主义和插图必须交织在一起,以使效果具有意向性。