WordPress

10 of the Hottest WordPress Web Design Trends in 2018

Written by Ellice

Amid the glitz, glamour, and yards of chiffon at Fashion Week runway shows — whether in Milan, Paris, or the Big Apple — there are two things that are certain:

  1. The editor of Vogue will wear sunglasses indoors.
  2. Certain designs will rise to the top, creating a bumper crop of fresh trends for the upcoming season.

The catwalk of WordPress is no different. Well, except for the editor of Vogue part.


To keep your site on the cutting edge of design, you need to understand what’s popular in the WordPress community. More importantly, you need to understand why some trends become, well, trendy.

Even if it might seem like it, what’s popular is rarely arbitrary. By understanding when and why to implement common design elements, you’ll be better equipped to create a WordPress site that’s beautiful, modern, and functional.

Let’s get started by taking a look at the 10 most interesting trends in web design today. Then we’ll show you how they can be implemented on your own WordPress website.

1. Website Builders

Even with thousands of available themes, it can be difficult to create a website design that is truly your own. However, this paradigm is slowly changing, as web design is becoming more democratized.

This is, in part, the result of a surge of popularity for website builders, such as Remixer. These use a What You See Is What You Get (WYSIWYG) interface that enable all users to quickly customize the look of their web pages. Website builders lower the threshold for web design, giving even inexperienced users the ability to create striking and unique sites — fast.

To keep up with their competitors, WordPress is focusing more on this type of functionality. There are some popular WYSIWYG builders specifically created for WordPress that have been around for a while, such as Beaver Builder and Elementor. Now WordPress itself will be getting in on the act in 2018, with the full-scale release of the Gutenberg editor.

Gutenberg is a new text editor that is planned to replace the current TinyMCE-based editor within WordPress. Inspired by other WYSIWYG builders, Gutenberg features a drag-and-drop interface that enables you to freely customize different areas of a post or page. It’s not strictly a page builder — it won’t enable you to customize themes, for example — but it is influenced by the user-friendly, dynamic nature of builder interfaces.

At the moment, Gutenberg is planned to be released alongside WordPress 5.0. However, you can download and try the beta plugin right now. Just be aware that it should be used on a staging site as it’s not a stable release and could cause issues if used on a live site.

This change will naturally have a huge impact on the WordPress experience, and the project has been controversial. Even so, it seems clear that page builders are the way of the future, and we’re likely to see them evolve and grow even more in the years to come.

2. Minimalism Evolved

Flat designs have been popular for a while now, and they don’t seem to be going anywhere. This type of minimalist design focuses on simplicity while using flat colors, clarity, and plenty of white space.

Not only does this put the focus on showcasing your content, it also ensures that your site will load fast and look good on all devices. This type of minimalism can be seen in the Arnold theme, which is aimed at creatives and makes great use of white space to let the text and images both shine.

This trend may be a mainstay, but that doesn’t mean it’s growing stale. In fact, designs have been evolving to incorporate gradients, shadows, and images to a larger degree. This creates a greater sense of depth on the page and can lead to some eye-catching designs.

A perfect example of this effect is Hue, which makes use of large, clear fonts and gradient color schemes to create memorable styles.

The use of big, attention-grabbing photography and video is also growing in popularity, as faster internet connections become more commonplace. Themes like Kalium take advantage of this, coupling an overall minimalistic design with full-width headers.

By using this less-is-more approach to design, you can create websites that stand out. Plus, it can help improve your site’s loading speeds and make it easier for visitors to find the information they need.

We make professional web design easy! Sign up for a FREE consultation with RipeConcepts, one of the world’s leading creative and web design firms, to make your dream site fast, easy, and affordable.

3. High Saturation and Vibrant Colorshttps

The days of “You can have any color you like, so long as it’s black” are long gone. Today, bold colors and contrasting combinations are commonplace. People have very visceral reactions to color, so the choice of scheme can greatly affect how we perceive a brand or website. In fact, according to Buffer, 90 percent of our assessment when it comes to products is made based solely on color.

