So I have been reviewing online all the latest web design trends and decided to come up with a list for you to review.

Animation and microinteractions

In todays most cutting edge sites the use of hover animations and animations is now becoming very important to separate your site ahead in the field and deliver that slick experience most users now come to expect.

anime js example

A new framework I think is awesome is Anime.js which I absolutely recommend for any type of microinteraction development. Other shouts include Velocity.js or Greensocks GSAP. All very powerful libraries that will help achieve modern interactions and hover states for users.

A very popular animation used recently is for SVG icons when the user scrolls to reveal them on the page

svg animation

For more simple animations there is always animate.css and is a crowd favourite for the last few years.

Use of Video

More and more sites are now turning to video rather than images on their display banners to create more of an impact when the user lands. See the following sites for reference to this tactic

Compression is a big thing with this tactic and most video format is converts to animated gifs and sourced from CDN’s after alot of compression so the performance is still acceptable.

Tilted and curved design

Alot of new designs are moving away from the more box style and clean straight line approach and moving more towards curves, abstract shapes and tilts which is more common in the graphic designers realm for posters and print material.

tilted design

 

Drop shadows and depth

What you on about mate!!! Flat UI for the win….

The use of shadows is not new, so why mention it? Although shadows have been a staple of web design for quite a while, thanks to the progress of web browsers, we now see some exciting variations. With grids and parallax layouts, web designers are playing with shadows more than ever to create depth and the illusion of a world beyond the screen. This is a direct reaction to the flat design trend that was popular in years past.

For instance Google’s material UI framework took drop shadow elements back to the front of modern web design and its now being replicated alot in various methods

Primarily you will see drop shadow being used on CTA buttons and elements but the use is a lot more subtle that the past with the blur and colour of the gradient transitioning into the background colour most cases.

Custom illustrations

Get illustrator out for banners guys.

Illustration banners for sites now is very popular in their vibrance aswell as the story they tell. It can really help tell the story of the brand using this approach hence why I think its the new favoured approach for alot of companies currently.

 

While this trend is perfect for businesses that are fun and energetic, it can help make brands that are typically perceived as serious and right-brained more approachable to their customers. Whatever your brand identity is, there’s likely an illustration style to match it.

Share this post

Be the first to write a comment.

Your feedback