17 Web Design Trends To Watch in 2017

17 Web Design Trends To Watch in 2017

It’s time to look ahead and predict how the web will evolve over the next 12 months. What trends should you be aware of, and how should you adapt your skills to stay ahead of the curve in web design and development in 2017?

In 2016, flat design became a standard — partly thanks to Google’s Material Design visual language — cinemagraphs continued their rise to add subtle motion to photos, responsive design finally become mandatory, and progressive web apps that can run offline became the next big thing.

What does 2017 have in store for us? We asked the industry’s experts for their views of the future.

1. Conversational interfaces

Chatbots and conversational interfaces really took off in 2016.

Andy Budd, co-founder and CEO of Clearleft, thinks that although the rise of chatbots, voice UIs, and smart assistants will continue, it won’t last.

“At the moment, all these technologies are racing towards the ‘peak of inflated expectations,’ and will find themselves in the ‘trough of disillusionment’ for many early adopters by the middle of this year,” Budd explains.

Peter Smart, head of UX and product strategy at Fantasy, reckons that interfaces will become more human but adds we still have a long way to go.

“Increasingly intelligent conversational bots, including the likes of Zo and Xiaoice, will begin to leave the confines of messaging apps and permeate web experiences,” he explains. “Expect to see them first as smart assistants in ecommerce experiences. While likely to have the usefulness of Microsoft’s Clippy for the near future, the era of empathic web continues to draw near.”

2. Machine learning

Lily Dart, service designer and head of digital design at the Department for International Trade in the UK, predicts that in 2017, we’ll see the rise of machine learning in everyday apps.

“In the last year, the clients I work with are being approached by more and more start-ups claiming to be able to solve their biggest issues through machine learning,” she explains. “Most of them have half-baked algorithms they’re looking to test, but it’s clear that the industry has been bitten by the machine learning bug.”

“A few high profile apps have begun to show us the possibilities; the most notable being Spotify and their Discover Weekly feature. Spotify has proven how good machine learning can dramatically increase the stickiness of your product — now it’s time for everyone else to catch up.”

“What does your Amazon homepage look like?” he asks. “It’s oddly personalized. Yet, we’ve come to expect this level of smart personalization. The next step for these CRM powered technologies is real-time. In 2017, we will see the first instances of this technology changing, not just the products you see, but entire components of a user’s experience as algorithms multi-variant test layouts to discover the presentations that inspire most user action.”

3. Emotionally intelligent design

“The human-machine relationship is more emotional than rational, yet we practice emotional design narrowly,” she argues. “Emotional design has come to mean humanizing technology with cute animal mascots and eternally chipper chatbots. Or, it means driving engagement with delightful and variable rewards that keep us clicking. Rather than cultivating positive emotion, more often than not we’ve ended up making people feel addicted. So, it’s time to revisit our ideas about emotional design.”

“Emotion-sensing technology will be a source of experimentation, but even more so, a source of inspiration,” Pavliscak continues. “It nudges us to redefine emotional design. Right now apps and chatbots don’t know whether you are having a good day or a bad day, whether you are running up against a big deadline or are about to leave for a long weekend, whether you spent the last hour laughing with close friends or arguing with your spouse. They might be engaging or even delightful, but they lack emotional intelligence. Whether we start to really use emotion-sensing technology or not, even considering emotion as context rather than destination, as nuanced and mutable rather than one-dimensional, is a step toward emotional intelligence. My hope is to see more design that respects human emotion rather than exploits it in the coming year.”

4. Virtual reality

VR finally went mainstream in 2016 and can now be experienced in the browser.

“I’m really interested to see how virtual reality’s popularity grows and how designers adapt to it,” enthuses Kyle Fiedler, chief design officer at thoughtbot. “It’s been wild to see something that was on the fringe gaining fast momentum. It’s in Samsung commercials now!”

Andy Budd, however, thinks it’s another fad.

“Virtual Reality is on a similar path to conversational interfaces, although moving slightly slower and tracking six months behind,” he argues. “The UI challenges with VR are both more complex and more easy to understand than conversational interfaces, as the medium and matter are closer to what we know. As such, I’m expecting a lot more VR/AR froth in early 2017 off the back of the HoloLens launch, reaching the ‘peak of inflated expectations’ if Magic Leap ever actually appears.”

5. Location and context awareness

“One of the things that sets mobile devices apart is the way they travel with users — and their ability to understand the location and context around them,” says Kevin Ball, engineering lead for ZURB Foundation.

“Those capabilities are increasingly exposed to websites, and we believe that a huge area of coming innovation will be in making websites more responsive to the environments around them. Especially with the growth of the Internet of Things, the opportunity is tremendous — imagine loading a website and immediately seeing reviews and pricing comparisons for all of the internet-enabled devices near you, without having to search or install an application. Or imagine a website that uses some combination of the Media Streams API(streaming video from your camera), the Geo Location API, and Mozilla’s WebVR library A-frame, to serve you an augmented version of reality, once again without ever installing an app.”

