10 top UI trends for 2017

Discover the most important UI trends you should be implementing in 2017 – and why.

The world of web and UI design is a fast moving one, and it can be hard to keep up to date in the face of ever-changing trends and developments. As 2016 slowly draws to a close, we pick out 10 of the most important trends that we believe you should be implementing in 2017 – and why. 

01. Immersive, full-screen video 

Campos Coffee use simple typography in conjunction with a dynamic full-screen video to craft a simple but strong message

The old saying 'a picture paints a thousand words' still remains true today, and in the world of UI design is still a great way to quickly grab the user’s attention. Vision is said to be the strongest of all human senses, and a large, single image is quickly able to summarise both message and tone of voice in a more efficient, succinct way. 

Imagery has long been a staple of UI and web design, and its success has slowly paved the way for its natural successor – video. We’re seeing video used more and more in digital design, and for good reason. Where traditional photography is static, video is dynamic. It’s great at catching the eye of users and as a means of visual storytelling.  

Conventional imagery isn’t going to disappear any time soon, but one thing’s for sure - 2017 and beyond will be full of more rich, interactive and full-screen video as a means of engagement and story-telling. 

Dutch airline KLM’s magazine iFly50 relies on a more stylised approach, uses a double exposure video to intrigue users, encouraging them to continue exploring the site

Why use them? 

Video, (as well as big, beautiful full-screen imagery), is a powerful medium to utilize to engage users and quickly set the tone. Both mediums are highly versatile in their application, working especially well as background devices accompanied with typography.  

02. Long form content and scrolling 

National Geographic is a great example of content that pretty much covers every point outlined in this post

Scrolling is by no means a new mechanic, and definitely not a ‘trend’ as much as a fundamental function for browsing both the web and applications. However, what we're increasingly seeing more of is the implementation of long-scroll and long-form content on desktop devices and larger-screened devices to deliver content. 

As users have become more comfortable scrolling to find content on smaller screened devices over the past few years, more designers have begun implementing long form content and scrollable interfaces on bigger screens.

This allows users to very quickly scan large volumes of content, in a single, fluid motion without being removed from the experience by navigation or interruption. It’s a versatile mechanic which works well across all devices and mediums of content, from long-form journalism and news stories, to landing pages and interactive experiences. 

Combining maps, video, imagery, and animation, National Geographic creates a single, fluid, immersive and varied story telling experience to keep you engaged throughout

Why use them?

The long-scroll is a great mechanic to implement when seeking to tell a narrative, or structure content in a linear way to guide the user. It’s a versatile mechanic, great for creating immersive, seamless, long-form content which allows users to consume it in a fluid manner, irrespective of the device they’re using.

03. Gradients and vivid colours 

Spotify is a great example of a big brand experimenting with bold colours and gradients

2013 brought flat design which subsequently spread like wildfire through the design community, muting colours and removing all superfluous elements in its wake. Although not without its flaws, flat design was a practical philosophy that still holds value today. 

It believed in simplifying UIs to their most core, functional elements to achieve a more refined and efficient user-experienced. 

Although functional and good in its intentions, flat design quickly caused the web to become a very similar landscape. Brands and designers from all over jumped on the bandwagon, following the guideline fundamentals, which for many, lead to content that was all too similar and void of personality. 

2016 saw the shackles of flat design start to loosen as more brands and designers began to once more focus on personality, experimenting with vivid colour palettes and gradients in place of the simple, but dull muted tones used previously. Gradients and vivid colours are also being implemented in much more than just traditional UI and web design, as Instagram’s recent (and controversial), rebrand showed. Whether they’re to your taste or not, expect to see an increase in the use of out-there colour palettes and transitional gradient colourways as the world pushes for personality! 

Spotify's changing gradients create a friendly and playful aesthetic, mimicking the underlying tone of the piece

Why use them? 

Vivid colours and gradients are great for injecting energy, warmth and dynamism into a project to make it stand out from the crowd. Be brave and experiment with your colour palettes, but ensure that they always work the tone of your content and not against it. They’re also pretty strong statements, so be thoughtful in their usage to avoid an all out assault on the eye balls! 

04. Illustrations 

Dropbox is a great example of a brand with a strong illustrative style. 
The rough, hand drawn render is light and playful, creating a personal connection that instills a sense of trust

Illustrations offer a sense of personality and character, which can otherwise be hard to achieve with traditional photography. Bespoke illustrations that work in line with a brand’s identity allows them to carefully create a visual language which truly captures their personality and tone of voice – useful for instilling a sense of authenticity and trust in users and customers. 

Illustrations are also a versatile medium too. Some brands may opt for sleek line-based illustrations to achieve that sharp and sophisticated look, whereas others might opt for more rough-and-ready hand rendered styles to position them as fun and playful. Illustrations open up more avenues for creative direction, even more so when animated or used in conjunction with photography and typography. 

The light, gentle illustrative style and aesthetic of PayPlan helps position the brand as friendly and caring, appealing to the needs of their users.

Why use them? 

Illustrations can be tailor-made to create personality and authenticity, two vital components which go a long way in creating a meaningful connection with users. They’re super versatile in their application and work fantastically with many of the other UI trends discussed within this piece.   

05. Breaking the grid 

Red Collar Digital is a great examples of UI which breaks the grid

The grid has long been a holy grail of sorts for designers, providing a foundation for design which ensures consistency, balance, rhythm and order. It’s an important tool in user experience design as it provides a level of familiarity for users, allowing them to intuitively navigate through a site or app in a way which feels natural. 

However, as important as the grid is, it can also be restrictive and rigid, limiting creative options for designers. In an attempt to create digital experiences that break from tradition, many web and UI designers are experimenting with layout by ‘breaking the grid’.  

By moving away from the grid and rigid baseline structures, designers are creating sites, applications and interfaces which are altogether more intriguing and experimental. It opens up a whole new host of creative possibilities, allowing designers to create real statement pieces through the use of layering, depth, motion and obvious focal points. 

Like Red Collar Digital, Sergey Makhno Architects Both layers typography, imagery and even video to create a more loose and free-flowing experience

Why use them? 

Breaking the grid provides more creative options. Its flexibility can create a sense of fluidity and freedom otherwise unachievable when sticking to a grid. However, be very considerate in your implementation when doing so. All interfaces have to first and foremost be user friendly, and your approach to design should always acknowledge this, otherwise you may have some very confused users! You’ll also need to consider how it works on smaller screens if you’re designing responsively. 

06. Parallax 

Epicurrence, an action-sports meet-up for creatives, opt for a very obvious use of parallax, creating a fast-moving and engaging experience, reflective of the event that it’s promoting

Following on nicely from breaking the grid and long-scrolling, is the use of parallax, something which often works great in conjunction with less traditional layouts. In a nutshell, parallax is the effect where the background moves at a slower rate than the foreground, giving a sense of depth and dynamism as users scroll. It isn’t a new mechanic, but something which is being implemented more and more as brands experiment with its functionality. 

Bang & Olufsen, the premium audio products manufacturer, opt for a subtler, more refined use of parallax, reflective of their sleek and sophisticated brand identity

Why use them? 

Parallax is something which must be used carefully as it can quickly become over-bearing for users. But, when implemented thoughtfully, it provides a great sense of dynamism to help lift content off the page and engage users. Use it in conjunction with imagery, text and a less rigid layout to create fluid, layered content. 

07. More cards! 

The above example shows how cards can be implemented to work on larger screen UIs, from scrollable menu cards, to options for tiered pricing models.

Cards, again, aren’t a new breakthrough trend, but they’re a functional UI which have consistently gained prominence in web design following their success in mobile UI design and their inclusion in Google’s Material Design.  

According to Google, 2015 officially saw mobile devices overtake desktops as the most popular platform for browsing the web, so more designers are blurring the lines between mobile and desktop UIs to create a more seamless user experience. 

Cards are a super versatile UI that work across the board, from smaller screened devices all the way up to the bigger ones. They’re a great way to organise and display large amounts of data on screen at a single time, allowing users to quickly glance through what’s available and make their choice of what to view. Facebook, Twitter, Netflix and Pinterest are all powerhouse digital platforms that utilise cards for this very purpose.  

Cards provide an effective solution that allows users to quickly scan the content available to find the information they require

Why use them? 

Cards are a great way of organising small bursts of information and their flexibility is invaluable on smaller screens for organising and consuming content. They’re a solution that can show text, imagery, video and everything in between, scaling up from the smallest screened devices to the biggest. Cards offer endless versatility, allowing designers to flip, spin, stack and filter them for all manner of UX functionalities – more of which will be explained with micro-interactions. 

08. Micro-interactions 

A great examples of how micro-interactions can be implemented to show a state change in a menu UI

