介绍

我们喜欢网络设计,这是我们的激情。网页设计是我们生命的一部分。自2000年以来,我们每天都在观看网络设计世界中发生的事情。我们参与了Web设计过程,并有数百万个网页设计了我们积极的参与。现在,我们希望与您分享我们一些令人兴奋的想法。

本文首次分享了关于如何在世界上创建最时尚的网络设计的秘诀。您将学习现代Web设计的基本规则,以创建世界级网站,博客和主题。你会发现如何成为独一无二的,如何脱颖而出,以及如何吸引客户的注意。

本文包括几章:

第1章,我们会发现网页设计如何变化。此外,您将了解新一代Web设计师的诞生,他们在Web设计3.0中设计网页。

第2章,我们将讨论滞后趋势的网站建设者,并减慢网络设计进化。

第3章,您将学习如何以新的方式快速且轻松地创建现代网络设计。

第1章网络设计正在发生变化

我们将谈论的第一件事是 网页设计。它正在迅速变化。要了解这一点,您需要查看Web设计进化:从第一站点到今天的时尚网站。我们将尝试预测最近的未来将受欢迎的网页设计。

网页设计的演变有三个阶段。在下面的图片中,我们已经彩色了每个阶段,并增加了时间表。

设计历史.JPG.

网页设计演变

第一个网站

第一个网站是基于文本的。很难说他们有任何网页设计。

过渡到Web设计1.0

稍后,在网页设计1.0上过渡。网站上出现了一些图形元素,这变得更具吸引力。网页获得表格。然后,表格转换为布局和网格。表格给出了一些灵活性,但它们并不是移动友好,当时不是必需的。

许多人创建了自己的内容管理系统(CMS)。因此,网站管理员无需编辑HTML文件或将其上传到服务器。但是可以实时修改内容。

Web设计的演变和移动电话的传播导致了新的变化。

过渡到Web设计2.0

下一次转换是Web设计2.0。网页GET网格,网络设计人员可以用布局安排元素。

引导 accelerated the speed of Web Development. It simplified the process and made it more convenient. Bootstrap supported mobile devices from the beginning with Grids.

引导'S网格自动拉伸到屏幕的全宽。它减少了开发人员的时间,以便在编码上支付桌面,笔记本电脑,平板电脑和手机。

响应.jpg.

各种设备上的现代网站

WordPress,Joomla和Drupal成为最受欢迎的内容管理系统。他们取代了自我书面系统,这是不完美和昂贵的写作和维护,其功能有限。由于WordPress和Joomla,任何人都可以创建一个博客或网站。今天,超过20%的网站使用这些系统建造。

WordPress和Joomla始终支持主题和模板,这使得可以在不改变内容的情况下修改设计。可以手动创建主题或购买现成的主题。此外,网站管理员可以使用主题构建器。有大量的主题和模板可用。

2008年,艺术家到了。当时它成为最受欢迎的主题建设者。与艺术家,任何人都可以创造主题和 网站模板 在几分钟内。数百万个网站使用艺术家设计的主题。

网页设计死了吗?

似乎每个人都应该快乐:网络设计师,Web开发人员和用户。但是,有一个新问题。网页设计师开始问一个问题:"网页设计死了吗?"。您可以找到询问所有已知平台的同一问题的文章,如中,可爱的,粉碎的蒙古卓,Quora和Reddit。自2015年以来,网页设计师一直在询问同样的问题。

在下面的图片中,您可以看到此短语的Google搜索结果。

seach-on-google.png

搜索结果谷歌

为什么这发生了? Bootstrap在2015-2016达到了其人气的高度。您可以在下面的图表中看到它。

bootstrap-poundity.jpg.

引导 in Google Trends

此问题的主要原因是引导和模拟。 Bootstrap的Web设计看起来与彼此相似,好像它们是用一个模板制作的。许多网站建设者恶化了这种情况,使引导作为系统的核心。一个bootstrap 网站设计 从一张大局开始,其他零件适合两种,三 - 和四个单元结构。 Bootstrap中的许多主题和模板提升了这个问题的分布。

在下面的图像中看到。

bootstrap-designs.jpg.

Pinterest. results for "网页设计 bootstrap”

2015年,本亨特发表了“网页设计死亡”的书。这本书的主要思想是,50美元主题和模板的普及几乎杀死了对网络设计师的工作的需求。自定义网络设计成本更多,因为它需要时间,知识和技能。除了设计外,它需要自定义HTML和CSS编码。

今天仍然是一个问题吗?是的。四年后,问题仍未得到解决。在下面的图片中,您可以看到Google搜索提示。人们今天继续问这个问题。

Google-2018.png.

在Google上搜索提示

网络设计师开始找到解决方案。他们无法留下来观看 网页设计,他们的生命激情,陷入了进步。总是有想要使网络成为更好的地方。史蒂夫乔布斯曾经说过,“思考不同,”关于这样的人。这些人总是寻求新的想法。

打印设计

网页设计很年轻。这是大约二十年的老。在网页设计之前,打印设计已经很长,历史上有数百年。

Graphics-Design-History.jpg

打印设计的演变。 onlinedesignteacher.com的版权

打印设计工具始终允许创造商自由地放置物品。设计师不受他们的创造力。出版商总是在他们的想法中自由。他们不必考虑HTML,CSS或移动设备。

打印设计公式:

自由定位+创造力=现代印刷设计

print-designs.jpg.

Pinterest.上的印刷设计

如今,许多出版商减少了缺陷的运行,并在线上去。打印页面已成为Web上的网页。但这些网页丧失了打印设计的创造力和自由。设计师不想失去多年来收集的打印想法。他们开始在线打印想法设计。

网络设计的诞生3.0

从2016年开始,我们开始注意到在Pinterest,Behance和Dribbble上的网页设计上定期出现的印刷设计的想法。那些新的网络设计不同:

  1. 自由定位。

  2. 元素重叠。

  3. 打破自举网格的局限性。

它意味着网络设计的诞生3.0!

网页设计3.0关于设计师's freedom

现代设计.jpg.

来自Pinterest的现代网页设计

