Web 3.0（Web设计的新时代已经来临）

本文概述

这篇文章与这些技术无关
什么是Web Design 3.0：你的问题已回答
Web 3.0设计工具：当前趋势
Web 3.0设计灵感：汲取教训
结论：从这里去哪里

你是否注意到如今的一般网站有什么不同？即使在几年前, 网站的设计方式也发生了一些变化。许多人称此为Web 3.0的到来-Web设计的新时代。
从更大的角度看, Web 3.0完全与数据及其管理有关。我们生活在一个信息时代, 随着数据量的扩展, 管理信息的需求也在增长。
你之前已经听说过区块链, 以及短语Decentralized Web。
你还会听说有人希望从Google甚至Facebook等公司手中夺走权力, 这些公司近年来与隐私相关的问题很多。

文章图片
大型企业可能至少使你现在的生活更轻松, 但是Web 3.0始终寄希望于更好的隐私规则和高级数据管理。插图：Rytis Jonikas
人工智能(AI)和机器学习(ML)呢？
这些都是真正的技术, 以一种或另一种形式并入现代网络。目标很简单, 可以个性化用户体验并提高Web的可访问性。
但是…
这篇文章与这些技术无关虽然我知道上述所有技术都与当今时代格外相关, 但我的这篇文章的重点是Web Design 3.0。
换句话说, 过去五年来网站发生了什么变化, Web 3.0对网站设计方面的变化有何变化？
这是Web曾经的样子：

文章图片
经典网站1.0
在2000年代中期, 我们开始看到Web 2.0的出现-看起来像这样：

文章图片
Web 2.0-平滑网站设计的常用方法。
但是, 与我们在Web 3.0设计中看到的相比, 这没什么了：

文章图片
Web 3.0 —独特的颜色, 形状, 完美的像素对齐等等！有问题的网站：Droplet Health
网页设计的新纪元强调了完美的精确度, 有影响力的配色方案以及与整体设计互补的新设计元素。
那么, 我们如何到达这里, 你需要知道什么？
什么是Web Design 3.0：你的问题已回答在本节中, 我将重点关注以下问题：

Web 3.0网站与往年有何不同？
为什么设计师要使用这么多的形状和其他设计元素？
页面构建者是否跟上趋势？

回答完这些问题后, 我们将介绍最先进的设计工具以及两个平台, 在这些平台上你可以找到设计灵感。
因此, 让我们继续第一个问题。
＃1：Web 3.0网站与往年有何不同？

文章图片
我想说, 近年来最重大的变化是添加了创意元素。
使用形状和曲线之类的背景元素来施加特定的设计导航路径时, 设计师变得更加舒适。
如果使用正确, 形状和斑点可以帮助突出有价值的内容, 同时提供令人愉悦的UI(用户界面)。
最重要的是, Web 3.0设计总共使用了更多的插图和视觉内容。不仅要丰富页面, 而且经常要说明特定的产品或原因。

文章图片
看到这样的设计, 你就会知道特定的公司已经在努力工作, 以使用户体验令人满意。
在2018年末, MailChimp重塑了他们整个网站的品牌, 他们选择引入的一件事是插图的使用。
以下是你需要考虑使用插图的三大原因：首先, 插图能吸引访问者的注意力, 而这一点并不重要。

把复杂变成简单。传统上, 网页设计师将依靠头条新闻解释其产品。如今, 插图可以为你完成大部分工作。你可以围绕产品及其功能设计整个插图集。毕竟, 视觉学习是一回事！
品牌形象。你使用的插图风格可以帮助提升正面的品牌形象。插图可以展示不同的品牌价值, 优势和品质。仅靠文案写作是无法做到的。
视觉特征。每个品牌都不一样。借助视觉效果, 你可以描绘出一种使你与众不同的身份。

这也适用于图标和动画之类的东西。两者都需要稍微多一些的个人工作(最好是由图形设计师完成), 但是回报是存在的！
第三大变化是版式。

文章图片
字体一直是任何设计的重要组成部分。如果你不相信, 我就向你提出挑战, 要求将你网站上的字体更改为完全随机的字体。
好的排版所带来的差异是巨大的。自从Web 3.0网站进入主流以来, 各种各样的字体也是如此。
你可以纯粹通过使用简单的网页设计来摆脱使用的字体类型。我建议为Typewolf添加书签。