Micro-interactions, typically in the form of small, on-screen animations are playing a vital role in UI and UX design today, especially on mobile and smaller screen devices. 

From a user-experience perspective, micro-interactions are not only small, entertaining on-screen animations or transitions, but are forms of visual feedback for the user and their actions. Micro-interactions let users know what is happening, what has happened, and what will happen next as they interact with the UI.  

Using Facebook’s famous ‘like’ as an example: when a user clicks the thumbs-up icon to like something, it increases in size and turns blue before returning to its original size, all in one fluid animation, informing the user that their action (like) has been completed.  

Clever designers are able to put the 'fun' into 'functional' too, by entertaining users as well as informing them. From playful loading animations, to slick icon transitions, effective micro-interactions engage and inform at the same time. 

This example clearly indicates to the user that their action has been implemented as they toggle between the available states

Why use them? 

Micro-interactions provide useful, humanised feedback to let users know what to do and what's happening, in a thoughtful and entertaining way. They can help make simple, mundane processes fun, as well as provide crucial feedback. 

09. Typography 

MailChimp use a mix of fonts, colours and opacities to create a playful Christmas-inspired typographic intro for their 2016 Holiday Tips marketing guide

With an ever-increasing range of web font services (Google Fonts, Typekit) offering free or cost-effective font families, expect to see more brands embrace big, bold and beautiful typography in place of system fonts and done-to-death, trendy san serifs. 

As we’ve seen throughout 2016, and with predictably more to come, web typography will draw from traditional graphic and editorial design, experimenting with more creative typefaces that are big, bold statement pieces, taking centre stage in the design. 

Citroen also opt for a creative mix of layered fonts and imagery for their Origins of Citroen interactive page

Why use them? 

Typography is another creative medium for brands and designers to experiment with when creating content which is full of personality. As discussed throughout this article, many of these trends work hand-in-hand together, and creative typography is definitely a prime example of this. Use typography in conjunction with imagery, video, illustrations, colours and unconventional layouts to create unique experiences. 

10. Experimental Navs 

Adult Swim takes navigation to a whole new level with their Singles of 2016 piece

Navigations and menus have long been a hotly contested topic for designers. With the lines between mobile and desktop UIs starting to blur, and the increasing use of hamburger menus on larger screened UIs, there is a lot more creative scope for designing menus and navigations. 

Sticking with hamburgers as an example, what they do provide is consistency when designing and building responsive sites, as you can (in essence) design a single navigational structure which scales and works across all devices. What’s more interesting here though, is the amount of creative freedom afforded by using a hamburger. 

With the menu hidden off-canvas, designers can give themselves the entire viewport window to craft a creative solution. The sky’s the limit for creative possibilities, but as always, navigation serves an important role within UX so be sure that it’s never form over function – users need to be able to quickly find your content! 

Not all designers agree with the use of hamburgers for desktop application (or at all).  It’s a topic itself that is worthy of its own blog post, but 2017 and beyond is sure to see more experimentation with navigation options and menus, for better or worse! 

Adult Swim features a three-dimensional grid of moving thumbnails, which have typographic and colour-changing hover states

Why use them? 

Navigations are no longer restricted to a single row of links stuck to the top of the viewport, and there are definitely more creative solutions available to help users find their way. Although creativity and aesthetics are important, designers should always prioritise usability, ensuring users are able to quickly and easily find the content they require, rather than be confused by over-engineered or gimmicky solutions.

Conclusion

As with trends of any nature, some come and go, whereas others stay the course and become fundamentals. Not all of the trends or predictions I’ve discussed here may be relevant to the project you’re working on; as a designer, it’s down to your own judgement to decide what is right and what isn’t, and it’s something which will change by client and project. 

However, change happens at lightning pace in this creative industry and it’s important to keep up to speed with what’s happening to stay relevant. UI choices should always be fuelled by achieving a great UX, and achieving a great UX will always change as new technologies emerge and develop. It’s an ever-changing landscape that requires constant learning and innovation. 

I hope that from this post you’ve learnt a little about how things have progressed during 2016, and more importantly, how these changes will influence digital design in 2017 and beyond. If you’re looking for inspiration in the new year, why not check out our Digital Marketing Toolbox, a comprehensive resource we created here at Zazzle Media, which has all the tools and resources we use on a daily basis to create digital content.  

ABOUT THE AUTHOR

Jamie Leeson is a digital designer working in web, interactive and creative content design for Zazzle Media, a leading UK content marketing agency.