Neons, Gradients and Blend Modes in Website Design

Neons, Gradients and Blend Modes in Website Design

The last 12 months or so have seen a huge increase in the use of bright palettes, neon gradients and CSS blend-mode overlays within website design. As with all trends, there are (usually) reasons beyond ‘it just looks nice’ as to why visual trends become prevalent. Here are some of my thoughts on where this trend has been successful (or not)…

Content is still King

Mailchimp Year Report 2015

Mailchimp year report – www.mailchimp.com/2015

There is no denying that this Mailchimp annual report is a long website. Getting people to consume this much information without leaving your website out of boredom, overload or just finger cramp from scrolling is no simple task. Breaking up content into digestible chunks and allowing this to become a functional feature of the site itself not only draws the user in but allows the images to add value to the website. The gradient colours support the scrollable nature of the site – enticing the user down the page naturally. From a design and functionality perspective, I feel Mailchimp have come close to winning the internet on this one – top banana. 🍌

Roll it in Glitter

Coldplay Playlist Artwork

Coldplay Playlist Artwork

Spotify App Playlist Artwork

Viral 50 Artwork

Spotify does a great job of bringing bright palettes to the table – remember the fuss when the app icon got brighter? (No, just me then…? Awkward.) A rollout of gradients, neons and blend-mode overlays then started to be seen throughout the app, web player and microsites, reflected in playlist artwork and also appearing on printed media via billboard ad campaigns. Despite choice colours, modern gradients and brand consistency – if you’re attempting to mask a multitude of sins, details like these aren’t going to bring much more value to your users. Dear Spotify, no matter how lovely you make the playlist artwork look, I am not going to listen to your carefully compiled Coldplay tracks. Sorry not sorry.

Transforming Corporate or Generic Imagery

Stock photos are a necessary evil sometimes, there’s no denying that. Incorporating brand colours as overlays, gradients or complimentary patterns can make them more unique and apply your brand to a generic image. I’ve applied some of these styles to a very boring stock photo, which now looks more like it could belong within a website with photography relevant to a brand.

Stock photo with edited gradient overlay

L: Original – R: Edit

taptaro.co home pagepitneybowes.com home page

jargonfreefridays.com home page adisonpartners.com home page

Sites that have adopted this well include Adison Partners, Pitney Bowes, Taparo and Jargon Free Fridays. All the above are using quite corporate or generic photography, but incorporating overlays and blend effects to make the images relevant to their respective brands.

Okay, but why…?

Paving the way for the increase in vibrancy and pixel perfect design is better hardware. The pixel density and capability of handling colour on screens we use every day is increasing rapidly. The rise in retina screens and wide colour displays on our phones, laptops and desktop monitors has literally added thousands of colours to the visible range on these devices.

To respond to these updates and to support the content being created, apps we use every day such as Instagram have adapted their platforms to support more colours within the content they serve. This has a knock on effect on the inspiration we’re all exposed to – naturally we’re influenced by our surroundings – meaning our work starts to incorporate these new colours too.

Basically, it’s colours turn to move away from ‘web safe’ in the same way that fonts did.

Preserving Accessibility

Your website and its content should be accessible to all. This means visually – pick your colours wisely and use resources such as webAIM to ensure design meets and/or exceeds best practice standards. It also means functionally – if your website branches out into blend effects then ensuring fallbacks are in place for users with older browsers is vital – we’re looking at you here IE.

If this has got you wondering how you can bring some colour into your website, get in touch – we’re full of bright ideas!

More From the Blog