The landscape of web design is always evolving.
Something that looked modern and fresh yesterday may seem dated apparently overnight, and trends that were once dismissed as irrevocably passé may unexpectedly cycle back into fashion.
Still, one thing is constant: Websites are the most important marketing channel for many companies and the second most popular marketing channel among companies, according to HubSpot research.
Given the importance of websites to most businesses and the fact that half of consumers think website design is crucial to a company’s brand, it’s worthwhile to create your own website that matches today’s trends.
However, this does not mean that you have to scrap 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 recently noticed that many SaaS offerings either go monochromatic or black and white in their user interface 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 web design takes us, we’ve put together a list of 16 trends to keep an eye on. Check them out below and get inspired to tackle your web design projects this year in style.
Website design tends to look
- Bold typography
- Saturated gradients
- Vibrant color layer
- Text only
- Mix of horizontal and vertical text
- Geometric shapes and patterns
- Serif fonts
- Overlapping text and images
- Broken nets
- Organic forms
- Web textures
- Hand-drawn fonts
1. Bold typography
More and more companies are turning to big, bold style to anchor their websites. This style works best when the rest of the page is kept minimal and clean, like this example from Brooklyn-based agency Huge.
Cinemagraphs videos or high-quality GIFs running 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 creative agency Social Brain, create instant interest in an otherwise simple page.
To stand out in a sea of tidy, organized sites, some designers choose more eclectic, unconventional structures. While it may seem daunting at first, many popular brands are now incorporating these aggressively alternative design elements into their sites, e.g. Bloomberg.
Brutalism emerged as a reaction to the increasing standardization of web design and is often characterized by sharp, asymmetrical, non-conformist visuals and a clear lack of hierarchy and order. In other words, it’s hard to describe, but you know it when you see it – as with the example below from Chrissie Abbott.
Gradients have been all over the web for the last few years and it does not look like they are going anywhere yet. Copywriting agency Monograph Communications illustrates a perfect example of how to make this effect look fresh and modern with its full-screen gradient-washed website.
5. Vivid color layers
Offset, stacked layers of color add depth and texture to a single place layout, as seen in this stylish example from the snack food brand Pipcorn. A vibrant color palette like this one instantly differed from competing sites.
6. Text only
Some sites completely cut out images and prominent navigation sections and rely on a few select lines of straightforward text to inform visitors about their business.
Danish agency B14 uses their website real estate to simply describe their mission statement and provide links to examples of their work. It is a modern, orderly approach to presenting information.
Several companies turn to illustrators and graphic designers to create custom illustrations for their sites. After years dominated by flat design and straightforward minimalism, adding illustrated details to your site is a great way to add a little personality, as seen in this charming example from NewActon (designed by Australian digital agency ED).
Taking classic minimalism to the extreme, some designers defy conventions of what a website should look like, and just show the absolute necessities. The website of designer Mathieu Boulet is centered around a few choices for their social profiles and information.
9. Mix of horizontal and vertical text
Freeing text from the usual horizontal alignment and placing it vertically on a page adds a refreshing dimension. Take this example from action sports producers Prime Park Sessions, which combine horizontal and vertical text adjustments on a minimal page.
10. Geometric shapes and patterns
Whimsical patterns and shapes appear more frequently on websites and add some flair to a landscape that is otherwise governed by flat and material design. Canadian design studio MSDS uses bold, patterned letters on their website.
11. Serif fonts
Due to screen resolution limitations and a general lack of online font support, designers avoided serif fonts for years to keep websites readable and clean. With the latest improvements, serif fonts have a big moment in 2021 – and they have never looked more modern. As seen on The Sill, a serif headline 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. Freelance art director and front-end developer Thibault Pailloux makes their overlapping text stand out with a colorful underline under each title.
13. Broken nets
Although whiteboards are still one of the most common and effective ways to display text and images on websites, broken whiteboards continue to enter common websites and offer a change from the norm. For example, check out the HealHaus website. Its website contains overlapping images and blocks of text.
14. Organic forms
The time is over with strict lattice layouts and sharp edges – now it’s just about curved lines and soft, organic shapes. In the example below from Neobi, the borderline cartoon-like background adds a generously hit personality and vibrant colors to the uncomplicated design.
15. Web textures
Web textures are wallpapers that visually resemble a three-dimensional surface. When done well, textures can immerse viewers on a site by engaging tactile senses, as demonstrated by the Color Of Change background evoking a duct-tape-like texture.
16. Hand-drawn fonts
Custom, hand-drawn fonts have started to appear more and more in recent months, and with good reason. These unique fonts add character and charm and help designers create a distinct look without a complete overhaul. On the KIKK 2017 Festival website, a hand-drawn font provides a whimsical anchor for the website.
Design trends you can use on your site
Of course, you do not have to incorporate all these trends to build an effective website – we doubt it is possible at all. However, even adding a few as prominent components or subtler details can significantly improve your site’s UX, leading to higher engagement, more CTA clicks, and a better result for your online business.
Editor’s note: This post was originally published in January 2018 and has been updated to be comprehensive.