2021年网页设计趋势
时间：2023-10-06 23:18:01 | 来源：网站运营
时间：2023-10-06 23:18:01 来源：网站运营
2021年网页设计趋势：当世界适应新的一年时，设计师也拥抱新的一年。在经历了这么多年的未知数之后，我们开始看到趋势，使我们回到舒适的过去，同时强调面向未来的用户体验。
从在线工作到在线购买到在线社交，人们与互联网的互动比以往任何时候都多，而且设计师们正在拥抱大胆的设计，以推动我们共同体验的界限。
以下是2021年我们看到的11种优秀的Web设计趋势：
- 水平滚动的页面布局
- 自定义光标
- 3D物体
- 出色的电子商务经验
- 粗线粗的可见网格线
- 网站（不仅是应用程序）上的用户首选项选项
- 从建设网站到建设解决方案的转变
- 俏皮插图
- 字体设计，不仅仅是文字
- 几何形状作为背景元素
- WordPress作为CMS
1.水平滚动的页面布局
长滚动网站和视差设计已经流行了好几年了。当我们进入2021年时，我们开始看到设计师使用水平移动来“减少”页面长度的方向变化。
尽管用户的物理体验没有什么不同（您通常仍会上下滚动鼠标），但视觉体验却带来了意想不到的有趣的事情。它创建了一个遍历整个网站的旅程，用户并不完全知道该去哪里，这很罕见，因为我们已经为网站开发了这种正常的模式。
这个网站是自由电影导演乔尼·古杰（Jony Guedj）的网站，网站的主要部分使用水平滚动条来展示她的作品。底部的彩色条与鼠标一起移动，这是确定页面上“位置”的有用方法。
专注于设计和电子商务解决方案的代理商LinkSture也使用水平滚动条在其首页上显示其投资组合。但是，它在页面的最下方，同时滚动时同时使用了垂直和水平运动。
虚拟现实工作室We Virtually Are使用水平移动来使您感觉自己像在他们网站上的同一位置，而所有内容都在变化。这与您对大多数网站的期望完全不同，这是专门致力于创造新现实的VR公司的合适体验。
2.自定义光标
我特别喜欢这种趋势，因为它既熟悉又新颖。向2000年代中期的自定义游标致敬（承认，您在Myspace个人资料上使用了它！），自定义游标正悄然卷土重来。
从最小的几何形状到完全交互式的网页体验，自定义鼠标光标已成为向品牌添加一些重复的一种小方法。许多代理商正在使用它来重复其徽标中的形状或颜色，或以此为用户吸引网站的一种方式。
在精品设计机构Rox Studios的此示例中，鼠标是那个黄色圆圈。它会根据您悬停的背景内容而变化，它本身会变成一个CTA按钮来“查看”项目。
在第一张图片中看到那个有趣的小脸吗？登陆Concept Studio网站时的鼠标。您会在整个站点中看到一些类似的生物，并观察光标在不同部分的变化。
在第二个屏幕截图中，鼠标变为一根魔杖，当您四处移动时，魔杖甚至会掉落一些小颗粒。它从不破坏内容，而只是在您体验其网站时增加了一种奇思妙想和互动性。
看到那个小白圈吗？这就是位于法国的前端开发人员Etienne Pharabot的网站上的鼠标。但是，它所具有的不仅仅是眼神。我强烈建议您滚动浏览整个网站上的各个句子。（一些表情符号正在等待惊喜！）
创意机构Impero使用一个大的黄色圆圈作为光标，该光标恰好位于您悬停在其上的所有文本的后面。他们还以此为契机，帮助用户浏览站点，例如在水平滚动部分上显示“拖动”。（结合一些这些趋势的好方法！）
3. 3d对象
尽管扁平化设计占据了相当长的一段时间，但我们开始看到网页设计中的元素发生了三维变化。这可能是受到虚拟现实和增强现实技术的兴起的启发，并渗入我们的二维浏览体验。
来自意大利代理商Chip＆Byte的这个生动的例子为他们的网站添加了一个有趣的元素。随着光标的移动（灰色小圆圈！），形状也随之移动，从而增加了尺寸感。
一家名为“ Yellow Telescope ”的公司在其首页上自豪地展示了一个3d的黄色望远镜，这才是对的！当您首次登陆该网站时，您会看到它在每一块都落入适当位置时“自行构建”，这也许是他们如何帮助客户建立可靠实践的代名词。
Beans Agency使用3d趋势使它们的豆子栩栩如生，并在站点中的多个场景中显示它们。这种趋势是使角色动起来或通过抽象的平面插图给人“逼真的”感觉的好方法。
并非完全按照3D趋势出售？您总是可以采用微妙的方法，例如C-HM Conseil。单色背景上的优雅斜面和发光效果使材料外观更加优美，而又不至于过于霸道。
4.出色的电子商务经验
毫不奇怪，在线零售在过去的一年中急剧增加，这也带来了更多有意的，更好的购物体验。毕竟，随着越来越多的竞争者争相将他们的网站上线，仅在互联网上存在一家商店已不再是可以接受的。它需要进行优化并优先考虑用户体验，以防止购物者反弹。
宠物商店Minsom可以轻松在其主页上同时购买商品和服务。使用大按钮和简单类别，可以轻松导航，因此您可以快速结帐，而不必花费太多时间在站点周围进行搜索。
莫莉·杜克（Molly Dooker）这家葡萄酒商店不仅是一个美丽而艺术的现场体验，而且还是一个购物顺畅的地方。浏览葡萄酒，预览购物车中的内容，然后购买，都非常容易，同时还可以享受令人愉悦的网站设计。
Zoya的Pantry是一家健康的有机食品商店，可为您的购物车添加多个商品，从而优化购物体验。当您单击“添加到购物袋”时，您的窗口不会更改，因此您可以继续浏览而不会丢失页面上的位置。然后，要查看购物车，只需将鼠标悬停在顶部导航中的图标上（而不是单击跳出到单独的页面）。
您会在The Cool Club网站上注意到2021年的一些设计趋势。从轻松的电子商务体验到他们的产品之一的3D显示（纸牌游戏！），您都可以很容易地看到您要购买的商品，然后将其放入购物车中。（甚至在首页上的折页上方！）
5.可见的网格线，粗线粗细
网格在网页设计中已经有用了很长时间了，但是我们开始看到一种趋势，即为它们提供流行色或粗线宽。设计师没有使它们最小化，而是倾向于使用它们在页面上构建的自然形状，并使网格线突出以实现大胆的几何外观。
Eat Sleep Work使用色彩鲜艳的线条来帮助使他们像Windows的桌面栩栩如生。尽管它们不太厚，但是粗体蓝色可以使网格脱颖而出并在整个站点上创建有意的结构。
这个软件开发工作室OSM以各种有趣的方式在整个站点上使用网格线。正如您从背景中看到的那样，他们以自己的品牌倾向于粗线粗细和几何样式，并以多种不同方式（包括网格布局）重复进行此操作。
不确定粗体网格线是否适合您的网站？您可以尝试使用“负空间”方法，例如设计师和艺术总监马瑞（Rui Ma）。它比用对比色强调网格要微妙得多，但是宽的间距仍然可以使几何感觉闪耀。
6.网站（不仅是应用程序）上的用户首选项选项
创建独特的，个性化的体验正变得越来越流行，而Web设计人员做到这一点的一种方法是在网站设计中加入各种选择。从诸如亮模式与暗模式之类的首选项到诸如使用哪种语言的可访问性选项，这种趋势都在于向用户提供对其站点体验的更多控制权。
当您加载Hoang Nguyen的网站时，您会立即看到音频的选项。默认设置为“关闭”，因此即使站点在您做出选择之前就已加载，也不会使您大吃一惊（尽管即使将其设置为“打开”，也不会让您惊叹；这是非常平静的音乐！） 。这使您能够立即自定义您的体验，并且如果您以后改变主意，则可以在网站顶部的他的徽标旁边找到声音选项。
Sofia Papadopoulou的网站类似，它提供音频设置，但它们固定在右下角（传统上您可能会在此找到一个粘滞的自上而下的按钮。）尽管该默认设置再次设置为“ off”，尽管声音只包含镇静器乐（没什么疯狂的）。
这个来自法国创意代理商Studio OUAM的示例使您可以轻松地选择浏览网站时要使用的语言。在菜单顶部列出的菜单中，他们提供了法语或英语选项，从而针对两个主要受众量身定制了他们的网站。
7.从构建网站到构建解决方案的转变
尽管网页设计比以往任何时候都重要（即使在冠状病毒时代更为重要），但代理机构也开始将重点转移到全解决方案销售上，而不是单个可交付的产品上。例如，创意工作室可能不称自己为Web设计代理商，而是称自己为“品牌体验合作伙伴”，或称其提供的全部价值（不仅仅是有形的部分）。
这就是Soda Studios，这是“创新合作伙伴，设计工作室和实验室”。他们不是太在乎列出他们所提供的每项单独服务，而是专注于为客户提供整体解决方案。
BORN Group是“以人为本的经验驱动的全球数字代理商”。他们确实有一个服务页面，可以详细了解所提供的服务，但即使如此，它也着眼于更广阔的前景，提供品牌体验，服务设计和创新等服务。
Kappow是一家专注于网页设计的数字代理商，但您不一定会从他们的主页上知道它。相反，他们分享了他们的工作真正为客户提供的价值：业务增长，成功的产品发布以及相对于竞争对手的优势。（谁不想要所有这些？！）
8.俏皮的插图
插图的兴起已经增长了几年，但我们还没有看到它的发展。这是在网站上添加“人为”元素的好方法，尤其是在您无法与优秀的摄影师接触并希望避免使用库存照片的情况下。或者，如果您/您的代理商专门研究插图，那么这是炫耀您的作品的理想方式！
在RUYA的品牌和数字代理机构的网站上浏览世界真是太好了。他们已经为插图提供了整个页面的宽度，从而在您加载页面后就成为了热门。甚至更好：将鼠标悬停在图像的各个部分上时，您会发现它充当导航元素，可帮助您了解有关其代理，服务和工作的更多信息。
这些来自网页设计机构UPQODE的古怪插图与动画相结合，使它们真正栩栩如生。您可以观看它们的颜色，大小以及相互之间的交互，从而获得有趣的首页体验。
如果完整的插图不太适合您的品牌，则总是可以选择使用它们作为重音符号，就像No Clima一样。您会在整个网站的照片上找到“涂鸦”，从而赋予其手工制作的艺术感。如果您想同时使用插图和摄影，这也是一种很好的方式！
9.版式不仅是文字，而且是设计
有时言语是实用的，有时言语是艺术。如今的网页设计师不怕将它们用于第二个目的，因为它更多的是设计元素，而不是段落或正文。
尽管仍然清晰易读，但反乌托邦广告素材首页上的文字却以引人注目的方式模糊了实际与视觉之间的界线。与段落相比，它更像是背景图案，并且以有趣的方式与页面上的其他图像进行交互。
全方位服务的广告素材代理商Loop在其首页上将类型用作背景元素，并在顶部使用了易于阅读的段落。由于背景字体大小很大（并且带有黄色的阴影），因此您的眼睛可以阅读两组文本，而不会感到困惑。我也喜欢它提示用户滚动的方式，以回答“为……设计什么？”的问题。
当您在此网站上浏览Stone＆Style时，您会看到每个标题都是正常的文本块，但还会在背景中以大衬线字体回显，从而使页面出血。这是一种在不听起来重复的情况下重复发送消息的好方法，并且在您尝试阅读背景文本所说的内容时（在发现模式之前），为网站增添了优雅的神秘感。
10.几何形状作为背景元素
当涉及到您的网站设计时，请不要考虑太多。尽管几何形状可能感觉太“简单”，但它们却是熟悉且不复杂的（两种品质都对用户体验有好处！）。有了如此强大的构建基块，您可以做很多事情来将代理商的品牌打上烙印，因此它们看起来很简单。
来自四柱的此示例使用简单的形状（基本上只是块和点！），并根据用户的滚动进行了移动配对，以创建动态的几何体验。向下滚动页面时，您会看到积木逐渐堆积并分解，不断变化以不断讲述故事。（如果您想休息一下，那儿可能还会有一个“ Pong”游戏的复活节彩蛋！）
虽然从技术上讲，“快乐大妮”上五颜六色的椭圆形形状可能不是几何形状，但它们确实可以达到相同的趣味效果。搭配她的品牌色彩，它们为她的英雄形象提供了一个很好的框架，并且您会在网站上看到它们以新的方式重复出现。
通讯工作室Blab还在其首页上使用了几乎是几何形状的形状。当您停留在页面上时，这些圆形/椭圆形/卵形的图案会增长和缩小，然后在开始滚动时会移到一边。它们使我想起扬声器发出的声音，该声音与“您的声音更大”页面上的副本完美匹配。
这个色彩缤纷的工作室illo在首页的主要信息后面使用了几何形状。当您将鼠标悬停在带下划线的短语上时，其中一个形状将移动以显示其中的图像，这是炫耀其第一焦点的巧妙方法-运动设计。
11. WordPress作为CMS
最后但并非最不重要的一点是，这些网站的建设方式。（毕竟，如果后端没有达到您所需的目的，那么前端的外观就无关紧要！）
WordPress现在为超过40％的互联网提供动力。这几乎是所有网站（包括非基于CMS的网站）的一半，这很可能是由于CMS多年来真正变得如此灵活的缘故。
不卖了吗？本综述中的所有网站均由WordPress提供支持，为您提供了可以使用它构建的一切的绝佳示例！从可以帮助您快速入门的精美主题到可以帮助您扩展功能的55,000多个免费插件，WordPress几乎可以做任何事情。
您如何看待2021年的这些网页设计趋势？您是否同意自定义光标的兴起，还是认为3D设计只是一种时尚？在下面的评论中让我们知道您喜欢的趋势，或者您认为该列表中缺少哪些趋势！
在线咨询
