WordPress Web Design Trends for September 2021
Looking to add a fresh look to your WordPress website design? Try one of these trending elements.
Jump into a new project or refresh an older site with one of these WordPress web design trends. These techniques can be a visual reminder that your design is fresh and modern while presenting you with something new to try.
1. Serif Caps Typefaces
The key to making the serif caps typeface WordPress design trend work is to go big!
Oversized serifs have immense visual interest when paired with a simple overall visual theme. When working with this style, choose one serif type option, use it in one placement with purpose, and stick to simple sans serifs for the rest of the design.
The high type contrast and singular use of the serif will give it a lot of impact and help push the design forward.
Why it works: Typography used in this manner can create a highly visual “art” element that helps draw users in the design when you don’t have otherwise stellar imagery.
How to use it: Stick to a few common words in an oversize display. Don’t clutter serif caps typefaces with a lot of other elements. Use the Kadence Advanced Heading Block to add bold headers with customizable font size, font family and more.
2. Countdown Timers
For websites with an event focus, countdown timers are a must-have design element.
From simple countdowns, such as the one in the example above, to full-screen options, it is easier than you think to add this trending design element to your WordPress website.
Why it works: Countdown timers can add a sense of urgency for an event. This is a simple and informational animation that can help users make decisions about attending or registering.
How to use it: You can use a simple, streamlined countdown or design the timer as a dominant art element for events that are happing in the immediate future. Use the free Kadence Blocks Countdown Block to easily add a countdown timer. See how to add a countdown timer to WordPress.
3. Highlighter Effects
Is one part of your message vital for website visitors? The trending highlighter effect for specific words or phrases is a solution that accomplishes this visual goal and looks great at the same time.
A solid highlighter effect can be almost any color – start with your brand guide – and should look like it was drawn in and be thick and chunky. Too perfect, or too thin of a highlighter style may just look like an underline gone wrong.
Note the imperfect placement of the green highlighter style above. It stops short of the final letter and has curves that mimic drawing. The effect isn’t overly cartoonish or whimsical and it is an immediate eye-catcher.
The extra thing this example does is in how you read the words above and below the highlight effect. It serves to separate two phrases without punctuation. We are bigbump (brand name highlighted) with the shaded part creating a natural pause in your reading. Then you read “we build websites.”
It’s a highly effective use of this website design trend that’s functional and easy to use. This is a trend that can be deployed to almost any design without a lot of other changes to the overall design framework.
Why it works: A highlighter effect can emphasize words or important information while using brand colors.
How to use it: Highlight the most important words in your messaging. Make sure to use a highlight color that maintains enough contrast for ideal readability.
4. Bold Color Overlays
Bright, bold color photography. This trend might look different from what you think when you first read those descriptors. A bold or bright color overlay can add a totally different focus and emphasis to a website image.
From hero headers to blog previews in WordPress, a color overlay creates a nice background foreground canvas on which you can combine images and text in a way that maximizes readability and comprehension.
While you can perform this technique with CSS, inexperienced coders can design this style of image in a tool such as Photoshop. If you plan to use bold color overlays, develop a style and set of color options so that you have a consistent look.
Work with typography styles to design a fully-layered effect that has impact for this design trend. It’s best suited for images and text together. You probably won’t see many color overlays on images that stand alone.
Why it works: Color overlays are a great way to create a background for text elements. Make sure that your color choice works with and creates distinct contrast with the text color and size that you pair with it.
How to use it: Color overlays can be used in hero areas to denote elements between scrolling or almost anywhere in a design where an image and text layer need to work together. Don’t forget to use your brand colors to help tie it all back to your organization.
5. Circles
Circles are one of the most perfect – literally – design elements.
They create a harmonious aesthetic, focus attention, and can serve as a container for a number of different elements from photos to buttons. Circles are starting to show up in more and more designs because of this versatility and wide usage.
How you use them depends on your design eye. What’s neat about the example above is that almost every trending way you might use a circle is shown in one place.
- Circle image element/container (Earth shape)
- Circle animation (text rotator)
- Circle focus element (text rotator around “PLAY”)
- Circle buttons (numbers to the right of the image)
- Circle timeline counters (to show progress below image)
- Circle favicon
- Circle bullets (for map shapes below the scroll)
- Circle “x” (for back to the top button)
Why it works: Because of the natural harmony of the shape, circles are highly engaging and help bring a natural focus and attention to elements.
How to use it: Deploy a circle for any of the options noted in the list above, but if you aren’t sure where to start, circular buttons are quite trendy for a variety of uses. (And they are thumb-shaped for tap actions!)
Share Your Favorite Web Design Trend
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. Try some of these trends – alone or in concert with other popular techniques that you love – to create a modern design in WordPress that will demand user attention.
What are you favorite design trends lately? Share your favorite design elements and how you use them.
