2021. (Doesn’t it feel good to add that “1?!”) 

While the world adjusts to a new year, so too are designers embracing a new year of design. After a year of so many unknowns, we’re beginning to see trends that take us back to a comfortable past while emphasizing future-focused user experience. 

From working online to buying online to socializing online, people are interacting with the internet more than ever before, and designers are embracing bold designs to push the boundaries of what we can experience together.

While this is by no means exhaustive, here are 11 of the top web design trends we’re seeing for 2021:

1. Page layouts with a horizontal scroll
2. Custom cursors
3. 3d objects
4. Excellent eCommerce experiences
5. Visible grid lines with thick line weights
6. User preference options on sites (not just apps) 
7. A shift from building websites to building solutions
8. Playful illustrations
9. Typography as design, not just words
10. Geometric shapes as background elements
11. WordPress as a CMS

1. Page layouts with a horizontal scroll

Long scrolling websites and parallax designs have been popular for several years now. As we head into 2021, we’re starting to see an orientation shift of designers using horizontal movement to “decrease” the length of the page. 

While the physical experience isn’t different for the user (you usually still scroll the mouse up and down), the visual experience provides something unexpected and interesting. It creates a journey across the website in which the user doesn’t quite know where it’s going to take them, which is rare now that we’ve developed such normal patterns for websites. 

This website for Jony Guedj, a freelance film director, uses a horizontal scroll for the primary section of her site to display her work. The colorful bar at the bottom moves along with your mouse, as a helpful way to orient “where” you are on the page.

LinkSture, an agency focused on design and eCommerce solutions, uses a horizontal scroll to display their portfolio on their homepage as well. It’s further down the page, however, using a combination of both vertical and horizontal motions while you scroll.

We Virtually Are, a virtual reality studio, uses horizontal movement to actually make you feel like you’re staying in the same place on their site, while all the content changes. It’s completely different than what you expect from most websites, a fitting experience for a VR company that specializes in creating new realities.

2. Custom cursors

I especially love this trend because it feels both familiar and new. A nod to custom cursors of the mid-2000s (admit it, you used one on your Myspace profile!), custom cursors are making an elegant comeback. 

From minimal geometric shapes to fully interactive web page experiences, customizing the mouse cursor is becoming a small way to add some repetition to your branding. Many agencies are using it to repeat shapes or colors from their logos, or as a way to engage users with the site. 

In this example from Rox Studios, a boutique design agency, the mouse is that yellow circle. It changes based on the background content you’re hovered over, turning into a CTA button itself to “View” a project.

See that fun little face in the first image? That your mouse when you land on Concept Studio’s website. You’ll see some similar creatures throughout the site, and also watch the cursor change for different sections.

In the second screenshot, the mouse changes to a wand that even drops little particles as you move around. It never disrupts the content, and instead just adds an element of whimsy and interactivity as you experience their site.

See that little white circle? That’s your mouse on Etienne Pharabot’s website, a front-end developer based in France. There’s more to it than meets the eyes, however. I highly suggest scrolling over the various sentences throughout the site. (Some emoji surprises await!)

Impero, a creative agency, uses a large yellow circle as their cursor that nicely falls behind any text you hover over. They also use it as an opportunity to help users navigate the site, for example displaying “drag” over a horizontal scrolling section. (A nice way to combine a few of these trends!)

3. 3d objects

While flat design ruled for quite some time, we’re starting to see a three-dimensional shift in the elements on web designs. This may be inspired by the rise of virtual and augmented reality, bleeding into our two-dimensional browsing experiences. 

This colorful example from Chip&Byte, an agency based in Italy, adds a playful element to their site. As you move the cursor around (the little gray circle!) the shapes move as well, adding to the sense of dimension.

It only feels right that a company called “Yellow Telescope” has a 3d, yellow telescope displayed proudly on their homepage! When you first land on the site, you’ll watch it  “build itself” as each piece falls into place, which is perhaps a synonym for how they help their clients build up reliable practices. 

Beans Agency uses the 3d trend to bring their beans to life, displaying them in several scenes across the site. This trend is a great way to bring motion to a character, or give a “realistic” feeling over just an abstract, flat illustration.

