图片来自Unsplash 作者Pankaj Patel

今天的互联网似乎让人感到枯燥乏味。一切看起来都差不多：通用的字体，没有什么可说的布局设计，通用的页面，缺少具有冲击力的视觉语言。甚至是微排版也是一团糟。

如今的网页设计似乎与创造力和想象力无关，仅仅由技术和意识形态驱动。每个页面都由容器中的容器组成; 有时是文字，有时是图像。没有什么是真正的设计，一切都是伪装。

具有讽刺意味的是，今天的Web技术具有巨大的设计能力。我们有能力实施几乎所有可想到的想法和布局。我们可以创建完全的，令人惊讶和回味无穷的网站。我们可以将实验排版与生成图像还有交互式体验相结合。

然而，即使是设计师的网站也基于容器中的容器。网络上最受欢迎的创意门户网站——Dribbble和Behance——简直无趣到炸，它们基本上可以互换了。（见下图）

左Dribbble右Behance，你能看出差别吗？

是什么导致了这种结果？

有几个原因：内容管理系统（CMS）和WordPress等博客平台等技术框架都基于模板。这些框架上的网页不是单独制作的，而是通过拼凑各种媒体类型（如图像，标题，正文和视频）动态生成的。记住，模板不是设计。相反，它们是组合相关数据类型的规则。除了模板之外，这些平台通常不会让用户修改页面的视觉外观，你看到的是你套用模板的内容。

换句话说，模板是内容不可知的。这就是问题所在。

设计的基本原则之一，就是在形式和内容之间，搭建起深刻而有意义的联系; 形式应反映和塑造内容。将它们分开会破坏这一原则并创建通用内容容器。从设计的角度来看，模板毫无意义——就像表单不会因为输入内容而成为内容本身。

网页设计缺乏创造力还有很多其他原因。其中大多数因为这是经济和务实的。毕竟，设计单个页面确实非常耗时。考虑到在线新闻的速度和新文章的频率，大型网站根本没有资源从头开始设计页面。此外，网页设计还会遇到专业技术问题：HTML，JavaScript和CSS对设计师而言，仍是具有挑战性的工具。不像桌面出版应用程序的直接和强制工作流程，网页设计需要创新。

我甚至怀疑设计师的创造性和智力上的懒惰也是罪魁祸首。在移动优先，通用，框架驱动的开发时代，似乎没有人愿意琢磨网页的视觉和上下文完整性。

我们应该如何应对这一挑战？怎样才能表达和今天相符的前卫设计？

有时，如果你想设计未来，你必须重新发现过去。

复古的网页设计

大约23年前，我在德国不来梅艺术大学的研发团队，设计了我人生中的第一个网站。当时创建网页很热门，网络也很年轻，页面激发了我的想象力。

在九十年代中期，我们正在努力克服HTML的限制。我们只能使用像Arial，Times或Verdana这样的网页安全字体。如果我们想要做任何令人兴奋的事情，我们必须使用表格布局，等宽字体或GIF。HTML最初纯粹就是内容驱动的，我们不得不反对该技术来设计页面。

与此同时，实验排版也在爆炸式增长。从二十年代的Jan Tschichold的Die Neue Typographie到八十年代四月Greiman的计算机驱动布局，设计师挑战现状并试图找到代表他们时代的想法和革命的视觉语言。到九十年代中期，技术和文化进步的不同寻常的组合允许非常激进的平面设计。你可以在Irma Boom，David Carson，Paula Scher，Neville Brody和其他许多人的作品中看到它。

然而，与图形设计世界的视觉爆炸相比，早期的网页仍然相当蹩脚。（网页设计博物馆很好地记录了这一点。）

我们想在浏览器中进行图形设计，但没有人知道如何 - 或者可以犯错误。没有人对网页的外观有所期待。没有标准。没有CMS（几乎），没有CSS，没有JS，没有视频，没有动画。

