2021.（加个“1”感觉不好吗？！”）

在世界适应新的一年的同时，设计师也在迎接新的一年的设计。 在经历了这么多未知的一年之后，我们开始看到一些趋势，这些趋势将我们带回到舒适的过去，同时强调着眼于未来的用户体验。

从在线工作到在线购物再到在线社交，人们与互联网的互动比以往任何时候都多，设计师们正在采用大胆的设计来突破我们共同体验的界限。

虽然这绝不是详尽无遗的，但以下是我们在 2021 年看到的 11 个顶级网页设计趋势：

1. 具有水平滚动的页面布局
2. 自定义光标
3. 3d 对象
4. 出色的电子商务体验
5. 具有粗线宽的可见网格线
6. 网站上的用户偏好选项（不仅仅是应用程序）
7. 从构建网站到构建解决方案的转变
8. 有趣的插图
9. 排版作为设计，而不仅仅是文字
10. 作为背景元素的几何形状
11. WordPress 作为 CMS

1. 水平滚动的页面布局

长滚动网站和视差设计已经流行了好几年了。 随着我们进入 2021 年，我们开始看到设计师使用水平移动来“减少”页面长度的方向转变。

虽然用户的物理体验没有什么不同（您通常仍然上下滚动鼠标），但视觉体验提供了一些意想不到的有趣的东西。 它创建了一个跨网站的旅程，其中用户并不完全知道它将把他们带到哪里，现在我们已经为网站开发了这样的正常模式，这种情况很少见。

该网站是为自由电影导演 Jony Guedj 设计的，她在网站的主要部分使用水平滚动条来展示她的作品。 底部的彩色条会随着您的鼠标移动，这是一种确定您在页面上“位置”的有用方式。

LinkSture 是一家专注于设计和电子商务解决方案的机构，它也使用水平滚动在其主页上显示其产品组合。 但是，它在页面的下方，在滚动时使用垂直和水平运动的组合。

We Virtually Are 是一家虚拟现实工作室，它使用水平移动来让你感觉自己在他们网站上的同一个地方，而所有内容都在变化。 这与您对大多数网站的期望完全不同，这对于一家专注于创造新现实的 VR 公司来说是一种合适的体验。

2.自定义光标

我特别喜欢这种趋势，因为它感觉既熟悉又新鲜。 向 2000 年代中期的自定义光标致敬（承认吧，您在 Myspace 个人资料中使用过一个！），自定义光标正在优雅地卷土重来。

从最小的几何形状到完全交互式的网页体验，自定义鼠标光标正在成为一种为您的品牌添加一些重复的小方法。 许多代理机构正在使用它来重复其徽标中的形状或颜色，或者作为吸引用户访问网站的一种方式。

在精品设计机构 Rox Studios 的这个例子中，鼠标就是那个黄色的圆圈。 它会根据您悬停的背景内容而变化，变成一个 CTA 按钮本身来“查看”项目。

看到第一张照片中那张有趣的小脸了吗？ 当您登陆概念工作室的网站时，您的鼠标。 您会在整个站点中看到一些类似的生物，并且还会观察不同部分的光标变化。

在第二个屏幕截图中，鼠标变成了一根魔杖，当你四处移动时甚至会掉落一些小颗粒。 它从不破坏内容，而是在您体验他们的网站时添加一些奇思妙想和互动的元素。

看到那个小白圈了吗？ 这是您在 Etienne Pharabot 网站上的鼠标，该网站是位于法国的前端开发人员。 然而，它的意义远不止眼前所见。 我强烈建议滚动浏览整个网站的各种句子。 （一些表情符号惊喜等待着！）

Impero 是一家创意机构，它使用一个黄色的大圆圈作为光标，很好地落在您悬停的任何文本后面。 他们还利用它作为帮助用户浏览网站的机会，例如在水平滚动部分上显示“拖动”。 （结合其中一些趋势的好方法！）

3. 3d 物体

虽然扁平化设计统治了很长一段时间，但我们开始看到网页设计元素的三维变化。 这可能是受到虚拟和增强现实兴起的启发，它们渗透到我们的二维浏览体验中。

这个来自意大利代理公司 Chip&Byte 的色彩缤纷的例子为他们的网站增添了有趣的元素。 当您移动光标（小灰色圆圈！）时，形状也会移动，增加维度感。

一家名为“Yellow Telescope”的公司在他们的主页上自豪地展示了一台 3d、黄色的望远镜，这感觉很对！ 当您第一次登陆该网站时，您会看到它“自行构建”，因为每个部分都已到位，这可能是他们如何帮助客户建立可靠实践的同义词。

Beans Agency 使用 3d 趋势使他们的豆子栩栩如生，并在整个网站的多个场景中展示它们。 这种趋势是一种给角色带来动感的好方法，或者在抽象的平面插图上给人一种“现实”的感觉。

