Web Design Trends 2023: Ever Curiouser and Curiouser

Web Design Trends 2023: <em>Ever Curiouser and Curiouser</em>

Design is the reflection of the times we live in. As 2022 is coming to a close, there is a trend for UI styles like “brutalism” (going back to bare essentials and defying sophistication) and “claymorphism” (cartoon-like aesthetic that’s meant to console and pacify) among web designers.

With this post, we are going to look at some up-and-coming design trends for 2023 that will shape the Internet’s websites the following year.

Typography

Words-as-visuals is a trend that started a few years ago and shows no sign of stopping. On modern websites, text can be big and bold; it can scream at you or whisper in your ear; it can scatter and then come back together, go in ripples, swirl, run around the page like a news ticker, or react to the touch – anything is possible in the world of today’s web typography.

Let’s look at the latest type-related trends.

1.1 Italicized text for emphasis

a trend for using italicized text 2023
A screenshot of https://www.cieffemilano.it/en/
Web design trends 2023 - italics example
A screenshot of https://www.arcadia.com/
an example of a web design trend for 2023
A screenshot of https://www.flshfrm.com/

1.2 Serif fonts

If (like me) you confuse the two font types, here is a quick reminder: sans-family fonts look sleek and smooth, whereas serif-family fonts have decorative “tails” or “feet”. For years, sans fonts dominated the design space, because they look fresh and modern. But now serif fonts appear to be taking over.

serif font example - web design trends 2023
A screenshot of https://lights.lu/
italicized text example 2023 web design trends
A screenshot of https://thenaijastory.check-dc.com/

1.3 Interactive and animated text

On the following website, the text in menu items changes at mouseover.

web design trends 2023 - interactive menu
A screenshot of https://f-9-9.com/

On normie.ai, the text gradually fades in as you scroll.

web design trends 2023 animated scrolling example
A screenshot of http://normie.ai/

On the next website, the text is used to create a striking parallax effect, which adds extra dynamism to the experience.

parallax example web design trends 2023
A screenshot of http://font.k95.it/july01/

Sectioning and layout

2.1 Visible borders

I don’t know if it’s a subconscious desire for stability or something, but many sites have clearly defined design elements.

On the following websites, you can see menu items and even text areas that have borders.

layout example with borders for trends 2023
A screenshot of https://www.relayofvoices.com/
webpage layout with borders example
A screenshot of https://designbypelling.co.uk/
design trends 2023 page sections with borders example
A screenshot of https://hakaji.io/

2.2 Smart loading

On many sites we’ve seen, elements transpire as you scroll, helping the website load faster while giving it a cleaner, uncluttered feel.

web design trends 2023 smart scrolling
A screenshot of https://designbase.studio/
web design trends 2023 - smart scrolling example
A screenshot of https://dd.nyc/

2.3 Mixing horizontal and vertical scrolling

Remember how last year we spoke about horizontal scrolling becoming more common? And now designers began mixing the two types of scrolling, which makes browsing more versatile and interesting.

web design trends 2023 - horizontal scrolling example
A screenshot of https://otterspace.xyz/
mixed scrolling example - webpage design trends 2023
A screenshot of https://www.wearejuliet.com/

Visual styles

Every year brings new go-to UI design trends, and this year is not an exception. Back in 2020, neomorphism was trending, but the trend turned out to be limited and short-lived. The main reason for that was that neomorphic designs lack contrast and impact, which is bad for both usability and perception.

This year, claymorphism is trending. Let’s see how long it lasts!

3.1 Claymorphism

Claymorphism is a hot-new UI design style, which is an offspring of neumorphism. It’s characterized by the use of bright, happy colors, rounded corners, double inner shadow and outer shadow. It has clay-like aesthetics, which looks cartoonish and, therefore, happy.

claymorphism on a landing page example
A screenshot of https://www.adidas.com/metaverse/jobs
claymorphism on a landing page example 2
A screenshot of https://www.bezel.it/
claymorphism on a landing page example 3
A screenshot of https://www.wei.co.jp/
claymorphism on a landing page example 4
A screenshot of https://www.talent.army/

3.2 Brutalism

Web pages that abide by the laws of brutalism look plain and bold at the same time. On the one hand, they appear stripped down to bare essentials. On the other hand, they attack you with a handful of “loud” elements that stand in sharp contrast to an otherwise lifeless/underwhelming page.

Brutalism (aka neo-brutalism) is characterized by:

  • Loud, contrasting strokes
  • Stark shadows
  • Eye-popping colors
  • Aggressive graphics
A screenshot of https://careers.grilld.com.au/

Brutalism, therefore, is a way to design user interfaces with a strong impression of pure functionality and strong behaviors over regular form.

A quote from a video by Adrian is Designing via YouTube
A screenshot of https://www.waste-creative.com/recent-posts
A screenshot of https://www.getrepeat.io/

Figma, a well-known provider of web design tools, is a big advocate of (neo)brutalism, which you can tell by looking at their website.

3.3 Material You / Material Design 3

First unveiled in mid-2021, Material You (aka Material Design 3) is a style developed by Google and touted as “the next stage for Material Design.”

MD 3 employs dynamic color to enable personalization, provides a set of icon fonts created at seven weights, and suggests a rounded-by-default shape family, among other recommendations.

Material Design 3 example - web design trends 2023
A screenshot of https://klientboost.com/services/landing-page-design/
Material Design 3 design example - trends for 2023
A screenshot of https://chowdeck.com/
An example of Material Design 3 usage
A screenshot of https://pudgypenguins.com/

3.4 Retro styles

Perhaps in a nod to the recent obsession with NFTs (that are generally forgiving to sloppy design), some websites reverse-evolve to 2000’s aesthetics with pixelated graphics and intentionally outdated looks.

A screenshot of https://byte-trading.com/
A screenshot of https://readymag.com/readymag/websites-of-the-year/
A screenshot of https://www.delysium.com/whitepaper

3.5 Proliferation of motion design

Last but not least, animated graphics seem to be king these days. It is used almost everywhere, on the majority of websites we have analyzed.

People are getting more and more accustomed to consuming information through animated images, so motion design has become ubiquitous. It’s increasingly harder now to sustain the viewer’s attention, in part because people are used to the format of TikTok clips, Instagram reels, and YouTube shorts that are video-based and feed the user information in small bites. By animating a static image even a tiny bit, you help the visitor to linger there a little longer, which is good for marketing.

Evgeny Rugalev front-end developer and designer at ObjectStyle
motion design example 1 - trends for 2023
A screenshot of an Estée Lauder product page
motion design example 2 - trends for 2023
A screenshot of https://letter.co/deposit

TL; DR

As of the end of 2022, typography is still very important. Also, several distinct trends this year are claymorphism, brutalism, the use of distinct borders in webpage elements, the use of italicized text, among others. Motion design proliferates in our attention-deficient world, as well.

Have we missed anything? Please let us know in the comments.

Looking for front-end developers? We can help!Describe your project and we’ll get back to you with the next steps.Contact Us

    File

    Digitize

    with ObjectStyle

    Digitize with ObjectStyle See our work