With almost 20,000 websites hosted across all of our servers, it’s safe to say our eyes see a lot of different websites on a daily basis.

We’ve seen it all: blogs, corporate websites, design portfolios, e-commerce sites, publications. We’ve seen websites containing one page, ten pages and hundreds of pages. We’ve seen websites in English, French, Portuguese, Mandarin. We’ve seen websites on school, sports, politics, gardening, foosball, photography—you name it.

One of our favourite things about the web hosting business is getting to see all of the variety, creativity, and ingenuity that is put into the web design of sites. Digital trends evolve much faster than print design and with so many tools for designing websites these days, almost anything is virtually possible. 

We’ve decided to share four web design trends we’re currently seeing a lot of and loving. But first…

 

Why Does The Appearance Of Your Website Matter?

 

If you can make a website that is both beautiful and functional, you’re golden on the web. User experience should always come before aesthetics, but hey, we’re only human. Here’s why the design of your website matters:

  • Scientifically more appealing 
  • Builds trust and authority
  • Instills harmony and joy in the user
  • Humanizes your brand 
  • Reflects creativity and good taste
  • Reflects your company and its values 

 

Your Web Design Toolbox

 

Making a website has never been easier. Gone are the days of painstakingly hand-coding every page from scratch by candlelight. Here are some of the ways you can build the website of your dreams for free: 

If your website is brand new, check out the things you should know before designing a websiteWith that all being said, let’s take a look at some current web design trends you can easily incorporate into your own site. 

 

1. Expressive Fonts

 

Why be plain when you can be bold? Expressive, unconventional fonts add meaning and allure to your content. We’ve seen tons of websites playing around with their display typefaces (the titles and header tags on a website). Here are some ways to add more attitude to your fonts:

  • Make it 3D, textured, or add a drop shadow or gradient
  • Have the typeface span the entire screen
  • Distort the font or break it up into several lines
  • Place the font vertically rather than horizontally
  • Play around with weight
  • Play around with size
  • Play around with colour

Why do this: 

web design trends - fonts

When you can do that:

Which typeface above offers a more engaging and memorable experience for the user? 

 

This title’s font exudes character.

 

 

Look at the size of that typeface!

 

 

2. Vibrant Colours

 

Vibrant colours made a comeback in 2017 and they’re still going strong. Bold, bright, and beauitful colours entered web design thanks to material design and flat design. Paired with fresh typography, gradients, shadows, or animations, vibrant colour draws your eyes towards the design and creates a lasting impression. 

When using vibrant colour, balance and minimalism are key! Pick one colour and keep the rest of your website colours neutral to offset it. If you’re going to use a bright colour, pair it was a strong, plain font. 

In case you’re wondering what the “colour of the year” is, it’s “Ultraviolet” according to the professional colour company Pantone. 

Why do this:

wed design trends - colour

When you can do that:

wed design trends - colour

 

Dropbox recently rebranded with strong colours.

Vegetables are this website’s colour inspiration.

 

3. Particle Backgrounds

 

Particle backgrounds are a newer feature trending in web design. They’re a great alternative to video as the animations are created using light-weight JavaScript or solely CSS, so they don’t weigh the page down as much. Particle backgrounds are exactly what they sound like: backgrounds featuring animated particles. These backgrounds are a fun way of making your website a little more dynamic. They’re usually featured on home pages as an alternative to the past hero image trend (featuring a large image at the top of a page, or as the page’s background). A lot of the particle backgrounds you’ll see are custom-made, but here are some pre-made ones you can try on your website: 

 

web design - particle backgrounds

Click on the image to see those waves in live action.

 

web design trends - particle backgrounds

Animated backgrounds are perfect for design agencies wanting to show off their creative edge. Click on the image to see for yourself.

 

4. Micro-Interactions 

 

Micro-interactions are so satisfying because they’re directly related to good user experience.

When you click “submit” and a pop-up comes up letting you know your submission was completed successfully: micro-interaction. When you drag down on a page in a mobile app to refresh it and a little loading icon appears: micro-interaction. When you hover over a “log In” button and it glows subtly: micro-interaction. Micro-interactions reveal functionality of actions on a website and they provide instant feedback to the user. They let the user know that they’re doing something correctly, as well that the website or app is working properly. The more clever the micro-interaction, the more delightful the experience.

Here are some common areas you can find micro-interactions:

  • Buttons
  • Navigation bars and menus
  • Social media icons
  • Uploading and downloading
  • Notifications
  • Turning features on and off

Micro-interactions are subtle animations created with JavaScript and/or CSS. There are plenty of libraries online with free snippets of code to play around with. Try some of these to start:

Clicking “contact” in the navigation bar opens up a contact form on this website.

Micro-interactions can be as simple as a line underneath the page you click on in the navigation.

We’re going to leave you with the above four web designs to try out, but the options are really endless when it comes to creating an engaging and creative website. Which website trends are you the biggest fan of? Do you know any websites that use any of the above trends? Share them with us in the comments below!