作者都是各自领域经过审查的专家,并撰写他们有经验的主题. 我们所有的内容都经过同行评审,并由同一领域的Toptal专家验证.
迈卡·鲍尔斯的头像

弥迦书鲍尔斯

Micah通过品牌、插图和设计帮助企业建立有意义的联系.

分享

网页插图是一种充满活力和多样化的视觉传达形式. 作为一门设计学科, 它融合了平面设计的信息清晰度和美术的表现力. 在鼎盛时期,插图做了一些摄影不能做的事情. 它从一个人眼无法达到的角度描绘了熟悉的事物.

最近品牌的涌入 在网页设计中使用插图 这是很长一段时间以来网络发生的最好的事情之一吗. 它带来了活力, 幽默, 以及一系列商业主张的清晰度,使公司能够更清楚地讲述自己的故事.

网页设计插图

尽管有积极的一面,但也存在问题. 其核心是, 插图是讲故事的工具, 但随着其受欢迎程度的提高, 它转向了义务. 我们有一个网站,因此我们必须有插图.

插图缺乏战略眼光,是装饰,是原创性的对立面. 故事被抛弃,想象被抛弃. 单个网站失去了区别,所有的插图产品和服务混合在一起.

一名穿着整洁的员工坐在一张整洁的办公桌前,操作着一个抽象的界面,这个界面与现实世界融为一体,文本和电子邮件在纸飞机上飞过,飞机降落在一只在绿叶植物旁打盹的猫身上,画面上是一个人在做瑜伽,喝着康普茶,浏览着一个应用程序,其中出现了一只大手,用一支超大的钢笔签署了一份合同.

你肯定见过.

有四个罪魁祸首威胁着网站设计插图的长期生存能力.


罪魁祸首1:意象缺乏智慧

原点

插画有着丰富的历史 鼓动. 几百年来,它一直被用作社会评论的一种形式. 为什么? 因为它深刻地阐明了人类事务的复杂本质. 当人们相互矛盾时, 当经历令人困惑时, 插图使它在瞬间变得明显.

插图的目的不是为了争论本身. 而, 目标是让人们停下来思考一个观点, 即使这与他们自己的冲突. 在最好的情况下,插图是最终的顿悟时刻.

这个问题

今天对视觉内容的需求剥夺了当代网络插图的阐释能力. Online, illustration rarely instigates; mostly, it instructs or embellishes.

在许多网站上,插图是与它们配对的文本的一对一视觉表示. 试试我们独特的日程安排功能! [插入单线日历插图]

或者他们描绘人们由于购买了产品和服务而过上了“最好的生活”. 试试我们独特的日程安排功能! [插入一个喝咖啡的笔记本电脑小伙和笑脸日历击掌的插图]

这两种方法都不足以阻止网站插图失去讲故事的气势.

的补救措施

有些概念很难说明. 有些产品和服务并不令人兴奋,也不容易与人类体验联系在一起. 在这里, 插图画家 在概念创造过程中必须深入挖掘. 要发现一个话题最引人注目的角度,就要探索它的阴暗面.

  • 最大的痛点是什么?它们为什么存在?
  • 谁在经济上、职业上或情感上受到的影响最大?
  • 公司、客户或专家之间是否存在冲突或争议?

像这样的问题适用于大多数在线销售的商品. 作为插图画家, 我们的任务通常是展示好的一面, 但如果我们不了解坏的一面, 我们会用一些老套的比喻. 事实上,这种正/负平衡是讲故事的一个关键方面. 没有低点,说明性高点就失去了影响.

干得好: 大的卡特尔

网页设计插图


罪魁祸首2:猖獗的模仿破坏了新颖性

原点

模仿和创造并不是完全对立的. 世界上最早的 文明,艺术家和 设计师 通过模仿培养创造力. 引人注目的风格吸引眼球. 我们检查它,解构它,并收集它的技术来增强我们自己的工作. 这就是增长.

在一个完美的世界里,模仿将仅限于学习和评论. 复制的样式将在视觉上和概念上进行转换. 这种情况很少发生.

这个问题

模仿拒绝进化. 当我们遇到一种流行的风格,并把自己附在它的轨道上, 我们就像旧世界的学徒,被邪恶扭曲了. 我们盗用了我们“追随”的插画家的风格属性,并将其推广为我们自己的成果.

