October 19, 2021

HubSpot: 16 web design trends to watch in 2021

The landscape of website creation is always evolving.

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

Given the importance of websites to most businesses and the fact that half of consumers think website design is crucial for a company’s branding, it pays to build your own website that matches 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 Dan Hartshorn, Senior Product Designer HubSpot, notes, “I’ve noticed lately that a lot of SaaS offerings are either monochrome or black and white in their UI, or go in the opposite direction, and just cover their color user interface, shadows, gradients, skeuomorphic, 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 the Brooklyn-based agencyHuge.

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 the French design 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.

Brutalismemerged as a reaction to the increasing 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 butyou know it when you see it – as with the example below of 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 illustrates a perfect example of how to make this effect look fresh and modern, with its full screen, gradient homepage.

Image source

5. Vivid color layers

Staggered and stacked layers of color add depth and texture to a simple site layout, as seen in this stylish example of the snack brand. Pome corn. 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 agencyB14 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 a flat design and simple minimalism, adding illustrated touches to your site is a great way to inject some personality, as this charming example ofNewActon (designed by the Australian digital agencyOF).

Image source

8. Ultra-minimalism

Socket classic minimalism in the extreme, some designers defy the conventions of what a website should look like, showing only the bare essentials. The designer’s websiteMathieu Boulet is centered on 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 the producers of action sports videos 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 elegance to an otherwise ruled landscape.Equipment design. Canadian design studioSDS uses bold, patterned letters on their 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 onThe threshold, 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. Artistic Director and Freelance Front-End DeveloperThibault Pailloux highlights their overlapping text with a colored underline under each title.

Image source

13. Broken gates

While grids remain one of the most common and efficient ways to display text and images on websites, broken gates continue to find their way into mainstream sites and offer a change from the norm. Check the website for HealHaus, 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 ofNeobiCartoon borderline background adds a generous touch of personality and vivid color 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 in a website by engaging the tactile senses, as demonstrated Change color – the background evokes a texture similar to adhesive tape.

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. At 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