视觉保质期——为什么网页设计插图会过时

已发表: 2022-03-11

插图是一种充满活力和多样化的视觉交流形式。 作为一门设计学科,它融合了平面设计的信息清晰度和美术的表达能力。 在巅峰时期,插图做了一些摄影无法做到的事情。 它从人眼无法企及的角度描绘了熟悉的事物。

最近大量使用在线插图的品牌是长期以来网络上发生的最好的事情之一。 它为一系列商业主张带来了活力、幽默和清晰,并使公司能够更清楚地讲述他们的故事。

网页设计插图
插图以熟悉和意想不到的方式描绘了世界(Emaar EMR 应用程序)。

尽管有积极的一面,但也存在问题。 从本质上讲,插图是一种讲故事的工具,但随着其受欢迎程度的提高,它转向了强制性。 我们有一个网站,所以我们必须有插图

由于缺乏战略眼光,插图是装饰,是独创性的对立面。 故事被抛弃,想象力被抛弃。 个别网站失去了区别,所有图示的产品和服务都融合在一起。

一位衣着光鲜的员工坐在整洁的办公桌前,操作着一个与现实世界融为一体的抽象界面,文字和电子邮件在纸飞机上飞过,纸飞机降落在一只猫身上,它在一棵绿叶植物旁边打盹,一个人一边喝康普茶一边做瑜伽,一边浏览应用程序中出现了一只巨大的手,它与一支超大的钢笔签订了合同

你肯定见过。

有四个罪魁祸首威胁着网络插图的长期生存能力。


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

起源

插图有着丰富的煽动历史。 数百年来,它一直被用作一种社会评论形式。 为什么? 因为它尖锐地阐明了人类事务的复杂性。 当人们自相矛盾时,当经历令人困惑时,插图让一切变得显而易见——在瞬间。

插图的目的不是为了争论本身。 相反,目标是让人们停下来思考一个观点,即使它与他们自己的观点相冲突。 在最好的情况下,插图是终极的 aha 时刻。

问题

今天对视觉内容的需求已经剥夺了当代网络插图的大部分阐释能力。 网上,插画很少煽动; 大多数情况下,它指导或修饰。

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

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

这两种方法都不足以防止网站插图失去讲故事的招摇。

补救措施

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

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

此类问题适用于大多数在线销售的商品。 作为插画家,我们经常负责展示好的一面,但如果我们不了解坏的一面,我们就会去寻找疲惫的比喻。 事实上,这种正负平衡是讲故事的一个关键方面。 没有低点,说明性的高点就会失去影响。

干得好:大卡特尔

网页设计插图
Big Cartel 的博客插图幽默诙谐,就像这幅强调数字结账及时性的三联画一样。


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

起源

模仿和创造力并不是截然相反的。 自从世界上最早的文明出现以来,艺术家和设计师就通过模仿来培养创造力。 引人注目的风格引人注目。 我们检查它,解构它,并收集它的技术来增强我们自己的工作。 这就是成长。

在一个完美的世界里,模仿将仅限于学习和评论。 复制的样式将在视觉和概念上发生变化。 它很少以这种方式工作。

问题

模仿拒绝进化。 当我们遇到一种流行的风格并依附于它的轨道时,我们就像旧世界的学徒,有着阴险的转折。 我们滥用我们“追随”的插画家的风格属性,并将结果宣传为我们自己的。

品牌是同谋。 X 公司想要 Y 公司的插画风格,所以他们委托制作了仿制品。 它一遍又一遍地发生,一个站点接一个站点,每次迭代都会引入新的熵层。 最终,整个行业都采用了一系列退化的克隆,例如Multiplicity中的 Michael Keaton。

只需看看 SaaS 领域的主要插图风格。 很尴尬的同质化。

补救措施

模仿之外的路数不胜数。 没有一个需要创造性天才或排除外部灵感。 恰恰相反; 插图画家需要充分接触参考资料。 我们看到和储存的越多,我们就越能重新解释。 可以进行许多探索性练习:

  • 历史混搭。 通过成功艺术家的眼光重新构想鼓舞人心的插图风格。
  • 快速重绘。 在参考其他插画家的风格的同时仔细绘制一个对象。 然后,在没有参考样式的情况下快速重绘同一个对象 7-10 次,并接受出现的怪癖。
  • 添加规则。 创建一个影响插图过程的约束。 例如:我只能画直线。 它们可以是任何长度或角度,但它们必须是直的。
  • 工具开关。 使用不适合该工作的绘图工具模仿插图风格。 例如,如果样式依赖于精确的线条,请用墨水和软毛刷复制它。
  • 盲读。 汇编 3-4 种引人注目的插图风格,并请同事以书面形式描述其中一种。 丢弃所有原始参考样式,并使用书面描述来告知创意选择。

