5 breakout web design trends to go mainstream

Web Design Trends

In 2018, the web design industry went through significant changes that are altering the way we design now. We began last year with the beta release of InVision Studio in January, and GDPR hell was unleashed on 25 May. The day after, Google announced mobile-first indexing and then finally rolled out the ‘speed update’ in July, which demotes websites that don’t load quickly enough. To top off the year on admittedly a higher note, Adobe XD’s October update included voice prototyping – a lovely treat.

So what does all this mean for the design trends heading our way? Let’s take a look.

Faster websites

Google is not just influencing the mobile-first agenda. Another Google web tool, PageSpeed Insights, has over the years been a terrific resource for building faster-loading websites – which also has the benefit of helping boost the search engine visibility of desktop websites.

Since July 2018, this ‘speed update’ has affected mobile searches too. Although we still don’t know exactly what metrics Google uses to assess the loading speed of websites, it’s likely to be a mix of PageSpeed score and actual loading time.

That being said, Google has announced this will mostly affect slow websites, although there’s no reason why speed couldn’t be a more important ranking factor later on.

Your users consider loading times a high priority, so if this is something you’ve been putting off for a while, there’s no better time to rethink the loading experience of your websites. Here’s what you need to do:

  • Compress and resize images
  • Lazy load off-screen images
  • Minify resources
  • Serve static, cached resources
  • Combine or defer resources
  • Eliminate render-blocking resources
  • Ensure text remains visible while web fonts are loading

Mobile-first design

Being mobile-friendly has been a no-brainer for a while now, with Google even demoting websites that aren’t. Yet many small business websites are still not mobile-friendly – perhaps because Google’s mobile-first indexing, up until May 2018, only applied to mobile websites.

As of April 2018, 24 per cent of the top million Alexa-ranked websites weren’t mobile-friendly either. If you’re wondering why this is, consider when was the last time you used the Facebook site on a mobile browser?

Anyway, since May 2018, websites that are not mobile-friendly have ranked lower on desktop as well. It’s strange to be harping on about mobile-friendly design in 2019 but, with Google raising the stakes, designers need to think less mobile-optimised and more mobile-first, especially now Google is boosting efforts in regards to user experience.

Helpfully, Google has a mobile-friendly test that you can enter your URL into and it’ll tell you if your site is easy to use on mobile. Here’s how to nail it:

  • Don’t use Flash
  • Configure the viewport correctly
  • Disable unnatural horizontal scrolling on mobile
  • Adjust content to fit any screen (i.e. fluid design)
  • Design for thumbs (tap targets should be 44px squared, or more)
  • Apply appropriate spacing between tap targets
  • Ensure text is legible without zooming

Privacy by design

GDPR. Oh dear. Where do we start? Even though the EU’s GDPR law outlines many user-centric advantages, some of the finer (read: vague and confusing) details were a nightmare to implement and even now the majority of businesses are not GDPR-compliant. Many US businesses began blocking EU traffic and some EU businesses even ceased trading; a tragic outcome to the whole affair.

First, what does GDPR enforce? In a nutshell:

  • Non-conditional acquisition of customer data
  • Data to be collected only after explicit consent
  • Full transparency on how you use customer data
  • Access granted to customer data whenever they request it
  • The deletion of customer data whenever they request it
  • The deletion of customer data when you no longer need it
  • An accessible privacy policy written in simple language
  • The appointment of a DPO (Data Protection Officer)
  • Regular updates and full communication after a data breach

If a business is found to be non-compliant, the upper-level fines can reach €20m or 4 per cent of its annual revenue. Whether or not the European Parliament will actually enforce these fines is debatable.

The law is still in its infancy and will continue to evolve. It affects all companies that engage with EU customers but, most importantly, despite its ambiguity and sometimes pedantry, it can really impact user experience. Yes, we didn’t ask for GDPR but implementing what the law calls ‘Privacy by Design’ can significantly enhance the UX of our designs. Plus, when GDPR evolves, you’ll be more than ready. You can read more about the subject via the GDPR Checklist.

Voice prototyping

Voice user interfaces, or VUIs, have been the subject of speculation for a few years now. By that we mean mobile voice assistants like Apple’s Siri and smart home assistants like Amazon’s Alexa. Now there are also UI/VUI hybrids such as Amazon’s Echo Show, which can be controlled via a combination of voice and touchscreen.

Although mobile voice assistants like Siri have struggled to adopt significant usage, smart home assistants sold 19.7 million units in Q3 of 2018. This number was only 2.9 million in Q1 2017, and it doesn’t even include the Q4/Black Friday sales of 2018. That being said, how many UI designers do you know? Now… how many VUI designers? Probably not very many.
As you can imagine, there’s still a wide gap between demand and supply – an untapped market, as they say. We haven’t quite reached the ‘there’s an app for that!’ stage, so the majority of apps are built by large corporations, which have the time and funds to invest in tackling what’s still a relatively new technological trend.

Well, that was until the October 2018 release of Adobe XD shipped with voice prototyping features, making VUI design and conversional design overall more accessible to designers by being integrated into the tools they already use. Undoubtedly, other design tools will follow suit, helping indie VUI designers finally fill that void. This is exactly how the lingering design trend will become mainstream.

Seamless design tools

In early 2018 InVision released its new screen design tool, InVision Studio, to a wider audience. Complete with screen design, components, responsive resizing, interactive prototyping, timeline animation and native design handoff functionality, InVision set a new standard for what web design tools should offer.

While we can’t expect any single tool to cater for all our needs (after all, even InVision is working on an app store for Studio), it’s become clear that some tasks, like design handoff, work better when they’re seamless or integrated. It’s also a matter of cost and maintainability, where generally it’s cheaper and more efficient to contain design workflows in a single subscription.

Other web design tools have also adopted this model, with most of them now offering at least design handoff features. As well as offering a visual editor, since it was historically a JavaScript-based tool, Framer has changed its name twice in the last year (first it was Framer Studio, now it’s Framer X). Even Sketch has introduced prototyping, despite still being quite limited in comparison to other screen design tools . (Look at the basic Tips for getting most from sketch)

Overall, design workflows are becoming less segregated, so if you haven’t reconsidered your design workflow in a while, 2019 is a terrific time to do so. It could saves you bundles of time.

Remember to make use of your share button. Ask your questions through the comments section and please follow us on our Official instagram and Facebook page.

Leave a Comment Cancel Reply