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.
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.
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.
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.
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.
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!
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!
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.
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.
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.
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.
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.
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.
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 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.
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.
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.
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.
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.
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!
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 ourDigital 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.
top 10 UI trends for 2017
Reviewed by IONIC
on
20:59
Rating: 5
No comments: