...it can be helpful to analyse and predict whether a particular web technology, methodology, or aesthetic style is going to gain traction with, or slip away from, the zeitgeist.

The web and its myriad technologies are forever changing shape, evolving, becoming obsolete, and being implemented anew. The tools and approaches commonly used for implementing design on the web tend to slightly lag behind these underlying technologies.

In an attempt to keep approaches, workflows, and tooling current, it can be helpful to analyse and predict whether a particular web technology, methodology, or aesthetic style is going to gain traction with, or slip away from, the zeitgeist.

Whilst some predicted changes can end up being a net positive for the web, it’s also important to keep in mind that trends are often temporary by nature, and don’t always sit well with best practices or the intended use cases of original web specifications.

The best, most beneficial examples of this can go on to influence positive change in our industry, gaining traction, and ending up being natively implemented in our browsers as a permanent feature.

The worst examples can range from hacky, fragile implementations that become popular despite their misuse, all the way to making a potential website unusable for swathes of a potential audience.

In this article, I’ll attempt to take a wide view of what a handful of prominent web communities predict might be the standout trends of this coming year. The predicted trends I’ll be examining have been yoinked from:

I explore how these trends might serve us for the better, or whether they’ll ultimately become an obstacle in helping us design and build fully-formed experiences for a better web.

3D & Augmented Reality

A couple of our sampled communities talk about 3D and augmented reality (AR) in their predictions, and applications thereof can range from mere decoration, to being the central function of a project.

We saw a definite upswing in instances of 3D-featured sites on the web in 2018. With huge leaps being made in affordable/free 3D authoring tools (Blender), imaging/capturing, and rendering technology (Unity3D, Sketchfab, three.js), it can be an extremely effective way of displaying eye-catching elements within a design, particularly those that can be examined and manipulated in 3D space.

AR applications aimed at displaying 3D content can make interacting with elements of a website a satisfying, intuitive, and memorable experience. Education, navigation, and gaming are all included in a plethora of industries already enjoying AR technologies.

The downside of using 3D graphics is the significant time it takes to build and texture the assets (if your design team already has the capability to author 3D content). If you want to render these assets on your pages in real-time, the cost rises again as your engineering team will need to write shaders and build your real-time rendering pipelines (WebGL MDN).

This can be a sizeable undertaking, especially when photo-realism is the goal, or if you’re starting from scratch: the level of work in authoring the content, and in building the rendering setup requires considerable additional effort.

Whilst 3D and AR can be a fantastic and stand-out addition to a web project, its development is not without significant overheads.

PROS: 3D assets can be visually impressive. 3D and AR interaction can be intuitive, and can achieve things not possible with 2D graphics.

CONS: 3D authoring software can be expensive, and requires deep knowledge to use efficiently. 3D assets generally require far more time to build. Engineering shaders and rendering pipelines can be incredibly complicated.

Bold Colours. No Colours! All the Colours?

Unsurprisingly, almost all of our sampled communities talk about colour. Slightly less unsurprisingly, there’s little consistency between them as to the formation of a specific trend.

Some talk about using bold colours, where another talks of only sporadic use of bold colours. One community predicts monochrome or desaturated use of colour becoming a popular movement, where others talk about duo-tone gradients, high-colour patterns, and more.

This prediction group is a clear example of how the industry, design culture, and the web in general, is as unpredictable as any other, and any predictions not based on real-world data is probably worth taking with a sizeable pinch of salt.

The appropriate usage and application of colour can make sites accessible for audiences that may struggle to use a non-accessible website. As designers and developers work to meet the Web Content Accessibility Guidelines (WCAG) as part of their baseline project completion checklists, the web gets better for everyone - not just the lucky ones with the right kinds of abilities and the right kinds of devices.

No matter what strategy and style you employ for picking your colour values, as long as these colours are applied to our pages in a responsible manner, I foresee no grievances with this group of predictions.

PROS: Colours are a fundamental part of design, and finding new ways to combine them is welcome to most.

CONS: Using colours in ways that detract from accessibility is a dangerous route to take.

Animation

Animation and motion graphics are mentioned several times in our collected predictions, ranging from user interface elements, often called micro-animations, to more involved storytelling, and app feature guidance.

We’re also seeing the tools and technologies of animation coming to the fore now, too. This is an important factor with all creative technologies as, without tools mature enough to build our assets with, we don’t get to leverage the most out of a specific technology.

CSS animation and transition properties are a handy tool for basic animation needs, but their limitations arise when animating multiple elements in tandem, or if you need to make sweeping changes. Javascript plugins such as Greensock Animation Platform (GSAP), anime.js and velocity.js enable us to build more complex animations, and trigger them with events - that’s if you’re happy to write Javascript.