6. Micro-interactions

Kevin Ball also thinks that in 2017 micro-interactions will increasingly enter mobile apps, and become a lot more device-specific.

“Mobile-first design has been focused on layout,” he explains. “Things like stacking columns and layering in less important items as screen real-estate grows — with complex interactions and animations reserved for the desktop. As mobile traffic continues its meteoric rise and mobile web tooling matures, there is a ton of opportunity to take advantage of the native paradigms of different devices for mobile-focused interactions.”

Touch and gesture-related JavaScript libraries, for example, now enable you to create subtle animations (like the tweet refresh interaction on Twitter’s mobile app). Subtle animations within mobile web apps can also be used to direct attention to interactive elements — providing a mobile-specific equivalent to the use of hover effects on desktop screens.

Karl Randay, design principal at 383, agrees and says that micro-interactions will be used to increase simplicity in digital experiences. “Micro-interactions are simple, single-use moments that perform a basic function,” he explains. “Like adjusting a particular setting or controlling a single feature: hitting ‘like’, for instance, or pulling down to refresh.”

“When paired with simple gestures and subtle, visual feedback we barely notice we’re performing them. They become part of the natural way we interact with our products and services, a powerful way to build habits with users while also providing surprise and delight. They can be the difference between an experience you just interact with, and an experience you love. Instagram Stories does this nicely, with the subtle page resistance when refreshing, or when liking or holding for emoticons.”

7. Colors

Web developer and Shopify Expert Kelly Vaughn thinks 2017 will be “a year of going against the design grain” — or, as her designer Sarah Hutto puts it, “year of the funky.”

Vaughn therefore expects to see bold, bright colors and gradients making a comeback. However, keep your (client’s) target audience in mind.

“Do they respond well to bold and bright colors, or are they more drawn to a toned down palette?”

Camden Town Brewery does an excellent job of using colors, but also makes great use of micro-interactions.

Pantone has crowned Greenery the color of the year 2017, as it’s refreshing and revitalizing, so that may be a good starting point if it fits your brand and audience. To get a better understanding of how effective ecommerce sites use colors, check out these 10 beautiful color schemes and also dig into Canva’s color theory article.

8. Cohesive experiences

Kyle Fielder reckons that 2016 will be the year we start to think about cohesive experiences.

“From my phone, to my watch, to desktop, tablet, and VR. This year, we’ll continue to iterate on how, where, and on what device people will be using the software we build.”

To find out how to create a unified, consistent user experience, regardless of where the digital experience begins, continues, and ends, check out Cameron Moll’s keynote on unified UX at Generate New York 2016.

9. Even more JavaScript!

“JavaScript, JavaScript, JavaScript. This has been a trend for a few years now but 2016 saw a lot of change, and I think 2017 will be filled with people being caught up to speed,” says designer and developer Wes Bos. Bos created a range of excellent JavaScript training courses, including ES6.io, ReactForBeginners.com, and a free vanilla JavaScript 30-day challenge.

“We saw ES6 start to become commonplace. Vanilla JS is slowly taking a foothold over jQuery. React.js, Vue, and Angular are starting to becoming more commonplace. I hope to see tooling become a little easier to use — the folks from Webpack know this is an issue and are working on how to solve it. My advice would be to hunker down on vanilla JavaScript — get really good at it, and whatever JavaScript framework or library comes at you, you’ll feel confident learning it.”

Kyle Fiedler agrees, and adds that everywhere he goes people are talking about React and React Native.

“I’m really interested to see if they can maintain this energy and popularity. It would mean that it could be faster to build for a wide variety of devices and platforms, which puts more emphasis on design to create those cohesive experiences.”

10. Designed failure

We’ve seen a lot of talk in product design circles about journey mapping, and understanding the ideal user journey.

“But what happens when the non-ideal user journey is experienced?” Karl Randay asks. “Or a user that hasn’t been considered, tries to interact with your product or service?”

“Using a process similar to how we map the ideal user journey, designed failure allows us to build a better understanding of situations where a user may try to use something ‘wrong,’ or attempt something that hasn’t been factored into the design of the experience. By building an understanding of worst case scenarios and potential for failure, we can model and attempt to course correct through the idea of ‘graceful failure,’ bringing a positive experience and humanized response to an otherwise awkward moment for any user. A really simple example of this is using humanized responses for content that no longer exists, or even providing suggestions for content when a specific search returns nothing (instead of the ubiquitous 404 or an empty list). Slack does this nicely; if you’ve half-written a message to someone but leave, you get a little pencil icon telling you that you’re not quite finished.”

