HubSpot: 16 web design trends to watch in 2021

The landscape of web design is constantly changing.

Something that looked modern and fresh yesterday can seem dated overnight, and trends once dismissed as irrevocably outdated may unexpectedly return to fashion.

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

Image source

Considering the importance of websites to most businesses, and the fact that half of consumers believe website design is crucial to a company’s branding, it’s worth making your own website that corresponds to today’s trends.

However, that doesn’t mean you have to let go of your site’s vision to engage visitors. There is plenty of room for stylistic choices across the spectrum. As HubSpot senior product designer Dan Hartshorn notes, “I’ve noticed lately that a lot of SaaS offerings are monochrome or black and white in their UI, or go in the opposite direction, and just cover their user interface in color, shadows, gradients, skeuomorphs, etc. ”

To help you prepare for wherever the tide of web design takes us, we’ve put together a list of 16 trends to watch out for. Check them out below and get inspired to approach your website design projects this year in style.

Free download

77 brilliant examples of homepages, blogs and landing pages

Website design trends to watch out for

  1. Bold typography

  2. Cinemagraphs

  3. Brutalism

  4. Saturated gradients

  5. Bright color layers

  6. Text only

  7. Drawing

  8. Ultra minimalism

  9. Horizontal and vertical text mix

  10. Geometric shapes and patterns

  11. Serif Fonts

  12. Overlapping text and images

  13. Broken gates

  14. Organic forms

  15. Web textures

  16. Hand drawn fonts

1. Bold typography

More and more businesses are turning to large and bold typography to anchor their homepages. This style works best when the rest of the page is minimal and clean, like this example from Brooklyn-based agency Huge.

Image source

2. Cinemagraphs

Cinemagraphs – high-quality videos or GIFs that run in 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 agency Social Brain, create immediate interest on an otherwise simple page.

Image source

3. Brutalism

To stand out in a sea of ​​tidy and organized websites, some designers opt for more eclectic and convention-defying structures. While it might seem shocking at first, many popular brands are now incorporating these alternately aggressive design elements into their sites, such as Bloomberg.

Brutalism emerged as a reaction to the growing standardization of web design and is often characterized by stark, asymmetrical and maverick visuals, and a blatant lack of hierarchy and order. In other words, it’s hard to describe but you know it when you see it – like with the example below from Chrissie Abbott.

Image source

4. Saturated gradients

Gradients have been all over the web for the past few years, and it doesn’t look like they’re going anywhere yet. Editorial agency Monograph Communications is a perfect example of how to make this effect look fresh and modern, with its homepage full screen and degraded.

Image source

5. Vivid color layers

Layered and stacked layers of color add depth and texture to a simple site layout, as seen in this sleek example from the snack brand Pipcorn. A vibrant color palette like this instantly stood out from the competition.

Image source

6. Text only

Some websites completely remove important images and navigation sections, relying on a few simple lines of text to let visitors know about their business.

Danish agency B14 uses their homepage real estate to simply describe their mission statement and provide links to examples of their work. It’s a modern and clean approach to presenting information.

Image source

7. Illustrations

More and more businesses are turning to illustrators and graphic designers to create bespoke illustrations for their websites. After years dominated by flat design and simple minimalism, adding illustrated touches to your site is a great way to inject some personality, as this charming example from NewActon (designed by the Australian digital agency) shows. ED).

Image source

8. Ultra-minimalism

Taking classic minimalism to the extreme, some designers defy the conventions of what a website should look like, showing only the bare essentials. DesignerMathieu Boulet’s website is built around a few choice links to their social profiles and information.

Image source

9. Mixture of horizontal and vertical text

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

Image source

10. Geometric shapes and patterns

Whimsical patterns and shapes appear more frequently on websites, adding a touch of style to a landscape otherwise governed by a flat, material design. Canadian design studio MSDS uses bold patterned letters on its homepage.

Image source

11. Serif fonts

Due to screen resolution limitations and a general lack of inline font support, designers have avoided serif fonts for years to keep websites readable and clean. With the recent enhancements, serif fonts are having a big time in 2021 – and they’ve never looked so modern. As seen on The Sill, a serif title adds a dose of sophistication and style.

Image source

12. Overlapping text and images

Text that slightly overlaps accompanying images has become a popular effect for blogs and portfolios. Independent art director and front-end developer Thibault Pailloux brings out their superimposed text with a colorful underline under each title.

Image source

13. Broken gates

While grids remain one of the most common and effective ways to display text and images on websites, broken grids continue to find their way into mainstream sites and offer a change from to the standard. Check out the HealHaus website, for example. Its home page features overlapping images and blocks of text.

Image source

14. Organic forms

Gone are the days of strict grids and sharp edges – now it’s about curved lines and soft, organic shapes. In the example below from Neobi, the cartoon borderline background adds a generous touch of personality and bright colors to the simple design.

Image source

15. Web textures

Web textures are background images that visually resemble a three-dimensional surface. When done right, textures can immerse viewers into a website by engaging the tactile senses, as Color Of Change demonstrates – the background evokes a duct tape-like texture.

Image source

16. Hand drawn fonts

Hand-drawn custom fonts have started to appear 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. On the KIKK 2017 festival website, a hand-drawn font provides a whimsical anchor for the homepage.

Image source

Design trends you can use on your website

Of course, you don’t need to incorporate all of these trends to build an effective website – we doubt it’s even possible. However, even adding a few as important components or more subtle details can dramatically improve your site’s user experience, resulting in higher engagement, more CTA clicks, and a better outcome for your online business.

Editor’s Note: This article was originally published in January 2018 and has been updated for completeness.

Originally posted Oct 6, 2021, 7:00:00 AM, updated Oct 06, 2021

Don’t forget to share this post!

Disclaimer

HubSpot Inc. published this content on 06 October 2021 and is solely responsible for the information it contains. Distributed by Public, unedited and unmodified, on 06 October 2021 11:36:05 PM UTC.


Source link

Leave a Reply

Your email address will not be published. Required fields are marked *