Top UX Trends, Web Design in 2017

top ux web design trends 2017

When it comes to user experience (UX), the web design industry has seen good, bad and everything in between. By the end of last year, trends included a few we hadn’t seen for years—I’m talking, since the days of tabled HTML.

Here’s a roundup of top UX and web design trends for 2017, categorized by design and function.

DESIGN

Digital skeuomorphism is a design style that emulates real-world elements within a user interface. Made popular by Apple during Steve Jobs’ reign, digital skeuomorphs died off around 2013 when the company shifted to a more simplified design. Well, it’s back. Remember too, that digital skeuomorphism isn’t relegated to the visual world; The shutter-click sound emitted by most camera phones when taking a picture is an auditory skeuomorph and the swiping hand gesture for turning the “pages” or screens of a tablet is another example of real-world emulation.

digital skeuomorphism

Gone are the days when we needed to fit as much information as possible “above the fold” because the fold has virtually disappeared. Scrolling has become widely accepted in 2017, but with scrolling comes a greater responsibility to be a successful storyteller.

Parallax was wildly popular in 2016, especially when combined with short, looping video as the background. This year, designers and developers are getting even more creative with its uses without sacrificing UX.

Pinterest made card-based, or tile layouts, popular among designers—and that popularity is growing. Card layouts are perfect for certain visual applications where content can be categorized, filtered and sorted. The caveat with this trend is to know your demographic and the objective of the content before implementing a drastic change in layout—especially when it comes to e-commerce. Sales conversion rate and minimalistic tile layouts don’t often play nicely together in the sandbox.

card tile layout example

Cinemagraphs are basically animated gifs on acid. They can be super subtle or high-impact depending upon the application and execution, but they always delight and engage. The addition of simple repetitive motion into a still photo is enough to make any viewer pause.

cinemagraph photo

Photo credit: Kevin Burg and Jamie Beck, Cinemagraph.com

Animated call-to-action (CTA) buttons have a similar effect to cinemagraph photos; they force visitors to take notice for an extra moment—and that could be enough to lead to an increase in conversions. My advice: take this trend and incorporate it into you’re A/B testing mix. See what works and what doesn’t; keep what works and test another variable.

animated CTA

As we’re all moving toward a simpler life, focusing on a more basic approach, the art of hand-drawn typography is making a strong comeback. There’s something so beautiful and rewarding about creating custom typography—and clients benefit from the differentiation in their branding.

hand-drawn typography

We’re going back to the 80’s! Designers are going back to the palettes that no one can ignore: neon greens and oranges, pastels, oh my! The difference between the 80’s and this design trend is the pairings; Designers are experimenting with background and font colors that clash, and some can be difficult to read. If this trend is of interest, just don’t push the needle so far that it results in fewer conversions.

bold color website example

Beyond best practices in responsive web design (RWD), age-responsive design is conversion heaven if your demographic spans generations. This trend proves the theory that there is a difference between age groups’ reactions and behaviors when it comes to content, layout and aesthetic. Providing a unique experience to a user based on his or her perceived age can drastically increase a site’s conversion rate.

FUNCTION

AMP stands for Accelerated Mobile Pages, a Google-backed project intended as an open standard for any publisher to have pages load quickly on mobile devices. The AMP Project was formally announced on Oct. 7, 2015, but it’s taking a bit longer than expected to be adopted by the mainstream. This year, we’ll see a big push toward AMP as companies are finally realizing that a mobile-responsive website is not enough—it’s about providing the fastest possible experience to mobile users in particular.

Video has been creeping its way into our media-driven hearts for several years, but in 2017 we’re seeing a trend toward video as the preferred method of content delivery (instead of copy altogether, in many cases). This year, video trends include live streaming (i.e. Facebook Live) and micro-videos (i.e. Instagram Stories). Combine these with the fact that a decent video camera now resides in every back pocket, it’s easier than ever to upload and share, our Internet speeds are ever-increasing and our data plans are becoming super-competitive—and you’ve got a long-term trend, my friend.

Embedded user interactions, or “microinteractions” became mainstream last year, including things like rating an app upon launch, or sharing an item or event registration with your social network via the confirmation screen presented post-purchase. This year, we’ll see more quick feedback asks on websites, apps and social sites.

Quick feedback is the name of the game in 2017, and rapid prototyping is a great segue from embedded interactions. From quickly prototyping functions and workflow iterations to feedback capturing technologies like heat maps and biometric devices, the data gathered will be invaluable to UX / UI designers—especially in convincing stakeholders that improvements are necessary and will result in more relevant, valuable experiences.

The speed at which a page loads is a crucial component of a great user experience—and it’s part of the algorithm by which search engines rank websites. Preparing your visitors by visually displaying content in stages can keep bounce rates lower. LinkedIn does an incredible job on this UX trend in the latest iteration of its interface.

skeleton screens

Engagement bots take a proactive approach to helping solve visitors’ problems or answering questions that they may have. Proposify—my favorite online business proposal software—does a great job with engagement bots for customers within its user interface; At any given moment, you can see who’s available from the chat team—whether it’s an AI (artificial intelligence) engagement bot or a real person, when they were last active, view previous conversations you’ve had with them, or view product updates and messages they’ve sent that you may not have seen yet.

engagement bot example

Seeing a UX or web design trend this year not mentioned here? Tell me about it in the comments section below!

Author: Kelly Campbell
Kelly Campbell is an Agency Growth Consultant based in New York. A former digital agency owner for 15 years, she helps creative and tech agencies transform—focusing on people, positioning, pipeline and profitability. Kelly is also an IA/SEO consultant to Facebook and NASA. She writes for Website Magazine, speaks at digital marketing and agency growth conferences across the U.S., and has been featured in The New York Times, Woman Entrepreneur and Forbes. She is the host of THRIVE: Your Agency Resource, a bi-weekly video podcast sponsored by Workamajig that helps agency owners navigate growth.

Leave a Reply

How can I help you?

Are you looking to level-up? Increase income? Internal efficiency? I can help. Let’s find a time to talk.