It stands to reason that using a striking combination of colors is a perfect way to make your site pop. WordPress designers have not been sleeping on this trend either. Many themes have a color-centric focus.

For instance, the Skin theme enables you to choose two colors, and it will create a gradient scheme for your site. You can also create your own gradients and add patterns and textures.

Yet another take on this trend, and one that’s becoming more popular lately, is the use of sharp contrasts. Using contrasting colors gives your site a fun, artistic vibe and can also aid in accessibility.

One theme that pulls this off well is Piñata, with its vibrant color schemes that are also fully customizable.

It’s incredible what some creative usage of color can do to make an otherwise simple design jump off the page. As you can see with the Piñata theme, keeping a consistent color scheme across your site, including in your images, can turn it into something unforgettable.

4. Asymmetrical and Broken Layouts

Minimalism and flat designs are all well and good, but sometimes you want the opposite of a clean, neat look. Designers are starting to push the boundaries by creating deliberately broken grids and asymmetrical designs.

One theme that accomplishes this well is Albert. It uses sliding images, overlapping elements, and a deliberately twisted look that catches your eye and forces you to pay attention.

Another variation on this trend comes in the form of the Overlap theme, which uses overlapping elements and a broken grid design to create a unique look.

This type of design is difficult to pull off. It requires you to tread a fine line between being visually arresting and keeping your site useable and uncluttered. Even though the content is spread across the page in unconventional ways, everything still needs to be clearly visible and possible to read at a glance.

After all, you don’t want to end up with a stylish site that nobody understands how to use.

5. CSS Grids

Web designer Hui Jing Chen described CSS grids as “the web finally getting its driver’s license.” In her opinion, web design has been stuck adhering to print standards for too long, and she sees CSS grids as a big step away from this self-imposed limitation. So what exactly is a CSS grid?

In short, it’s a responsive type of grid that dynamically changes depending on where it’s displayed. You’ve probably come across this type of design most often on mobile devices. Page elements will shrink and reorganize based on the size of the window. The same can also be done in standard browsers, where the page design shifts in real-time as you change the size of the window.

It’s a fair bet that CSS grid designs will continue to become more popular. Some WordPress themes are already making use of them, including the Kuhn theme, which you can see in action above. Notice how images, text, and columns all change in real-time as the window grows and shrinks? This is a far cry from static, print-inspired designs.

6. Mobile-Friendly Designs

Speaking of responsive designs, let’s talk about mobile devices. In 2016, the number of internet users on mobile devices exceeded the number of desktop users for the first time. This was a turning point of web usage and made it clear that creating sites that are responsive on mobile devices is more important than ever.

We’ve talked before about how to optimize your WordPress site for mobile users.

One way you can do this is by downloading the WPtouch plugin, which will create a mobile theme based on your site that you can customize as you please. This plugin is recommended by Google, and makes sure that your mobile theme passes the search engine’s standards (although it’s worth bearing in mind that its reviews are a bit mixed). You can also use the Jetpack plugin to quickly create a mobile theme for your site.

DreamPress Plus and Advanced users get Jetpack Professional for free with their hosting plans.

Another plugin that places a lot of importance on compatibility across devices is Elementor. This multi-use tool enables you to set dynamic widths and configure individual page elements depending on the display device.

This page builder can be used with any theme. It enables you to see your site emulated on phones, tablets, and desktops so you can make sure it will look great regardless of how it’s viewed.

7. Microinteractions

Design is all about the details. The rising trend of microinteractions focuses on those small details and has become increasingly popular over the past few years. As the name implies, this concept refers to the way elements on the site respond to small interactions in various ways.

One example of this concept in action is when a short animation plays if you click or hover over an icon. You’ve probably come across this yourself, such as with the Facebook reaction emojis:

Microinteractions give your site a living, tactile feel. They make it feel like you’re really interacting with the page, rather than just staring at a static wall of information.

You can add a similar effect to your own site with the Animate It! plugin. This plugin lets you add animations to almost any content, including images and text. You can also determine when the animation will trigger, how many times it will repeat, and set both a start and exit point.