工作做得很好:切换

网站上的插图
凭借其 3D 风格和讽刺感,Toggle 颠覆了当前 2D 的趋势,感觉良好的网页设计插图。


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

起源

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

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

颜色、纹理、纵横比和身体类型都经过仔细定义。 结果被大张旗鼓地展示出来。 时间揭示了一个缺陷。

问题

插图和界面设计不一样。 当设计系统告知界面的风格时,结果是一种幸福的凝聚力,将用户引导到他们的数字环境中。 信息架构是一个里程碑。 导航是一种习惯。 但以系统为主导的说明风格会扼杀创作冲动——即突然点燃被疯狂捕捉和提炼的新想法。

并不是说系统天生就不好。 当系统支持图像概念时,插图画家实际上可能会发现约束解放了。 但是,当图像是通过系统的镜头构想时,想法就会减弱,因为插画家会陷入对凝聚力的错误信心:它适合系统,所以它有效!

逐渐地,更多的精力集中在系统维护上。 线宽和服装物品推翻了引人注目的概念。 最后,插画的风格和讲故事的能力消亡了。

补救措施

插图翻译了人类智慧和情感的复杂性。 它邀请局外人欣赏他们可能不习惯的经历。 插图作为品牌识别工具的能力是次要的。 这些不能颠倒过来。

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

有一些实用步骤可以指导插图系统的开发和长期相关性:

  • 不要沉迷于普通观众不会注意到的规则和细节。
  • 避免以破坏创造性直觉的方式执行系统指南。
  • 不要将系统锁定在与其所代表的品牌相同的调色板中。
  • 偶尔打破系统,通过邀请外部插画师贡献自己独特的风格来挑战观众。
  • 计划系统的发展,并允许进行增量实验——即使当前的风格很受欢迎。

干得好: Notion.so

网页插图样式
许多插图系统都过于风格化,并且充满了规则。 相反,Notion 的单色插图系统简单、一致且富有表现力。


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

起源

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

不幸的是,很难找到原创、高质量和未充分利用的插图(更不用说品牌上的插图了)。

问题

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

补救措施

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

  • 使用数字拼贴混合和匹配不同的库存样式。
  • 将图库插图与摄影(甚至图库摄影)结合起来。
  • 覆盖手绘元素,如 Sharpie 标记或油漆笔触。
  • 跟踪数字扭曲和扭曲的库存样本。
  • 将库存转换为灰度,并使用数字绘制的图形注入品牌色彩。

在预算工作时避免库存的第二种方法是优先考虑最需要哪些插图并订购一小组。 也许这意味着委托五个主页插图。 在短期内,它们将提供视觉冲击力,稍后,它们可用于为其他频道提供更大的插图集。

干得好:彭博商业周刊

网页插图趋势
彭博社的印刷封面长期以来一直使用库存图像来产生戏剧性(和搞笑)的效果。 在网上,这一传统仍在继续,这幅巧妙的照片拼贴就是证明。


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

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

未能超越其相应文本的一对一表示的插图是浪费了参与机会。 同样,插图中的价值很小,可能会被误认为属于数百个其他品牌之一。

插图必须以独特的观点吸引观众——无论是风格上还是概念上。 它们不必复杂、逼真或充满色彩才能引起注意,但它们确实需要以文字、照片和图表无法做到的方式阐明主题的有趣之处。

插图留在这里。 它的沟通能力太有说服力了,不能被抛弃。 但对于未能探索插图表达潜力的公司和插画家来说,它的价值将被证明是短暂的。

• • •

进一步阅读 Toptal 设计博客:

  • 品牌插图 101:可视化叙事
  • 无需任何绘画技巧即可设计自定义插图的分步指南
  • 探索完形设计原则
  • 2019 年用户体验设计趋势回顾展
  • 设计原则及其重要性