Not entirely sold on the 3d trend? You could always take a subtle approach, like C-HM Conseil. The elegant bevel and glow on a monochromatic background leans into the material look without being overbearing. 

4. Excellent eCommerce experiences

It’s no surprise that online retail has increased dramatically over the last year, which has also led to more intentional, better shopping experiences. After all, with more competitors rushing to get their websites online, it’s no longer acceptable for a store to just exist on the internet; it needs to be optimized and prioritize user experience to keep shoppers from bouncing.

Minsom, a pet store, makes it easy to purchase both items and services right from their homepage. With large buttons and simple categories, it’s easy to navigate so you can check out quickly, instead of spending too much time searching around the site.

This wine shop, Molly Dooker, is not only a beautiful and artistic site experience, but a smooth shopping one as well. It’s easy to browse the wines, preview what’s in your cart, and then purchase – all while enjoying a delightful site design.

Zoya’s Pantry, a healthy and organic food store, optimizes the shopping experience for adding multiple items to your cart. When you click “Add to Bag,” your window doesn’t change, so you can just continue browsing without losing your place on the page. Then to view your cart, all you have to do is hover over the icon in the top navigation (instead of clicking out to a separate page).

You’ll notice a few 2021 design trends on The Cool Club site. From an effortless eCommerce experience to a 3D display of one of their products (a card game!), it’s easy to see exactly what you’re buying and then put it in your cart. (Even right above the fold on the homepage!)

5. Visible grid lines with thick line weights

Grids have been useful in web design for a long time, but we’re starting to see a trend of giving them a pop of color or a thick line weight. Instead of keeping them minimal, designers are leaning into the natural shapes they build on the page and making their grid lines stand out to achieve a bold, geometric appearance. 

Eat Sleep Work uses colorful lines to help bring their Windows-like desktop to life. While they aren’t too thick, the bold blue does the trick to make the grid stand out and create intentional structure across the site.

This software development studio, OSM, uses grid lines in a few interesting ways across the site. As you can see from the background, they lean into a thick line weight and geometric style with their brand, and repeat this in multiple different ways, including with grid layouts.

Not sure if bold grid lines are right for your site? You could try a “negative space” approach like Rui Ma, a designer and art director. It’s more subtle than emphasizing the grid with a contrasting color, but the wide spacing still allows that geometric-feeling to shine through.

6. User preference options on sites (not just apps)

Creating unique, personalized experiences is becoming more and more popular, and one way web designers are doing that is by building options into the site design. From preferences like light mode vs dark mode to accessibility options like what language to use, this trend is all about giving more control to the user over what their site experience is like. 

Right away when you load Hoang Nguyen’s website, you’ll see an option for audio. The default is set to “off,” so even if the site loads before you make a choice, it won’t startle you (although even if it was set to “on,” it wouldn’t; it’s very calming music!). This gives you the power to customize your experience right away, and if you change your mind later, there’s an option for sound right next to his logo at the top of the site.

Sofia Papadopoulou’s site is similar in that it offers settings for audio, but they’re stuck to the bottom right corner (where you might traditionally find a sticky back-to-top button.) The default is again set to “off,” despite the sound containing just calming instrumentals (nothing crazy).

This example from Studio OUAM, a creative agency in France, makes it easy to choose which language you’d like to use while browsing their site. Listed right at the top of the menu, they give the option for French or English, tailoring their website to their two primary audiences.

7. A shift from building websites to building solutions

While web design is as important as ever (if not even more critical in the age of the coronavirus), agencies are starting to shift their focus toward full-solution selling, instead of individual deliverables. For example, instead of calling themselves a web design agency, a creative studio might refer to itself as a “brand experience partner,” or something else that refers to the full value of what they provide (not just the tangible parts). 

This is Soda Studios, an “innovation partner, design studio, and laboratory.” They’re not too concerned with listing off every single individual service they provide, but rather focusing on holistic solutions for their customers.

BORN Group is a “global digital agency driven by human-centered experiences.” They do have a services page to go into more details about what they offer, but even that focuses on the bigger picture with services like brand experience, service design, and innovation.

Kappow is a digital agency that focuses on web design, but you wouldn’t necessarily know it from their homepage. Instead, they share the value of what their work really provides their clients: business growth, successful product launches, and an advantage over competitors. (Who doesn’t want all that?!) 

