我们喜欢网页设计，这是我们的热情。网页设计是我们生活的一部分。自2000年以来，我们每天都在关注Web设计世界中正在发生的事情。我们参与了网页设计流程，我们积极参与设计了数百万个网页。而且，我们想与您分享一些令人兴奋的想法。
这篇文章第一次分享了如何创建世界上最时髦的网页设计的秘密。您将学习现代Web设计的基本规则，以创建世界级的网站，博客和主题。您将了解如何成为独一无二的，如何在竞争中脱颖而出，以及如何吸引客户的注意力。
本文由以下几章组成：
在第1章中，我们将了解Web设计是如何变化的。此外，您将了解在Web Design 3.0中设计网页的新一代网页设计师的诞生。
在第2章中，我们将讨论落后于趋势并减缓Web设计发展的网站构建者。
在第3章中，您将学习如何以新的方式快速轻松地创建现代Web设计。
第1章。网页设计正在改变
我们要讨论的第一件事是网页设计。它正在迅速变化。要理解这一点，您需要回顾网页设计的演变：从第一个网站到今天的时尚网站。我们将尝试预测，在不久的将来，哪种网页设计会受欢迎。
网页设计的发展有三个阶段。在下图中，我们为每个阶段着色并在时间轴上添加了多年。
第一个网站
第一批网站是基于文本的。而且很难说他们有任何网页设计。
过渡到网页设计1.0
后来，转向Web Design 1.0。一些图形元素出现在网站上，变得更具吸引力。网页得到了表格。后来的表格转换为布局和网格。表格提供了一些灵活性，但它们不适合移动设备，当时并不需要。
许多人创建了自己的内容管理系统（CMS）。因此，网站管理员无需编辑HTML文件并将其上传到服务器。但是可以实时在线修改内容。
网页设计的发展和手机的普及带来了新的变化。
过渡到网页设计2.0
下一个转变是Web Design 2.0。网页得到了网格，网页设计师可以在布局上安排元素。
Bootstrap加快了Web开发的速度。它简化了过程并使其更加方便。Bootstrap从一开始就使用网格支持移动设备。
Bootstrap的网格自动拉伸到整个屏幕宽度。它减少了开发人员花在编码上的时间，以支持台式机，笔记本电脑，平板电脑和手机。
WordPress，Joomla和Drupal成为最受欢迎的内容管理系统。他们取代了自编写的系统，这些系统编写和维护不完善且成本高昂，而且功能有限。感谢WordPress和Joomla，任何人都可以创建自己的博客和网站。并且在这些系统中构建了超过20％的站点。
WordPress和Joomla始终支持主题和模板，这使得可以在不更改内容的情况下修改设计。可以手动创建主题或购买现成的主题。此外，网站管理员可以使用主题生成器。有大量的主题和模板可供使用。
2008年，Artisteer抵达。它成为当时最受欢迎的Theme Builder。有了Artisteer，任何人都可以在几分钟内创建主题和模板。数以百万计的网站使用Artisteer设计的主题。
网页设计死了吗？
看起来每个人都应该感到高兴：网页设计师，网络开发者和用户。但是，有一个新问题。网页设计师开始提出一个问题：“网页设计已经死了吗？”。您可以在所有已知平台上找到询问相同问题的文章; 如Medium，Mashable，SmashingMagazine，Quora和Reddit。自2015年以来，这些年来，网页设计师一直在问同样的问题。
在下图中，您可以看到此短语的Google搜索结果。
为什么会这样？Bootstrap在2015 – 2016年达到了人气。您可以在下面的图表中看到这一点。
这个问题的主要原因是Bootstrap和类似物。Bootstrap的网页设计看起来与一个模板相似。许多网站建设者都将这种情况恶化，将Bootstrap作为其系统的核心。网站设计始于全局，其他部分适合两个，三个和四个单元结构。Bootstrap中的许多主题和模板增加了这个问题的分布。
见下图。
2015年，Ben Hunt出版了一本名为“Web Design Is Dead”的书。本书的主要思想是50美元的主题和模板的流行几乎扼杀了对Web Designer工作的需求。自定义网页设计的成本要高得多，因为它需要时间，知识和技能。除了设计，它还需要自定义HTML和CSS编码。
这个问题今天仍然存在吗？是的。四年后，问题仍未解决。在下图中，您可以看到Google搜索提示。今天人们继续问这个问题。
网页设计师开始寻找解决方案。他们无法远离，看着网页设计，他们生活的激情，正在进行中。总有设计师想要让网络变得更好。史蒂夫乔布斯曾经对这类人说过“思考与众不同”。这些人总是寻求新的想法。
印刷设计
网页设计很年轻。它已经有二十年了。Print Design早在网页设计之前就已存在，它已有数百年的历史。
印刷设计的演变。onlinedesignteacher.com的版权
打印设计工具始终允许自由放置项目。设计师的创造力并不受限制。出版商的想法总是自由的。他们不必考虑HTML，CSS和移动设备。
打印设计公式：
自由定位+创造力=现代印刷设计
如今，许多出版商大幅减少印刷量并上线。打印页面成为Web上的网页。但这些网页失去了印刷设计的创造力和自由。设计师不想丢失多年来收集的印刷品。他们开始在网上设计印刷创意。
网页设计3.0的诞生
从2016年开始，我们开始注意到Print Design的想法会定期出现在Pinterest，Behance和Dribbble的网页设计上。这些新的网页设计不同于：
- 自由定位。
- 元素重叠。
- 删除类似Bootstrap的框架的表约束。
这意味着Web Design 3.0的诞生！
Web Design 3.0是设计师的自由
2016年夏天，83 Oranges（https://83oranges.com/）发表了题为“网页设计趋势”的文章。
作者在Web Design中确定了以下样式：
- 图像上的文字
- 重叠图像
- 垂直文字和超级清洁布局
- 不均匀的网格图库
- 这里有大标题的图像
- 抽象的品牌元素
在第3章中，我们将详细介绍样式以及如何在Web Design 3.0中创建网站。
删除表约束
删除表约束是什么意思？让我们使用下图中的示例显示墙上的典型照片。它们看起来像一张桌子。
如果您现在在Pinterest或Google上搜索“图片墙”，90％的结果将如下图所示。您现在注意到设计中的巨大变化。该设计在所有领域都取得了快速进展。
同意这些示例看起来像现代版画设计和Web设计3.0。为什么会这样？没有人想在墙上看到过去无聊的桌子。人们希望用独特的想法给朋友留下深刻印象。每个人都想用设计来表达情感。
现代网格布局
我们在Web Design中看到了更多复杂网格的使用。CSS Grid变得更受欢迎。
Web Design 3.0的趋势
打破刻板印象的时尚设计正变得越来越流行。在图表中，您可以看到每年都有更多的设计师发现Web Design 3.0的世界。此图表显示Pinterest，Behance和Dribbble上“网页设计”主题的结果。我们预测这种趋势将在未来继续。
网页设计研究
每天我们都会使用新的Web设计理念进行研究和测试。我们将设计上传到Pinterest。我们通过在其电路板上保存设计来观察用户的反应。我们对结果印象深刻。Web Design 3.0的网站获得的反馈比2.0的反馈要多十倍。
实际数据证实了这些研究结果。几个月后，我们获得了大约80万的独特月度观众。它讲述了Web Design 3.0中页面的日益普及。
如果您想在Pinterest或Behance上使您的Web设计理念引人注目，那么就没有其他选择。您需要在Web Design 3.0中设计网站。如果你还没有开始，你应该快点！我们将帮助您了解您需要做什么。
我们的目标
我们的目标是告诉网页设计师最新的网页设计趋势。我们想解释这些差异以及如何在Web Design 3.0中创建网站。我们试图传播我们的想法。我们喜欢分享我们如何成为世界上最受欢迎的网页设计师的经验。我们希望成为业界Web Design 3.0的主要驱动力。我们总是寻找以不同方式思考的人。我们可以一起改变网页设计行业。
对于非设计师
您可能会问，Web Design 3.0中的网站在哪里？为什么我们仍然在Web上看到其中一些作为工作网站？有几个原因。
- 设计人员没有方便的工具来在Web Design 3.0中创建HTML或WordPress页面。现有的网站建设者缺乏自由定位。设计师仍然需要使用Adobe Photoshop，Adobe XD或Sketch App等图形设计工具来实现创意。为了与世界分享想法，他们将想法作为图像上传到Pinterest，Behance和Dribbble。Web设计人员无法创建可用的Web页面。如果他们想将模型转换为网页，他们需要手工编写HTML和CSS代码。但这是一个漫长而昂贵的过程。
- 没有资源，您可以在其中查看Web设计的当前趋势。是的，有Pinterest，Behance和Dribbble。但要了解趋势，您需要每天监控变化。在每个行业中，都有资源可以让您了解当前的趋势：电影，音乐和YouTube。趋势显示一切，但不是网页设计。它引发了很多关于网页设计趋势的猜测。有很多“专家”在谈论趋势。但我们需要一个包含网页设计数据的资源。然后，只需点击一下即可了解今天的趋势。
- 由于缺乏真实数据和值得信赖的权威意见，设计师继续以旧式设计。
- 设计和工具之间存在不匹配。网站建设者无法创建现代网页设计。它大大减缓了Web Design 3.0的增长速度。我们强烈反对设计师在创作自由方面受到限制的事实。设计师应该选择以哪种方式来构建他们的网站。现代网页设计应该在Pinterest和Behance的时装秀的领奖台上脱颖而出，成为工作网站。
现代网页设计应该在Pinterest和Behance的时装秀的领奖台上脱颖而出，成为工作网站。
网页设计虽然年轻，但正在迅速发展。
- 过渡1是Web上图形的外观。它使网络更具吸引力和趣味性，并使网络征服世界。图形的使用使Web成为一种新的独立的信息发布方式。
- Transition 2是博客，网格和移动设备支持的外观。Bootstrap的使用和模板的传播使得Web Design很无聊。
- 过渡3是最重要的。它导致了Web Design 3.0。出版商上网和移动设备。设计师将创意从印刷设计转移到网络上。他们希望获得创造力，自由定位和消除表约束的自由。
第2章网站建设者的趋势背后
第二部分是关于流行的网站建设者，他们的演变，以及他们需要匹配Web Design 3.0。
基于Bootstrap的网站构建者是否支持现代Web设计趋势？不幸的是，这是事实。每天滞后变得更加明显和更加明显。让我们来详细了解它为什么会发生。
网站建设者的演变
与网页设计类似，让我们来看看网页设计工具的历史。还有三个过渡。在下图中，您可以看到一些流行的Web设计工具。
让我们详细了解这些转变。
过渡到视觉编辑
网站管理员在文本编辑器中编辑了网页内容。那些编辑允许编写HTML代码。最多，它们在HTML代码中提供了方便的代码着色，自动代码格式化和错误突出显示。过渡1是从文本到视觉编辑。
过渡到Bootstrap
Transition 2是像WordPress和Joomla这样的博客系统的兴起，以及用于创建主题的工具，例如Artisteer。人们在Artisteer中设计了数百万个主题。但几年来，Artisteer的主题设计已经过时了。
有一些流行的网站建设者和WordPress插件发布：Webflow，VisualCompuser，Elementor，Divi等。其中大多数都是基于Bootstrap的。它们适用于Web Design 2.0。
他们错过了Web Design 3.0的内容？这些网站构建器和插件没有自由定位和图层。此外，它们不提供设计人员需要的图形设计工具的简单性和便利性。
最近，Bootstrap改变了主页上的主要插图。如下所示，它有图层。也许Bootstrap正在开发层和自由定位。
这是其他例子。如果设计人员需要空白区域，则必须添加空元素和行。要创建元素重叠，必须为边距指定负值。它将Web设计过程变成了复杂而枯燥的工作，这应该很有趣。
过渡到Web Design 3.0
目前正在进行的过渡是Web Design 3.0。它现在正在发生。不幸的是，许多网站建设者还没有为现代设计做好准备。
我们认为应采取紧急行动以防止停止网页设计进度。变化应该是正确的方向。有许多变体可以简化网站构建器并为网页设计增加更多创意。但并非所有变体都足够好。
我们将回顾以下案例：缺乏创造力，Wix和Gutenberg。
缺乏创造力
这是不可能的，但有时候开发人员会朝着相反的方向前进。一些“新奇”工具，如Wix ADI，GoDaddy Site Builder和Mobirise，都有一套固定的预制模板。用户只能更改文本和图像，而不能更改布局。开发人员希望所有网站看起来都一样吗？Web设计有什么样的创造力和发展方式？
确实，工具易于使用，因为您无法修改设计。也许，一些用户同意简单而无法改变设计。但我们的目标是拥有最简单的建造者，同时保持创造力的最大自由。我们需要工具的革命性突破。
古滕贝格
这是另一个例子。如您所知，WordPress发布了一篇新文章编辑 – 古腾堡。它出现的原因是什么？看起来WordPress开发人员想要创建与Medium.com相同的文章编辑器。此外，他们希望拥有像VisualComposer这样的工具的功能。他们制作了两篇，文章编辑与简单的网站建设者相结合。似乎每个人都应该感到高兴。但实际上，我们看到了相反的情况。用户不喜欢这个WordPress创新。请看下面的图片。
为什么会这样？对于一个简单的文章编辑器来说，Gutenberg编辑器似乎很复杂。同时，它对于网站建设者来说功能较弱。此外，Gutenberg生成的网页设计甚至不在Web Design 2.0中。它们更像是2010年的Web Design 1.5。
他们可以提供方便的API，使开发人员更容易在WordPress中创建自己的网站构建器。相反，他们为现有的网站建设者发布了另一个竞争对手。他们也没有给出任何预制设计。
也许随着时间的推移，一些开发人员会接受这 WordPress别无选择。但它无助于我们更接近主要目标。我们需要最简单的编辑器来在Web Design 3.0中构建网站。
WIX
Wix试图成为Web Design 3.0的工具。Wix的问题是它的HTML不符合网站开发人员采用的标准。元素定位是绝对的。因此，HTML不可编辑，并且难以维护移动设备。Wix仅支持台式机和手机。实际上，通常支持五种类型的设备。Wix使用JavaScript重新计算定位，而不是HTML5和CSS3。设计师使用的所有流行的平面设计工具都没有类似的属性面板。
似乎Wix主要面向最终用户，而不是设计人员和开发人员。例如，请参阅“使用Jazza绘制”频道上标题为“如何制作网站 – 网页设计教程”的热门YouTube视频下的评论。本评论下的讨论仍在进行中。
Wix试图简化网站开发并创建了Wix ADI。他们删除了完全编辑设计的能力。您只能修改文本和图像。因此，使用ADI，他们甚至更远离Web Design 3.0。
网站建设者没有进展
为什么创建Web设计行业需要的新工具如此困难？
- 难度。网站建设者是非常复杂的系统，需要大量投资和时间进入开发。它还需要一个可以改变Web设计的好主意。
- 垄断。新工具很难进入现有的网站建设者市场。目前的工具多年来积累了大量用户群。对于新工具，很难通知大量用户。因此，我们需要您的帮助和支持来传播信息。
- 被动。现有网站构建者的开发人员和用户非常被动。变化总是与某些风险和额外努力有关。人们宁愿不改变任何东西，因为他们认为永远都会如此。请不要被动！
进步正在进行中
正如我们已经看到的那样，进展并没有停滞不前。没有人能阻止它。与此同时，新的总是遇到困难。我们的共同目标是支持Web Design 3.0的创新者来改变Web。
例如，尽管石油垄断和传统汽油车制造商的巨大阻力，电动汽车继续征服市场。
同样，似乎当前的Web Design 2.0和网站构建者只是选项。它不是那样的。我们的任务是给一个新的机会。我们可以一起宣传Web Design 3.0和新一代工具！
CSS网格
CSS Grid已成为构建布局的最新标准。
网页设计的新维度
元素的定位也有其演变。
Web Design 1.0是“一维的”。设计元素大多是一个接一个地排列。
网页设计2.0是“二维的”。有用于在单元格中放置元素的网格，这提供了更多的自由。
网页设计3.0是新的维度。它具有元素，重叠和图层设计工具等图层的自由定位。它打开了网页设计的新前景。它是新网页设计时代的开始。
新的维度就像拼图和乐高积木一样。
删除表约束
如上所述，Web Design 3.0需要自由定位和删除表约束。元素的独特定位使Web设计本身独一无二。与两列，三列和四列设计看起来彼此非常相似。
元素的自由定位使Web Design独一无二
在下图中，您可以看到Web Design 3.0中元素的自由定位。定位的自由度为设计师带来了巨大的变化。
在Web Design 3.0中：
- 您可以自由定位元素。如有必要，您可以留下空白区域。
- 您可以自由调整元素大小。
- 您可以叠加元素和网格单元格。
这些功能是图形设计工具的标准功能。在第3章中，我们将讨论如何在实践中应用这些功能来在Web Design 3.0中创建页面。
自由定位和元素重叠在所有类型的设计中都得到了普及。
有限与自由定位
现有网站建设者提供什么？在下图中，您可以看到两个单元网格的示例。您会在左侧单元格中看到该文本。想象一下，你想改进你的设计，所以你想想把文字放在哪里。
有两种方法。第一个是上图中的左侧。你看到红线。这些是Web Design 2.0当前网站构建者支持的占位符。通常，您可以将元素放在网格中的其他元素之间或其他单元格中。这是有限的定位。
真的吗？有没有人相信当前网站建设者的这些限制允许创建真正独特和现代的网页设计？答案是有限的定位使得在Web Design 3.0中构建网站几乎是不可能的！
然而，还有第二种方式，即右方。如你所见，有无限数量的职位。您可以将文本放在任何您想要的位置，而不仅仅是可能的位置。这是Web Design 3.0新网站建设者的自由定位方式。
例如，您在华盛顿特区旅行。您有两种选择在城市中移动。您可以乘坐公共交通工具或乘汽车或出租车游览城市。
在下图中，您可以看到左侧的公共交通地图。开车驾驶的路线图位于右侧。你觉得有什么不同吗？它与Web Design 3.0中的自由定位非常相似。你有更多的选择自由。
另一个例子，这篇文章是在Microsoft Word中编辑的。它的定位有限，类似于Web Design 2.0。MS Word功能足以写一篇文章。但MS Word还不足以设计演示文稿。我们有Microsoft PowerPoint。你觉得有什么不同吗？在MS PowerPoint中，您可以自由放置元素。它为您提供更多设计创意的自由。请参见下图中的差异。
使用当前网站构建器在Web Design 3.0中构建网页类似于在Microsoft Word中创建演示文稿。这些年来，设计师不得不使用非常有限的工具来设计网页。没有人告诉并为设计师提供替代方案。
分离市场
让我们来看看当前平面设计工具的市场。设计师使用这些工具在Web Design 3.0中创建创意。与此同时，网站建设者还有另一个市场。网站管理员使用构建器来创建工作网站。所以这是两个分开的市场。
你会看到左边流行的平面设计系统。设计师总是使用这些工具来设计Web Design 3.0中的模型。所有这些工具都有自由定位，元素重叠和图层。但是你不能用它们来创建工作网站，因为它们只保存图像。
右边有一些当前流行的网站建设者。设计师使用这些平台来构建网站。但是，在这些网站建设者中设计Web Design 3.0中的现代网站非常困难或几乎不可能。
一旦我们在Web Design 3.0中找到了有趣的网页。我们对它的HTML编码非常好奇。在浏览器检查器中，我们发现整个设计是一个大图像。
有没有按钮或链接？是的，按钮是HTML中可点击的图像区域。我们看到此页面是在图形设计工具中设计的，并且作为图像上传到网站，因为Web Design 3.0没有合适且易于使用的网站构建器。
网页设计师需要：
- 自由定位
- 删除表约束
- 图层
- 元素的属性面板
- 支持Windows和Mac OS
网站管理员需要：
- 清理HTML和CSS
- 移动设备支持
- WordPress和Joomla支持
- 在线建立网站
我们看到这些要求是不同的。要在Web Design 3.0中创建网站，我们需要革命性的变革。
摘要
- 网站建设者在快速变化的网页设计方面落后。
- 网页设计工具的历史有几个转变。然而，进展停止了。有迹象表明必须实现新的转型。
- 网页设计师和网站管理员有独立的市场。流行的网站建设者不支持Web Design 3.0的主要功能：自由定位，以及删除表约束和图层。
第3章：Web设计3.0工具
您认为只使用一个工具创建Web Design 3.0是否可行？是的，但很难。这就像使用单轮自行车。两个轮子一起工作很容易，就像骑自行车一样。
现代Web设计的新公式如下所示：
WEB DESIGN + WEB MASTERING = WEB DESIGN 3.0
新工具将具有网页设计和网站管理员工具的功能。它是下图中的交叉蓝色区域。
网页设计师和网站管理员的交叉市场
有工具吗？是的，有。例如，Wix是一个受欢迎的平台，我们讨论了上面的问题：绝对定位，不可编辑的HTML和有限的响应支持。Wix适用于最终用户，不适用于设计人员和开发人员。
另一个例子，Nicepage是一个用于在Web Design 3.0中构建页面的新创业公司。它具有图形设计工具和网站构建器的功能，适用于网页设计师和网站管理员：自由定位，元素重叠，移动设备和现代网格。在那，它生成干净的HTML和CSS。
创意简单
当前的网站构建者是否简单而灵活，足以在Web Design 3.0中创建独特的网站？请看下面的图片。
我们看到当前的网站构建者并不简单易用。如果设计师为Web Design 3.0等网站添加了一些独特性，那么使用当前系统的过程非常困难。另一方面，如果系统很简单，它提供的功能有限。
该图表显示了如何通过创造性和简单性来放置当前的网站建设者。还有网站建设者，其中考虑到创造性和简单性，以允许在Web Design 3.0中构建网站。
接下来，我们将继续讨论如何在Web上创建最时髦的Web设计。
原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/tech/courses/263049.html