2021年16个网页设计趋势看

The landscape ofweb designis always evolving.

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.

尽管如此，一件事仍然持续不变：网站是许多企业的最重要的营销渠道，并且second most popular marketing channel among businesses according to HubSpot research.

Image Source

Given the importance of websites to most businesses and the fact thathalf of consumers think website design is crucial to a business’s brand, it’s worth the effort to make your own website that matches today’s trends.

但是，这并不意味着您需要取消网站的愿景来吸引访问者。整个频谱都有足够的风格选择空间。正如HubSpot高级产品设计师Dan Hartshorn指出的那样：“我最近注意到许多SaaS产品在UI中使用单色或黑白，或者朝相反的方向迈进，只是覆盖其UI的颜色，阴影，渐变，渐变，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. Bold Typography

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

Image Source

2.电影院

Cinemagraphs — high-quality videos or GIFs that run on a smooth, continuous loop — have become a popular way to add movement and visual interest to otherwise static pages. Full-screen loops, like this example from French creative agencySocial Brain, create immediate interest on an otherwise simple page.

Image Source

3. Brutalism

To stand out in a sea of tidy, organized websites, some designers are opting for more eclectic, convention-defying structures. While it can seem jarring at first, many popular brands are now incorporating these aggressively alternative design elements into their sites, such asBloomberg.

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 butyou know it when you see it— like with the below example fromChrissie Abbott.

Image Source

4. Saturated Gradients

Gradients have been all over the web for the past few years, and it doesn’t seem like they’re going anywhere just yet. Copywriting agencyMonograph Communicationsillustrates a perfect example of how to make this effect look fresh and modern, with its full-screen, gradient-washed homepage.

Image Source

5.生动的颜色层

Staggered, stacked layers of color add depth and texture to a simple site layout, as seen in this stylish example from the snack food brandPipcorn. 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.

丹麦代理B14uses 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. Illustration

越来越多的公司求助于插画家和图形艺术家为其网站创建定制插图。在数年以平坦的设计和直接的极简主义为主之后，在您的网站上添加插图的触摸是注入一点个性的好方法，如这个迷人的例子所示NewActon(designed by Australian digital agencyED).

Image Source

8. Ultra-minimalism

Takingclassic minimalismto 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

从通常的水平对齐中释放文本并将其垂直放在页面上增加了一些令人耳目一新的尺寸。以动作体育视频制作人的身份为例Prime Park Sessions, which combines horizontal and vertical text alignments on a minimal page.

Image Source

10.Geometric Shapes and Patterns

异想天开的图案和形状在网站上更频繁地弹出，在景观中增加了一些天赋materialdesign. Canadian design studioMSDSuses daring, patterned letters on their homepage.

Image Source

11.衬线字体

Due to screen resolution limitations and an overall lack of online font support, designers avoided serif fonts for years to keep websites legible and clean. With recent improvements, serif fonts are having a big moment in 2021 — and they've never looked more modern. As seen onThe Sill, a serif headline adds a dose of sophistication and style.

Image Source

12.重叠的文本和图像

Text that slightly overlaps accompanying images has become a popular effect for blogs and portfolios. Freelance art director and front-end developerThibault 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 grids继续进入主流站点，并从规范中改变。查看网站以获取HealHaus, for example. Its homepage features images and text blocks that overlap.

Image Source

14. Organic Shapes

Gone are the days of strict grid layouts and sharp edges — now it’s all about curved lines and soft, organic shapes. In the example below fromNeobi, the borderline-cartoonish background adds a generous hit of personality and vivid color to the uncomplicated design.

Image Source

15.网络纹理

Web texturesare background images that visually resemble a three-dimensional surface. When done well, textures can immerse viewers in a website by engaging tactile senses, as demonstrated byColor Of Change— the background evokes a duct-tape-like texture.

Image Source

16.手绘字体

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 Festival website, a hand-drawn font provides a whimsical anchor for the homepage.

Image Source

您可以在网站上使用的设计趋势

Of course, you don’t need to incorporate all of these trends to build an effective website — we doubt that’s even possible. However, even adding a couple as prominent components or subtler details can improve your site’s UX significantly, leading to higher engagement, more CTA clicks, and a better outcome for your online business.

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