UI DESIGN- The top 10 trends for 2016 -

- WHAT’S NEW (OR ALMOST) -

Nowadays, interfaces have to adapt to a variety of devices that change constantly. Due to this constant state of flux , it’s important to repeatedly question our ways of working to guarantee a scalability and consistency across all platforms.

In design, it is no longer possible to think in “fixed pages”; we need to think about “fluid design” as a system of changing components, just as developers do. There are several ways to approach this: Responsive Design is a classic example, but Adaptive UI, Material Design and Atomic Design also have this same perspective.

TREND N°1

FLUID DESIGN

Users are used to rich visual experiences found in certain apps: lighter content, targeted features, more fine-tuned interaction design and navigation native to each OS. Users are now more demanding than ever and they expect similar rich experiences on the web.

Many sites are now overhauling their graphic and ergonomic codes for mobile and tablet apps. This means it’s crucial to rethink content strategy and structure in order to keep only what’s essential and to optimize navigation with “smart” interfaces (clever menus, predictive forms, etc.).

TREND N°2

APPS THAT INSPIRE THE WEB

- NOT NEW, BUT STILL RELEVANT -

TREND N°3

SIMPLICITY AT EACH STEP

The keyword here is “less is more”, which requires a constant quest to keep only relevant information that is useful to users, both in style (interface) and substance (content).

So we can forget all about the fancy details that can easily overload interfaces and move towards a design that is as simplified as possible. To achieve a harmonious visual balance, the interface needs to be structured using a table where each space and alignment is carefully adjusted. Contrary to what you might think, simplicity doesn’t always mean facility or streamlining.

Flat Design is still holding strong and is now being paired with Material Design.

Flat Design is still very much present with its focus on simplicity and colored fields.

Material Design brings a new dimension, with the concept of field hierarchy, a return to shadows and especially animation. This helps to more clearly structure information while allowing for more interactive elements.

TREND N°4

MATERIAL ENRICHING FLAT DESIGN

TREND N°5

ALL THE COLORS OF THE RAINBOW

Colors are very important in graphic design because they introduce the brand universe and mood, while playing a key role in the visual hierarchy of the interface and redirecting the user’s focus.

Using bright colors adds a much-needed dynamism to understand the interface. They can be accompanied by pastel tints or paired with other bright colors to create bold color palettes. It’s also possible to add light fading to a background to intensify the depth.

TREND N°6

ILLUSTRATION IN ALL SHAPES AND SIZES

In response to Flat Design and image banks’ impersonal visuals, we’ll be seeing more and more personalized illustrations. An illustration’s fun, differentiating approach adds personality to interfaces while affirming a brand’s identity and finding new ways to present content. They are particularly helpful in storytelling.

TREND N°7

IMMERSIVE BACKGROUNDS

Some interfaces can particularly benefit from playing with large background visuals to provide a realistic, human touch and add depth.

These visuals become real spaces of expression for the brand because they help add value to the content and set the tone for the overall look the brand is aiming for.

More and more short videos as backgrounds provides a realistic, immersive sensation. Just make sure that this animation is discreet and that it won’t distract or bore the user.

TREND N°8

INFINITE SCROLLING

The classic fear that users won’t scroll and thereby will miss content beneath the line of sight is long gone!

With the pervasive use of smartphones and tablets, scrolling has become both natural and automatic. For many years, “one-page” sites have been growing in popularity, progressively loading content as users scroll further. Another benefit: scrolling increases user engagement.

TREND N°9

HIERARCHY THROUGH TYPOGRAPHY

Typography is still an essential element to add hierarchy to information, by using contrasting font sizes and varying boldness. With web fonts now on the scene, there is even more freedom of typographic expression.

Two character families are enough to simultaneously create rhythm, harmonious layout and to guarantee good legibility of the content (Font Pairing).

TREND N°10

ANIMATION THATSERVES A PURPOSE

Animation is not only useful in creating a “wow” factor, but can also be used to help users understand the interface and interactions.

Sticking to Material Design guidelines, animation is based on the laws of physics while remaining discreet. Micro-interactions help provide feedback to the user after they perform an action.

Be careful to not go overboard, it’s better to maintain a consistency and meaning in the user experience.

- CONCLUSION -

We can see a logical evolution that follows market trends and usage.

3 key takeaways:

● Every trend should be considered and challenged with the brand’s users and objectives in mind

● The “test and learn” method is the best way to check user comprehension and to start applying hypotheses

● And of course, a good UI is nothing without a good UX!

Want more information, or to get in touch?

Marie-Amélie COTILLONCreative Studio Manager

marie-amelie.cotillon@backelite.comwww.backelite.com