最新设计趋势：现实和插画的融合

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


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

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


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



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

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

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


2.插图叠加（Illustrated Overlays）



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

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

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


3.3D效果（3D Effects）



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

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

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


4.并排照片与插图（Photos and Illustrations Side-by-Side）



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

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

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


5.图层与运动（Layers and Motion）



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

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


6.“差不多”插图（“Almost” Illustrations）



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

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


7.背景和前景层（Background and Foreground Layers）



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

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

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


8.简单的插图与图像（Simple Illustration with Images）



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

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


9.主视觉元素（Hero Partners）



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

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

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


10.结合成为一个元素（Combining in a Single Element）



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

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

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


11.细微的插图（Subtle Illustrations）



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

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


总结

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