没有完全按照 3d 趋势出售？ 你总是可以采取一种微妙的方法，比如 C-HM Conseil。 单色背景上的优雅斜面和发光倾向于材料外观而不是霸道。

4. 出色的电子商务体验

毫不奇怪，在线零售在过去一年中急剧增长，这也带来了更多有意、更好的购物体验。 毕竟，随着越来越多的竞争对手争相上网，商店不能仅仅存在于互联网上。 它需要优化并优先考虑用户体验，以防止购物者反弹。

Minsom 是一家宠物商店，可以轻松地直接从其主页购买物品和服务。 使用大按钮和简单的类别，导航很容易，因此您可以快速结帐，而不是花太多时间在网站上搜索。

这家名为 Molly Dooker 的葡萄酒商店不仅是一次美丽而富有艺术气息的现场体验，而且是一次顺畅的购物体验。 您可以轻松浏览葡萄酒、预览购物车中的商品，然后进行购买——同时享受令人愉悦的网站设计。

Zoya's Pantry 是一家健康有机食品店，可优化购物体验，以便将多个商品添加到您的购物车中。 当您单击“添加到包”时，您的窗口不会改变，因此您可以继续浏览而不会丢失您在页面上的位置。 然后要查看您的购物车，您只需将鼠标悬停在顶部导航中的图标上（而不是点击到单独的页面）。

您会在 The Cool Club 网站上注意到 2021 年的一些设计趋势。 从轻松的电子商务体验到他们产品之一的 3D 展示（纸牌游戏！），您可以轻松查看您购买的商品，然后将其放入购物车。 （甚至就在首页的首屏！）

5.粗线宽的可见网格线

长期以来，网格在网页设计中一直很有用，但我们开始看到一种趋势，即赋予它们一种流行的颜色或粗线条。 设计师并没有将它们保持最小化，而是倾向于他们在页面上构建的自然形状，并使他们的网格线脱颖而出，以实现大胆的几何外观。

Eat Sleep Work 使用彩色线条来帮助他们的 Windows 式桌面栩栩如生。 虽然它们不太厚，但大胆的蓝色可以使网格脱颖而出并在整个网站上创建有意的结构。

这个软件开发工作室 OSM 在整个站点中以一些有趣的方式使用网格线。 正如你从背景中看到的那样，他们的品牌倾向于粗线条和几何风格，并以多种不同的方式重复这一点，包括网格布局。

不确定粗体网格线是否适合您的网站？ 你可以尝试像设计师和艺术总监马睿那样的“负空间”方法。 它比用对比色强调网格更微妙，但宽间距仍然允许几何感觉闪耀。

6. 网站上的用户偏好选项（不仅仅是应用程序）

创建独特的、个性化的体验变得越来越流行，而网页设计师这样做的一种方式是在网站设计中构建选项。 从浅色模式与深色模式之类的偏好到使用哪种语言之类的可访问性选项，这种趋势都是为了让用户更好地控制他们的网站体验。

当您加载 Hoang Nguyen 的网站时，您会立即看到音频选项。 默认设置为“关闭”，因此即使网站在您做出选择之前加载，它也不会吓到您（尽管设置为“开启”也不会；这是非常平静的音乐！） . 这使您能够立即自定义您的体验，如果您稍后改变主意，则在网站顶部的徽标旁边有一个声音选项。

Sofia Papadopoulou 的网站与此类似，它提供音频设置，但它们被固定在右下角（传统上您可能会在此处找到一个粘性返回顶部按钮。）默认设置再次设置为“关闭”，尽管仅包含平静器乐的声音（没有疯狂）。

这个来自法国创意机构 Studio OUAM 的示例可以让您在浏览他们的网站时轻松选择要使用的语言。 列在菜单顶部，他们提供法语或英语选项，为他们的两个主要受众量身定制他们的网站。

7. 从构建网站到构建解决方案的转变

尽管网页设计与以往一样重要（即使在冠状病毒时代甚至更加重要），但代理商开始将重点转向完整解决方案的销售，而不是单独的可交付成果。 例如，创意工作室可能不会称自己为网页设计机构，而是将自己称为“品牌体验合作伙伴”，或者其他指代他们所提供产品的全部价值（不仅仅是有形部分）的东西。

这是 Soda Studios，一个“创新合作伙伴、设计工作室和实验室”。 他们不太关心列出他们提供的每一项单独服务，而是专注于为客户提供整体解决方案。

BORN Group 是一家“以人为本的体验驱动的全球数字机构”。 他们确实有一个服务页面，可以详细了解他们所提供的服务，但即便如此，它也侧重于品牌体验、服务设计和创新等服务的大局。

Kappow 是一家专注于网页设计的数字机构，但您不一定从他们的主页上知道它。 相反，他们分享他们的工作真正为客户提供的价值：业务增长、成功的产品发布以及相对于竞争对手的优势。 （谁不想要这一切？！）

