This year, animation will begin to appear in a smaller dimension, known as micro-interactions or micro-animations. These animations serve one purpose: to engage and delight the user. Alongside this, they also function as page guides, giving website users visual clues and making important information stand out more clearly.

While they are very small (hence the name), micro-animations have the power to provide a better overall user experience for website visitors. Used correctly, micro-animations make it possible to visually explain a lot more to the user – which is ideal, considering humans process visual information 60,000 times faster than plain text.

Micro-interactions and animations include:

• Hover and scrolling animations
• Scroll triggered effects and illustrations
• Interactive, animated infographics
• Small menu interaction

These micro-animations can be very effective indeed, particularly when used to help visitors engage and navigate sites. However, they should never distract or frustrate the user’s journey, just simply enhance it.

Examples of micro-animations:

femmeandfierce.nl
themads.agency

Google switched to mobile-first indexing in March 2018. This means Google’s bots will now review your website’s mobile version before the desktop one when deciding how to rank your site in its search engine results pages (SERP).

Your mobile site will now be seen as the primary version of your website, so if it is not mobile responsive, you may see a drop in your SERP rankings. Having a fully-optimised and responsive website in 2019 will be vital for going up in Google rankings.

On top of this, pay attention to your mobile site’s loading speed, as this plays a part in how Google ranks mobile sites.

According to Google, site speed also affects how long users stay on your web pages:

• 1 out of 2 people expect a page to load within less than 2 seconds
• 53% of visits are more likely to be abandoned if the page takes longer than 3 seconds to load on a mobile device
• 46% of people have shown displeasure in waiting for pages to load while browsing the web on a mobile device

2019 will see designers breaking away from sharp, geometric structures and experimenting with more natural shapes and lines.

Less conventional than your typical square, triangle or circle, these shapes are fluid and organic with softer edges.

Much more aesthetically pleasing, organic shapes create a sense of accessibility and comfort for website users, as well as providing a depth to design that makes page elements stand out.

Alongside this, organic shapes are naturally asymmetrical which helps to fulfil the design principle of balance.

Examples of fluid organic shapes:

• www.crowdrise.com
• www.mawla.io
• www.wanderingaimfully.com

With Pantone’s Colour of the Year for 2019 announced as Living Coral, we predict that bold colours are going to become very popular within the web design world. Vibrant and vivacious, statement colours like Living Coral can really help to grab the attention of website users.

Asymmetrical colour blocks can also help users to better distinguish the content on your page. For example, adding colour blocks to call to action buttons is a great way to help the user easily navigate around your site, and drive more clicks to certain landing pages.

When incorporating new colours into your brand’s website design, it’s important to bear in mind the message you want your company’s visual identity to communicate with potential customers. While yellow often signifies a business that’s friendly and cheerful, blue conveys professionalism and authenticity.

Keep an eye out for bold headlines in 2019, as full-weight serif fonts come back in style. Website typography usually includes clean-lined sans-serif fonts used as body text, which we think will stick around for the most part.

However, expect to see a vintage charm encompass the web design scene in 2019, with custom hand lettering and serif fonts used more often for headlines. We may even see a switch from sans-serif to serif body text, as an ode to traditional newspaper and magazine typography.

Web designers will definitely be putting their nostalgic typography foot forward in 2019, with full-weight serif fonts like Cooper, Sentinel and Circular come back in style.

Tip: Keep font styles to a minimum. Steer clear of using more than three fonts throughout a website design to prevent the site from looking cluttered.

Examples of serif headline typography:

• www.mailchimp.com/design
• www.humaaans.com
• www.couple.co
• www.onemedical.com

Video backgrounds are a great way to immediately engage website users with your homepage. In recent years, video headers have been largely popular, but in 2019 you can expect to see full video backgrounds.

Users love being immersed into interactive experiences and video backgrounds have been shown to increase conversions as well as time spent on page.

Video headers are also a great flexible design feature, which, when used in full-screen, can act as an eye-catching dynamic background.

Important things to note:

• Videos can decrease site speed, so, to ensure your site loads fast, opt for a short video clip with a file size no larger than 6 MB.
• Be unique – original videos are always best. While stock videos are easy to source, original videos make your business appear far more authentic, which is key to gaining customers.
• Keep website background videos on mute. For video footage that has sound, leave the option for visitors to turn sound on, rather than the other way around. There’s nothing worse than the shock of a sound you can’t turn off when entering a website.

Examples of video backgrounds:

• www.antoni.de
• www.sailing-with-greenpeace.com

From interiors to fashion and, of course, website design, minimalism never goes out of style. More of a web design principle than a trend, a minimalist website usually includes plenty of whitespace, clear typography and very few distracting elements.

Opting for a clean, uncluttered website design makes your site much more user-friendly. The simplicity of minimalist design also makes communicating your brand’s messaging and CTAs much easier.

From a visitor’s point of view, minimalist websites are easy to navigate, aesthetically pleasing and no-nonsense.

Examples of minimalist web design:

• www.libratone.com/uk/
• www.leoetviolette.com
• www.blloc.com

The web design trends of 2019 will bring a fresh throwback to retro design. Expect to see a nostalgic balance between then and now with the use of retro design elements like colour schemes, illustrations, treated images and typography.

As mentioned previously, typography is going to play a big part in web design this year. Incorporating traditional serif fonts into retro website designs will provide users with a brilliant sense of nostalgia.

An ode to older times, retro web design will likely encourage users of older generations to interact with your website, and certainly intrigue younger generations who are yet to experience such design concepts.

Examples of retro website design:

• www.greatjonesgoods.com
• www.leathermilk.com

In 2019, expect to see web design veer away from the ever-popular centred page, coined the ‘homogeneous hero’ by Webflow, due to the fact most websites now tend to look the same.

It seems that many designers are now growing tired of creating samey websites with centralised headlines and buttons over the top of an image.

The shift towards left aligned pages will see your headline and call to action on the left, and an image or illustration on the right. However, it’s thought that left aligned pages will now become the next ‘homogeneous hero’. But, at least headlines are clear, and you’ll always know where a website’s CTA is.

Left aligned page examples:

• www.airtable.com
• www.mailchimp.com
• www.dropbox.com

Traditionally, the elements of a web page tend to sit in their own designated spaces, separate from other on-page elements. However, in 2019, this is going to change, with the introduction of overlapping elements.

Designers will explore different ways to visually link connected elements. This could mean merging images to text boxes or placing headlines over images, to create a sense of unity among elements.

This kind of design is also visually interesting to the user; it adds depth to web pages and delivers a more diverse website experience.

Examples of overlapping elements:

• www.mad.studio
• www.forhers.com