2024 年,我们将看到更多机构采用极简设计。有些人正在尝试完全删除图像和突出的导航部分,依靠几行简单的文本来向访问者介绍他们的公司。
丹麦机构使用其主页的英雄部分来简单地描述其使命宣言。
这是一种现代、整洁的信息呈现方式,与使用动态图片、悬停动画和动画光标效果的作品集部分形成鲜明对比。
我喜欢什么:这种极简主义的方法确保访问者只获得最基本的信息。
9. 动画插图越来越多的公司开始聘请插画家和图形艺术家为其网站制作定制插图,因为这是较晚的插图之一ST网页设计趋势。
“插图可以很好地传达生活方式照片并不总是能够捕捉到的更复杂的想法,”Red Ventures 的视觉设计师
这些插图通常是动画的以增加交互性。例如,如果您将鼠标悬停在网站上的一幅插图(由澳大利亚数字机构设计)上,该插图和周围区域的插图将会晃动。
然后,只有您悬停的插图会继续以小圆圈移动。这种设计也很实用:每个插图代表右侧导航菜单中的一个类别。
我喜欢什么:动画插图有助于传达复杂的想法并为网站增添一些个性。
10. 极简主义一些设计师和代理商将经典的极简主义发挥到极致,挑战网站外观的惯例,只展示最基本的必需品。这种网页设计趋势被称为“超简约”alism”对于用户体验和加载时间来说非常有用。
该网站的颜色和设计很简单,使得他们提供的服务非常清晰。而冰山的形象,则让人放慢脚步,引起兴趣。
我喜欢什么:超简约主义可以对用户体验和网站性能产生积极影响。我们将其转移到以前的网站设计趋势的唯一原因是我们在世界各地的网站上更频繁地看到它。
11.混合水平和垂直文本将文本从通常的水平对齐方式中解放出来并将其垂直放置在页面上会增加一些令人耳目一新的维度。以极限运动视频制作人的这个例子为例,它在最小的页面上结合了水平和垂直文本对齐。
我们喜欢什么:混合水平和垂直文本违反了惯例,因此可以取悦和吸引一些用户。
12.几何形状和图案异想天开的图案和形状正在流行在网站上更频繁地出现,为原本由平面和设计主导的景观增添了一些天赋。加拿大设计工作室在其主页上使用大胆的图案字母。它们提供了更具艺术美感,引人注目且视觉上有趣。
我喜欢什么:几何形状和图案可以将访问者的注意力引导到某些产品或 CTA。
13. 3D设计今年,网站设计在为网站访问者创造身临其境的体验方面发挥了巨大作用。这就是 3D 艺术作品蓬勃发展的原因。
Adobe 让任何人都能轻松探索 3D 设计。业界最受欢迎的 3D 建模器是 ,但这需要更多专业知识。 也是一个不错的选择,因为它是一款免费的 3D 设计软件工具。
如果您想在网站上包含 3D 设计,但对项目的范围感到不知所措,Fiverr 和 UpWork 上有很多自由 3D 建模者。只需查看一些 .
这种风格有日系K的味道awaii,一种可爱文化,专注于童趣物品和柔和的色彩。
我喜欢的:这种设计既可爱又有趣,看起来很有趣,而且当您的客户的眼睛探索所有元素时,会让他们在您的页面上停留更长时间。
14. 破碎的网格虽然网格可以说是显示文本和图像的最有效方式,但破碎的网格继续进入主流网站并提供对规范的改变。
例如,查看 的网站。它的主页具有重叠的图像和文本块。它视觉上令人愉悦并且眼睛舒适。此外,它还为页面添加了动感,而没有缓慢加载的动画。
我喜欢什么:这种违反惯例的技术可以使标准网站页面或部分更加有趣。
15.有机形状锋利的边缘已被淘汰,曲线已成为主流。有机形状将在 2024 年主导网页设计。“有机形状可以帮助添加一些俏皮的元素”彭布罗克说。
在下面的示例中,英雄部分的有机形状具有装饰性,有助于强化品牌的身份和承诺。
我喜欢什么:有机形状增添个性和动感,而又不会分散对内容的注意力。
16. 网格线网格线在过去几年中开始出现,并且有充分的理由 - 它们给网站访问者一种秩序和简单的感觉。添加网格线使您的网站更易于理解,同时添加现代、视觉上有趣的美感。在 上,网格线用于创建看起来具有未来感的清晰布局。
我喜欢什么:这种趋势不仅具有视觉吸引力,还为您的网站带来了宝贵的组织感。
17. 受千年虫启发的设计2020 年开始的千禧年美学的复兴至少会持续更长时间。 2024 年,您将看到网站对令人垂涎的 Y2K 表示认可风格唤起怀旧感。即使是名人也会在他们的艺术家网站上传播美学——看看歌手和女演员,寻找健康的灵感。
我喜欢什么:这种俏皮的美学不会太严肃。
18. 剪贴簿美学如果您需要更多证据证明网站访问者正在怀旧,请考虑剪贴簿美学正在回归。但这与我们在 2010 年代初网页设计趋势出现时看到的流行剪贴簿美学不同。
今天的剪贴簿美学是一个更新的、热闹的版本。在某些情况下,它是交互式的。
我喜欢的:您现在可以让您的剪贴簿式网站变得栩栩如生。
19. 游戏化设计游戏化设计如今无处不在,使其成为今年最流行的网站设计趋势之一。游戏化是一个很好的主意,因为它为游客添加了人类情感的元素。
例如,当他们到达您的网站时他们拥有以独特、难忘的方式与您的内容互动的经验。这正是我们的意思。
我喜欢什么:这种有趣的趋势不仅仅是有趣 - 从用户参与度的角度来看,它是天才。
20.重视产品摄影2024 年是产品摄影在电子商务网站上占据主导地位的一年。从美容公司到服装品牌等,产品摄影将在 2024 年成为焦点。这个例子展示了让您的品牌产品保持在中心位置的影响力有多大。
我喜欢什么:访问者不必寻找您所销售商品的图片 - 从到达您网站的那一刻起,他们就会沉浸在其中。
21. 简约复古在 InDesign Skills 中,极简复古将成为 2024 年重要的平面设计元素。与印刷设计中的简约风格类似,极简复古侧重于复古调色板和字体风格。
简约复古可能不会立即看起来老派。相反,它巧妙地向过去几十年的不同方向致敬,例如 的这个设计。
我喜欢什么:这种趋势唤起了对过去广告的怀旧感。
22. 高飞无衬线字体高飞无衬线字体对于那些想要展示自己有趣而不是太严肃的品牌来说是理想的选择。这种乐观的字体受到卡通风格的启发,带有一丝复古的乐趣。
在您的内容或网站中包含 Goofy 无衬线字体时,请务必让它位于前面和中心,这样它就不必与其他元素竞争。 字体粗体且有趣。
我喜欢什么:这种字体是一种简洁的线条和简洁的异想天开的方法。
23. 科幻风格的设计科幻片现在正风靡一时,有很多新的科幻电影上映,所以我认为今年它会继续增长。为什么?使用这种网页设计趋势的品牌将自己定位为未来派,这使其成为科技品牌的有力选择。
明亮的色彩和金属色调可以帮助您实现这种外观,但不要害怕添加一点 80 年代复古风才能真正达成目标。马特·罗莫 (Matt Romo) 的设计一针见血。
我喜欢的:科幻风格的网页和品牌设计不惧怕色彩和科技相关元素。
24. 天然有机纹理自然纹理为有趣但简单的字体提供了绝佳的背景。选择与您的行业相关的自然纹理,帮助您的观众想象您的产品。就举个例子吧。
天然纹理还可以将您的公司定位为环保型企业或关心自然资源的企业。
我喜欢的:有机纹理为您的设计注入生动的触感和新的生命。
25. 用户体验虽然移动可用性是一种无处不在的趋势,但我预计到 2024 年,我们将看到用户体验 (UX) 进一步转变为关键网站设计趋势。
Ryan VonBergen,设计副总裁,在这里有一些深刻的见解,他说:“设计趋势是指导方向的一个很好的起点,但前沿并不总是意味着好的。您还希望确保您的审美选择增强可用性和可访问性,从而为所有人创造良好的体验。”
进一步推动这一趋势,更多公司将优先考虑自助部分,让用户轻松获得自助服务,无论他们使用生成式人工智能、用户生成的内容还是回答最多的迷你文章常见问题。
而且,网站在强化这一点方面做得很好——人们很容易理解他们在做什么并找到他们正在寻找的信息。
我喜欢什么:简单的消息传递、高对比度的文本和图形以及简化的导航提供了出色的用户体验。还有一些闪光,主页的右半部分有旋转图像和图形。26. 转换策略
随着各地营销部门越来越关注盈利能力和利润,我预计我们将继续看到更加重视转化策略作为网页设计趋势。是的,吸引观众始终是我们的目标,但在 2024 年及以后,我们也会看到更多的努力来转化他们。
总裁 Angela Pointon 对此表示同意,她说:“尽管网站的设计在视觉上很有吸引力或具有互动性,但考虑网站的转换策略仍然至关重要。问题不应该是:我们喜欢这个设计吗?问题应该是:该设计能否实现更多转化?”
那么,这作为一种趋势会是什么样子呢?您可能会看到更多数据驱动的文案和设计决策,更多文案主导的设计,以及更多的努力来了解您的目标受众及其想要什么,以便您可以用文字和美学与他们交谈。您可能还会看到此显示带有粘性联系人和渐进的潜在客户培养,或者它可能只是专注于更直观的设计。
以转化为重点的网站的一个很好的例子是 .通过专注于清晰的信息和价值主张,用统计数据和社会证据支持他们的陈述,并提供特定的号召性用语,它是一个真正的销售工具。
我喜欢什么:采用转化策略有助于确保您的网站能够以明确的投资回报率支持您的业务。
27.动态光标
动态光标很有趣。它们是使您的网站与竞争对手区分开来的好方法,并且可以带来更好的用户体验。有些网站通过大胆的更改来做到这一点,例如 ,其中光标就像放大镜一样,您可以在其中“找到”害虫。
我喜欢什么:动态光标创建了一个有趣、俏皮和互动的元素,让用户想要更多地参与您的网站。
要分享另一个稍微不那么粗体的示例,请查看网站,其中光标稍大r 比普通网站的动画要跟随鼠标移动并在您单击时放大。
28.自定义插图和动画
自定义插图和动画可以在不影响网站功能的情况下增添网站的俏皮美感。它们增加了动感,增加了品牌故事和信息传递,同时有助于用户与网站的互动方式。
在其网站上使用自定义插图和动画,其中火箭图像传达了“所有系统,成长”的信息。它还使用移动分子来说明他们严肃的、精细的方法。
我喜欢的:自定义动画可以让您的网站变得生动起来,增强人们的互动方式,同时又不会分散他们对可用性的注意力。
29. 聊天机器人
聊天机器人已经存在了一段时间,所以如果您想知道为什么我将它们纳入 2024 年的设计趋势,我明白了。但事情是这样的——生成式人工智能变得更容易与你的 CR 结合起来M 和数据,我预计我们会看到更多的企业使用它们。好吧,从技术上讲,这不是一种网页设计趋势,但今年及以后会有更多公司(包括您的竞争对手)使用它。
并不是要自吹自擂,但您只需看看我们自己的聊天机器人(我们将其命名为 HubBot)即可。
我们喜欢什么:生成式人工智能使聊天机器人比以往更人性化、更直观、更易于使用。此外,它还可以让您强化品牌信息和用户体验,这意味着这种趋势不会很快消失。
以前现在常见的网站设计趋势我们要明确一点,我并不是主张此列表中的任何趋势都已经过时。相反,其中大多数仍然很受欢迎。然而,由于它们更常见,我们将它们转移到此列表的新部分。
1. 滚动效果滚动效果 - 由滚动动作触发的动画 - 创造更多活力ic 网页体验,这就是为什么它们可以说是今年最流行的网页设计元素之一。
这些越来越多地用于交互式网站,以吸引读者继续滚动,表示内容的中断,并创造三维体验。
就是这样做的,结合了水平和垂直滚动。
例如,当用户登陆主页时,他们会看到右侧看起来像是一把椅子的图像。当用户滚动时,该图像会缩小以显示逐渐被地毯覆盖的客厅。这种 3D 体验令人愉悦且信息丰富。
我喜欢的:滚动效果可以刺激访问者并鼓励他们继续滚动,甚至在首屏以下。
2.彩色渐变从 Instagram 到网站再到广告等等,您很可能在过去几年中看到了相当多的渐变。渐变色最近很流行,我们越来越多地看到这种情况今天很常见。
无法决定您的网站使用什么颜色?用于查找适合您品牌的配色方案。调色板生成器易于使用:首先,选择您品牌的主要颜色。
然后,选择互补色。该软件将提供几个全调色板选项,为您的原色和补色添加中性色调。您可以根据自己的喜好自定义调色板。
查看这个华丽且具有视觉吸引力的示例,以获取渐变设计灵感。它将彩色渐变与动态排版相结合,带来终极视觉冲击力。
我喜欢的:渐变在视觉上令人兴奋,并且如果使用得当,不会分散注意力。
3. 文本和图像重叠与随附图像稍微重叠的文本已成为博客和作品集的流行效果。自由艺术总监和前端开发人员演示了如何在每个山雀下方放置带有彩色下划线的重叠文本乐。
我喜欢的:重叠的文本和图像最大化页面空间。
4. 网页纹理网页纹理是视觉上类似于三维表面的背景图像。如果正确使用它们,您可以使用网页纹理通过触觉让访问者沉浸在您的网站中。
需要证明吗?只需从网站上查看这个示例即可 - 背景会让人联想到管道胶带般的纹理。
我喜欢什么:网页纹理吸引人们对网站上特定部分的注意力。
5.柔和的色彩柔和的色彩在网站设计中很流行。粉彩明亮、温暖、异想天开——有力地缓解了 2020 年代初期的黯淡。该作品集准确地揭示了柔和的色彩在视觉上的影响力。
我喜欢什么:粉彩为您的网站增添了一丝活泼的元素。
您可以在网站上使用的设计趋势正如 VonBergen 所说,“设计趋势来来去去,但创造了一种人与人之间的智慧联系h 您的访客会给人留下持久的印象。确保您的审美选择符合您想要为理想访客提供的体验。”
当然,您不需要整合所有这些趋势来构建 2024 年最好的网站设计之一 - 我们怀疑这是否可能。
即使将其中一些网站设计趋势添加为突出的组件或更微妙的细节,也可以显着改善网站的用户体验,从而提高参与度、更多的 CTA 点击次数以及更好的业务成果。
编者注:本文最初于 2018 年 1 月发布,为了全面性已进行更新。
来源:hubspot