L’UI Design en 2017


Vers des tendances minimalistes et épurées

L’UI Design : tendances et concept

L’UI s’inscrit dans le process complet de l’UX. Le design a en effet une incidence sur chaque aspect de l’expérience client, sa conception doit donc s’effectuer harmonieusement sur la totalité des points de contacts.

La propagation de fonctionnalités orientées « UX » a fait émerger les tendances minimalistes, on parle parfois de « Streamlined Design ».

« Streamlined » signifie profilé, aérodynamique et par extension simplifié, optimisé. « Streamlined Design » signifie donc, dans le web design, d’aller au plus simple, au plus efficace comme c'est le cas pour les montres, lunettes connectées... En effet, pour ces supports, le petit écran oblige à se focaliser sur l'affichage d'un seul type d'information.

Cette recherche de pure efficacité, de simplicité de compréhension pour l'utilisateur est au cœur des réflexions des concepteurs du Material Design qui encouragent à la conception d’interfaces simples et qui s'adaptent rapidement d'un support à un autre : écran PC, tablette, smartphone...

Le Material Design : mais qu’est-ce que c’est ?

Il s'agit d'un concept créé par Google, s'appliquant au design d'interfaces digitales (sites, applications...) et à l'expérience utilisateur (UX).

Le material design est une continuité du flat design, qui est un courant graphique et ergonomique prônant des interfaces minimalistes, aux couleurs vives (couleurs en aplat plutôt que des textures et matières).


Dans le flat design, on utilisait parfois jusqu'à 5 teintes différentes. Dans le material design, on utilise le plus souvent du noir + une teinte vive (rouge, vert, bleu, jaune, orange...) et leurs déclinaisons de luminosité + une teinte secondaire utilisée avec parcimonie, par petites touches pour des liens ou des boutons à faire ressortir.


Appuyé de ce courant, le material design ajoute des propriétés réalistes tels que des dégradés, des ombres, des lumières, des plans dans l’espace, des couleurs… Il consiste à introduire des effets animés pour créer des mouvements et retranscrire ainsi des comportements que l’on retrouve dans le monde physique.





Mouvements et effets animés réalistes

Les effets animés

Pour un effet plus réaliste et retranscrire des mouvements du monde réel, une animation se joue sur les feuilles du palmier.


http://www.rumchata.com/

Voici un autre exemple de mouvement crée au déplacement de la souris sur le site.


https://www.mdfitalia.com/en



Des typographies simples et surdimensionnées

La variation de typographies pour dynamiser le contenu

La couleur et la typographie sont mises en avant.

La tendance se répand sur les sites web qui veulent conduire l’internaute à l’action via notamment l’ utilisation d'un bouton « Call to action » clair et visible. Certains designers vont se passer de photos ou d’illustrations pour communiquer un message. Attention, ce type de design ne convient pas à tous les projets.


http://thelobster-movie.com/



L'usage des icônes

Les icônes comme moyen de lecture

Les icônes ont envahi les sites web parfois même comme élément visuel principal.

L’important est de privilégier les icônes, de les rendre visibles quelle que soit leur échelle. Ils doivent fonctionner en une seule couleur si besoin et attirer l’attention.


https://www.blocklevel.nl/


Le split design

L’effet « Split screen »

Le split screen permet de mettre deux informations en parallèle sur la même page. Il divise verticalement le milieu de l’écran et comporte des contenus séparés tels que la photo, le bloc éditorial ou l’illustration. Ce principe est toutefois peu utilisé sur des sites à fort contenu.

http://mytranshealth.com/

Le split screen avec deux éléments d’importance égale

Le visuel change au clic sur la photo. Le texte, quant à lui, ne bouge pas.



http://www.thesquareapts.com/

Dans l'exemple qui suit, le visuel et le formulaire ont le même niveau d’importance. Le changement du visuel s'opère au clic sur les boutons et de manière automatique.



https://projects.invisionapp.com/d/signup/

Le split screen avec encarts superposés et chevauchements

Une animation se joue au scroll vers le bas de page : le visuel à gauche disparaît vers le haut pour laisser place au visuel suivant, l’encart de droite disparaît vers le bas pour laisser place au suivant.



http://nikoskoulis.gr/

Le split screen avec chevauchements : une combinaison d’images colorées et de contenus situés côté à côte

Dans l'exemple ci-dessous, le scroll vers le bas ou le haut affiche un contenu différent pour chaque encart. Les contenus étant graphiquement différent, l’effet animé s’en trouve encore plus renforcé.



http://silesoleil.com/

Attention à ceux qui ont le tournis ! Le basculement de ce site va vous mettre la tête à l’envers !



http://renaterechner.at/en/