8. Playful illustrations

The rise of illustrations has been increasing for a few years now, and we don’t see it going anywhere quite yet. It’s a great way to add a “human” element to your site, especially if you don’t have access to a great photographer and want to avoid stock photos. Or if you/your agency specialize in illustration, it’s the perfect way to show off your work!

What a wonderful world to browse on RUYA’s site, a branding and digital agency. They’ve given their illustration the full-width of their homepage, making it quite the showstopper as soon as you load the page. Even better: When you hover your mouse over parts of the image, you’ll discover that it serves as a navigation element, helping you learn more about their agency, services, and work.

These quirky illustrations from UPQODE, a web design agency, are paired with animation to really bring them to life. You can watch them change colors, sizes, and interact with each other, which makes for an entertaining homepage experience.

If full illustrations aren’t quite right for your brand, there’s always the option to use them as accents, like No Clima does. You’ll find “doodles” on top of photos throughout their site, lending it a hand-crafted, artistic feeling. This is also a great way to combine illustration and photography, if you’re interested in using both!

9. Typography as design, not just words

Sometimes words are meant to be practical, sometimes they’re meant to be art. And today’s web designers aren’t afraid to use them for the second purpose, as more of a design element than a paragraph or body of text.

While it’s still legible, the text on the Dystopian Creatives homepage blurs the lines between practical and visual in a compelling way. It feels more like a background pattern than a paragraph, and interacts with the other images on the page in interesting ways. 

Loop, a full-service creative agency, uses type as a background element on their homepage along with an easier-to-read paragraph on top. Because the background font size is so big (and a nice shade of yellow), your eyes can read both sets of text without becoming confused. I also love the way it prompts users to scroll, to answer the question, “Design for…what?” 

As you scroll down this site for Stone & Style, you’ll see each headline as a normal block of text, but also echoed in a large serif-font in the background that bleeds off the page. It’s a great way to repeat the message without sounding repetitive and adds a hint of elegant mystery to the site as you try to read what the background text says (before you discover the pattern).

10. Geometric shapes as background elements

When it comes to your site design, don’t overthink it. While geometric shapes may feel too “simple,” they’re familiar and uncomplicated (both qualities that are good for user experience!). And with such strong building blocks, there’s a lot you can do to put your agency’s brand on them, so they feel like anything but simple. 

This example from fourpillars uses simple shapes (essentially just blocks and dots!) paired with movement based on the user’s scroll to create a dynamic, geometric experience. As you scroll down the page, you’ll watch the blocks build themselves up and break themselves down, ever-changing to keep telling the story. (There may be a “Pong” game easter egg in there also, if you’re looking for a little break!) 

While the colorful, oval-like shapes on Oh Happy Dani may not technically be geometrical, they certainly achieve the same playful effect. Paired with her brand colors, they make for a great frame behind her hero image, and you’ll see them repeated in new ways across the site. 

Blab, a communication studio, also makes use of almost-geometric shapes on their homepage. These circle/oval/egg-shaped patterns grow and shrink as you rest on the page, and then move aside as you start to scroll. They remind me of sound coming out of a speaker, which pairs perfectly with the copy on the page “Your voice louder.” 

This colorful studio, illo, uses geometric shapes right behind their primary message on the homepage. As you hover over the phrases that are underlined, one of the shapes will move to reveal an image within, a clever way to show off their first focus – motion design. 

11. WordPress as a CMS

Last, but certainly not least, is how these sites are built. (After all, if the back-end isn’t serving the purpose you need it to, it doesn’t matter how great the front-end looks!) 

WordPress now powers more than 40% of the internet. That’s almost half of all websites (including those not built on a CMS), and it’s likely due to how flexible the CMS has truly become over the years. 

Not sold on it? All of the websites in this roundup are powered by WordPress, to give you a great example of everything you can build with it! From beautiful themes that help you get started quickly to more than 55,000 free plugins that help you extend functionality, WordPress can do just about anything.  

What do you think of these web design trends for 2021? Do you agree with the rise of custom cursors, or think that 3d designs are just a fad? Let us know in the comments below which trends you love, or which ones you think are missing from this list!