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.
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.
77 brilliant examples of homepages, blogs and landing pages
Website design trends to watch out for
Bright color layers
Horizontal and vertical text mix
Geometric shapes and patterns
Overlapping text and images
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.
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.
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.
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.
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.
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.
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).
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.
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.
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.
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.
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.
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.
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.
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.
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.
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!
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.