Web design trends for 2019: Part II – Bold visual styling

 

In the second instalment of a three-part series on design and UX trends, we're looking at the move away from established patterns in colour, layout and typography.


By Tess French13 March 20196 minute read

We’re seeing a real push away from the ‘banner and three blocks’ (or what I like to call ‘the meat and three veg’) approach to visual styling. And we’re seeing it pop up in all basic areas of design. The combination of technology advancements and a deeper understanding of user experience is driving a new wave of experimentation within digital design. 

 

Colour

There has been a rise in the uptake of visual techniques such as colour blocking, duo-toning and multi-step gradients. All of these are new tools for digital designers and are thanks to modern browsers supporting technologies like CSS3 and HTML5. 

The palettes themselves have also become much more unusual, with contrasting and competing colours selected over ‘safer’ options. We’ve seen a huge uptake in retro, 70s or 60s palettes, and also a lunge in the other direction with the use of blacks and fluorescents. 

Incoming fluorescence

Screenshot of Spaceship

Spaceship Super by Hayden Bleasel 

Spaceship Super uses a midnight blue, a highlight of bright purple and a set of other bright colours that print designers could only dream of. 

Colour-blocking and electric bright

Screenshot from Clipsal Iconic

Clipsal Iconic range pages by Luminary

The Clipsal Iconic website utilises strong blocks of vivid green and grey to convey a solid, attractive brand feel while also presenting rich, detailed content. We focused on uplifting the feel of Clipsal’s new range with generous blocks of colour that delineated sections while increasing visual interest. (Read a case study on this project.)

Bold and brave 

Gif of Tubik

Music app marquette by Tubik

With transitioning blocks of colour that change when the user scrolls, this music app maquette is blurring the lines between interface and illustration. 

All the way back to retro

Screenshot of Great Jones website

Great Jones Goods

Again, on Great Jones we’re seeing a balancing act between thoroughly modern interactive elements (such as a non -standard menu) coupled with a 70s colour scheme and font choice. The colour palette here is evoking memories of simpler times, where mum made casseroles and kids played in the street, playing to this company’s brand values.

See also, the Chobani rebrand. It’s not solely digital but the use of a retro colour scheme deserves an honorary mention. 

Chobani brand photography

Chobani Rebrand Review via Brand New

Typography

The advent of @font-face, Google fonts and other new typographic technology has seen a huge uptake in both unusual typefaces and grid-breaking typographic layouts. 

Content Universe promo page

Content Universe Promo Page Alternative Layout by Zhenya Rynzhuk

Brutalist 

We’ll be seeing a lot more layouts inspired by past design movements like cubism and de Stijl. While not appropriate for all brands and messages, it’s pattern-busting layouts like these that show us what is possible and give us a wider range of tools to make interfaces that reflect brand values and voices.

Content Universe home page

Content Universe Homepage by Zhenya Rynzhuk 

The rise of the Serif

Serif fonts have been typically seen as old fashioned and stuffy. In addition to the feel of them, it used to be that serif fonts didn’t play so well on a typical user’s monitor, with the serifs causing blurriness and aliasing issues. 

Example of fuzziness in serif font

Again, tech advancements to the rescue. Consumer uptake of ‘Retina’ or 4K monitors and devices (e.g. all new phones) pluse operating system level anti-aliasing means that more and more users are now enjoying crisp fonts (with none of the fuzziness depicted above), allowing the little ‘bits on the end’ to shine. All leading to a huge rise in bold, generous and curvy serif fonts. 

Barovier and Toso gif

Barovier & Toso leading with large serifs and a classical colour palette, but also a delightfully different and surprising interface. Via Graphic Mama.

Layout/hierarchy 

The popularisation and understanding of user experience has introduced a more purposeful approach to page layouts. Rules can be broken and grids can be smashed once you understand your users’ journey though your brand. 

What fold?

We’re seeing way more consumer sites leaning in to ‘the scroll’, reserving that ‘above the fold’ space for a single static message (the carousel will not be returning for 2019). These large messages often change frequently, and are the easiest thing to personalise with a marketing tool. 

From a design perspective, sites feel much more luxurious as we’re not cramming everything into a short and wide rectangle (an awkward shape at the best of times). 

Microsoft Hololens

Microsoft Hololens by Bohdan Kononets for Flatstudio.

Here we're seeing just enough information to tease. Leaving users, in this case hololens fans, wanting more. And making that "watch the video" call to action irresistible. 

The key to these is knowing your users, and adapting that space for them, not for you. Out are the vanity slides that are ignored by users but mandated by management. 

Screenshot of Colourful Conversations microsite

Colourful Conversations microsite by Luminary.

Wine label Brown Brothers’ award-winning campaign microsite Colourful Conversations made use of bold typography and layout, presenting the user with a screen’s worth of information at a time without the need for scrolling. 

The broken grid

These overlapping and dynamic layouts are becoming more and more common. While initially only found on edgy studio and agency sites to show off skill, this style has spread and we’re now seeing it pop up on fashion and e-commerce sites. 

3D Grid Zoom by Nathan Riley for Green Chameleon

3D Grid Zoom by Nathan Riley for Green Chameleon.

Characterised by overlapping copy and elements and international misalignments this is another trend that takes its cue from the avant garde and postmodern graphic design movements. 

High quality bespoke imagery

As with brand guidelines generally, photography is now being looked at more holistically. Rather than having many different focal points, colour treatments and angles, there is a very strong trend towards a uniform photographic style that complements and enhances the brand.

Chopsticks by Akatre

Squarespace by Akatre Studio.

As with the fold-busting layouts above, the single focal point of these images is such a divergence from our usually content-crammed screens that we can’t help but look. This style of studio shot is already extremely common in e-commerce, however we’re seeing more and more of it in editorial and content images. 

No camera, no problem

It may be the case that photography isn’t available or even appropriate for a use case. Rather than seeking out stock photography, more and more we’re seeing brands use both typical and 3D illustrations to lift their content. 

Screenshot of Sweet

Sweet concept by by Eddie Lobanovskiy for Unfold.

The most common style of 3D illustration we’re seeing currently are these hyper-real compositions. Characterised by too-realistic shading and shadows, perfect lighting, excellent textures and often a lack of gravity. 

Megogo

Megogo has ditched humans in favour of a super cute 3D family. 

 

What does all this mean for you? Be Bold!

From contrasting colour schemes to grid-breaking layouts, digital design is becoming more adventurous. Users are expecting unique and on brand visual experiences. And sticking with what’s safe can mark you as old hat. Don’t be scared to stand out from the crowd. 

This is one of a three part series where we look into visual and user experience trends to expect in 2019, so keep an eye out for our next instalment where we look into what to look for behind the scenes when considering interface design.  Up next: Web design trends for 2019 - Part III: Interface smarts.

 

Source:luminary.com/blog/web-design-trends-for-2019-bold-visual-styling