文章图片
该网站是所有排版和字体的金矿。耶利米·肖夫(Jeremiah Shoaf)负责。他已经维护了他的网站多年, 并且在他的网站上有成千上万的不同列表。
此外, 他撰写指南并定期维护他的” 每日站点” 目录。每当我从事一个新项目时, Typewolf都是我访问的第一批站点之一。
通过学习排版及其对网页设计的影响, 你可以节省大量时间来使设计更专业。
＃2：为什么设计师要使用这么多的形状和其他设计元素？

文章图片
不仅是由专业人员设计的网站都采用了这种新趋势。大多数现代WordPress主题和框架也旨在实现这些趋势。
但是, 为什么形状以及它们如何使网站设计受益？两个主要因素是美学和极简主义。形状和其他几何元素有助于将整个设计整合在一起, 从而确保流畅的流程和一致的用户体验。
传统上, 部分将单独使用单独的颜色进行划分, 有时甚至根本不使用任何颜色。

文章图片
在此示例中, 你可以看到简单插图的使用如何丰富了这种简约的设计和支持的背景图案。反过来, 这有助于强调主要导航元素的可读性。
你还可以使用辅助背景元素来突出显示重要内容, 例如：

文章图片
总而言之, 这是一致性和创造性思维的结合。如上所示, 背景形状可以帮助实现色彩心理, 以进一步增强用户体验。
在文章的后面, 我们将介绍最受欢迎的网页设计灵感网站。在那你会看到在网页设计中实现几何形状的不同技术。
＃3：页面构建者是否跟上趋势？

文章图片
不仅仅是Visual Composer和Elementor等页面构建器可以帮助你构建更好的目标页面。 Squarespace, Webflow和Weblium等品牌也在网站构建器领域取得了长足的进步。可以肯定的是, 所有这些设计工具都在遵循网页设计的最新趋势。
Elementor的下载量已超过2500万, 它正在不断发展其组件库, 使其包含构成现代Web的元素。 Weblium使用AI帮助没有经验的网站管理员创建视觉上令人惊叹的网站。
最好的部分是, 你不必编写任何代码。现代化的页面构建器无需任何技术即可提供基于网格的布局。

文章图片
你可以使用拖放工具创建新的行, 节并调整各个组件的大小。或者, 你可以完全避免这种情况, 并使用预构建的模板。
不用说, 学习HTML和CSS以及学习矢量艺术和通用图形设计仍然受到极大的鼓励。页面构建器很容易出现效率低下的问题, 这只能通过深入研究代码来解决。
Web 3.0设计工具：当前趋势在早期, 网站是基于你必须在纸上设计的线框和草图构建的。 Photoshop帮助减轻了这一点, 但肯定不能缓解我们如今拥有的工具。
现代设计工具特别关注设计网站和移动应用程序的想法。这为像素完美的设计打开了大门, 它可以将你的某些设计导出为现成的网站。

文章图片
定制设计后, 你可以专注于自己编写代码或使用页面构建器来实现该设计的近乎完美的复制。
这里是将使一切变得不同的工具。
＃1：素描

文章图片
Sketch是Mac OS的独特设计工具, 可以说是市场上最好的数字设计工具之一。即使仅限于一种特定的操作系统。
使得Sketch如此受欢迎并受到追捧的原因之一是, 它提供了数字设计所需的几乎所有内容, 包括设计网站, 移动应用程序, 矢量图形, 还包括原型制作以及用于附加功能的外部插件。。
就个人而言, 我真正喜欢Sketch的一件事就是它是一款非常强大的软件。这是在寻找市场上的其他选择。 Sketch代表了专业构建软件的标准。
就网页设计而言, 我的意思是, Sketch令人兴奋的功能之一是它旨在支持网站设计。因此, 你可以创建网格, 可以创建多个图层, 等等。

文章图片
网上有成千上万个Sketch赠品。你无需任何经验就可以开始你的W??eb设计职业。
在许多方面, 它类似于Photoshop, 但用于网页设计。它不包括编辑照片的一般功能, 但可以提供编辑矢量图形, 插入图像, 管理字体, 管理页面大小, 创建其他网格所需的一切。
如果你现在浏览的是现代网站, 尤其是某些大品牌的网站, 那么有99％的时间是使用Sketch设计网站的, 因此在专业设计师中它是众所周知的。
而且, 如果你是新手并且希望学习, 请查看此在线课程。
＃2：疯狂

