如何使用插图为你的网页设计增添情趣

WebFX总统。Bill在互联网营销行业有超过25年的经验,擅长SEO, UX,信息架构,营销自动化等。William在希彭斯堡和麻省理工学院的科学计算和教育背景为MarketingCloudFX和WebFX的其他关键研发项目提供了基础。

如何使用插图为你的网页设计增添情趣图形插图在今天的网页设计中已经很常见了。它们可以为模板和企业标识的平淡世界添加独特的品牌元素。虽然仅仅在5年前,你还很难找到许多网站在寻找插画师,但时代已经改变了,我们正处于许多新的和令人兴奋的网页设计趋势的边缘。

插图以美丽的背景风景的形式呈现,动物和吉祥物对于品牌,甚至卡通版本的作者和设计师可以找到所有的网页设计组合横跨全球。网页插画师和品牌大师已经成为网页设计行业的主流,需求量也很高。我将通过浏览一些有效使用插图的网站,介绍一些在网页设计中结合插图的技巧。

我说的是更深入地挖掘设计的基石;真正寻找是什么让插图在我们的网站访问者的脑海中“点击”。

为什么品牌如此重要

当你建立一个网站,你希望设计的外观和感觉是你的业务的延伸。无论这意味着将一个已经存在的标志融入到设计中,还是创造一个令人难忘的体验,网站都需要适合你的品牌。当访问者进入你的网站时,你也要确保它能留下持久的影响。

我指的是这个你希望他们记住你的网站。插图有助于使一个网站令人难忘,因为一个吸引眼球的图形场景或矢量艺术作品,页面跳出来,有一个独特的视觉元素,只是该网站。这是帮助你的品牌像新鲜的汁液从枫树!

用户吞噬了创造性;它表明你真的关心你的品牌和你的网站,通过合并插图的麻烦,这是很难概念化和有效地实现在网站的背景下。让我们来看看一个很好的例子,如何有效地使用插图来建立品牌标识:一个名为ten24 Media的SEO公司。他们的网站使用了一个马戏团帐篷的背景,美丽的天际线和开阔的草地,以吸引读者进入网页设计的上部区域。

使用马戏团帐篷作为中心说明元素的概念来自创造性的文字游戏:他们的名字拼写为“帐篷wentyfour媒体。”网站布局包括他们的工作的简要描述,以及他们的服务页面的链接(“进入展示”)。品牌是一致的整个网站;继续浏览其他页面,您将在顶部导航链接附近看到马戏团帐篷的轮廓。此外,该网站的页脚包含更多的草山。

所有这些说明的元素使整个网站感觉非常创新和有趣-你想创造完美的积极情绪,特别是消除一些人对SEO职业的负面误解。

简单的插图效果很好

永远不要低估一个简单插图的力量。在你的设计中添加太多内容会让你的读者不知所措,并产生与你想要的相反的效果。Fatburgr是一个有趣的web应用程序。

许多人会把他们的设计归类到新时代的“Web 2.0”渐变和绒毛领域,但这个概念实际上代表了它本身。浏览这个网站很有吸引力,你可以享受每个地区的卡通方面。这个页脚也很有趣。

想象这样一个网页设计的细节是令人惊叹的。您可以识别每个部分,并了解它们与整个网站品牌的关系。甚至按钮和文本区域也添加了额外的创造性效果。

把内容放在它应该在的地方可以帮助你的读者更快地理解你想要说的东西。有足够大的字体和易于阅读的段落充足的间隔是必不可少的-简单是最好的。从这个例子中得到的另一个概念是排版

字体应该与你的插图设计概念相匹配;它们应该很大,而且几乎能向你的访问者弹出——插图和更简单的结构可以作为补充。

在网站的用户界面中实现你的插图

我想讨论的下一点是如何与网站的功能和你使用的插图保持和谐。您可以在Forrst中看到这种情况,这是一个为设计人员和开发人员提供共享代码片段和快照的新社区。虽然目前处于内测阶段,但你可以在他们的主页上看到树木繁茂的背景。

在前景中,你可以看到一名公园护林员在游行,他的制服上挂着福斯特的徽章。你还可以看到网站的简要描述和在树木背景上的信息标志。这一切都增加了网站的氛围,包括巧妙的“登录”日志漂浮在看起来像云的东西上。

如果这就是全部,你可以认为福斯特是视觉灵感的来源。然而,他们进一步推动了插图的使用。你可以到地下的泥土里去看一个报名表格。

只需要一些细节,你就可以快速申请会员资格,而且网页表单看起来很棒。这样的设计可能会很复杂,需要大量的技能。要制作这种级别的插图作品可能需要在Adobe Illustrator等软件中进行多年的练习才能掌握,但它们可以是推动您的网站设计进入大联盟的完美接触。

不要仅仅为了美观而使用插图

外表好看很重要。但是添加设计元素只是为了美化你的网站错误的态度因为网页设计是一个功能性产品。你设计的所有元素应该有一个目标并具有重要性,包括添加美丽复杂的插图。

真的需要插图吗?它们如何帮助您实现网站的目标?当你概念化和执行你的插图想法时,你应该不断地回答这些问题。

在进入数字世界之前,拿着笔和纸坐下来起草想法。这将帮助你一次讨论出更多的想法,而不是把自己锁在你用来设计网站的媒介中。使用类似的想法来获得灵感会有很大帮助。

CSS和图形设计画廊到处都可以找到。浏览一些并记下他们的设计是如何发挥作用的。和你想要的相比,他们是不是有点过分了?

也许他们不正确使用颜色?他们的内容是如何与插图相衔接的?问这些问题会帮助你走上正轨。

网页设计总是一个漫长的过程。让你的设计与制衡保持一致是一项非常容易掌握的技能。上面的例子只是简单的想法,但更大的概念可以实现惊人的结果。

不是每个人都是插画家;我当然不会声称自己是插画创作方面的专家Brad Colbow或者是网站幕后的那个人但随着微博的力量在其他的社交工具中,遇到来自世界各地极具创造力和才华的设计师并不难。网站的设计是非常重要的一环这个难题

这是你的用户可以真正看到的网站的一部分。

进一步的阅读

这里有一些关于网页设计中的插图主题的文章和资源。

如何在Photoshop中创建一个说明性的网页设计

这一步一步的网页设计教程将介绍如何创建一个具有插图景观的网页设计。

30个创意插图网站标题

这里是一个展示网站标题,有说明性的设计元素。

30美丽的Photoshop插图教程

不习惯使用Adobe Illustrator?这是一个Photoshop教程的总结,帮助你成为一个更好的插画家。

网页设计中插图的30个创意例子

这里是另一个展示网页设计的插图。

和布拉德·科尔博一起搞笑

这是Brad Colbow的采访,他是这两个一个网页设计师和一个插画家。顺便说一下,看看他的the Brads漫画系列,一个对网页设计师生活的滑稽观察。

相关内容

WebFX职业

加入我们的使命,为全球的企业提供业界领先的数字营销服务,同时建立您的个人知识和个人成长。

我们招聘! 视图30 +职位空缺!