通过

音乐网站创新,优雅的布局背后的创作过程,可让您对诸如 傻朋克 , 鞭打蝙蝠 野蛮人 .

嘻哈音乐网站Pitchfork推出了一种新型的文章布局,该样式避开了许多社论网站的“一呼千金”的做法,而更倾向于采用优雅的简单滚动响应式布局,以配合周日的补充– 尽管将视频和动画与照片和插图一起使用。对于阅读更长的功能(尤其是在平板电脑上)而言,这种形式更自然–并且是一种在类似技巧的布局流行之后出现的形式 雪落 故事 纽约时报 该网站,许多人将其预测为网络上长篇新闻的未来

我们赶上了网站’的创意总监迈克尔·雷诺(Michael Renaud)寻找如何设计封面故事。

我们还讨论了 提前 ,是一种展示发布前专辑流的方法,旨在复制前几代音乐迷在盯着袖子艺术品时聆听LP的流行体验。 提前 在屏幕上提供了一系列抽象动画或静态艺术品,以便听众可以以类似的方式关注音乐。

DA:您想改进的传统在线布局是什么?

先生: “封面故事是我们探索呈现功能的可能性的方式。我们的编辑人员一直在创作一些令人惊叹的作品,我们认为值得强调。

“我们正在尝试构建一种感觉,使您对故事有所投入。大多数人都完全通过数字手段来消费媒体,我认为这使'印刷感觉'更加特别:就像是奢侈品–当您考虑到拥有互联网所拥有的东西多么豪华时,这很有趣。

“坐在一本杂志上有些感觉比五,十年前更加特别–就像你在对待自己。尽管杂志的触觉本质不可能在屏幕上再现,但是释放人们传统上在网上看到的次要内容的侧边栏的方式,同时阅读长篇文章还是一种使该内容显得更加特别的简便方法。”

DA:旨在为每个Cover Story创建一个自定义布局,还是提供一个内容从CMS的设置字段中倒入的模板?

先生: “目前,我们正在为每个故事创建自定义布局。我们这样做是为了能够在没有太多指导和限制的情况下测试新想法,而且每个故事的艺术指导都适合乐队和故事的语调。

“如今,以编辑为主导的网站应该定期进行改进和更改。重新设计网站的日子已经一去不复返了 并保留三年。”

干草叉创意总监Michael Renaud

“网络技术以及我们如何处理它们方面取得了许多有趣的进步,我们希望在发生这些事情时对其进行探索。尽管我们试图通过过多的更改来意识到用户疲劳,并保持一致的品牌形象,我们还试图意识到,我们将竭尽所能为读者提供良好的体验。更加健壮和具有设计意识的CMS是另一个问题。”

DA:告诉我们一些有关Cover Stories的设计和布局过程的信息

先生: “通常是从作家的脚步开始的。一旦我们知道我们正在做一个故事,我们就专注于故事的概念,并决定最能与故事相辅相成的视觉效果。在作家创作作品时,我们将安排时间照片/视频拍摄或插图画家开始做简短介绍。

“当初稿提交时,我们将在InDesign中为其提供一个情节提要,然后我们的开发团队将开始对其进行工作。社论通常具有最终外观,并且一旦合计占80-90%,就可以进行必要的更改。在暂存站点上。”

DA:告诉我们有关Advance的概念。

先生: “ 提前 是我们在发行专辑之前对专辑进行流式处理的平台。它源于在现实生活中欣赏专辑并体验包装的想法。因此,我们在浏览器中提供了一块空白画布,以使艺术家有机会提交任何东西他们希望作为相册的伴侣的图像。

“尽管我们有购买专辑的链接以及用于曲目列表和描述的弹出模块,但重点是艺术家提交的图像和视频。此过程由我们的技术总监Matt Dennewitz和编辑Brandon Stosuy领导。

“看着里面的东西很有趣–我想我们所有人最初都希望大多数艺术家只提供专辑插图,但是大多数人在创建自定义GIF,给读者的小笔记,乐队成员之一的艺术品等方面都付出了更多的努力。这真的很有趣。”

DA:创建这些部分时最大的技术挑战是什么,您如何克服它们?

先生: “我们最大的技术挑战是针对每种屏幕尺寸和浏览器类型进行优化。最后,我们承认这是要在台式机或笔记本电脑上体验的。平板电脑在动画,但我们正在尽最大努力利用我们拥有的资源来优化该环境。

“对于移动设备,我们甚至都不会打扰。对于这种类型的执行来说,它太小了,甚至都没有意义。如果我在这么小的屏幕上阅读这个故事,我只希望在浅色背景上使用深色字体无论如何。”

DA:总的来说,在这样的项目中,您如何平衡简单,优雅的设计与商业需求?

先生: “我们将读者放在商业需要之前,这通常会告知广告和其他UI元素是如何集成的。我们希望有机地进行广告,使其有意义并感觉它属于内容。

“创新和透明的广告执行方式是我们的首要任务,我们不希望把这些事情丢掉。”

DA:您打算如何根据创建的内容构建新的功能类型?

先生: “尽管我们在制定各种计划,但我们也在努力保持灵活性和敏捷性。因此,目前尚不确定。”

注意: 当您通过我们网站上的链接进行购买时,我们可能会赚取佣金,而无需您支付任何额外费用。这不会影响我们的编辑独立性。 学到更多 .

继续阅读...