WordPress Web Design Trends for October 2021

What’s makes a trending WordPress website design? It’s a combination of elements or techniques that are making multiple appearances in new and redesigned projects. Trends may appear because a major player makes a change – designers tend to follow the lead of Apple and Google – or there’s a funky little thing that just makes sense. (Remember when the hamburger menu first appeared?)

Trends can also fade almost as quickly. The trick to using them well is to deploy trends in a way that allows for adjustment later if you need it. Here are five great trends that will keep your WordPress website looking fresh.

1. Split-Screen Aesthetic

The split-screen aesthetic is one of those website design trends that seems to ebb and flow in cycles. Right now, it’s finding popularity again.

Split-screen designs are easy to spot because of two “screens” that sit next to each other on desktop screens. (They tend to collapse to a stack on mobile.) Often, one screen is more visual while the other contains text and calls to action.

In the example above from emmalewisham.com, the main headline crosses both screens but the rest of the text is on the right side. In this iteration, the side-by-side content model is less about function and more about the way the design looks.

This works well thanks to the image on the left almost leading you there. The video reel on the right side of the screen is a fun alternative to two images or an image and color block. The subtle size of the video also keeps it from being too much. (A nice touch with the speed of the animation therein.)

Why it works: Traditionally, split screens give users two options to interact with content. While that’s not the case directly here, the split-screen still provides two different types of visual entry points into the design. The other bonus is that split screens for desktop convert quite nicely to mobile in most cases without having to change to more extreme crops of images.

How to use it: While most split-screen designs use equal weight panels, you don’t have to. Play with content and images to create two pieces that are equally engaging, but might speak to different audience segments or user interactions.

2. Just Text

Not every design is supported by a great photo or video. These can often be some of the most complicated, and creative, projects to take on.

A stark, almost brutalist visual concept that uses only text elements can present a strong design when the words and typefaces are thought out with care. The other element that can make or break a text-only design is space. White space can push visual flow, increase the readability of the presentation, and provide a focal point.

In the example above from artworld.agency, note the use of space with a thinner type family at the top, contrasted with a heavy open at the bottom of the screen. The other thing to note about this design is the absence of traditional website elements, such as navigation, corner logos, and branding.

The intent of a design like this is to hone in on the words. Removing those elements provides even more of that focus.

Why it works: Typography can be amazingly beautiful. This trend is a case in point. But it takes having just the right words to propel the design forward.

How to use it: Use it for simple designs when the words are more important than the visuals. Sometimes “show, don’t tell” starts with text.

3. Dark Mode

Dark mode is the dominant website design trend of 2021. This is the year when more and more website designers began creating toggles between light and dark versions of the design because users like it.

More browsers and devices are allowing this flip at the user level, making designing for it even more important. You want your WordPress design to look just as good with a light or dark background.

The trouble with this design trend is that it is definitely technical. Kadence Theme Pro just introduced a dark mode color palette switch that makes it easy to adjust on your own in WordPress. Here’s what it will do for you:

●   Toggle switch for light/dark mode

●   Customizable color palettes so you can control variations

●   OS aware setting that uses a computer’s default settings

●   Ability to add a toggle switch to the header or footer

●   Alternate site logo upload for dark mode

●   Easy setup that you can do right in the WordPress customizer

●   A lightweight option that won’t slow down your website or user experience

Why it works: Dark mode works because users like it. It can be easier to read and see for some people, making this a must-have option for many design projects.

How to use it: Design with dark mode in mind so that every element of the switch still looks good and works as intended. Logos, colors, and design elements need to remain readable in dark mode; often that requires switching some element in the design.

4. Mixed Reality

This fun and funky little trend doesn’t work for everything but when it does it can be super engaging. Mixed reality designs include elements that are real – such as photos and video – combined with elements that aren’t – illustrations, cartoons, or animated elements.

The end result is a whimsical design that has a lot of visual interest.

In the example above from outlawburger.com, the burger photos work because they look delicious. The surrounding design uses illustrated icons that look a lot like the elements you might see on the liner paper in a fry basket. It’s light and fun and matches the vibe of the brand the website is for.

Pay attention to how the typefaces and language in this website design also maintain that same mood and feel.

Why it works: This technique and trend is a visual disruptor. Because the combination of elements is unexpected, you are drawn to look at them.

How to use it: This website design trend works best with lighter content and can benefit from a more whimsical element.

5. Off-Screen Sliders

Homepage hero sliders are one of those website design elements that are a constant matter of debate. Designers seem to love or hate them. Either way, they remain a popular design option and an even more trendy way to use a slider is to create an almost full-width element with the next slide just hovering at the edge of the screen.

This peeking slide has just enough showing that the content is off-screen but that you know to manually advance the slider to see it.

This puts the user in control of the slider and provides an almost “slider-free” experience for those that don’t want to see the hero images moving.

In the example above from mangias.it, the slider has all manual controls which contribute to this overall trend. The first slide can be clicked to play a video or you can see from the timeline dots and off-screen slider panel that you can opt to look at something else.

Why it works: With traditional sliders, the user may lose control of interactions with sliders that move automatically. This option with a manual control gives that power back to the user.

How to use it: Stick to necessary slides, remembering that most users probably won’t advance past the first or second slide. Put the most important images and information there.

Wrapping Up

Website design trends are a fun way to keep a finger on what visual elements people are paying attention to. Remember that it can be just as important to see what stops trending as what is so that your projects don’t begin to look dated. 

Leave a Reply

Your email address will not be published.

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.