品牌是同谋. X公司想要Y公司的插画风格,所以他们委托仿制. 它一次又一次地发生,一个站点接着一个站点,每次迭代都会引入新的熵层. 最终,整个行业雇佣了一群堕落的克隆人,就像迈克尔·基顿在 多重性.

看看SaaS领域的主流插图风格就知道了. 它是令人尴尬的齐次.

的补救措施

有无数条超越模仿的道路. 不需要创造性的天才,也不需要排除外界的灵感. Quite the opposite; 插图画家 need ample exposure to reference material. 我们看到的和储存的越多,我们就越能重新诠释. 一些探索性的 练习 是有可能的:

  • 历史上的混搭. 通过一个有成就的艺术家的眼睛重新想象一个鼓舞人心的插图风格.
  • 快速重绘. 仔细画一个对象,同时参考另一个插画家的风格. 然后, 快速重新绘制相同的对象7-10次,不需要参考风格,并接受出现的怪癖.
  • 添加规则. 创建一个影响插图过程的约束. 例如: 我可能只画直线. 它们可以是任意长度或任意角度,但必须是直的.
  • 工具开关. 模仿插图风格与绘图工具,是不适合的工作. 例如, 如果风格依赖于精确的线条, 用墨水和软毛刷复制它.
  • 盲目的解释. 收集3-4个引人注目的插图风格,并要求同事以书面形式描述一个. 抛弃所有原始的参考风格,使用书面描述来告知创造性的选择.

干得好: Toggl

网站上的插图


罪魁祸首3:插图系统陈旧僵硬

原点

我们的时代是一个痴迷于设计系统的时代, 其一是需要在多个品牌接触点保持一致的体验. 并不是说设计系统是新的. 编辑系统已经存在了一个多世纪, 但考虑到品牌现在利用的数字渠道的数量,系统思考是紧迫的.

同样的, 几十年来,品牌一直采用独特的插画风格, 但是现代设计系统引入了一个新的考虑: 我们如何使我们的插图风格系统化?

颜色、纹理、长宽比和身体类型都是仔细定义的. 结果被大张旗鼓地展示. 时间揭示了一个缺陷.

这个问题

插图和界面设计是不同的. 当设计系统通知界面的样式时, 结果是一种幸福的凝聚力,将用户定位在他们的数字环境中. 信息架构是一个里程碑. 导航是一种习惯. 但是以系统为导向的说明性风格扼杀了创造性的冲动——疯狂捕捉和提炼新想法的突然点燃.

这并不是说系统本身就不好. 当系统在 支持 对于图像概念,插图画家可能会发现这些限制是自由的. 但是当图像是通过系统的透镜构思出来的, 当插图画家停留在对凝聚力的错误信心上时,想法就会减弱; 它符合系统,所以它有效!

渐渐地,更多的工作被用于系统维护. 线条、重量和服装压倒了引人注目的概念. 最后,插图的风格和叙事能力枯萎死亡.

的补救措施

插图诠释了人类智慧和情感的复杂性. 它邀请外人欣赏他们可能不习惯的经历. 插图作为品牌标识载体的能力是次要的. 这些不能颠倒过来.

为了防止图像变得僵硬,根据主题原则构建插图系统. 品牌的声音和价值观不仅仅是风格决定的来源. 它们是可以观看的讲故事策略, 解释, 并从多个角度——顾客的角度——重新讲述, 该公司的, 而竞争对手.

以下是指导插图系统发展和长期相关性的实际步骤:

  • 不要纠结于一般观众不会注意到的规则和细节.
  • 避免以破坏创造性直觉的方式执行系统指导方针.
  • 不要将系统锁定在与它们所代表的品牌相同的调色板中.
  • 偶尔打破常规,邀请外部插画家贡献自己独特的风格,挑战观众.
  • 为系统的发展做好计划, 并且允许增量实验——即使当前的风格很受欢迎.

干得好: 概念.so

网页插图样式


罪魁祸首4:库存插图被过度使用

原点

许多公司需要在他们的网站上大量的视觉内容, 但是时间和预算限制了可以委托的定制图形的数量. 为了满足需求,公司转向库存网站,在那里他们购买主题插图集.

