This is an unpurchased blog post for a website designer client.

When planning for a website redesign, the options can be overwhelming. You want your site to be eye-catching, user-friendly, forward-thinking, and most of all convey your brand. Not a simple task, but it can be done. And the first step is to find your inspiration.

Here are five of the top design trends for websites in 2018. You can use them to kick off the brainstorming phase for your company’s website:

Variable Fonts

In 2016, variable fonts were unveiled, and in 2018 they will begin to flourish. Created through an unprecedented collaboration between Apple, Google, Microsoft, and Adobe, variable fonts are the ultimate in responsive design—the characters change width and height depending on the size of the viewing screen. Previously web designers were only able to control the point size of the font. Bolder fonts often had to be swapped for more legible, thinner fonts when viewed on a smaller screen. Now the same bold font can be used for all screen sizes because the width and weight will automatically change for better legibility on a smaller screen.

A company’s font choice can create excellent brand recognition. By using a variable font, you can keep your brand cohesive across screen sizes.

Vibrant Colors

Bright, vibrant colors are in! As screens have gotten more technologically advanced and able to reproduce a wide range of super-saturated colors, web designers are breaking the chains of web-safe colors. Gorgeous, subtle colors are still popular and the perfect fit for many sophisticated brands, but for those businesses that want to make a bold statement, now is your time. Use vibrant splashes of colors like pink, teal, yellow, or orange to enliven your site and highlight important call-to-action buttons and brand statements.

Remember that bright colors can be overwhelming to the senses. Limit the number of colors you choose and use them in strategic ways.

Asymmetrical Layouts

As responsive design became the norm, websites took on a symmetrical, boxy look. This made it easier for the site design to reorganize from the desktop screen size to the size of the mobile device screen, but it also made it hard for a website to stand out from the crowd. As new responsive design technologies have developed, web designers started experimenting with designs that were outside of the box—literally. Asymmetrical design started to take off in 2017 and is still going strong into 2018. Words and pictures no longer have to be lined up precisely in a row or column. Titles can be off center from the paragraph text, images can overlapangles can be shifted, and borders can be blurred.

Creating some variation in element placement adds interest, but adding too many elements that are out of alignment can create a confusing user experience, so use this trend sparingly.


Large-scale gradients using bold, bright colors are back. And so are shadows. Web designers haven’t ditched the flat design look that has dominated the last several years, but they have been adding more layers to it. The popularity of vibrant, saturated colors has led to the introduction of bold full-screen gradients as a way to add interest to a design without distracting from the main text on the page. Web designers have been able to take advantage of increased browser functionality to add further depth by playing with shadows. Shadows bring more life to imagesdifferentiate between different sections of a web page, or as micro-interactions on call-to-action buttons.

The reintroduction of gradients and shadows allows your business to create hierarchies in your web design by highlighting critical elements. Use shadows sparingly to make the maximum impact on the elements that count the most.


Video backgrounds became popular over the last several years, and that trend is not slowing down. However, video slows down your website loading speed, which can create a bad user experience. Lightweight, quick loading animations like particle backgrounds or smaller moving elements are becoming popular alternatives to video. Particle backgrounds are minimalist illustrations that constantly move and either play on a continuous loop or react to the user’s mouse. You can also add movement to your website through animated illustrationsobjects that respond to the page scrolling, or elements that change when the mouse hovers over them.

Animations are a fun way to add visual interest to your website, but as with all design elements, they are best if used strategically to bring attention to important elements of your site.

With so many exciting trends it’s tempting to use them all, but that would make for a confusing site that doesn’t convey the message of your brand. To create the most effective, eye-catching website, it’s best to use the services of an accomplished web design team to help guide you through your options.

Leave a Reply