我最近在一条关于这个话题的推文中被引用,我认为值得重新审视并进行新的讨论。
关于艺术指导“这不仅仅是一种趋势,它只是一个好主意。”~ @chriscoyier 现在还流行吗? 而且,AD 插件在 2013 年是最好的方法吗?
— James Burgos (@JamesBurgos) 2013年10月13日
“艺术导向文章”的概念是指专门针对文章内容设计的文章。 它可能与父网站共享一些特性(可能应该这样),但许多设计元素会发生变化以适合特定文章。 布局、颜色、字体、背景、图片、交互……所有内容都是为文章量身定制的。
以下是在 Jason Santa Maria 的博客(他一直倡导这个理念)上的一个简单示例。

这只是一个趋势吗?
我的回答是:是,也不是。
是
- 与它鼎盛时期(2009-2010 年)相比,我今天看到它使用的频率要少得多。 我当时完全跳上了这趟列车。 这很有趣,但我没有坚持下去。
- 过去有两个专门的“画廊”网站致力于这个理念:Blogazines 和 HeartDirected。 两者都已下线。
- 一些例子随着时间的推移而恶化。 例如 这篇关于此类文章的文章。
也不是
- 使用这种方式的网站已经从个人网站转变为大型组织网站。
- 如今,使用这种方式的网站正在将其提升到前所未有的高度。 请参阅下面的示例部分。
- 好的设计就是好的设计。 如果你能够设计出一个能够增强内容的页面,那就是一个超越趋势的好主意。
它们随着时间的推移如何保持?
让我们看看是否可以收集一些真实数据。 这篇文章 列出了 20 个具有艺术导向文章的网站,每个网站有两个示例。 让我们对它们自 2009 年以来的四年时间里是如何保持的进行评级。
来自 2009 年的链接 | 2013 年 10 月的状态 | 2016 年 11 月的状态 |
---|---|---|
避免与眼睛接触 #1 | 相同 | 已消失 |
避免与眼睛接触 #2 | 相同 | 已消失 |
一个想法 #1 | 已恢复为常规模板 | 仍然存在,使用常规模板 |
一个想法 #2 | 已恢复为常规模板 | 仍然存在,使用常规模板 |
The Bold Italic #1 | 有一些更新,但基本相同 | 重定向到 Medium 文章 |
The Bold Italic #2 | 有一些更新,但基本相同 | 已消失 |
简短的信息 #1 | 已下线 | 仍然下线 |
简短的信息 #2 | 已下线 | 仍然下线 |
Chris Coyier #1 | 已更新,还可以 | 已更新(再次),(大部分)还可以 |
Chris Coyier #2 | 未更新,有点奇怪,但大部分还可以 | 未更新,有点奇怪,但大部分还可以(仍然) |
Coldheat #1 | 已恢复为常规模板 | 又回到了艺术导向! |
Coldheat #2 | 已恢复为常规模板 | 又回到了艺术导向! |
Danny Garcia #1 | 已下线 | 仍然下线 |
Danny Garcia #2 | 已下线 | 仍然下线 |
David Desandro #1 | 旧链接已断开,新链接处的文章相同 | 相同! |
David Desandro #2 | 旧链接已断开,新链接处的文章相同 | 相同! |
Dustin Curtis #1 | 有一些更新,状态良好 | 已消失 |
Dustin Curtis #2 | 有一些更新,状态良好 | 已消失 |
ESPN Outside the Line #1 | 相同 | 相同 |
ESPN Outside the Line #2 | 相同 | 开始加载,看起来一切正常,然后一些 JavaScript 将您带到一个 404 页面 |
Gregory Wood #1 | 404 | 404 |
Gregory Wood #2 | 404 | 404 |
Hazardous Ink #1 | 重定向到主页 | 重定向到另一个网站 |
Hazardous Ink #2 | 重定向到主页 | 重定向到另一个网站 |
Hip-Hop Quoted #1 | 相同 | 相同 |
Hip-Hop Quoted #2 | 相同 | 相同 |
Jason Santa Maria #1 | 相同 | 相同 |
Jason Santa Maria #2 | 相同 | 相同 |
Kyle Fiedler #1 | 404 | 404 |
Kyle Fiedler #2 | 404 | 404 |
Pumpkin King #1 | 显示错误的文章 | 显示错误的文章 |
Pumpkin King #2 | 显示错误的文章 | 显示错误的文章 |
Rad Nauseam #1 | 重定向到主页 | 重定向到恶意软件 |
Rad Nauseam #2 | 重定向到主页 | 重定向到恶意软件 |
Tony Dewan #1 | 404 | 404 |
Tony Dewan #2 | 404 | 404 |
Travis Gertz #1 | 重定向,有一些更新,状态良好 | “服务不可用” |
Travis Gertz #2 | 重定向,有一些更新,状态良好 | “服务不可用” |
Trent Walton #1 | 有一些更新,状态良好 | 相同! |
Trent Walton #2 | 有一些更新,状态良好 | 相同! |
2013 年:艺术指导只在 40 篇文章中的 18 篇中存活下来。 不到一半。
2016 年:降至 40 篇文章中的 13 篇,状态良好。
当然,这是一个非常小的样本量,而且没有东西可以与之比较。 有趣的是,可以将其与 2009 年另一个关于完全无关主题的汇总进行比较,看看那些 URL 的状态如何。
响应式设计是否影响了事情?
2009 年略早于响应式网页设计成为我们今天所知的“一件事情”。 在固定环境中定制设计比在流体环境中更容易。
想要让文本“Kapow!”与蝙蝠侠的拳头并排排列在一篇关于旧漫画的文章中? 当你能够确信拳头始终位于完全相同的位置时,这很容易做到。 但很可能你需要缩小和放大图形以适应屏幕尺寸。 现在你需要对文本的位置进行一些巧妙的操作。 而且很可能你必须针对可用屏幕尺寸从微小到巨大进行大约 50 处其他微小的调整。
它使一项本来就很耗时的工作变得更加繁琐。
对性能的关注是否影响了事情?
艺术导向文章中通常会发生以下情况。
- 提供您通常会提供的所有内容。
- 再加上更多内容!(例如,额外的图片、额外的字体、额外的 CSS 等)
现在网络上确实存在一种“越多越差”的风气。 艺术导向文章中一个常见的主题是添加诸如交互式地图、滚动效果、动画和超大图片等内容。 所有这些内容在网页性能方面都很沉重且速度慢。
这并不意味着你不能以正确的方式进行渐进增强,但这又是一个困难点。 这可能是导致对艺术导向文章热情下降的原因之一。
如何为艺术导向文章的未来规划?
网站会发生变化。 这是必然会发生的,因此你需要为此做好准备。 您现在对文章进行的自定义可能在新的模板中对同一篇文章毫无意义。 您是否更改了 .article-wrap { }
的背景 - 嗯,也许现在是 <article class="module">
,因此自定义 CSS 没有任何作用。
问题在于,重新设计通常是为了更好地。 它们适应新的广告结构。 它们使非响应式设计变得响应式。 它们提高性能。 无论怎样。 我们可能希望完全抛弃旧设计,并完全采用新设计。
以下是一些针对各种情况的选项。
- 完全保留文章。 这就是 Jason Santa Maria 的网站的工作方式。 在网站的某个版本下进行过艺术指导的文章将在该版本下永远显示。 他正在这样做,因此这显然是可行的。 有一些 WordPress 插件可以 使用 URL 参数更改主题,因此我认为你可以编写一些代码,根据发布时间显示不同的主题。
在与 The Verge(及其配套网站)的一些人交谈时,他们计划为这些 URL 专门提供一个旧版模板,或者将页面“扁平化”成一个一次性静态页面。 无论哪种方式,他们的设计都会永远保存下来。
- 更新设计。 重新设计时,重新审视文章并将它们修复以适应重新设计并非不可取。时间允许的情况下,这可能是最佳选择。
- 从一开始就在模板/主题/CMS 外部构建它们。 如果文章本身不依赖于模板,那么更新模板时它就不会出现问题。
- 恢复到普通模板。 最糟糕的情况是,只需删除所有自定义的艺术指导。在任何情况下,添加资产以自定义页面都是一种相当普遍的方法,因此删除它们有望使内容恢复到正常外观的文章。希望标记没有被过度定制以至于导致其损坏。这里要吸取的教训是:使用命名空间类,这些类将来可能没有任何意义。
无论你做什么,都不要仅仅删除文章或将其重定向到无关的内容。 因为。
更多近期示例
纽约时报:雪崩
The Verge:约翰·威尔克斯·布斯
纽约时报:俄罗斯
Travis Neilson:jQuery .show() 的乐趣
Complex:丹尼·布朗
华盛顿邮报:大瀑布
洛杉矶时报:混凝土风险
纽约时报:西红柿罐头之蓝
纽约时报:骑师
Daniel Mall:娱乐周刊网站
Trent Walton:人间百态
Polygon:看门狗
我们再过四年再看看这些吧!
那现在怎么样呢?
这是/曾经是趋势吗?你喜欢吗?你做过吗?对帖子进行艺术指导是否会随着时间的推移而成为致命的一击?你能想到其他处理随着时间的推移而进行艺术指导的帖子的方法吗?还有更有趣的例子吗?
要回答詹姆斯在上面推文中提出的问题:我认为 Dave 分支的 艺术指导插件是WordPress 世界中最好的选择,如果你想要做的本质上是添加 CSS 和 JS。
哦,我在这里完全误用了“艺术指导”。抱歉,但我觉得它有点像应用于这件事的名称。
说实话,我非常喜欢理论上的想法,甚至在我的个人博客上发布了一些。 (最初的意图是做更多)但现实情况是,它们需要付出太多努力才能持续创建,这就是我认为许多人加入了潮流,但当他们意识到一篇 2 小时的博客文章变成了 20 小时的博客文章时,他们很快就放弃了,而实际上并没有带来更多的流量。
虽然它们是非常棒的体验,我很喜欢,但我不会因为文章经过艺术指导而阅读博客,也不会因为没有经过艺术指导而拒绝阅读博客。
正如我所提到的,我认为移动设备确实改变了局面。经过艺术指导的帖子本身就需要大量的努力,让每一个帖子都具有独特的响应性简直是疯狂。
是的,你完全说到了点子上。
维护一个包含一致艺术指导帖子的博客非常耗时。
然后当你加入移动优先和 RWD 的理念时……不,这比它值得的付出更多努力。
我真的很喜欢 Teehan+Lax 在他们的 工作汇总 中做的一些事情。
我认为这些类型的帖子随着时间的推移应该能很好地保留下来,因为它是你完成工作的参考。
除了他们的艺术指导页面高达 70MB+
这对他们的用户来说极其不尊重。每个指向 Teehan+Lax 页面的链接都应该像指向 PDF 文件的链接一样对待。
http://www.teehanlax.com/story/medium/ (警告:70+MB,100% CPU)
我实际上喜欢经过艺术指导的博客,而且我认为 Jason 和 Trent 的博客是最好的例子。我真的很享受(并且感谢)他们为此付出的时间。这种努力使阅读体验更加愉快,我是一个视觉刺激的爱好者……我能说些什么呢。
在使用 Dave 的 WordPress 插件时,我建议…
为你的类和 id 添加前缀。例如“
art-direction-
”或“ar-
”。这样做是因为我曾经在主样式表中命名了一些东西,结果把自己搞得很麻烦。哎哟!
感谢链接,Chris!
重要的是要决定什么是代码,什么是内容。经过艺术指导的文章的自定义“代码”应该真正被视为内容,应该与文章一起保存。
不能解决所有(任何?)问题,只是不要将自定义 CSS/JS/HTML 放入你的主代码文件中。
没错
我仍然喜欢偶尔的博客杂志帖子。它们很漂亮。为了可维护性,我认为所有内容都应该打包在一个页面中,而这个页面可能无法在其他地方获取,因此我将使用独立的 HTML 页面。
Chris,非常棒的概述。我认为艺术指导现在可能就像 2009 年的 RWD 一样:每个人都同意这个想法是合理的;我们缺少的是一套严格的技术,这些技术将真正使它能够在大多数网站上实现。我们几乎没有语言来讨论网络上的艺术指导,特别是在响应式设计的时代,更不用说用简单直接的工具来实现了。
我的印象是,许多人都在啃问题的边缘:我知道 我自己的贡献 绝对属于这一类。从技术角度来看,新的 CSS 提案,例如 Adobe 的 Regions 和 Exclusions,将允许艺术指导能够参与网络设计工作,并拥有他们从印刷品中熟悉的技术套件。我认为我们最终可能会达到工具、技术和成熟的视觉语言的临界点,这将使网络上的艺术指导成为可能并普及,但这将需要几年的开发。
我仍然非常喜欢这个概念,并继续尝试在可能的情况下添加某种形式的艺术指导功能……它只是被缩减为我自己或客户能够在他们的 CMS 中轻松更新的事项。
使用 UI 库和 SASS 等很棒的工具,创建可以在前端进行艺术指导/自定义的模块化设计系统实际上变得越来越容易……后端很糟糕。在大多数内容管理系统中,创建易于使用的可定制设计系统仍然极其困难。
一个很棒的 CMS 布局插件,它允许用户从一组预先设计好的页面模块中轻松选择,并可以选择颜色、内容类型等,这将极大地改变我的世界。
Pitchfork 目前在其一些特写文章中使用这种方法。他们将它与响应式功能和视差视频和图像相结合。这很酷。
这是一个更好的例子——Pitchfork 封面故事:MGMT
我也想提一下 Pitchfork 的广告帖子。最近的 Daft Punk 封面故事 非常棒。
我感觉网页设计就像是在玩转盘游戏,最近我们一直在努力推动RWD盘子、渐进增强盘子(无论你是支持者还是反对者,它都在空中盘旋)和性能优化盘子。悲哀的是,到最后,这些盘子太多了。希望一旦这些盘子都完全运转起来,我们就可以重新开始关注AD盘子,让它恢复到全速旋转。至少对于设计师的私人空间来说,AD是一个很棒的想法,任何杂志、严肃的博客、分节资源都应该关注它的优势......但只有一双手来保持这些盘子的运转。
我完全同意。现实是,许多人要么是独立自由职业者,要么是在时间和预算都非常紧张的小团队中工作。没有时间上的奢侈,有些事情就必须放弃。希望会有革命性的工具出现,让我们的生活变得更简单,但我肯定没有时间去创造它们!
人们似乎将“艺术导向”与之关联的问题,都是由于糟糕的设计造成的。你可以制作出设计精良的艺术导向帖子,大小不超过70MB,可以渐进增强且响应式。Trent Walton总是这样做。
它确实需要更多工作。但这也是有些人对RWD的抱怨。这并不意味着我们应该放弃,并称其为一个糟糕的想法。
我最近的工作是为我们这里一个当地的另类周报做了一篇高度艺术导向的文章,关于一个持续了30多年的有争议的路况问题。
你可以用它做一些很酷的事情,但很难找到对我们自己和客户来说都合适的性价比。RWD无疑增加了完成此类项目所需的时间。
好奇的话,可以查看项目链接
http://www.c-ville.com/the-bypass/
我认为这将非常耗时,因为你必须设计一个带有不同设计元素的额外模板,然后使其与RWD等其他东西兼容。
我认为这关乎平衡。我正在进行一个作品集网站的全面翻新,我们正在考虑一些你可以称之为“半艺术导向”的东西。有一些常数,但剩余的变量足够大,可以让页面拥有自己的独特身份,而无需编写大量代码膨胀才能使其工作。
艺术导向的博客永远都会有其存在的价值,但就像我们可用的所有选择一样,它并不总是正确的解决方案。
这正是我目前正在说服我的团队采纳的。通常情况下,“艺术导向”的帖子试图改变一切。我认为我们应该像对待主题一样对待定制。
大多数布局等应该保持一致,我们只需要调整颜色、图片和字体。
这样,最坏的情况是,以后它们就变得一样了。而最好的情况是,我们可以偶尔在未来将相同的主题重复利用到更多文章中。
通过这种方式,在进行重新设计时,更新所有主题应该很容易,以继续为它们提供独特的外观和感觉。
感谢你提到我的网站。有趣的是,我正在用HTML5、webfonts、SVG、响应式视图等从头开始重写http://hiphopquoted.com,因为它是很久以前用过时的技术完成的。不过,这需要一段时间!
你认为奇幻互动 (fi) 的案例研究属于这一类吗?它们绝对是根据其内容定制的
http://www.f-i.com/work/all
艺术导向的文章是我多年来一直在我自己的网站pumpkin-king.com上使用的一种方法。令人尴尬的是,你文章中提到的我网站的两个链接现在都指向错误的页面(它们默认指向最新的文章)。这是由于最近为了使网站响应式而进行的重新设计造成的。
正如你在本文中指出的,将艺术导向的文章和模板转换为响应式呈现是一个挑战。为了重新设计,我使用了“更新设计”的方法,将每篇文章逐个重建到新的响应式模板中。这显然是一个大项目,我相信任何做过类似迁移的人都可以证明,我决定从一些最新的文章(以及分析告诉我仍然吸引高质量流量的文章)开始,并打算随着时间的推移添加其余文章。这意味着我可以将新网站以及响应式重新设计的优势发布上线,而不会受到添加所有文章所需时间的限制。缺点是,一些较旧的文章,比如你在本文中提到的那两篇,在添加到网站之前,将返回错误的内容。
自从我从2009年开始使用这种方法以来,我发布这些文章的方式发生了很大变化。我比以前写得少得多,很大程度上是因为设计和开发每篇文章都需要时间——这项任务在网站变得响应式之后变得更加具有挑战性。尽管如此,当我今年早些时候决定重新设计网站时,放弃这种艺术导向方法的时机已经成熟,但我还是决定坚持下去,因为即使在许多使用这种方法的网站都放弃了它之后,我仍然发现以这种方式发布文章很有价值。
如果它是一种潮流,我希望它能回来。响应式可能在压制这一潮流方面发挥了作用,但如果我们只局限于想象我们这周能做什么,那么我们将错过伟大的设计。
我认为这仍然是一个好主意,但它有自己的位置。在数百万博客中,大多数博客不应该使用AD。但看看《纽约时报》的例子,他们是在“主要”文章中使用它,而不是在树上的猫博客文章中。文章需要被引用,文章需要动画来解释事物。
我同意,拥有一个只包含艺术导向帖子的博客可能非常耗时。但我认为你也可以找到平衡,看看Vox Media正在做的事情(The Verge、Polygon、SB Nation):并非所有文章都是艺术导向的,大多数文章使用相同的布局,然后有一些特色帖子进行了艺术设计。平衡。
这篇文章启发了我发布自己关于为什么我继续使用这种艺术导向方法以及现在将我的文章迁移到新的响应式设计后我的想法是什么——http://www.pumpkin-king.com/blog/art-directed-articles-then-and-now
我可以理解艺术导向案例研究背后的想法,即使有些案例研究看起来比那些案例研究所谈论的项目需要更多工作,因为这些案例研究的功能是展示你的能力。但对于博客文章来说,这似乎太过分了,我不会这样做,除非文章是非常特别的。
作为一名网页设计师,我非常希望艺术导向的文章能够成为一种新的趋势,这将为我打开一个新的市场,一个需要一些努力和很多连续性的市场,但说实话,我认为它们不值得花时间,除非你能负担得起完美。
直到最近,我还是TXCPA的网络出版物协调员。我们有很多优秀的设计师为我们工作,我的最初指令是“让它看起来尽可能像印刷版”。编码很有趣,我很快学到了很多CSS。尽管我必须支持IE6,而且没有多少CSS3支持(2008年左右),但我还是能够非常接近印刷版。
扼杀艺术导向的不是编码所需的时间。而是印刷版因预算削减而消亡,以及顶级印刷设计师不愿学习网页设计而不是印刷版设计的能力——或者说缺乏兴趣。
与此同时,管理层也推动了向CMS的迁移。我不确定他们是怎么想的,因为这需要更熟练——因此更昂贵的程序员。
Wordpress永远不会支持我们过去所做的那种布局,虽然Drupal更好,但它仍然不利于根据内容进行布局和设计,而不是根据你可以将内容插入的视图/区域/节点进行布局和设计。我个人发现从头开始编码更快更容易。
页面变成了无聊的三列式。
现在,钟摆正在向另一个方向摆动。我们正在使用Bootstrap/Foundation,使jQuery功能对那些不是JavaScript专家的用户来说变得容易,新的挑战是制作引人入胜的移动网站。
管理层也意识到,网络上有一些机会可以以以前无法实现的方式整合图形、文本、视频和数据可视化。那些将网络视为媒介的印刷设计师现在正在参与那些高调的项目。
我已经从事网页工作20年了(那是140人年,对吧?),我学到的唯一一件事是,一切旧的都是新的。我们现在担心带宽和扩展到不同的屏幕分辨率,就像我们以前在大多数人使用拨号上网的时候一样。
艺术导向的文章已被替换为全站的“艺术导向模板”,每个文章都遵循相同的风格,但设计精美,看起来像是专门为该文章艺术导向的。
我不得不纠正一下。艺术导向博客的重点是使用一些新的样式规则覆盖默认样式,以获得不同的外观。如果我们使用 100% 不同的单个模板制作文章,那么它就不是艺术导向的文章/自定义文章。它只是一个包含在博客存档中的静态网页。
艺术导向博客应该有自己的 HTML、CSS 和 JS 框架,无论风险如何。
我曾经在 Tumblr 上有一个艺术导向的博客 (iamsteve_dot_Tumblr_com - 链接现已失效),我创建了一个基本主题,然后能够在该主题上对我的帖子进行艺术导向。后来我搬到了 GitHub (http://theartdirectedjournal.github.io),并且仍然很活跃。每个“文章”实际上都是一个独立的网页。我知道这有点儿笨拙,而且是种廉价的做事方式,但对我来说很有效。我对我的帖子进行艺术导向,因为这很有趣。
我个人不喜欢任何模板都足够通用以适应所有和每个帖子的想法,所以我开始创建自己的网页,只是为了能够以我认为应有的方式发布内容,而不是使用任何形式的博客服务。我仅仅是 HTML 和 CSS 的业余爱好者,但是,我同意为单个内容设计单个页面会强迫你认真地选择最重要的主题。如果你花几周时间设计一个网页,你真的必须对你的主题变得有选择性。我的主题一般来说是声音。我试图让人们意识到,倾听“普通”的声音很有趣,就像当你开始仔细倾听时,它会变得非常情绪化一样。因此,如果我想让人们信服声音的个别美,我需要为个别声学情况创建个别视觉呈现。感谢你有趣的网站,我会在我的业余工作中尝试使用你的专业建议。JL