Take a look at the following example, where the image is set to perform a “pop” animation when the cursor hovers over it.

Microinteractions are not just for animations and images, however. This technique can also enable you to use text in interesting ways.

For instance, some pages give you the option to highlight text and then share it on social media. You can add this feature to your own site with the Highlight and Share plugin, which supports popular networks such as Facebook, Pinterest, and LinkedIn.

These are just a few examples of how you can use microinteractions to make your site feel more alive and responsive.

8. Slants and Diagonals

Making your site look off-kilter might not sound like the best idea, but it’s actually one of the fastest-growing design trends. Slanted lines and diagonal breaks not only give your site a modern feel, they help lead the eye down the page.

This works particularly well on one-page designs, separating each section in a visually pleasing way. And there are several WordPress themes that enable you to implement a slanted look on your site.

For an example, you can take a look at the Flamingo theme, which enables you to create a unique design with diagonal separators. The results are undeniably eye-catching, and the theme’s customizability enables you to be creative with the final design.

Another take on slanted design comes from the Upward theme. This option uses a more traditional, grid-based design but implements slanted lines for an unusual and stylish look. It’s also fully customizable, with plenty of options.

As you can see, using an unconventional design can make your site really expressive. It’s also a great way to separate content clearly and direct your visitors’ attention to the most important elements.

9. Big, Bold Fonts

Typography is the art of processing and printing type. In other words, it’s a way to turn words into pieces of art. By using large font styles, you can instantly set the tone for your site with a stylish header. In addition, large text will ensure that the message comes across even on a smaller screen.

One theme that shows this off well is Wedding Planner.

This theme also illustrates another current trend: font variation. Instead of sticking to one or two similar choices, using serif and sans-serif fonts together can create a unique result.

Related: How to Increase Your Website’s Conversion Rate with Typography

Creative usage of fonts isn’t just for headers either. The Retro Portfolio theme shows how you can use several different fonts to create a retro-inspired look on the page itself.

The important thing to remember is that readability still matters. As long as your text is still parsable, however, you should feel free to experiment with different font styles, sizes, and placements.

10. Customized Illustrations

Traditionally, most websites have stuck to using photography and animation alongside their text content. This is rapidly changing, however. Many designers are realizing that commissioning illustrations enables them to create a unique identity and gives them even more freedom when it comes to their visual branding.

Using illustrations in your site’s design is a great way to make it feel more personal and to tell a story with images alone. Hiring a talented illustrator can also be a lot cheaper than commissioning a team of photographers whenever your site needs a refresh.

Unlike most of the trends we’ve covered in this piece, there is no easy downloadable solution here. The key point is that you will need to find an illustrator whose style matches your site. It’s also important that you make sure to pay them for their work. Talent costs money, and nobody really wants to work for “the exposure.”

However, there are some things you should consider when designing your site around illustrations.

First of all, you should make sure that your theme uses a full-width layout, so you can show the images off at their best. One great example is the Illustrator theme, which is specifically created with this type of design in mind.

Another theme worth checking out is TheGem, which has a responsive full-width design that is perfectly suited to large images. This theme is very versatile, with layouts suitable for stores, portfolios, and business alike.

A few well-placed illustrations can do a lot to spruce up your site. It also helps improve your storytelling and will give your brand a totally unique visual identity.

Conclusion

No doubt about it: 2018 is going to be an exciting year for WordPress users, and you’ll need to do a little work to keep up with the latest developments. Designers never sleep, and they are constantly figuring out new ways to help WordPress look and function better.

As new designs become more prevalent, visitors will be expecting your site to keep up. Catwalk or not — make sure you put your best foot forward.

About the author

Ellice

Ellice comes to us from House DreamHost, the first of her name, Gatekeeper of All Things Content, Protector of the Brand and Ruler of Social Realms.

tl;dr - Ellice is the Content Marketing Manager at DreamHost and oversees all social media and content efforts.