Web layout may be maturing, however, it’s still challenge to fads, fashions, and whims.

If we’re fortunate, who is aware of, a few tendencies might simply be person pleasant.

So, what is coming in 2018? Here are a few predictions…

(And keep in mind that subscribers can download our User Experience & Interaction Design for Mobile & Web Best Practice Guide)

1. The loss of life of flat design
In our UX developments for 2018, Will Grant of Proteolytic says he hopes “to look the tide flip again towards flat layout and a go back to (subtle) visual affordances in UI throughout the board.”

As early as 2014, Co.Design becomes asking “Is flat layout already passé?” And this yr designer is all speaking about drop shadows and gradients again, the affordances that Grant talks of.

Indeed, a take a look at by Nielsen Norman Group in 2017 showed that users took 22% longer to navigate thru an ultra-flat layout.

2. Video
I’m no longer exactly setting my neck on the line in predicting video may be big. It already is. From media websites which are pivoting to video, to extra ephemeral video on social networks, and video in website design – it is everywhere.

The video, but, remains a chunk of a debatable web layout detail to some UX experts. Especially in e-commerce, it could be seen as a distraction, lumped within the same category as vehicle carousels (simply read the remarks on a previous article approximately video backgrounds).

However, as always, the usefulness of video relies upon on what the website and designer are seeking to gain. I nonetheless agree with hero/heritage video has an area on a computer – as an example, click on via the GIF underneath to visit the new Barbican internet site (released in past due 2017) and I defy you to mention the video heritage does not convey the dimensions and splendour of the Barbican’s architecture.

Read More Articles :


Away from backgrounds, John Moore Williams writing on the web flow blog highlights the application of the <video> HTML element. Williams says
Check out the web flow homepage and you may see an example of this, captured within the GIF underneath. As I scroll under the fold, there’s a video element showing me what the software program looks like in action. As Moore says, the splendor of video is it is the capability to “convey complex data” – simply a great tool for B2B websites, for instance.

3. Subtle scrolling effects
Parallax scrolling has been and long gone, with many designers recognizing that slow load instances and a poor effect on usability represent too high a fee to pay for the effect.

But that doesn’t imply there can’t be joy in scrolling. One of my favorite examples is the use of a connected heritage photo that doesn’t scroll with the page.

Sticking with the Barbican internet site, you could see an instance below. Okay, it is possible now not the best example, given the white text isn’t the very best to read, but the impact, in reality, has an effect.

There’s every other great couple of examples at the Made with the aid of Many homepages.

This is also a trend we may also see greater of in digital marketing, with the scrolling format already pretty nicely hooked up and using comparable concepts to catch the attention of the viewer.

Below are more than one examples, one on cellular (thru the IAB) and one on the laptop (through Sizmek’s library of advert formats).

This format is visible as a positive experience for the user, in that they get to control the reveal (and disappearance) of the ad, and consequently, it does not impose as lots as a sticky ad may.

There are parallax scroll ad codecs, too, which aren’t assorted, though they do take longer to load and are arguably a touch greater disorienting.

4. Death of the ghost button
Arguably this isn’t always a huge deal, however, I sense pressured to cope with it, given the ghost button is one of the net design traits we’ve trumpeted in previous years.

Christopher Ratcliff rightly pointed to the growth in ghost buttons on the give up of 2014, regarding them as “now not pretty a name-to-action. Perfect for designers not wishing to litter their sites with albeit important navigation.”

Unfortunately, this proved to be too accurate a description i.E. Those buttons truly don’t call the user to the motion.

An extremely good blog put up through Bartholomew Fish details the provenance of ghost buttons (coming out of flat design) and suggests some fairly missable examples.

The trouble is that ghost buttons do not offer sufficient comparison while positioned over busy imagery or text. Similarly, if button text color is simply too similar to historical past photograph color, there may be a comparison problem.

The end result may be a 20% lower in clicks, according to a few studies precise in Fish’s blog post.

Five. Sticky Nav
Sticky or fixed navigation, inclusive of header menus that comply with you (or stick in an area) as you scroll down a page, isn’t mainly new. But as stores redevelop their e-commerce websites, it is a design feature we’re seeing increasingly more of.

In fact, the aforementioned John Moore Williams of web flow even highlights a probable fashion for floating header menus – that is the same principle however the menu appears to float, allowing the homepage visuals to hold in the back of them. See the homepage of Le Réseau COOP for an excellent instance.

6. Typography
A fashion for a few years now – typography as visible. Serif fonts are making extra of an appearance, too.

7. Brutalism meets luxury e-commerce
Brutalism is a style of structure that flourished inside the Nineteen Sixties and is so-called after Le Corbusier’s description of one in every one of his substances, béton brut (raw concrete). Seeing as we’ve got cited the Barbican two times already, it’s really worth pointing to again as possibly the most well-known example of a brutalist improvement in the UK.

Anyway, it seems the term has been co-opted into the net design at some unspecified time in the future in 2016. It’s worth sorting out a notable template for UX brutalism created by means of the UX Design Collective.

Brutalism is a fashion most often seen on adventurous enterprise websites and artist websites – normally pretty restricted affairs in phrases of the variety of pages and diploma of functionality.

However, 2017 noticed brutalism get quite a few attention way to the Balenciaga e-commerce website redecorate. You can take a look at out a thorough Econsultancy assessment of the website online from returned in July. For all their doubts, most of our commenters popular Balenciaga’s bravery.