“I’m betting that the more designers run design sprints, the more they’re going to realize that they need more information going into them,” muses thoughtbot’s Kyle Fiedler. “Research will start to be at the forefront of the design process and influence more and more products.”

And if you want to discover how to run design *and* content sprints, don’t miss Steve Fisher’s workshop at both Generate New York, and his own Design & Content conference in Vancouver this year.

Watch GV’s Jake Knapp and John Zeratsky discuss the design sprint they developed.

12. Better collaboration across design and development

As well as working together on design sprints, designers and developers will improve collaboration thanks to the software they use.

“Designer’s toolboxes will continue to mature,” predicts Fantasy’s Peter Smart. “Gone are the days of Adobe’s reign. In 2017, with better prototyping tools from InVision, Webflow, Figma, and many others, we’ll see designers and developers breaking out of silos to develop a greater shared understanding, and dramatically increased workflow speed.”

“Design and engineering are merging,” he says. “Today, designers mostly create 2D drawings that represent static slices of a richer experience. These drawings disregard additional dimensions like state, context, and motion. While the best designers will use whatever tools are necessary to work across these other dimensions, creating great digital products for global audiences currently requires much more work than it should.

“We are starting to see designers pick up principles from engineering to increase their own efficiency, explore the endless possibilities screens provide, and create more consistent experiences. As tools make it easier for organizations to create shared design systems, this leads to a more streamlined workflow, and greater collaboration across design and engineering.”

13. Merging of UX and service design

“My big bet for 2017 is the eventual coming together of UX Design and Service Design,” says Andy Budd. “For many years these related disciplines have had understandably different markets and communities of practice. However, as more and more services are delivered digitally, and as more and more digital products use service as the connective tissues, these two fields will start to merge.”

Clearleft’s UX London conference is adding a Service Design track for the first time in 2017.

14. Facebook and Google as destinations for content

“Facebook and Google have links open in their own article formats, Instant Articles, and AMP pages,cementing their place as destinations for content, not just jumping off points,” he argues. “They are setting standards for fast loading speed and minimal UI. In 2017, content sites will work harder to align to these new standards.”

15. Credibility becomes king

Experience designer Benjamin Evans points to the 2016 presidential election cycle in the US, which proved that lies spread (and can be believed) faster than the truth.

“The Facebook echo chamber has become our global newspaper,” he says. “According to a study by Stanford University, a high percentage of ‘digital natives’ cannot distinguish between facts or fiction on their newsfeeds. With journalistic standards being undermined by the ever-pressing need for clicks, those of us who create media are struggling to figure out how to regain and keep the public’s trust. Although Google and Facebook have (finally) begun testing fact-checking features that help users discern fact from fiction, the responsibility falls to us as designers to find and embrace new and interesting ways to communicate credibility, safety, and trust online.”

How can we action this? Evans cites a 1999 article by Jakob Nielsen that listed numerous ways a website can communicate trustworthiness. He believe the way forward is to see how far we can push these tenets:

Design quality: “Tomorrow’s designs will embrace an MLP — Minimum Lovable Product — experience as a way to communicate the credibility needed to convert visitors into customers.”

Radical Transparency: “The more transparent designers are — from attribution of stock photos to colophons for content — the more likely we are to trust them as legitimate. Involving your users at more points of the design process is a great way to build ongoing trust.”

Comprehensive context: “We’re going to see more prominence given to sources and a greater level of transparency surrounding information presented, so that users gain a deeper context of the content they’re engaging with.”

A great example of this is Timeline — a news app that shows you stories with historical context surrounding each piece.

16. Mass disruption to foundational Internet services

Peter Smart thinks that 2016’s DDoS attacks, which resulted in major service blackouts for the likes of Twitter, Netflix, and Spotify, were just the beginning.

“We will continue to see agents targeting core parts of the Internet’s infrastructure with increasing frequency, resulting in disruption to our daily dependencies on the web,” he fears. Security and offline apps are therefore becoming more important than ever.

17. The rise of the diversity designer

“From mishaps like Snapchat’s racist filters, to the brilliant inclusiveness of Unicode’s new gendered emojis, 2016 was the year that diversity in design finally stepped onto the centre stage,” explains Benjamin Evans, who is collaborating with a number of designers to create an inclusion framework at Belong.

He hopes that 2017 will bring an even bigger push towards inclusivity in the creative and tech communities, and that designers will empathize more with a greater range of perspectives.

“The key is to make inclusive thinking part of your design process,” he recommends. “Go searching for ideas, thoughts, and opinions that differ from your own, ask the right questions and — most importantly — listen to the answers. There is no magic bullet, but empathy is the perfect starting point.”