在2016年夏天, 83橙子 (//83oranges.com/)介绍了标题:“网络设计趋势”的文章。

作者确定了以下新兴风格 网站设计:

  • 映像上的文字
  • 重叠的图像
  • 垂直文本 & Super Clean Layouts
  • 不均匀的网格画廊
  • 这里有大头条线的图像
  • 抽象品牌元素
83oranges.jpg.

83橙子在Pinterest上

在第3章中,我们将仔细研究样式以及如何在Web设计中创建网站3.0。

删除表约束

删除表约束是什么意思?让'使用该示例,下面的图像显示墙上的典型照片。它们看起来类似于电网。

墙壁-2.jpg.

Pinterest.的示例

如果您在Pinterest或Google上搜索“图片墙”,则90%的结果将看起来像下面的图片中的结果。您注意到了现在一般设计的戏剧性变化。设计在所有领域都有迅速进展。

墙壁3.jpg.

Pinterest.的示例

同意这些例子看起来像现代印刷设计和网络设计3.0?为什么这发生了?没有人愿意从过去的墙上看到钻孔栅栏。人们想用独特的想法给朋友留下深刻的印象。每个人都想用设计表达他们的情绪。

现代网格布局

我们看到更多在网页设计中使用复杂网格。而CSS网格变得更加流行。

complex-grids.jpg.

网页设计3.0趋势

时尚设计破坏刻板印象变得越来越受欢迎。在图表中,您可以看到更多的设计师发现网络设计3.0的世界。此图表显示了主题的结果"网页设计"在Pinterest,Behance和Dribbble上。我们预测该趋势将来会持续下去。

Web-Design-Trends.png

来自Pinterest,Behance和Dribbble的网络设计趋势。

网页设计研究

每天我们都使用新的网络设计思路进行研究和测试。我们将设计上传到Pinterest。我们观看用户如何通过在董事会上保存设计来反应。我们对结果印象非常深刻。 Web设计的网站3.0获得超过2.0的反馈的十倍。

实际数据确认了这些研究结果。在几个月里,我们有大约800k独特的每月观众。它对网络设计3.0中越来越受欢迎的页面普及。

查看者2.Png

观众在Pinterest上增长

如果您想在Pinterest或Behance上发出明显的网络设计理念,则没有替代方案。您需要在Web Design 3.0中设计网站。如果你还没有开始,你应该快点!我们将帮助您了解您究竟需要做什么。

我们的目标

我们的目标是告诉网络设计师了解最新的网络设计趋势。我们希望解释差异以及如何在Web设计3.0中创建网站。我们试图传播我们的想法。我们喜欢分享我们如何成为世界上最受欢迎的网络设计师的经验。我们希望成为业内网页设计3.0的主要推动力。我们总是在寻找不同的人。我们可以一起改变网络设计行业。

NicePage-Designs2.jpg.

网页设计3.0 Pinterest上的想法

网站建设者不是为创造性的人

您可以问,网站设计3.0在哪里?为什么我们仍然在Web上看到一些他们作为工作网站?有几个原因。

  1. 设计人员没有方便的工具,可以在Web设计中创建HTML或WordPress页面3.0。现有的网站建设者缺乏免费定位。设计师仍然必须使用像Adobe Photoshop,Adobe XD或Sketch应用程序等图形设计工具来实现想法。与世界分享想法,他们将思想作为图像上传到Pinterest,Behance和Dribbble。 Web设计人员无法创建工作网页。如果他们想将模型转换为网页,他们需要手动编写HTML和CSS代码。但这是一个漫长而昂贵的过程。

  2. There are no resources, where you can see the current trends in web design. Yes, there are Pinterest, Behance, and Dribbble. But to understand the trends, you need to monitor the changes every day. In every industry, there are resources where you can find out what is trending today: in movies, in music, on YouTube. Trends show everything, but not web design. It creates a lot of speculation on trends in web design. There are a lot of "专家"谈论趋势。但是我们需要一个资源与网页设计上的数据。那么今天有可能理解'一点击的趋势。

  3. 由于缺乏真实数据和可信赖的权威意见,设计师继续以旧风格设计。

  4. 设计和工具之间存在不匹配。网站建设器无法创建现代网络设计。它显着减慢了网络设计3.0的增长。我们强烈反对设计师在创造自由中受到限制。设计人员应该有选择在哪种风格建立他们的网站。现代网页设计应该在Pinterest和Behance上的时装秀的领奖台成为工作网站。

现代网页设计应该在Pinterest和Behance上的时装秀的领奖台成为工作网站。

概括

网页设计很年轻,但它正在迅速发展。

  • 过渡1 是网上图形的外观。它使网络更具吸引力和有趣,允许网络征服世界。使用图形允许网络成为一种新的信息分布的新独立方式。

  • 过渡2 是博客,网格和对移动设备的支持的外观。使用引导和传播 网站模板 做了网页设计无聊。

  • 过渡3. 是最重要的。它导致了网络设计3.0。出版商在线和用户转换到移动设备。设计师从印刷设计到网络上的想法。他们希望创造性,自由定位和去除表约束的自由。

第2.网站建设者落后于趋势

第二部分是关于流行的网站建设者,他们的演变,以及他们需要匹配Web设计3.0的东西。

网站建设者是否基于Bootstrap背后的现代网络设计趋势?不幸的是,这是真的。每天滞后都变得更加明显,更加明显。让'我找出为什么它正在发生细节。

网站建设者的演变

类似于网络设计,让我们来看看网络设计工具的历史。还有三种过渡。在下面的图片中,您可以看到一些用于Web设计的流行工具。

Site-Builders-History.png

网站建设者的时间表

让'S详细审查这些过渡。

过渡到视觉编辑

WebMasters在文本编辑器中编辑了网页内容。这些编辑允许编写HTML代码。最多,它们提供了方便的代码着色,自动代码格式和HTML代码中的错误突出显示。转换1来自文本到视觉编辑。

text-to-Visual.jpg

过渡到视觉编辑

过渡到引导

过渡2是博客系统的兴起,如WordPress和Joomla和用于创建主题的工具,例如艺术家。人们在艺术家设计了数百万主题。但在几年内,艺术家主题设计变得过时。

有一些流行的网站建设者和WordPress插件发布:WebFlow,VisualCompuser,Componor,Divi等。其中大多数是基于引导的。它们适用于Web设计2.0。

网络设计3.0缺少什么?这些网站构建器和插件没有免费定位和层。此外,它们并不提供图形设计工具的简单性和便利,设计师需要。

最近Bootstrap更改了主页上的主插图。如下,它有层数。也许引导靴正在处理层层和免费定位。

bootstrap.jpg.

引导 home page

以下是其他例子。如果设计师需要空白空间,它们必须添加空元素和行。要创建元素重叠,它们必须指定边距的负值。它转向Web设计过程,应该是有趣的,进入复杂和无聊的工作。

转换到Web Design 3.0

当前的正在进行的转换是网页设计3.0。它现在正在发生。不幸的是,许多网站建设者还没有准备好现代设计。

我们认为应该采取紧急行动来防止网络设计'从停止的进步。变化应该是正确的方向。如何简化网站建设者的变体,并为网站设计添加更多创造力。但并非所有变种都足够好。

我们将审查以下案例:缺乏创造力,WIX和Gutenberg。

缺乏创造力

不可能相信,但有时开发人员在相反的方向上移动。一些“令人讨厌的”

确实,工具可以易于使用,因为您无法修改设计。也许,有些用户同意在没有改变设计的能力方面具有简单性。但我们的目标是拥有最简单的建设者,同时保持最大的创造性自由。我们需要革命性的突破。

古腾堡

这里还有一个例子。如您所知,WordPress发布了一篇新的文章编辑器 - 古腾堡。它的外观是什么?它看起来像WordPress开发人员想要创建Medium.com拥有的相同文章编辑器。此外,他们希望拥有像visualcomposer这样的工具的功能。他们两者都制作,文章编辑与简单的网站建设者相结合。似乎每个人都应该幸福。但实际上,我们看到了相反的。用户不喜欢这个WordPress创新。请参阅下面的图片。

古滕伯格.PNG.

wordpress.org的屏幕截图

这发生了为什么会发生?对于简单的文章编辑,古滕伯格编辑似乎很复杂。与此同时,它对网站建设者具有较弱的功能。此外,Gutenberg生成的Web设计甚至不是在Web设计2.0中。它们更像是2010年的网页设计1.5。

他们可以提供方便的API,使开发人员更容易创建自己的网站建设者。相反,他们发布了现有网站建设者的另一个竞争对手。他们也没有给出任何研磨的设计。

也许随着时间的推移,一些开发人员将接受这个。 WordPress没有替代品。但它并没有帮助我们更接近主要目标。我们需要最简单的编辑器来构建Web设计中的网站3.0。

Wix.

Wix试图成为网络设计3.0的工具。 Wix.'S问题是其HTML不符合网站开发人员采用的标准。元素定位是绝对的。结果,HTML不是可编辑的,并且很难维护移动设备。 Wix仅支持桌面和手机。在实践中,通常支持五种类型的设备。 Wix重新计算使用JavaScript的定位,而不是HTML5和CSS3。在设计人员使用的所有流行的图形设计工具中也没有类似的属性面板。

似乎Wix主要用于最终用户,而不是设计师和开发人员。例如,请参阅“流行的YouTube视频”下的评论,标题为“如何在”与Jazza“频道上的”如何制作网站 - 网络设计教程“。此视频下的讨论仍然存在。

wix-comminy.png.

youtube的屏幕截图

Wix试图简化网站开发并创建Wix Adi。他们删除了完全编辑设计的能力。您只能修改文本和图像。所以,与Adi一起远离网络设计3.0。

网站建设者没有进展

为什么难以创建网络设计行业需求的新工具?

  1. 困难。网站建设者是一个非常复杂的系统,需要大量投资和时间进入发展。它还需要一个可以改变网络设计的好主意。

  2. 垄断。新工具难以进入现有的网站建设者市场。目前的工具多年来累积了大型用户群。对于新工具,很难通知大量用户。因此,我们需要您的帮助和支持来传播信息。

  3. 被动。现有网站建设者的开发人员和用户非常被动。变更始终与某些风险和额外努力有关。人们不想改变任何东西,因为他们认为它会永远如此。请不要被动!

进展正在进行中

正如我们已经看到的那样,进步并没有静止并继续。没有人可以阻止它。与此同时,新的总是在途中遇到困难。我们的共同目标是支持网络设计3.0的创新者来改变网络。

例如,尽管石油垄断和传统汽油汽车制造商的巨大阻力,电动汽车继续征服市场。

tesla.jpg.

同样,它似乎目前的Web设计2.0和网站构建器是唯一的选项。它不是那样的。我们的任务是给出新的东西。我们可以一起传播关于网络设计3.0的一词和新一代的工具!

CSS网格

CSS网格已成为建筑布局最新标准。

grids.jpg.

网页设计中的新维度

元素的定位也有其进化。

网页设计1.0 is "一维。"设计元素主要是顺序排列的。

网页设计2.0 is "二维。"有用于在细胞中放置元素的网格,这会产生更多自由。

网页设计3.0 是新的维度。它具有根据图形设计工具中的元素,重叠和层的自由定位。它打开了网页设计的新前景。这是新的网络设计时代的开头。

new-dimension.jpg.jpg.

Web设计中的尺寸

新的维度就像乐高砖与马赛克一样。

lego.jpg.

网页设计代

删除表约束

如上所述,Web设计3.0需要免费定位和删除表约束。元素的独特定位使网络设计本身独特。与看起来非常相似的两个,三个和四列设计不同。

自由定位元素使网页设计独特

在下面的图片中,您可以看到网页设计中的Free定位元素3.0。定位自由对设计人员来说具有很大的差异。

定位.png

限量与免费定位

在Web设计3.0:

  1. 您可以自由地定位元素。如有必要,您可以留下空格。

  2. 您可以自由调整元素大小。

  3. 您可以覆盖元素和网格单元格。

  4. 当然,您的网页必须是移动友好的。

这些功能是图形设计工具的标准。在第3章中,我们将讨论如何在实践中应用这些功能,以在Web设计3.0中创建页面。

自由定位和元素重叠在所有类型的设计中获得普及。

家具 - 超大.jpg

内部的自由定位

限量与免费定位

现有网站建设者提供什么?在下面的图片中,您可以看到双单元网格的示例。您在左侧单元格中看到文本。想象一下,你想改善你的设计,所以你想知道要在哪里放进文本。

有两种方式。第一个是图片中的左侧。你看到红线。这些都是网络设计2.0当前网站建设者的占位符。通常,您可以在网格中的其他元素或其他单元格之间放置元素。这是有限的定位。

严重地?有人是否认为当前网站建设者的这种限制允许创建真正独特和现代的网页设计?答案是有限的定位使得在Web设计中建立网站几乎是不可能的3.0!

但是,存在第二种方式,这是右边。如您所见,有一个无限数量的职位。您可以将文本放在任何您想要的地方,不仅可以在哪里。这是网络设计的新网站建设者的方式3.0,免费定位。

流行的网站建设者声称有免费定位或写意。然而,他们的写意元素绝对是定位的。绝对定位的元素不是移动友好的,并且必须在每个移动视图中手动重新定位。在Web设计中,3.0元素位于相对且移动的友好。

Limited-positions.png.

在网页设计中定位

例如,您在华盛顿特区旅行。你有两个选择在城市中移动。您可以通过汽车或出租车使用公共交通或在城市周围开车。

在下面的图片中,您可以看到左侧的公共交通工具。由汽车驾驶的路线图是右边的。你有区别吗?它与网页设计3.0中的自由定位非常相似。你有更多的选择自由。

华盛顿州.JPG.

华盛顿特区地图

另一个例子:本文已在Microsoft Word中编辑。它的定位有限与网页设计2.0。 MS Word功能足以编写文章。但是MS Word不足以设计演示。我们有Microsoft PowerPoint。你有区别吗?在MS PowerPoint中,您可以自由地放置元素。它为您提供了更多的设计创造性自由。请参阅以下图片的差异。

Word-PowerPoint.jpg.

Microsoft Word和Microsoft PowerPoint

使用当前网站构建器的Web设计3.0中的网页类似于在Microsoft Word中创建演示。这些年来,设计师被迫使用非常限制的工具来设计网页。没有人可以告诉并为设计师提供替代方案。

单独的市场

让'S看一下当前图形设计工具的市场。设计人员使用这些工具来创建Web设计3.0中的想法。与此同时,网站建设者还有另一个市场。网站管理员使用Builders创建工作网站。所以,这些是两个广泛的分离市场。

Designers-VS-WebMasters.jpg

Web设计师和网站管理员的工具市场

您将流行的图形设计系统视为左侧。设计人员始终使用这些工具来设计Web设计中的模型3.0。所有这些工具都有自由定位,元素重叠和图层。但是您无法使用它们来创建工作网站,因为它们仅保存图像。

右边有一些当前的流行网站建设者。设计人员使用这些平台来构建网站。但在这些网站建设者中,在网络设计3.0中设计现代网站是非常困难或几乎不可能的。

一旦我们发现了一个有趣的 网页 在Web设计3.0中,我们对其HTML编码非常好奇。在浏览器检查员中,我们发现整个设计是一个大图像。

有任何按钮还是链接?是的,按钮是HTML中的可点击图像区域。我们看到此页面的设计是在图形设计工具中设计的,并将其上传到网站作为图像,因为Web Design 3.0没有合适且易于使用的网站构建器。

anntaylor.jpg.

网页设计师 need:

  • 自由定位
  • 删除表约束
  • 层数
  • 元素的财产小组
  • 支持Windows和Mac OS

网站管理员 need:

  • 清洁HTML和CSS
  • 移动设备支持
  • WordPress和Joomla支持
  • 在线建立网站

我们可以看到,这些要求是不同的。要在Web设计中创建网站3.0,我们需要革命性的变化。

概括

  1. 网站建设者在快速变化的网页设计世界后面滞后。

  2. Web设计工具的历史涉及多次过渡。但是,进展已停止。有许多迹象表明必须发生新的过渡。

  3. 网络设计师和网站管理员都有单独的市场。流行的网站建设者不支持Web设计3.0:免费定位,现代网格和图层的主要功能。

第3章:Web设计的工具3.0

您认为只有一个工具可以创建Web设计3.0吗?是的,但很难。这就像使用一轮自行车。有两个轮子一起工作,就像在自行车中一样。

单克 - 自行车.jpg.

现代Web设计的新公式如下所示:

Web设计+ Web Mastering = Web Design 3.0

新工具将具有Web设计和网站管理员工具的功能。此后,对响应网页设计的支持是必须的。 Web Design 3.0构建器位于下图中的交叉点蓝色区域。

设计师和webmasters.png

网站设计师和网站管理员的市场交汇处

这些工具是否存在?是的,他们这样做。

例如, 好的 是一个用于在Web设计3.0中构建页面的系统。它组合了图形设计工具和网站建设者的功能。它适用于网络设计师和网站管理员。它支持免费定位,元素重叠,移动设备和现代网格。此时,它会生成清洁的HTML和CSS。 NicePage适用于Windows,Mac OS和在线。还有一个Joomla扩展和WordPress插件。

创造性和简单

目前的网站建设者是否足够简单灵活,可以在Web设计中创建唯一的网站3.0?请看下面的图片。

简单灵活.png

我们看到当前的网站建设者并不简单且易于使用。如果设计师在Web设计中为网站添加一些唯一性3.0,则当前系统非常困难。另一方面,如果系统很简单,则提供有限的功能。

该图表显示了当前网站建设者如何通过创造力和简单来放置。并且有网站建设者,考虑到创造力和简单,以允许在Web设计中建立网站3.0。

接下来,我们将继续讨论如何在Web上创建最新的Web设计。

#介绍 我们喜欢网络设计,这是我们的激情。网页设计是我们生命的一部分。自2000年以来,我们每天都在观看网络设计世界中发生的事情。我们参与了Web设计过程,并有数百万个网页设计了我们积极的参与。现在,我们希望与您分享我们一些令人兴奋的想法。 本文首次分享了关于如何在世界上创建最时尚的网络设计的秘诀。您将学习现代Web设计的基本规则,以创建世界级网站,博客和主题。你会发现如何成为独一无二的,如何脱颖而出,以及如何吸引客户的注意。 本文包括几章: 在**第1章**中,我们会发现网页设计如何变化。此外,您将了解新一代Web设计师的诞生,他们在Web设计3.0中设计网页。 在**第2章**中,我们将讨论在延迟趋势的网站建设者并减慢网络设计进化。 在**第3章**中,您将学习如何以新的方式快速且轻松地创建现代网络设计。 #Chapter 1.网页设计正在发生变化 我们将谈论的第一件事是 [web design](//shengqianzhijia.com/web-design)。它正在迅速变化。要了解这一点,您需要查看Web设计进化:从第一站点到今天的时尚网站。我们将尝试预测最近的未来将受欢迎的网页设计。 网页设计的演变有三个阶段。在下面的图片中,我们已经彩色了每个阶段,并增加了时间表。 !design-history.jpg! *网页设计进化* ###First Websites 第一个网站是基于文本的。很难说他们有任何网页设计。 ###转换到Web设计1.0 稍后,在网页设计1.0上过渡。网站上出现了一些图形元素,这变得更具吸引力。网页获得表格。然后,表格转换为布局和网格。表格给出了一些灵活性,但它们并不是移动友好,当时不是必需的。 许多人创建了自己的内容管理系统(CMS)。因此,网站管理员无需编辑HTML文件或将其上传到服务器。但是可以实时修改内容。 Web设计的演变和移动电话的传播导致了新的变化。 ###转换到Web设计2.0 下一次转换是Web设计2.0。网页GET网格,网络设计人员可以用布局安排元素。 Bootstrap加速了Web开发的速度。它简化了这个过程,使其变得更加方便。 Bootstrap支持使用网格的开头的移动设备。 Bootstrap'S网格自动拉伸到屏幕的全宽。它减少了开发人员的时间,以便在编码上支付桌面,笔记本电脑,平板电脑和手机。 !responsive.jpg! *各种设备上的现代网站* WordPress,Joomla和Drupal成为最受欢迎的内容管理系统。他们取代了自我书面系统,这是不完美和昂贵的写作和维护,其功能有限。由于WordPress和Joomla,任何人都可以创建一个博客或网站。今天,超过20%的网站使用这些系统建造。 WordPress和Joomla始终支持主题和模板,这使得可以在不改变内容的情况下修改设计。可以手动创建主题或购买现成的主题。此外,网站管理员可以使用主题构建器。有大量的主题和模板可用。 2008年,艺术家到了。当时它成为最受欢迎的主题建设者。与艺术家,任何人都可以创造主题和 [website templates](//shengqianzhijia.com/website-templates) 在几分钟内。数百万个网站使用艺术家设计的主题。 ### 似乎每个人都应该快乐:网络设计师,Web开发人员和用户。但是,有一个新问题。网页设计师开始问一个问题:"Is Web Design dead?"。您可以找到询问所有已知平台的同一问题的文章,如中,可爱的,粉碎的蒙古卓,Quora和Reddit。自2015年以来,网页设计师一直在询问同样的问题。 在下面的图片中,您可以看到此短语的Google搜索结果。 !seach-on google.png! *搜索谷歌*的结果* 为什么这发生了? Bootstrap在2015-2016达到了其人气的高度。您可以在下面的图表中看到它。 !bootstrap-poundality.jpg! * Google Trends中的引导趋势* The main cause of this problem was in Bootstrap and analogs. Bootstrap's web designs looked so similar to one another it was as if they were made with one template. Many website builders worsen the situation, having Bootstrap as the core of their systems. A Bootstrap's [website design](//shengqianzhijia.com/website-design) 从一张大局开始,其他零件适合两种,三 - 和四个单元结构。 Bootstrap中的许多主题和模板提升了这个问题的分布。 在下面的图像中看到。 !bootstrap-designs.jpg.! * Pinterest结果"Web Design Bootstrap“* 2015年,本亨特发表了“网页设计死亡”的书。这本书的主要思想是,50美元主题和模板的普及几乎杀死了对网络设计师的需求'工作。自定义网络设计成本更多,因为它需要时间,知识和技能。除了设计外,它需要自定义HTML和CSS编码。 今天仍然是一个问题吗?是的。四年后,问题仍未得到解决。在下面的图片中,您可以看到Google搜索提示。人们今天继续问这个问题。 !google-2018.png! *在Google上搜索提示* 网络设计师开始找到解决方案。他们无法留下来观看 [web design](//shengqianzhijia.com/web-design), the passion of their lives, get stuck in progress. There are always designers who want to make the Web a better place. Steve Jobs once said, "Think different," about such kind of people. These people always seek new ideas. ###Print Design 网页设计很年轻。这是大约二十年的老。在网页设计之前,打印设计已经很长,历史上有数百年。 !Graphics-Design-History.jpg! *印刷设计的演变。版权onlinedesignteacher.com * 打印设计工具始终允许创造商自由地放置物品。设计师不受他们的创造力。出版商总是在他们的想法中自由。他们不必考虑HTML,CSS或移动设备。 打印设计公式: ### <div style="边界:1PX实体#3087DF;边界底:1px实体#3087df;颜色:#3087df;字体大小:24px;文字对齐:中心;填充:20px;"> 自由定位+创造力=现代印刷设计 </div> ### !print-designs.jpg! * Pinterest上的印刷设计* 如今,许多出版商减少了缺陷的运行,并在线上去。打印页面已成为Web上的网页。但这些网页丧失了打印设计的创造力和自由。设计师不想失去多年来收集的打印想法。他们开始在线打印想法设计。 ### Web设计的诞生3.0 从2016年开始,我们开始注意到在Pinterest,Behance和Dribbble上的网页设计上定期出现的印刷设计的想法。那些新的网络设计不同: 1. Free positioning. 2.元素重叠。 3.打破自举网格的局限性。 它意味着网络设计的诞生3.0! ### <div style="边界:1PX实体#3087DF;边界底:1px实体#3087df;颜色:#3087df;字体大小:24px;文字对齐:中心;填充:20px;"> 网页设计3.0关于设计师's freedom </div> ### [!modern-designs.jpg!](//shengqianzhijia.com/web-design) *来自Pinterest的现代网页设计* 在2016年夏天, **83 Oranges** (//83oranges.com/)介绍了标题:“网络设计趋势”的文章。 作者确定了以下新兴风格 [website design](//shengqianzhijia.com/website-design): - Text Over Image - Overlapping Images - Vertical Text & Super Clean Layouts - 不均匀的网格画廊 - 这里有大头条新闻的图像 - 抽象品牌元素 !83oranges.jpg! * 83橙子在pinterest上* 在第3章中,我们将仔细研究样式以及如何在Web设计中创建网站3.0。 ###删除表约束 删除表约束是什么意思?让'使用该示例,下面的图像显示墙上的典型照片。它们看起来类似于电网。 !wall-2.jpg! * Pinterest *的示例 如果您在Pinterest或Google上搜索“图片墙”,则90%的结果将看起来像下面的图片中的结果。您注意到了现在一般设计的戏剧性变化。设计在所有领域都有迅速进展。 !wall-3.jpg! * Pinterest *的示例 同意这些例子看起来像现代印刷设计和网络设计3.0?为什么这发生了?没有人愿意从过去的墙上看到钻孔栅栏。人们想用独特的想法给朋友留下深刻的印象。每个人都想用设计表达他们的情绪。 ##现代网格布局 我们看到更多在网页设计中使用复杂网格。而CSS网格变得更加流行。 !complex-grids.jpg! ## Web设计3.0趋势 时尚设计破坏刻板印象变得越来越受欢迎。在图表中,您可以看到更多的设计师发现网络设计3.0的世界。此图表显示了主题的结果"web design"在Pinterest,Behance和Dribbble上。我们预测该趋势将来会持续下去。 !Web-Design-Trends.png! *网络设计趋势来自Pinterest,Behance和Dribbble。* ## Web设计研究 每天我们都使用新的网络设计思路进行研究和测试。我们将设计上传到Pinterest。我们观看用户如何通过在董事会上保存设计来反应。我们对结果印象非常深刻。 Web设计的网站3.0获得超过2.0的反馈的十倍。 实际数据确认了这些研究结果。在几个月里,我们有大约800k独特的每月观众。它对网络设计3.0中越来越受欢迎的页面普及。 !viewers2.png! *观众在Pinterest上的增长* 如果您想在Pinterest或Behance上发出明显的网络设计理念,则没有替代方案。您需要在Web Design 3.0中设计网站。如果你还没有开始,你应该快点!我们将帮助您了解您究竟需要做什么。 ##Our Goal 我们的目标是告诉网络设计师了解最新的网络设计趋势。我们希望解释差异以及如何在Web设计3.0中创建网站。我们试图传播我们的想法。我们喜欢分享我们如何成为世界上最受欢迎的网络设计师的经验。我们希望成为业内网页设计3.0的主要推动力。我们总是在寻找不同的人。我们可以一起改变网络设计行业。 !NicePage-Designs2.jpg! *网页设计3.0对Pinterest *的想法* ##网站建设者不是为广大人的人 您可以问,网站设计3.0在哪里?为什么我们仍然在Web上看到一些他们作为工作网站?有几个原因。 1.设计人员没有方便的工具,可以在Web Design 3.0中创建HTML或WordPress页面。现有的网站建设者缺乏免费定位。设计师仍然必须使用像Adobe Photoshop,Adobe XD或Sketch应用程序等图形设计工具来实现想法。与世界分享想法,他们将思想作为图像上传到Pinterest,Behance和Dribbble。 Web设计人员无法创建工作网页。如果他们想将模型转换为网页,他们需要手动编写HTML和CSS代码。但这是一个漫长而昂贵的过程。 2.没有资源,您可以在那里看到Web设计的当前趋势。是的,有可能的pinterest,behance和dribbble。但要了解趋势,您需要每天监控更改。在每个行业中,有资源在哪里可以找到今天的趋势:在电影中,音乐,在YouTube上。趋势显示一切,但不是网页设计。它对网页设计趋势创造了很多猜测。有很多的"experts"谈论趋势。但是我们需要一个资源与网页设计上的数据。那么今天有可能理解'一点击的趋势。 3.由于缺乏真实数据和可信赖的权威意见,设计师继续以旧风格设计。 4.设计和工具之间存在不匹配。网站建设器无法创建现代网络设计。它显着减慢了网络设计3.0的增长。我们强烈反对设计师在创造自由中受到限制。设计人员应该有选择在哪种风格建立他们的网站。现代网页设计应该在Pinterest和Behance上的时装秀的领奖台成为工作网站。 ### <div style="边界:1PX实体#3087DF;边界底:1px实体#3087df;颜色:#3087df;字体大小:24px;文字对齐:中心;填充:20px;"> 现代网页设计应该在Pinterest和Behance上的时装秀的领奖台成为工作网站。 </div> ### ##Summary 网页设计很年轻,但它正在迅速发展。 - **过渡1 **是网上图形的外观。它使网络更具吸引力和有趣,允许网络征服世界。使用图形允许网络成为一种新的信息分布的新独立方式。 - **Transition 2** 是博客,网格和对移动设备的支持的外观。使用引导和传播 [website templates](//shengqianzhijia.com/website-templates) 做了网页设计无聊。 - **过渡3 **是最重要的。它导致了网络设计3.0。出版商在线和用户转换到移动设备。设计师从印刷设计到网络上的想法。他们希望创造性,自由定位和去除表约束的自由。 #Chapter 2.网站建设者落后于趋势 第二部分是关于流行的网站建设者,他们的演变,以及他们需要匹配Web设计3.0的东西。 网站建设者是否基于Bootstrap背后的现代网络设计趋势?不幸的是,这是真的。每天滞后都变得更加明显,更加明显。让'我找出为什么它正在发生细节。 ##网站建设者的演变 类似于网页设计,让'请看看网络设计工具的历史。还有三种过渡。在下面的图片中,您可以看到一些用于Web设计的流行工具。 !网站 - Builders-History.png! *网站建设者的时间表* Let'S详细审查这些过渡。 ###过渡到视觉编辑器 WebMasters在文本编辑器中编辑了网页内容。这些编辑允许编写HTML代码。最多,它们提供了方便的代码着色,自动代码格式和HTML代码中的错误突出显示。转换1来自文本到视觉编辑。 !text-to-visual.jpg! *过渡到视觉编辑* ###过渡到引导者 过渡2是博客系统的兴起,如WordPress和Joomla和用于创建主题的工具,例如艺术家。人们在艺术家设计了数百万主题。但在几年内,艺术家主题设计变得过时。 有一些流行的网站建设者和WordPress插件发布:WebFlow,VisualCompuser,Componor,Divi等。其中大多数是基于引导的。它们适用于Web设计2.0。 网络设计3.0缺少什么?这些网站构建器和插件没有免费定位和层。此外,它们并不提供图形设计工具的简单性和便利,设计师需要。 最近Bootstrap更改了主页上的主插图。如下,它有层数。也许引导靴正在处理层层和免费定位。 !bootstrap.jpg! *引导主页* 以下是其他例子。如果设计师需要空白空间,它们必须添加空元素和行。要创建元素重叠,它们必须指定边距的负值。它转向Web设计过程,应该是有趣的,进入复杂和无聊的工作。 ###转换到Web设计3.0 当前的正在进行的转换是网页设计3.0。它现在正在发生。不幸的是,许多网站建设者还没有准备好现代设计。 我们认为应该采取紧急行动来防止网络设计'从停止的进步。变化应该是正确的方向。如何简化网站建设者的变体,并为网站设计添加更多创造力。但并非所有变种都足够好。 我们将审查以下案例:缺乏创造力,WIX和Gutenberg。 ###缺乏创造力 不可能相信,但有时开发人员在相反的方向上移动。一些"new-fangled"工具,如Wix Adi,Godaddy Site Builder和Mobirise拥有固定的预先制作模板集。用户只能更改文本和图像,而不是布局。开发人员希望所有网站看起来都一样吗? Web设计的创造力和演变是什么? 确实,工具可以易于使用,因为您无法修改设计。也许,有些用户同意在没有改变设计的能力方面具有简单性。但我们的目标是拥有最简单的建设者,同时保持最大的创造性自由。我们需要革命性的突破。 ###Gutenberg 这里还有一个例子。如您所知,WordPress发布了一篇新的文章编辑器 - 古腾堡。它的外观是什么?它看起来像WordPress开发人员想要创建Medium.com拥有的相同文章编辑器。此外,他们希望拥有像visualcomposer这样的工具的功能。他们两者都制作,文章编辑与简单的网站建设者相结合。似乎每个人都应该幸福。但实际上,我们看到了相反的。用户不喜欢这个WordPress创新。请参阅下面的图片。 !gutenberg.png! * wordpress.org的屏幕截图* 这发生了为什么会发生?对于简单的文章编辑,古滕伯格编辑似乎很复杂。与此同时,它对网站建设者具有较弱的功能。此外,Gutenberg生成的Web设计甚至不是在Web设计2.0中。它们更像是2010年的网页设计1.5。 他们可以提供方便的API,使开发人员更容易创建自己的网站建设者。相反,他们发布了现有网站建设者的另一个竞争对手。他们也没有给出任何研磨的设计。 也许随着时间的推移,一些开发人员将接受这个。 WordPress没有替代品。但它并没有帮助我们更接近主要目标。我们需要最简单的编辑器来构建Web设计中的网站3.0。 ###WIX Wix试图成为网络设计3.0的工具。 Wix.'S问题是其HTML不符合网站开发人员采用的标准。元素定位是绝对的。结果,HTML不是可编辑的,并且很难维护移动设备。 Wix仅支持桌面和手机。在实践中,通常支持五种类型的设备。 Wix重新计算使用JavaScript的定位,而不是HTML5和CSS3。在设计人员使用的所有流行的图形设计工具中也没有类似的属性面板。 似乎Wix主要用于最终用户,而不是设计师和开发人员。例如,请参阅“流行的YouTube视频”下的评论,标题为“如何在”与Jazza“频道上的”如何制作网站 - 网络设计教程“。此视频下的讨论仍然存在。 !wix-comment.png! * youtube屏幕截图* Wix试图简化网站开发并创建Wix Adi。他们删除了完全编辑设计的能力。您只能修改文本和图像。所以,与Adi一起远离网络设计3.0。 ###网站建设者没有进展 为什么难以创建网络设计行业需求的新工具? 1. **难度**。网站建设者是一个非常复杂的系统,需要大量投资和时间进入发展。它还需要一个可以改变网络设计的好主意。 2. **垄断**。新工具难以进入现有的网站建设者市场。目前的工具多年来累积了大型用户群。对于新工具,很难通知大量用户。因此,我们需要您的帮助和支持来传播信息。 3. **被动**。现有网站建设者的开发人员和用户非常被动。变更始终与某些风险和额外努力有关。人们不想改变任何东西,因为他们认为它会永远如此。请不要被动! ##进展正在进行中 正如我们已经看到的那样,进步并没有静止并继续。没有人可以阻止它。与此同时,新的总是在途中遇到困难。我们的共同目标是支持网络设计3.0的创新者来改变网络。 例如,尽管石油垄断和传统汽油汽车制造商的巨大阻力,电动汽车继续征服市场。 !tesla.jpg! 同样,它似乎目前的Web设计2.0和网站构建器是唯一的选项。它不是那样的。我们的任务是给出新的东西。我们可以一起传播关于网络设计3.0的一词和新一代的工具! ###CSS Grid CSS网格已成为建筑布局最新标准。 !grids.jpg! ### Web设计中的新维度 元素的定位也有其进化。 **网页设计1.0 **是"one-dimensional."设计元素主要是顺序排列的。 **网页设计2.0 **是"two-dimensional."有用于在细胞中放置元素的网格,这会产生更多自由。 **网页设计3.0 ** !new-dimension.jpg! * Web设计中的尺寸* 新的维度就像乐高砖与马赛克一样。 !lego.jpg! *网页设计代* ###删除表约束 如上所述,Web设计3.0需要免费定位和删除表约束。元素的独特定位使网络设计本身独特。与看起来非常相似的两个,三个和四列设计不同。 ### <div style="边界:1PX实体#3087DF;边界底:1px实体#3087df;颜色:#3087df;字体大小:24px;文字对齐:中心;填充:20px;"> 自由定位元素使网页设计独特 </div> ### 在下面的图片中,您可以看到网页设计中的Free定位元素3.0。定位自由对设计人员来说具有很大的差异。 !positioning.png! *限量与免费定位* In Web Design 3.0: 1.您可以自由地定位元素。如有必要,您可以留下空格。 2.您可以自由调整元素大小。 3.您可以覆盖元素和网格单元格。 4.当然,您的网页必须是移动友好的。 这些功能是图形设计工具的标准。在第3章中,我们将讨论如何在实践中应用这些功能,以在Web设计3.0中创建页面。 自由定位和元素重叠在所有类型的设计中获得普及。 !家具帅哥!JPG! *在内部免费定位* ## Limited VS.免费定位 现有网站建设者提供什么?在下面的图片中,您可以看到双单元网格的示例。您在左侧单元格中看到文本。想象一下,你想改善你的设计,所以你想知道要在哪里放进文本。 有两种方式。第一个是图片中的左侧。你看到红线。这些都是网络设计2.0当前网站建设者的占位符。通常,您可以在网格中的其他元素或其他单元格之间放置元素。这是有限的定位。 严重地?有人是否认为当前网站建设者的这种限制允许创建真正独特和现代的网页设计?答案是有限的定位使得在Web设计中建立网站几乎是不可能的3.0! 但是,存在第二种方式,这是右边。如您所见,有一个无限数量的职位。您可以将文本放在任何您想要的地方,不仅可以在哪里。这是网络设计的新网站建设者的方式3.0,免费定位。 流行的网站建设者声称有免费定位或写意。然而,他们的写意元素绝对是定位的。绝对定位的元素不是移动友好的,并且必须在每个移动视图中手动重新定位。在Web设计中,3.0元素位于相对且移动的友好。 !Limited-Positions.png! *在网页设计中定位* 例如,您在华盛顿特区旅行。你有两个选择在城市中移动。您可以通过汽车或出租车使用公共交通或在城市周围开车。 在下面的图片中,您可以看到左侧的公共交通工具。由汽车驾驶的路线图是右边的。你有区别吗?它与网页设计3.0中的自由定位非常相似。你有更多的选择自由。 !washington.jpg! *华盛顿特区的地图* 另一个例子:本文已在Microsoft Word中编辑。它的定位有限与网页设计2.0。 MS Word功能足以编写文章。但是MS Word不足以设计演示。我们有Microsoft PowerPoint。你有区别吗?在MS PowerPoint中,您可以自由地放置元素。它为您提供了更多的设计创造性自由。请参阅以下图片的差异。 !Word-PowitPoint.jpg! * Microsoft Word和Microsoft PowerPoint * 使用当前网站构建器的Web设计3.0中的网页类似于在Microsoft Word中创建演示。这些年来,设计师被迫使用非常限制的工具来设计网页。没有人可以告诉并为设计师提供替代方案。 ##Separate Markets Let'S看一下当前图形设计工具的市场。设计人员使用这些工具来创建Web设计3.0中的想法。与此同时,网站建设者还有另一个市场。网站管理员使用Builders创建工作网站。所以,这些是两个广泛的分离市场。 !设计师 - vs-webmasters.jpg! * Web设计人员和WebMasters的工具市场* 您将流行的图形设计系统视为左侧。设计人员始终使用这些工具来设计Web设计中的模型3.0。所有这些工具都有自由定位,元素重叠和图层。但是您无法使用它们来创建工作网站,因为它们仅保存图像。 右边有一些当前的流行网站建设者。设计人员使用这些平台来构建网站。但在这些网站建设者中,在网络设计3.0中设计现代网站是非常困难或几乎不可能的。 一旦我们发现了一个有趣的 [web page](//www.anntaylor.com/a-list/cat1920002?loc=LBLP_AList_Summer1&ICID=LBLP_AList_Summer1) 在Web设计3.0中,我们对其HTML编码非常好奇。在浏览器检查员中,我们发现整个设计是一个大图像。 有任何按钮还是链接?是的,按钮是HTML中的可点击图像区域。我们看到此页面的设计是在图形设计工具中设计的,并将其上传到网站作为图像,因为Web Design 3.0没有合适且易于使用的网站构建器。 !anntaylor.jpg! **网页设计师**需要: - Free positioning - 删除表约束 - Layers - 元素的财产小组 - 支持Windows和Mac OS **Webmasters** need: - Clean HTML and CSS - 移动设备支持 - WordPress和Joomla支持 - 在线建设网站 我们可以看到,这些要求是不同的。要在Web设计中创建网站3.0,我们需要革命性的变化。 ##Summary 1.网站建设者在快速变化的网页设计世界后面滞后。 2. Web设计工具的历史涉及多次过渡。但是,进展已停止。有许多迹象表明必须发生新的过渡。 3. Web Designers和Webmasters有单独的市场。流行的网站建设者不支持Web设计3.0:免费定位,现代网格和图层的主要功能。 #Chapter 3:Web设计的工具3.0 您认为只有一个工具可以创建Web设计3.0吗?是的,但很难。这就像使用一轮自行车。有两个轮子一起工作,就像在自行车中一样。 !单组科 - 自行车.jpg! 现代Web设计的新公式如下所示: ### <div style="边界:1PX实体#3087DF;边界底:1px实体#3087df;颜色:#3087df;字体大小:24px;文字对齐:中心;填充:20px;"> Web设计+ Web Mastering = Web Design 3.0 </div> ### 新工具将具有Web设计和网站管理员工具的功能。此后,对响应网页设计的支持是必须的。 Web Design 3.0构建器位于下图中的交叉点蓝色区域。 !Designers-and webmasters.png! *网站设计师和网站管理员的市场的交叉点* 这些工具是否存在?是的,他们这样做。 例如,[NicePage] [1]是用于在Web设计3.0中构建页面的系统。它组合了图形设计工具和网站建设者的功能。它适用于网络设计师和网站管理员。它支持免费定位,元素重叠,移动设备和现代网格。此时,它会生成清洁的HTML和CSS。 NicePage适用于Windows,Mac OS和在线。还有一个Joomla扩展和WordPress插件。 ###创造性和简单 目前的网站建设者是否足够简单灵活,可以在Web设计中创建唯一的网站3.0?请看下面的图片。 !简单灵活.png! 我们看到当前的网站建设者并不简单且易于使用。如果设计师在Web设计中为网站添加一些唯一性3.0,则当前系统非常困难。另一方面,如果系统很简单,则提供有限的功能。 该图表显示了当前网站建设者如何通过创造力和简单来放置。并且有网站建设者,考虑到创造力和简单,以允许在Web设计中建立网站3.0。 接下来,我们将继续讨论如何在Web上创建最新的Web设计。 ### [1]: http://www.shengqianzhijia.com