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.

Table of Contents


  1. Conversational interfaces
  2. Machine learning
  3. Emotionally intelligent design
  4. Virtual reality
  5. Location and context awareness
  6. Micro-interactions
  7. Colors
  8. Cohesive experiences
  9. Even more JavaScript!
  10. Designed failure
  11. Design sprints
  12. Better collaboration across design and development
  13. Merging of UX and service design
  14. Facebook and Google as destinations for content
  15. Credibility becomes king
  16. Mass disruption to foundational Internet services
  17. The rise of the diversity designer
  18. Bonus: 2017 According to Jeffrey Zeldman

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.” 

Web Design Trends 2017: Conversational Interfaces
Microsoft’s newly launched chatbot Zo, currently only available on Kik. Microsoft’s first chatbot, Xiaoice, already has 40 million users.

To find out how to design a conversational interface, read Tim Metz’s article and check out these 10 links to get started with conversational UIs and chatbots.

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."

Fantasy’s Peter Smart, meanwhile, thinks that machine learning will also drive a dynamic real-time web.

“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

Pamela Pavliscak, a design researcher, data scientist, and founder of Change Sciences agrees that in 2017 we’ll see a turn towards 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.”

For more on emotional intelligence, read Peter Smart’s research on the future of the web, and watch his presentation from Generate San Francisco 2016.

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 Leapever actually appears.”

To find out more about the user experience of VR, read Laura Cortes’ article or check out Max Glenister's curated list of resources.

Web Design Trends 2017: Virtual Reality
Magic Leap was founded in 2010 and has raised $1.4 billion, but has yet to release a product.

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.”

Read Dan Saffer’s book and Nick Babich’s article for more on micro-interactions best practices.

Web Design Trends 2017: Micro Interactions
Tubik Studio has created a concept for a tabbar button micro-interaction.

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?”

Web Design Trends 2017: Color
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.ioReactForBeginners.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.”

Web Design Trends 2017: JavaScript
Wes Bos’ JavaScript 30-day challenge teaches you JavaScript by building 30 things, in 30 days, with 30 video tutorials.

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.”

For more on this, read Eric Meyer and Sara Wachter-Boettcher’s excellent book, Design for Real Life.

Web Design Trends 2017: Designed Failure
Google Search AI results are hyperlocal to the user, and designed around a real world interpretation of what they might have been searching for.

11. Design sprints

In 2016, design sprints became increasingly popular among product teams. Championed by GV (Google Ventures), they were soon adapted by design teams all over the world to improve their projects. Also check out Skyscanner’s sprint and 383’s ten minute guide to design sprints.

“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.”

Dylan Field, CEO and co-founder of Figma agrees.

“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.”

Web Design Trends 2017: UX and Design
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

In 2017, Facebook and Google will become even more important for the consumption of content, reckons Andrew Turrell, director of user experience at RED Interactive Agency.

“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

As millions of pieces of content are created per minute, how do you know who (and what) to trust?

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.”
Web Design Trends 2017: Credibility
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.”

Also check out Emi Kolawole’s ‘Designing for Worldview’ toolkit.

Web Design Trends 2017: Diversity
Following suggestions from Google and Apple, the Unicode consortium released emojis that not only acknowledge different skin colours, but also introduce non-traditional gender roles.

Bonus: 2017 According to Jeffrey Zeldman

When we asked web design veteran Jeffrey Zeldman, founder of studio.zeldmanand A List Apart, for his 2017 predictions, he came back with a contribution that we thought was too important to edit, so here it is in its entirety:

“Under relentless time and financial pressure from their bosses, many web developers will continue to take shortcuts — including shortcuts that harm the user experience.

Many designers will imitate the successful designs of other designers.

Smart (and lucky) teams will involve everyone in the design of the total user experience, but many equally smart and talented designers and developers will be stuck working in silos.

Some people who are frustrated will stop caring. Other people who are frustrated will begin working for themselves.

Some people who are frustrated will stop caring. Other people who are frustrated will begin working for themselves.

More design will move in-house, making it harder for freelancers and agency professionals to find work. Because of the shrinking market, employers will be positioned to demand more and more skills from their applicants, while paying less and less.

Designers and developers will be asked to make moral choices about user privacy and other important issues. The buck will stop with us.

Many companies will imitate the style guides of a few companies. Flat design with gradients will saturate the market. Default Bootstrap layouts and code will saturate the market.

Sites that look like Squarespace templates will saturate the market.

A few individuals will find a way, despite all the pressures on us all, to continue to do good, creative, human-focused work.”

 

Post credit to: shopify



share
keyboard_arrow_up