Top UI Trends

by Halo Associates Digital 2017/01/06 Branding

Looking towards the year ahead, there is some exciting tools and tricks that are tipped to be big in UI. Wether it’s a different application of colour, a new functionality or embracing advancing technologies, below gives an incite into the predictions of what’s to come in 2017:

01. Illustration

The use of illustration within a brand establishes a unique tone of voice hard to mirror with other methods of communication like photography or video. They inject personality giving a brand an identity as well as a more human touch, reassuring trust to the consumers. Illustration needs to be handled with care and can be shown in many different styles appropriate to the brand. Whether you are using sketches, slick vectors or a combination of the two, consistency is key to portraying a successful illustration style.

post_image_4

Website Credit: http://fixate.it

Why we think you should use them:

It is the perfect way to add a unique quality to your brand and tell a story through bespoke imagery. They add authenticity to your brand, building on the trust, connecting to users on a more human level. They are also incredibly versatile and can be tailored for just about any circumstance you need them.

02. Long content and scrolling

In the past few years we’ve seen an increase in the use of long scrolling to deliver large amounts of information in a clean fluid manor. Scrolling is not considered to be a trend, however we are now using it in different ways to allow the user to skim over information without having to navigate through the entire website. It is perfect to showcase ling articles and is versatile across multiple platforms / devices.

post_image_2

Website Credit: http://www.tegology.com

Why we think you should use them:

When telling a story or educating the user in a particular format, it is a clever use to keep them interested and allow full control over skimming through the provided information. It also allows a full narrative to be shown across a wide range of platforms and devices not altering the user journey too drastically between their chosen device.

03. Experimental Navigation

As mobile and desktop are coming together to work in harmony so are the navigation tools used to display information consistently. Websites are finding new ways to display the hamburger menu and transferring this to desktop sites. Not all agree with this method however the creative possibilities are endless when it comes to site navigation. As long as the user can access the correct information quickly, the way this is presented can take a vast range of appearances and micro interactions that are consistent across all devices.

post_image_10

Website Credit: http://uncharted.sunbrella.com/athlete/

Why we think you should use them:

With the previous restrictions of the navigation menu, the possibilities have opened up for designers to have more freedom and engage the user in the navigation process. Still understanding the usability as the focal point, more considered routes are being used to help navigate content in a logical, and creative manor.

04. Making an impact with bold colours and gradients

The age of flat design is now on its way out making way for a more three-dimensional approach. By introducing subtle gradients and bright colours, 2016 saw brands ditching the flat muted tones for something more striking. Gradients and bold colour palettes have come hand in hand to make a statement within UI creating interest and capturing the users attention. With brands trying their best to stand out and present a new personality, 2017 will most likely see this increase and brighter hues will start popping up all over the place.

post_image_3

Website Credit: http://melanie-f.com/en/

Why we think you should use them:

If you want to stand out from the crowd at this point in time gradients and brighter hues will most likely do this. The energy, personality and vibrancy they inject will capture the users attention however be cautious not to over do it and bombard the user with too much.

05. Parallax

The use of parallax is being used more and more frequently in the past few years alongside moving away from a grid and the use of long content scrolling. Parallax creates a sense of depth by allowing multiple layers to move at a different speed to the foreground content. Its dynamic qualities are being seen more on image rich sites and one page websites as these create interest for the user, as well as giving a platform for larger lifestyle images to be showcased.

post_image_6

Website Credit: http://www.adidas.co.uk/climazone

Why we think you should use them:

Parallax should be used appropriately to break up large amounts of content so to not overpower the brand or the core messages. Used with text overlays or links, these work well to add depth to flat websites without the expense of creating video content.

06. Break the grid

Three little words a designer wants to here. When using a grid to design a website it can become restrictive and limit what you can do with the design. However it is now time to think beyond the limitations of a grid and introduce a more creative UI experience for the user. Not only does it open up opportunities for a more creative platform, but it allows the user to interact with the site differently and engage with multiple elements at one time.

post_image_5

Website Credit: http://www.grosselanterne.com/en/

Why we think you should use them:

Creating and maintaining interest when landing on a website is a crucial element to make sure the user is not put off straight away. By breaking away from the grid designers can try new ways of UI making navigation more fluid as well as interesting. On the other hand, when designing a site you still need to understand and consider the grid format but use this as a base rather than a strict set of rules as elements may break when viewed across devices.

07. Full-screen video

The use of imagery within UI and web design has now become an underpinning tool for showcasing a brands tone of voice and messaging. With this being such a success, it has allowed video to be introduced in a more creative manor capturing the user in multiple ways. Not only does a video instantly capture the users attention, but it is a dynamic way of telling a story and maintaining the users engagement for longer. 2017 will most likely see an increase in the use of full screen video as a key storytelling to aid the brands offering and engage the user.

post_image_1

Website Credit: http://www.balsan.fr

Why we think you should use them:

They create impact and engage the user quickly in a storytelling process, allowing them to understand your tone of voice and brand offering. As well as being versatile, they can be used as a feature or a background element overlaid with or without typography.

08. Increasing use of cards

In recent years mobile browsing has increased dramatically and the user journeys are becoming more seamless between desktop and mobile devices. With the success of using cards for mobile, the user experience on a desktop is now mirroring the methods of providing information that mobile devices use effectively. Sites like Facebook, Twitter and Pinterest for example do this incredibly well, allowing the user to see a large amount of data at once and select exactly what they are interested in reading more.

post_image_7

Website Credit: www.pinterest.com

Why we think you should use them:

It’s a clever way to organise a large amount of information in one place and give the control to the user to filter what they want to read. It acts more as a filter to allow the user to feel as thou they have a tailored user experience. They are also a versatile medium and can have micro interactions, animations and styling to create a dynamic appearance.

09. Typography

2017 is the age of bold typography statements across digital platforms moving away from google fonts and standard web fonts. 2016 saw the introduction of custom fonts being used as quotations and statement facts overlaid on imagery. It has now moved on one step further and designers are finding new ways to create typography lead sites. Not only does this create interest, but type can add fluidity and work with negative space to tell stories and build on a brands core values.

post_image_9

Website Credit: http://create.bang-olufsen.com/project/re-create

Why we think you should use them:

Used as another key tool to inject personality, typography can be used as a statement alongside imagery to tell the user a key story. When paired with a combination of the other 2017 trends, beautifully considered pieces of design are born making the most creative solutions possible for that brand.

10. Micro-interactions / animations

Pretty much what it says on the tin. Micro interactions and animations are the small animations that give a site its subtle personality and playful UX. Most commonly seen on mobile devices they add a a sense of fun to buttons and iconography. One of the most successful is Facebook and Twitter with the like and love heart buttons that animate when clicked. Not only are they fun and look good, but they are a key indicator to the user as to whats happening on the site and where to go next.

post_image_8

Website Credit: https://www.adamunderwear.com

Why we think you should use them:

Not only do they inject fun into a website but they are a key element to make sure the user understands what is going on and that something has happened on the site. They are also a good indicator of collecting feedback from the user.