8种网页设计使用手绘图标元素的方法

来源:设计前沿 作者:手绘图标 时间:2017-08-09

虽然通常关注完美的像素设计元素,但它们不适合所有的内容。有时你想要一些更多的东西...

手绘图标或元素可以是正确的设计技术,可以为项目添加特殊的东西。虽然大多数设计师不会对看起来是手绘的元素疯狂,但有可以增加吸引用户的个人感觉。

这也是网页设计的趋势。从一个图标的颠簸,到一个完全相同的可用性和艺术的手段,手绘元素是一个受欢迎的设计选项。这里有八种新的使用方式!

创建分离

绘制元素

手绘设计元素可以混合并与几乎任何类型的其他视觉显示相匹配。他们可以与照片或视频一起工作,在空白海域或文字元素附近。不要消除使用这种元素的概念,因为你害怕如何适应整体设计模式。

尝试一下; 你永远不会知道。

数字访客在整个设计中使用这些元素来创建内容元素和位之间的分隔。虽然主页上的元素只是点,但在滚动下方的多个地方就有例子,甚至图标也具有手绘天赋。

每个元素的放置被设计为确保用户正在查看正确的内容。在上面的示例中,元素位于屏幕的中心,用于创建两个内容区域之间的分隔。较低的设计类似元素使用图标风格关于小文本框来展示公司的作用。

互动涂鸦

绘制元素

手绘元素可以​​在设计中创造有趣的互动作品。从加载动画 - 这个帖子中的许多网站示例使用这种风格 - 完全交互式的体验,这种设计技术足以引起用户的兴趣。

房地产彩色玻璃是一个互动游戏的一个可爱的例子,结合了网站设计趋势和创意元素,允许用户在屏幕上绘制图纸。这些联系在一起的是外观是手绘的,元素是精确的,无缝的工作。着色作品应该是 - 而且您不要在外面涂鸦 - 为了让使用者挂钩的经验。

几乎绘制的字体

绘制元素

有时候,最好的手绘元素实际上并不是画出来的。模仿手写的排版风格特别受欢迎,特别适合显示。

这种类型的风格具有用户可以相关的更轻,更人性化的感觉。(诀窍是确保信件高度可读。)

Tradewinds Hotel酒店以简单,草书风格的字体表现出色,它的尺寸足够大,清晰可读,一目了然。支持排版全部采用简单的无衬线样式,有助于增加显示字体的强调,并保持一切易于使用者的消化。

设计室

绘制元素

一些手绘元素是纯视觉目的。它们的存在是为了在其他方面难以确定的设计创造一个流程或感觉。当在整个设计中的小地方使用时,这些纹理可能会非常有趣。

母亲的酿造就是这样。主页上有很大的心脏 - 很明显。但是,几乎每个其他页面上都有微小的元素 - 一些显而易见的,有些隐藏起来。每个按钮都具有手绘触摸的色带设计,元素出现在背景中,并叠加在滑动元素上,以填补设计中的死空间。整体效果是聪明和视觉上有趣的。

设置心情

绘制元素

手绘设计元素通常采用更轻,更有趣的音调。他们可以将这种类型的氛围赋予几乎任何项目,并且您使用的手绘元素越多,项目将显示的打火机越多。

科学标志是一个很好的例子,说明如何使用手绘元素来打包一个有趣的,几乎是儿童的美学(颜色也有贡献)的设计。从排版到图标到颠倒的下划线,整个概念有一个非常具体的心情。它具有创造性,轻便性,并鼓励用户互动。

展示创意

绘制元素

手绘设计概念可以成为投资组合网站设计的一个很好的机会,因为它可以强调创造力。这些要素更侧重于设计过程,以及可以进入项目的思想和工作。

(此外,这是一种有趣的方式来伸展创意肌肉。)

小费用以上述方式为主图像使用手绘元素,并与左上角的手绘徽标相结合。(如果你不仔细看,你可能会想念它。)

图标或徽标

绘制元素

因为这是手绘元素最受欢迎的用途之一,它不在列表的顶端。(主要是帮助你想到其他的想法,然后跳到更常见的事情。)

手绘触摸可以是图标或徽标的一个很好的补充。从不均匀的角度到偏心的形状或圆形,不完美的电脑形状风格不能增加人物和魅力。

更高的地面使用波纹来分隔图标式标志中的字母。最小的风格是醒目和有效的,手绘元素给人一种直线不会传达的个性。

作为动画效果

绘制元素

用手绘生动的手绘元素。

在屏幕上绘制的图像可以很好看,看看。虽然对用户来说明显的好处是娱乐,因为他们看到一些事情已经到来,网站所有者也有好处:增加网站的时间和更多的转换潜力。

Long Story Short在主页上使用这个概念。 然后将其动画化成一套设计项目,快速移动,并在此过程中包含多个手绘图。整个循环只持续几秒钟。

结论

即使不能绘制,在设计项目中模拟手绘元素也可以增加用户欣赏的个性化感觉。从排版到游戏到装载动画,这些元素可以展示创意和个性。