文章图片
如前所述, Sketch专为MacOS构建。幸运的是, Icons8亲自为Windows用户创建了一个替代方案。最棒的是, 它是完全免费的。
Lunacy是基于Windows的矢量编辑工具, 已从Sketch中汲取了很多启发。它具有完整的功能, 可以作为单独的矢量编辑软件使用, 但也支持Sketch文件。
因此, 如果你下载任何使用Sketch构建的项目, 则可以在Lunacy中使用它们。最后但并非最不重要的一点是, Lunacy受社区支持。意思是, 你可以请求他人提交的功能并对其进行投票。
一切都是为了简化网站设计过程。
＃3：无花果

文章图片
最后一个主要的网页设计工具是Figma。碰巧的是, Figma还是Sketch的紧密竞争对手。并且, 它是完全免费使用的。它是为浏览器构建的, 但也提供了桌面应用程序。
由于它是免费的并且具有大量功能, 因此Figma也是我本人最常使用的应用程序。用户界面自然, 零开销。所有按钮和功能均经过精心设计, 可让你无缝创建定制设计。
作为附带说明, 我也喜欢将Figma用于任何种类的常规矢量工作。无论是创建引号, 新按钮样式, 还是其他所有内容。
Web 3.0设计灵感：汲取教训你无需参加UX课程即可学习出色的设计原则。你所需要的只是访问一些启发性网站, 你将很快了解趋势。
以下部分致力于帮助你为即将到来的Web 3.0项目找到最佳的设计灵感。
使用列出专业设计的网站可以帮助鼓励你将来做出更好的设计选择。
＃1：拉帕忍者

文章图片
Lapa ninja必须成为我最喜欢的灵感网站之一。我喜欢它, 因为它列出的网站类型以及它如何跟上网页设计中发生的所有最新情况。
坦率地说, 实际上没有其他网站可以做到这一点。最重要的是, 他的数据库中已经有2000多个列表。因此, 你不必等待添加新设计。我真正喜欢这个特定平台的另一件事是, 你实际上可以按类别浏览一个或多个单个网站及其设计。
它不仅是你认识的人, 博客或企业, 而且实际上你可以从特定类别中进行选择, 例如投资组合, 医疗保健和不同类型的行业。因此, 你可以真正缩小搜索范围。

文章图片
除此之外, 它的浏览非常简单, 并且包含了我们在此特定文章中一直讨论的大部分内容。
查看各个列表, 可以很容易地看到我们现在在网页设计中看到的变化。
因此, 这是宝贵的资源, 可以偶尔访问, 或者在你停留在设计上或打算设计新的东西时访问。
＃2：OnePageLove

文章图片
一页网站本质上是没有其他页面的网站。有些人将其称为登陆页面, 但大多数人将其称为一页网站。它们比你想像的要普遍得多。而且OnePageLove可能是对此类网站进行适当曝光的最佳网站。
与Lapa Ninja相似, 你可以将搜索范围缩小到特定类别。每个清单都包括一个完整的页面截图和有关作者的一些详细信息。
除此之外, 你还可以浏览自己喜欢的网站, 并查看任何引起你注意的网站。我想不起来有多少次我从OnePage Love列出的网站中借鉴了灵感。就是那样！
＃3：Awwwards

文章图片
最后但并非最不重要的一点是, 我们有Awwwards。可能是世界上最古老的运行网站启发网站。但是, 设法保持年度一致性。
Awwwards背后的想法是人们提交网站设计, 然后成员对自己的收藏进行投票。之后, Awwwards委员会将进行个人投票, 并在特定时间范围内选出少数获胜者。
通过成为赢家, 你可以在网站上添加特殊徽章, 以突出你对设计的理解。
就灵感而言, 此网站上列出的许多设计都是极其专有的。这是真正有创造力和雄心勃勃的设计师的游乐场。
值得收藏并每周检查一次。
结论：从这里去哪里网站设计是一个竞争激烈的行业。并不是因为人们想要制作比其他网站更好的网站。就UI和UX而言, 它最具竞争力。
寻找一种新的方法来吸引人们的注意力可能意味着更好的销售结果。此外, 通过提供可靠的用户体验, 你会发现人们更频繁地访问你的网站。
【Web 3.0（Web设计的新时代已经来临）】自2018年以来, 大量涌入的设计偏向于设计的视觉效果。因此, 期望在这一领域看到更多的变化和补充。