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

来源:设酷网     作者:日期:2020-08-28     浏览:198    评论:0    
  
核心提示:网站设计趋势正在发展,以有趣的方式将现实的图像与插图和艺术元素混合在一起。 它古怪,独特而美丽!它是视觉元素的混合体,乍一看似乎并没有融合在一起,但是如果处理得当,可以创造出极富吸引力和令人愉悦的美感。 在这里,我们将研究这种设计趋势的示例,以及将现实

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


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

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


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


总结

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









图文来自:design shack 

由深圳网站建设公司-Clh翻译编辑整理

原文链接: https://designshack.net/ARticles/trends/mixing-realism-and-illustrations/

本文来源:设计趋势:现实和插画的融合    http://www.sjschina.com/archives/21348.html
相关评论