快进到2018年，我们可以在浏览器中完成所有工作。从大规模布局到微排版，动画和视频。我们如何处理这些令人难以置信的可能性？容器中的容器。千兆字节的视觉平淡的移动首页被JavaScript污染。遵循相同视觉规则的通用模板。如果我年轻的自己可以在23年后看到网页设计的状态，他会非常失望。

网页设计的问题不是技术的局限，而是我们想象力的极限。我们已经过于顺从视觉整合，经济可行性和假定的期望。

但是，每次危机都会创造机会，现在是挑战互联网视觉整合的好时机。唉，我太老了，也太资产阶级了，无法想出一种激进的，实验性的，最先进的网页设计方法。但我可以让我的学生去做。

2017年，我在德国波茨坦的界面设计项目中进行了网页设计课程。每个团队都被要求为现有网站进行重新设计。作业非常明确：将浏览器视为空白画布，创造富有表现力和想象力的视觉体验。利用当前网络技术的技术潜力作为您创造力的渠道。不要受可用性，易读性和灵活性问题的限制。有一个态度。无视Erwartungskonformität（德语，期望合规性，是软件人体工程学标准）。

我对课程的结果非常满意。以下是四个代表挑战的不同方法的项目：

1. 由弗雷德里克和乔纳斯创作的ZKM

ZKM的重新设计

弗雷德里克和乔纳斯选择了ZentrumfürKunstund Medien（ZKM）的网站作为他们实验和探索的起点。选择ZKM作为一个合适选项的原因是因为它是德国最重要的媒体艺术展览空间之一，但ZKM的网站相当传统。尽管它功能齐全，但缺乏由展览中的艺术作品传达的前卫主张。

弗雷德里克和乔纳斯的目标是为ZKM网站设计一个概念，一个视觉语言和一个技术设定，代表博物馆的渐进模式。他们的概念的核心是生成设计引擎：每次加载页面时，都会创建一个新的布局。

2. 达莉亚，贝拉，和卢卡斯设计的Streem

重新设计的Streem

Streem是一本艺术和街头杂志。它是未来艺术家的舞台，也是呈现社会现状的平台。Streem包括插图、绘画、摄影、设计、写作和新闻工作。达莉亚，贝拉和卢卡斯结合了这些不同的影响因素，并将他们的设计建立在概念性的城市结构上。针对结构原型，他们创建了四个不同的社区，每个社区代表杂志的一部分。他们的方法结合了强烈的说明风格和空间排版，以创建一个清晰的“城市”。

3. 艾美莉和法比安的Medium

重新设计Medium

艾美莉和法比安采取了非常结构化的方法。他们的目标不是为特定的故事找到适当的形式，而是将网页分解并将其分解为语义，句法和统计属性。他们的想法是展示HTML的流动性和内在的可塑性。他们解构了Medium帖子并创建了一个环境，允许读者将长文本块分成实验版式空间。

4. 丁克拉克和弗洛里安的HackerNews

重新设计的HackerNews

丁克拉克和弗洛里安将Hacker News 变成了一个交互式可视化的网站。社交媒体网站是一个新闻聚合器，Hacker News是其中一员，它专注于计算机科学和信息技术。它的设计很简单，但它具有复杂的投票和讨*功论**能。丁克拉克和弗洛里安采用现有结构，将其转变为时间轴和网络的排版空间。视觉呈现基于新闻和评论的顺序和连接。他们还将他们的设计与Hacker News的API相关联，因此您可以实际使用它来阅读该网站。

结语

大卫卡森曾经说过：“ 不要把沟通与易读性混为一谈”，我们应该将这个建议应用到当今的网页设计状态中。易读性，可用性，响应性，尤其是可访问性是现代网络的基本品质。但他们不应该定义和限制其视觉语言。如果你将刻板印象与可用性等同起来，那么你既不了解视觉设计，也不理解以人为本的设计。

举个例子，我希望看到更激进，更具生成性，更具思想性，更充实，更具内容，更智能的网页设计。我想重新发现网络作为设计实验的空间，我想更多次感觉到惊喜。我不知道网络在另一个23年后会是什么样子，但我当然希望它不会像今天那样。

作者：Boris Müller 翻译：译渡