If you’re not up for working with Javascript, but are comfortable working with software like After Effects (or, for example, SVGator), you’re in luck - you are now able to create animated assets with a GUI.

Lottie has been developed as an exporter and Javascript plugin, so that designers could directly author SVG animations for the web from within After Effects. This allows for the creation of expressive, impressive, and dynamic animations that brings charm and delight to our interactions, focal points, and storytelling elements.

This technology has been available to use for the best part of last year, and has now reached a healthy level of maturity.

PROS: Movement gives designers another notch on their belt by which to steer a user’s focus. Animation can be visually impressive and dynamic, and can be used to assist users in using a feature/site.

CONS: Loading additional scripts is required to get Javascript-coupled animations to play. Animations can often take substantial time to finesse.

A Web For All - Diversity, Inclusivity, Accessibility & Positive Social Change

Several of our communities talk, in multiple instances, about inclusivity, social change, diversity, and accessibility - A web for all.

“The power of the Internet is in its universality. Access by everyone regardless of disability is an essential aspect.” -Tim Berners-Lee

Sometimes, every so often, a well-considered website breaks free from the moorings of its server, and enters the domain of our ongoing social conversation. When this happens, the industry tends to look up from it’s device labs, it takes notice, and hopefully adopts the beneficial parts of any new approach it deems worthy. In turn, we all edge forwards ever so slightly towards a better position for all.

It’s easy to think the internet is a net negative, with the almost-weekly Facebook privacy scandals, the continuous 24-hour news cycle, and the turbulent political landscape being piped to our glowing rectangles at all hours of the day. The list goes on.

However, the internet has done massive good for the world, too - It’s helped deliver scientific breakthroughs, it’s been a platform for whistleblower leaks, and has brought mental health support and awareness for multiple millions. The internet has influenced governments, helped to overthrow dictators, and has given voice to the marginalised voiceless the world over. It definitely has its up-sides.

The General Data Protection Regulation (GDPR) was introduced in May 2018, and is applied to both organisations operating within the EU, and organisations operating outside of the EU that serve, or monitor the behaviour of, members of the public that live within the EU. Breaking the GDPR can see organisations fined 4% of their annual global turnover, or up to €20 Million.

The W3C lists 40 results where countries have specific laws and regulations that strengthen the human rights of people with disabilities, and seeks punitive action against those that are seen to discriminate against them.

The W3C also states:

  • “The Convention on the Rights of People with Disabilities (CRPD) is a comprehensive human rights document that includes a direct reference to the rights of all people to have equal access to communications technology. Passed by the General Assembly of the United Nations, more than 175 countries ratified it by 2018.
  • The European Commission adopted the European Accessibility Act, requiring ATMs and banking services, PCs, telephones and TV equipment, telephony and audiovisual services, transport, e-books, and e-commerce meet accessibility requirements.
  • In the US, the number of legal actions continues to rise and courts increasingly decide in favor of equal access, often citing the Americans with Disabilities Act (ADA). Structured Negotiation is another way that legal pressure is effective, encouraging companies to meet accessibility requirements while avoiding litigation.” W3C, WIA - Minimize Legal Risk

The internet has been a viable platform for supporting numerous instances of significant positive change in society, and it will continue to be so. This trends’ continuation is welcome by many.

The Accessibility Project (As known as A11y) is a community-driven effort to make web accessibility easier. Found on their About page, they offer an alternative, sometimes forgotten, benefit for building accessibility into our websites:

“Disabilities can also be conditional. A broken arm, a loud restaurant, harsh glare, not speaking the local language—all are examples where someone may benefit from accessible practices.“ -The Ally Project - About

To help us designers and developers err on the side of accessibility, using the auditing features in our development tools, by running through the A11y Checklist, or by building such checks into your build tools, developers can easily edit/add their markup to help assisting devices and screen-readers communicate a website to its users.

We also see User Experience (UX) designers taking command of language and theme, leading the way to making sure that, even when a website is accessible for all, the content of our sites are inclusive for all, too.

PROS: Making a site accessible and inclusive is a GOOD thing. Widens your potential audience. Helps any user who may be temporarily or conditionally disabled.

Minimalism, Brutalism, Anti-Design

Several of our surveyed collection of sites talk about increasing white space, using bolder or disruptive typographic treatments, reducing content down to the essential message, and going directly against the grain of already-settled best-practices of contemporary design.

We have to consider whether we can ultimately reconcile anti-design and accessibility, and build the result into something that attempts to consider all potential users.

Brutalism exists on a spectrum, and some of the more extreme examples of brutalist design can be classed as anti-design - something so brutal, it makes navigating a site and reading its content difficult, even for the unimpaired.

