Jump into a new project or refresh an older site with one of these WordPress web design trends for August 2021. These techniques can be a visual reminder that your design is fresh and modern, while presenting you with something new to try.
The nice thing is that any of these techniques can be accomplished with your WordPress website. Use this guide as inspiration as you create new designs this month.
1. Interesting Scroll Patterns
Scrolling doesn’t always have to go up and down. It only has to be intuitive.
This trend includes any type of scrolling or navigation that doesn’t move in the traditional manner. Scroll might work from left to right, diagonally, or in almost any other pattern.
It may or may not include instructions or a visual cue, although many designers choose to give users a little hint as to what to expect or how to interact with these elements.
This design is most often associated with websites that have strong imagery with multiple points of entry. The example here from Sneak in Peace shows lots of different sneaker styles. The volume is the differentiator for this website and the homepage provides a glimpse with a quite long left to right, right-to-left scroll before the user makes an entry choice to see men’s or women’s sneakers.
What’s nice about the interesting scroll is that it is contained with a design that almost entirely fits on “one screen” in a way the scroll action accommodates. It leaves no question about how to use the design or what you should do as a user on the website.
Why it works: Interesting scroll patterns can surprise and delight users. When done well this type of engagement can help keep visitors on your website longer.
How to use it: Pick one element to apply an unconventional scroll pattern to. In most cases, this is the homepage hero area, but you aren’t limited to that. Scrolling can work with images or text elements; let your content drive the overall choice and interaction here.
2. “Glass” or Soft UI Effects
No matter what you call it – neumorphism, glass UI, or soft UI – this trend is growing and stirring controversy.
The effect started trending on Dribbble with designers and has started popping up in more and more website design projects. While it’s a little difficult to classify, it’s one of those things that you’ll know for sure when you see it.
Neumorphism is a combination of the old skeuomorphism style with a frost or glassy blur layer between objects. The overall trend is exemplified by this softer look with shadows for depth and obvious layers.
Just take a look at this example from the Tekpon home page.
The web design trend is one that’s more of a low-impact, low-drama style in contrast with many of the bright colors and in-your-face designs that have been popular for some time. When used for desktop web interfaces, glass UI is often part of a single element, such as the example above. It often works with an animated background and creates just the right amount of contrast to help encourage interaction within the soft element.
The design trend is a little different when it comes to mobile or app interfaces, where entire app projects feature the aesthetic.
That’s where much of the debate about this trend comes in. Some argue that while it looks nice, there are usability and accessibility concerns dues to contrast issues. So, take care when thinking about how to design in this style.
Why it works: The glass effect works well as an accent. The frosted look creates a distinct layer that allows you to see through to the background.
How to use it: Create a “top” layer using a soft element that contains a call to action or buttons to help drive attention to the location on the page.
3. Overlapping Design Elements
Remember when everything in a website design was on its own plane? Overlapping design elements have become the new norm and work in a number of different ways.
Overlapping elements may include anything from stacked images to images and text that intrude in each other’s space.
Then add on one more element – most of these designs feature interactivity between the overlapping layers. From small animations to color changes to hover states, the value is in the perceived interaction that overlapping elements create. You almost can’t help but hover or tap or click to see what happens.
The interesting part of this design trend is that it seemingly breaks every rule you’ve ever learned about web design. And yet it works.
In the example from Barzagli, the simple motion of the photo behind a text element is intriguing. The text never loses readability due to high contrast in the layers. Tiny design details such as the color matching from the item in the photo to the text create a visual that you want to engage with.
Why it works: Overlapping elements encourage interaction in an almost invisible way. Without a button or direct call to action, the eye is drawn to where the layers connect with an almost innate urge to click or tap that part of the screen.
How to use it: This design trend works best as a full-screen pattern without a lot of other effects. Try it with a minimal aesthetic.
4. Modular Design Elements
Sometimes a website design trend is more visible to designers than users. That’s where modular design comes in – and it works fantastically with the WordPress block editor.
A modular design is one that is rooted in a grid and block types or sizes that get used and reused throughout the whole website.
If you start looking around, this design pattern is everywhere.
A modular design isn’t just for designers though. This design style creates a consistent and easy-to-understand framework for website visitors. It can be especially useful for large websites because consistent and replicated design patterns will feel familiar no matter how deep a user gets into the content.
When thinking about modular design, think in patterns. While the basic wireframes will be the same, the design therein can look quite different.
Why it works: Modular design patterns are easy to replicate from page to page and provide a consistent user experience. Plus, they can make design work efficient.
How to use it: The free Kadence Blocks plugin has a library of Wireframe blocks that can help you design quickly with a set of modular outlines that are ready for content. There are more than 50 blocks to choose from to jumpstart projects.
The new Wireframe blocks are available in the free Kadence Blocks plugin (v2.1+). Download Kadence Blocks for free to get started!
5. 80s Vibes
The 80s aesthetic is a visual pattern that is fun, fresh, and popular. Just take a look at this example from bananas.app.
This website design trend can take on a lot of different visual elements but is often associated with strong color choices, geometric shapes and patterns, somewhat bold type, and a hint of disorganization. (The 80s vibe is kind of busy and all over the place when you really think about it.)
The exploding use of this design trend is probably in large part due to emotional connection. Millennial and older audiences all resonate with this time period, often in a somewhat positive way.
The visuals are also light and fun, making this trend work with a lot of content types without feeling too heavy. As a designer, this trend can be a lot of fun because there are so many interesting shapes and design elements to play with from a period that has been replicated online yet. All of the designs of the 80s were in a pre-internet era, making this a first-time online design trend.
Why it works: The 80s feel is just old enough to create a sense of nostalgia with a wide audience.
How to use it: Pair old- and new-style design elements for hints of a retro feel without being stuck in the past. The example here uses an 80s framework – bright color blocks and geometry – with modern imagery in a video element. The square image/video area also has a modern social media feel.
Putting it All Together
WordPress web designers are always looking for new and interesting ways to deliver content, from blogs to e-commerce. The best way to make a website design trend work most effectively is to use it in combination with a design framework rooted in more classic principles.
Simply, don’t try to do too many new or trendy things at once. (That’s a recipe for designing a bit of a mess.)
The best way to use a trend is to start with an element and then expand (or contract) that design theme once you know how users respond to it.
Jumpstart Your Designs with a Library of Starter Templates
The Kadence Theme has an entire library of 17+ Starter Templates to help jumpstart your web design projects. You can start with a beautifully designed site and all you have to do is change the text. Or you can take them as a starting point to understand how to build out the site design and make it completely your own.
To get started, just install the free Kadence Theme and then install the free Kadence Starter Template plugin to get started. Just note you’ll need the Kadence theme installed for Kadence Starter Templates to work.