8. 有趣的插图

插图的兴起几年来一直在增加，我们还没有看到它会在任何地方发展。 这是向您的网站添加“人”元素的好方法，特别是如果您无法接触到优秀的摄影师并且想要避免库存照片。 或者，如果您/您的代理机构专注于插图，这是展示您作品的完美方式！

在品牌和数字机构 RUYA 的网站上浏览真是一个美妙的世界。 他们已经为他们的插图提供了他们主页的全宽，一旦你加载页面，它就会非常引人注目。 更好的是：当您将鼠标悬停在图像的某些部分上时，您会发现它用作导航元素，帮助您了解更多关于他们的代理、服务和工作的信息。

这些来自网页设计机构 UPQODE 的古怪插图与动画相结合，让它们真正栩栩如生。 您可以看到它们改变颜色、大小并相互交互，从而获得有趣的主页体验。

如果完整的插图不太适合您的品牌，则始终可以选择将它们用作口音，就像 No Clima 一样。 您会在整个网站的照片上找到“涂鸦”，赋予其手工制作的艺术感。 如果您对两者都感兴趣，这也是结合插图和摄影的好方法！

9. 排版作为设计，而不仅仅是文字

有时文字意味着实用，有时它们意味着艺术。 而今天的网页设计师并不害怕将它们用于第二个目的，更多的是作为设计元素而不是段落或正文。

虽然它仍然清晰易读，但 Dystopian Creatives 主页上的文字以引人注目的方式模糊了实用和视觉之间的界限。 它感觉更像是一个背景图案而不是一个段落，并以有趣的方式与页面上的其他图像交互。

Loop 是一家提供全方位服务的创意机构，在其主页上使用字体作为背景元素，并在顶部使用更易于阅读的段落。 因为背景字体太大（以及漂亮的黄色阴影），您的眼睛可以阅读两组文本而不会感到困惑。 我也喜欢它提示用户滚动来回答问题的方式，“为……设计什么？”

当您向下滚动此站点以查看 Stone & Style 时，您会看到每个标题都是正常的文本块，但也会在背景中以大衬线字体回显，从页面流血。 这是一种重复信息而不听起来重复的好方法，并在您尝试阅读背景文字内容时（在您发现模式之前）为网站增添一丝优雅的神秘感。

10. 几何形状作为背景元素

当涉及到您的网站设计时，不要想太多。 虽然几何形状可能感觉过于“简单”，但它们既熟悉又不复杂（这两种品质都有利于用户体验！）。 有了如此强大的构建模块，您可以做很多事情来将您的代理机构的品牌放在他们身上，所以他们感觉起来一点也不简单。

这个来自fourpillars 的示例使用简单的形状（基本上只是块和点！）与基于用户滚动的运动配对，以创建动态的几何体验。 当您向下滚动页面时，您会看到积木自行构建和分解，不断变化以继续讲述故事。 （如果你想休息一下，那里可能还有一个“乒乓”游戏复活节彩蛋！）

虽然 Oh Happy Dani 上五颜六色的椭圆形形状在技术上可能不是几何形状，但它们确实达到了同样的俏皮效果。 搭配她的品牌颜色，它们在她的英雄形象背后构成了一个很好的框架，你会看到它们以新的方式在整个网站上重复出现。

通信工作室 Blab 在其主页上也使用了几乎几何的形状。 当您停留在页面上时，这些圆形/椭圆形/蛋形图案会增大和缩小，然后在您开始滚动时移到一边。 它们让我想起了扬声器发出的声音，这与“你的声音更响亮”页面上的副本完美搭配。

这个色彩缤纷的工作室 illo 在主页上的主要信息后面使用几何形状。 当您将鼠标悬停在带下划线的短语上时，其中一个形状将移动以显示其中的图像，这是展示其第一个焦点 - 运动设计的巧妙方式。

11. WordPress 作为 CMS

最后但同样重要的是，这些网站是如何构建的。 （毕竟，如果后端不能满足您的需要，那么前端看起来有多棒都没有关系！）

WordPress 现在为超过 40% 的互联网提供支持。 这几乎是所有网站的一半（包括那些不是建立在 CMS 上的网站），这可能是由于 CMS 多年来真正变得非常灵活。

不卖吗？ 本综述中的所有网站均由 WordPress 提供支持，为您提供一个很好的示例，说明您可以使用它构建的所有内容！ 从帮助您快速入门的精美主题到帮助您扩展功能的 55,000 多个免费插件，WordPress 几乎可以做任何事情。

您如何看待 2021 年的这些网页设计趋势？ 您是否同意自定义光标的兴起，或者认为 3d 设计只是一种时尚？ 在下面的评论中让我们知道您喜欢哪些趋势，或者您认为此列表中缺少哪些趋势！