Meanwhile, on the lower end of the brutalist spectrum (a fantastic name for a synthesizer band if ever I’ve heard one), we have perfectly serviceable aesthetic, where typography and layout give more contrast between background and foreground elements, and where it’s designer is not attempting to impede the navigating and reading experience.

This approach takes selective elements from brutalism, but leaves the parts that are full-on anti-design behind. It’s suitable for making websites accessible, albeit in new and stylish ways.

Minimalism, simplicity, and bringing clear focus to content has been, in some forms, prevalent on the web for decades now, and I’m sure will continue being an emphasis of the web as we go on building websites.

PROS: Opens design up to a new style. Allows fresh avenues of creativity.

CONS: Opens design up to devolution. Pushes against good practices. May obfuscate browsing experiences.

Getting off the Grid

First there was HTML document flow. We ruined that by using tables for layout. Then there was CSS, and floats became a thing. Bootstrap and other grid frameworks were built. Then we got Flexbox. Flexbox is great. Now we have Grid. Flexbox is still great, but Grid is a two dimensional Flexbox. Grid is fantastic.

Though, there’s no pleasing some developers, because they’re throwing that out now, and having their elements and components placed onto their pages without strictly and judiciously adhering to columns or rows.

Madness!

When elements don’t align to some sort of grid, the results can be varied. Some element distributions look carefree and casual, where others look messy. Both of these visual styles could be leveraged into something that makes sense for a specific project, and both can offer organic, flowing compositions that lighten the experience of interfacing with a machine.

There’s also plenty of scope for us to use overlapping layouts that obscure and reveal content with creative layering, though this may lead to the impediment of accessibility.

PROS: Experimentation and furthering of creative layouts. New aesthetic styles. Interesting animation opportunities.

CONS: Man, we just got grid! This trend could possibly be at the cost of accessibility and intuitivity.

Artificial Intelligence & Voice Interfaces

A few of our sampled communities predict that artificial intelligence (AI) and voice interfaces are going to become a major part of our websites and web applications in this coming year.

Each year, trends featuring aesthetics are frequently predicted. For something like this that isn’t so visual, many designers and developers are probably scratching their heads as to how they’ll be able to integrate AI and voice controls, machine learning, and algorithmic analytics into their projects.

For sites that are viable to work with conversational interfaces, there are now multiple solutions and APIs to use, via offerings from Apple (Siri), Google (Assistant), Microsoft (Cortana), and Amazon (Alexa), to name just the household names.

Uses of these voice interfaces can assist with many tasks, including the searching of content, fetching contextual data, reading and narrating text content, controlling your smart home, and communicating with other actual humans in your contacts list. Voice interfaces are an intuitive way for all users, especially those with vision impairments, to interact with the web.

Sites that can leverage AI or machine learning, along with information captured from a user, can adapt and change to provide a tailored experience dependent on a variety of factors, including disabilities, device type & status, tastes, and geographic location.

PROS: New technologies that are actively being developed, help complete menial tasks with little effort. Can assist users with a natural interface that doesn’t rely on motor dexterity or vision.

CONS: Requires being used in an environment conducive to low volume ambiance. Brings Big Data further into our homes.

File Size

This one is less of a discrete trend, and more of a sustained push to reduce served file sizes and to be more efficient and strategic in delivering assets to the visitors of our sites, and is another item that has been on developers’ project checklists for a good number of years.

It’s paramount that users are able to visit some usable form of our sites on any device, in any browser, in any internet-connected part of the world. We’re probably all familiar with the metrics reported by Amazon, that claim an additional second of page-load could equal \$1.6 billion in lost sales.

This ongoing trend has brought about image optimisation, server-side compression, lazy-loading, asset concatenation, caching, CDNs, and webpage auditing, to name but a handful of file-size-saving advancements made to help deliver our sites to users in as timely a fashion as possible.

The latest asset type (excuse the pun) to have gone through the file-size-decreasing machine is the font file. We now have access to many variable typefaces that have settings exposed, so we can alter weight, width, slant, optical size, italics and grade.

Instead of having to serve four or five different font files (normal weight, bold weight, italic-normal weight, italic-bold weight, and perhaps an additional font for headers or monospaced content), we can serve one font file that contains all of the possible variations of all of these styles and more, by editing it’s characteristics via CSS.

Combining multiple variations into a single font file has shown to give file size reductions of up to 88%.

PROS: Faster, more efficient loading of websites. Cheaper hosting/serving costs. More accessibility in locations that offer less than good internet connections.

CONS: Refactoring of build tools and serving strategies. Setting up font variations.