不幸的是, 很少能找到原创的股票插图, 高质量的, 而且未被充分利用(更不用说在品牌上了).

这个问题

股票插画界出现了一个令人不安的趋势. 这可能只能被描述为对剪贴画时代的错误致敬, 现在有一些混合搭配的插图网站,通过允许用户定义性别等变量,可以立即生成“自定义”图像, 肤色, 和服装. 由此产生的插图是使用它们的公司创造性信誉的一个污点.

的补救措施

对于资源有限的公司, 有两种方法可以规避与库存图像相关的虚假氛围. 第一个可能会让人感到意外. 全心全意拥抱股票插图. 全力以赴. 毫无保留地使用库存图片,但要找到自定义它们的方法. 如何?

  • 混合和匹配不同的股票风格与数字拼贴.
  • 将库存插图与摄影相结合(甚至是库存摄影).
  • 覆盖手绘元素,如记号或笔画.
  • 对数字扭曲和扭曲的库存样品进行跟踪.
  • 将库存转换为灰度,并通过数字绘制的图形注入品牌色彩.

在预算中避免库存的第二种方法是优先考虑最需要的插图并订购一小套. 也许这意味着委托五张主页插图. 在短期内, 它们将提供视觉冲击, 后来, 它们可以用来为其他渠道提供更大的插图集.

干得好: 彭博商业周刊

网页插画趋势


创建有目的的网页设计插图

网页插图使服务更有相关性,产品更受欢迎. 它加强了品牌叙事,并帮助网站访问者理解他们每天遇到的永无止境的信息流. 但仅仅在网站上有插图是不够的.

如果插图不能超越对应文本的1对1表示,那么就浪费了参与的机会. 同样的, 插图没有什么价值,可能会被误认为属于数百个其他品牌之一.

网站插图必须以独特的风格和概念吸引观众. 它们不需要很复杂, 实景照片, 或者鲜艳夺目,引人注目, 但他们确实需要用语言的方式来阐明他们的主题中有趣的东西, 照片, 图表不能.

插图是留下来的. 它的沟通能力太有说服力了,不容丢弃. 但是对于那些未能探索插图的表达潜力的公司和插画家来说, 它的价值将被证明是短暂的.

了解基本知识

  • 为什么在网站中加入图片很重要?

    在网站上加入产品照片和网页设计插图等图形是帮助用户理解他们正在阅读的文本的好方法. 图形提供产品的视觉信息,添加颜色,并为网站内容提供结构. 没有图形,互联网就像一篇没完没了的文章.

  • 什么是网站图标?

    网站上有很多类型的插图. 网站图标是用来表示命令、通知和工具的简化符号. 另外, 还有更详细的版本,称为点图标,用于说明服务和产品功能.

  • 图标的作用是什么?

    图标是抽象的. 它们简化了对象, 的想法, 并将命令转换成图形符号,以便人眼能够快速识别. 图标是网络插图的主要趋势之一,因为它们可以帮助用户执行所需的任务并快速找到他们在网站上需要的东西.

  • 说明的目的是什么?

    插图帮助用户以一种既熟悉又不寻常的方式感知现实. 当一个想法、产品或服务难以用语言解释时,它很有用. 因为大量的网页插图风格, 这是一种快速将复杂情绪联系起来的强大方式.

  • 为什么图标如此重要?

    我们生活在一个充斥着视觉信息的世界. 图标和网站插图可以帮助我们从杂乱的页面中快速判断哪些是重要的. 他们让我们愉快地参与到我们每天使用的产品中, 当它们运转良好时, 提升品牌满意度.

就这一主题咨询作者或专家.
预约电话
迈卡·鲍尔斯的头像
弥迦书鲍尔斯

位于 温哥华,华盛顿州,美国

成员自 2016年1月3日

作者简介

Micah通过品牌、插图和设计帮助企业建立有意义的联系.

Toptal作者都是各自领域经过审查的专家,并撰写他们有经验的主题. 我们所有的内容都经过同行评审,并由同一领域的Toptal专家验证.

世界级的文章,每周发一次.

订阅意味着同意我们的 隐私政策

世界级的文章,每周发一次.

订阅意味着同意我们的 隐私政策

Toptal设计师

加入总冠军® 社区.