16 Web Design Trends to Watch in 2021

The landscape ofweb design总是在发展。

Something that looked modern and fresh yesterday can appear dated seemingly overnight, and trends once dismissed as irrevocably passé can unexpectedly cycle back in vogue.

Still, one thing remains constant: Websites are the most important marketing channel for many businesses, and thesecond most popular marketing channel among businesses according to HubSpot research.

Image Source

Given the importance of websites to most businesses and the fact that一半的消费者认为网站设计对企业品牌至关重要，值得努力制作与当今趋势相匹配的网站。

然而,这并不意味着你需要放弃你site’s vision to engage visitors. There’s plenty of room for stylistic choices across the spectrum. As HubSpot Senior Product Designer Dan Hartshorn notes, “I've noticed lately many SaaS offerings go either monochromatic or black&white in their UI, or go the opposite direction, and just COVER their UI in color, shadows, gradients,skeuomorphic, etc.”

To help you prepare for wherever the web design tide takes us, we've put together a list of 16 trends to keep a close eye on. Check them out below, and get inspired to tackle your web design projects this year with style.

1.大胆的版式

越来越多的公司转向大胆的版式来锚定主场。当页面的其余部分保持最小和干净时，这种样式最有效，就像布鲁克林代理商的示例一样Huge.

Image Source

2. Cinemagraphs

Cinemagraphs（以平滑，连续循环运行的高质量视频或GIF）已成为添加运动和视觉兴趣的一种流行方式，以使其静态页面。全屏循环，就像法国创意代理商的这个示例一样Social Brain, create immediate interest on an otherwise simple page.

Image Source

3. Brutalism

为了在整洁，有组织的网站的海洋中脱颖而出，一些设计师选择了更折衷的，反对的结构。虽然起初似乎令人震惊，但许多受欢迎的品牌现在正在将这些积极的替代设计元素纳入其网站，例如Bloomberg.

Brutalism成为standardiz反应增加ation of web designand is often characterized by stark, asymmetrical, nonconformist visuals, and a distinct lack of hierarchy and order. In other words, it's hard to describe but看到它时知道它- 与以下示例一样Chrissie Abbott.

Image Source

4. Saturated Gradients

在过去的几年中，渐变一直在网络上，而且似乎还没有走任何地方。文案代理商专着通讯illustrates a perfect example of how to make this effect look fresh and modern, with its full-screen, gradient-washed homepage.

Image Source

5.生动的颜色层

如零食食品品牌的这个时尚的例子所示，交错的，堆叠的颜色层为简单的网站布局增添了深度和质感Pipcorn. A vibrant color palette like this one instantly distinguished itself from competing sites.

Image Source

6. Text-Only

Some websites are cutting out images and prominent navigation sections altogether, relying on a few choice lines of straightforward text to inform visitors about their company.

Danish agencyB14uses their homepage real estate to simply describe their mission statement and provide links to samples of their work. It's a modern, uncluttered approach to presenting information.

Image Source

7.插图

越来越多的公司求助于插画家和图形艺术家为其网站创建定制插图。在数年以平坦的设计和直接的极简主义为主之后，在您的网站上添加插图的触摸是注入一点个性的好方法，如这个迷人的例子所示NewActon（由澳大利亚数字代理设计ED）。

Image Source

8. Ultra-minimalism

服用经典极简主义to the extreme, some designers are defying conventions of what a website needs to look like, displaying just the absolute bare necessities. The site from designerMathieu Bouletis centered around a few choice links to their social profiles and information.

Image Source

9. Mixing Horizontal and Vertical Text

Freeing text from its usual horizontal alignment and placing it vertically on a page adds some refreshing dimension. Take this example from action sports video producersPrime Park Sessions, which combines horizontal and vertical text alignments on a minimal page.

Image Source

10. Geometric Shapes and Patterns

Whimsical patterns and shapes are popping up more frequently on websites, adding some flair in a landscape otherwise ruled by flat and材料设计。加拿大设计工作室MSDSuses daring, patterned letters on their homepage.

Image Source

11. Serif Fonts

由于屏幕分辨率的限制和整体缺乏在线字体支持，设计师多年来避免了衬线字体，以使网站保持清晰和清洁。随着最近的改进，Serif字体在2021年的时刻很重要，而且它们看起来从未更现代。如前所述窗台，衬线的标题增加了一定的精致和风格。

Image Source

12. Overlapping Text and Images

伴随图像略有重叠的文本已成为博客和投资组合的流行效果。bob全站app自由艺术总监兼前端开发商Thibault Paillouxmakes their overlapping text stand out with a colorful underline beneath each title.

Image Source

13. Broken Grids

While grids remain one of the most common and efficient ways of displaying text and images on websites,broken gridscontinue to make their way into mainstream sites and offer a change-up from the norm. Check out the website forHealHaus, for example. Its homepage features images and text blocks that overlap.

Image Source

14.有机形状

严格的网格布局和锐利边缘的日子已经一去不复返了 - 现在这一切都与弯曲线和柔软的有机形状有关。在下面的示例中Neobi, the borderline-cartoonish background adds a generous hit of personality and vivid color to the uncomplicated design.

Image Source

15. Web Textures

Web textures是视觉上类似于三维表面的背景图像。做得好，纹理可以通过引人入胜的感官来将观众浸入网站中，如Color Of Change— the background evokes a duct-tape-like texture.

Image Source

16. Hand-Drawn Fonts

Custom, hand-drawn fonts have started cropping up more and more in recent months, and for good reason. These unique typefaces add character and charm, and help designers create a distinct look and feel without a complete overhaul. OntheKikk 2017节日网站, a hand-drawn font provides a whimsical anchor for the homepage.

Image Source

Design Trends You Can Use on Your Website

当然，您无需结合所有这些趋势即可建立一个有效的网站 - 我们怀疑这是可能的。但是，即使将一对夫妇添加为突出的组件或微妙的详细信息也可以显着改善您的网站的UX，从而导致更高的参与度，更多的CTA点击以及更好的在线业务结果。

Editor's note: This post was originally published in January 2018 and has been updated for comprehensiveness.