09 Tendances Du Design UI

UI design :
les tendances
d'interfaces
UI Design : les tendances d'interfaces
Flat, flat, flat

A l'image du nouvel OS d'Apple, le flat design s'est imposé
comme la nouvelle norme sur Internet et sera encore, cette
année, une valeur sûre du design.
Ce courant graphique et ergonomique prône des interfaces
minimalistes et aux couleurs vives.
Débarrassé de tout ornement et de tout relief il a pour but
d’améliorer la lisibilité et l'accès à l'information afin d'optimiser
l'expérience de l'utilisateur.
2
Adios Skeuomorphisme
Le flat design s'oppose au skeuomorphisme (qui était la tendance
dans les premières version de iOs et qui a totalement disparu).
Ce courant reprenait les caractéristiques graphiques des objets
de façon réaliste (couleur, forme, relief…) alors que le flat design
propose une représentation épurée de ce dernier.
Ce site propose de comprendre les différences entre les deux

styles à travers un storrytelling d'agence.
3
Sur ce site, les différents dessins n'ont pas vocation à être réalistes mais à être simplifiés :
cette approche est très moderne, elle permet à l'internaute de rêver, imaginer, etc...
4
Le material Design
Le material Design est un ensemble de règles de design
proposées par Google, qui les applique à aux interfaces
graphiques de ces logiciels et applications.
Les designers de l’entreprise ont imaginé un langage visuel pour
leurs utilisateurs qui synthétiserait les principes graphiques d’une
bonne conception.
Pour y arriver, il combine la magie de la métaphore, un design

audacieux et intentionnel et le mouvement, générateur de sens.
http://www.google.com/design/spec/what-is-material/
environment.html#environment-light-shadow
5
Le site Material Up propose de nombreuses ressources (techniques, graphiques,

ergonomiques) pour vous aider à comprendre et utiliser le Material Design.
6
Le site Material Palette propose de choisir des couleurs de la palette Material Design
proposées par Google et de prévisualiser le résultat graphique.
7
Le site Github propose une large sélection de pictogrammes utilisés par Google dans leurs
applications refondues sur le modèle du Material Design.
8
La mosaïque (ou card design)

L'essort de Pinterest et du responsive design a permis le
développement de style "Mosaïque".
Fonctionnelle et modulable, facile à lire et à adapter, elle permet
d'avoir un aperçu complet et rapide des contenus ou des produits
proposés sur un site. L'usage d'une grille est indispensable pour
que votre grille soit intégrable (gestion des colonnes et des
goutières).
9
Utilisée par Google+, cette grille modulable permet de facilement organiser son contenu et
de le prioriser (couleur, taille, emplacement, etc).
10
La grille sans gouttière est plus élégante mais moins lisible, n'hésitez pas à ajouter des
distinctions visuelles à votre composition pour améliorer la lisibilité (flèches, couleurs, etc).
11
Place à la vidéo
Aujourd'hui, plus de 4 milliards d'heures de vidéo sont visualisées
chaque mois sur Youtube. L'avènement de la vidéo sur Internet
est chiffré et réel.
Les sites l'ont compris et la tendance est de proposer une vidéo
dès la page d'accueil afin d'animer et de faire comprendre la
mrque (une vidéo remplace plus facilement un texte et permet
d'amener une touche de créativité et d'authenticité).
12
Si la vidéo est agréable, une vidéo trop longue devient génante. Il est préférable d'utiliser un
montage en boucle que l'utilisateur peut visualiser entièrement et sans son (AirBNB)
13
Ce site propose une utilisation plutôt originale de la vidéo, deux vidéos se superposent
(espace et temps) et l'on peut choisir de moduler l'affichage entre les deux vidéos.
14
et place à l'image !
Avec l'avènement de la fibre & la 4G, le débit de connexion est
de plus en plus élevé et permet de développer les possibilités
sur Internet : les images en bonne définition sont désormais
utilisables sans conditions.
Illustrations, icônes, data design ou photo, permettent de
véhiculer les messages et les valeurs de la marque.
15
Une image se doit d'être authentique, les photos sans intérêts ou typées "banque d'images"
sont repérables facilement par les internautes et décrédibilisent le site.
16
Ce site utilise une mise en scène et des photomontages astucieux (entre originalité et
authenticite) pour nous plonger dans l'espace de cette boulangerie africaine.
17
Les menus cachés

Alors qu'on avait l'habitude de trouver le menu en dessous le
header ou dans la colonne de gauche, celui-ci a désormais
tendance à... se cacher !
La suppression du menu apparent facilite l'intégration pour les
tablettes et les mobiles et permet l'affichage de visuels en plein
écran.
18
Aujourd'hui le menu est un élément d'analytics à part entière. En le rendant cliquable, on

peut savoir combien de personnes l'ont rendu visible et sont intéréssés par le site.
19
Le one-page
Héritée du tactile (ouverture des onglets difficiles, sous menu
compliqués à afficher), la navigation au scroll séduit beaucoup
d'utilisateurs.
On retrouve souvent un "sticky menu" qui se déplace avec nous
et nous amène à la rubrique choisie via un système d'ancres.
Afin de distinguer les rubriques, le designer préfère multiplier
les astuces visuelles (bandeaux de couleur, titres de rubriques,
univers visuels différents) sur la même page, plutôt que de
multiplier les pages.
20
L'utilisation d'un site "one-page" facilite le storytelling autour d'un produit ou d'une marque.
On entre dans un univers et on se laisse guider par le site.
21
Parallaxes
Largement répandu sur les sites one-page, les effets de parallaxe
permettent d'animer la page et de faire défiler les éléments d'un
même décor à des vitesses différentes.
Le but est de créer de la profondeur, du relief au site.
Parfois réalisé via le curseur de la souris, les éléments se
déplaceront selon vos intentions. Un bel effet qui ne va pas
s'épuiser cette année !
22
La mise en place de cet effet est rendue possible par le plugin javascript Parallax.js.
En découpant les éléments séparément, on parvient à recréer cet effet.
23
Scroll infini
L'utilisateur n'aime pas changer de page, recharger le page, etc.
L'idée du scroll infini est de proposer l'ensemble des contenus
liés sur la même page et de les charger au fur et à mesure que
l'utilisateur scrolle dans la page.
Cette solution a été démocratisée par Pinterest et se trouve
aujourd'hui encore dans les tendances.
24
Le blog d'Awwwards propose le contenu au goutte à goutte, selon le scroll de l'utilisateur.

Les articles se chargent à notre convenance.
25
Le scroll en X !
Les tendances, c'est un peu comme la mode : ça finit toujours par
revenir !
Très moderne en 2010 puis laissé aux oubliettes, le scroll
horizontal a commencé à refaire son apparition cette année.
L'arrivée de HTML5 et CSS3 permet de donner aux sites
horizontaux un caractère plus interactif avec des effets de
parallaxe et d'animations.
Il reste malgré tout, moins adapté que le scroll vertical dans le
cadre d'un projet en responsive design.
26
Ce site présente une sélection d'hamburgers réalisés par des amateurs, il est intéréssant par
sa forme interactive, son élégance et sa navigation simple (clavier, scroll et drag&drop).
27
Ce site utilise également un scroll horizontal, ce système est agréable à visiter et invite à une
lecture scénarisée des contenus.
28
On continue de scroller... En Z !
Le scroll en X et en Y s'est largement répandu sur Internet (scroll
horizontal et scroll vertical).
Une nouvelle tendance commence à apparaître et à se
démocratiser, c'est le scroll en Z ! (en profondeur).
En scrollant, l'utilisateur a la sensation de zoomer dans la page à
l'infini et affiche les différentes rubriques
29
Dans cet exemple, cet effet s'applique parfaitement à la métaphore proposée par Google,
l'idée étant de remonter dans le temps via la Google Machine.
30
Storytelling
Afin de susciter un intérêt fort à l'égard de la marque, graphistes
et concepteurs auront tendance à miser sur le storytelling cette
année.
Raconter une histoire de façon ludique et interactive permet de
créer un univers de marque et d'impliquer le visiteur (chaque
élément sera un chapitre de votre histoire : argument de vente,
renseignement inédit, histoire de la marque, etc).
31
Sur ce site, Chanel rend hommage à la joaillerie des années 20, dédiée à l'audace et à la
liberté. On voit le Café Society évoluer au fil des heures et révéler ces secrets.
32
Sur ce site, l'achat de tickets et les informations pratiques (horaires & tarifs) se mèlent à
l'histoire du batiment, étage par étage, en animation et en informations.
33
Ce site nous permet de retracer les mémoires du dernier gaulois, un guerrier qui se livre à
nous à travers une expérience sensorielle unique.
34
Sur ce site, Getty propose de recomposer des portraits de personnalités avec des visuels
issus de leur banque d'image : un bon moyen de montrer la richesse de leurs contenus.
35
Gamification
Afin de communiquer sérieusement et d'impliquer le visiteur dans
la démarche de l'entreprise, l'autre solution est la "gamification" :
le serious game propose à l'internaute une simulation à but
informative et pédagogique.
En reprenant les codes du jeu vidéo (score, controles, design,
etc), certaines marques arrivent à créer des plate-formes
addictives et originales qui sont bien plus efficaces qu'un long
discours.
36
Sur ce site, on présente les différents colonels qui ont chacun incarné la marque KFC.
Chacun propose une interaction, plusieurs propose des jeux dont celui-ci (exemple)
37
Sur cette page d'erreur, Androïd nous propose soit de revenir à la page d'accueil, soit de
jouer à un jeu : un bon moyen de ne pas décevoir l'utilisateur !
38
Sur ce CV, le recruteur incarne un personnage et peut découvrir un univers coloré et inspiré
de Mario, dans lequel il peut se déplacer et accéder aux expériences et projets du créatif.
39
Expériences interactives
Les utilisateurs aiment être surpris lorsqu'ils arrivent sur un site.
Il est important de proposer des expériences qui soient
différentes, uniques, inédites : c'est ce qui doit faire votre force
en tant que designer.
L'émotion provoquée par l'interface est l'un des indicateurs
majeurs d'une expérience utilisateur réussie.
40
Sur ce site, le label Because Music propose de redécouvrir les artistes majeurs qu'ils ont
produit dans le cadre de petites expériences originales et ludiques.
41
Sur ce site, Google nous propose de tracer une ligne et trouve une image de paysage
reprenant la courbe qui vient d'être tracée.
42
Ce site nous envoie en immersion avec un groupe d'alpinistes afin de grimper un sommet.
Il utilise le principe de Google StreetView, l'effet est très réussi.
43
Tendance is the new bl ack

Le noir a tendance a prendre une place de plus en plus
importante dans le digital.
Cette teinte nécéssite moins d'énergie d'affichage (batterie) et
n'éblouit pas la nuit.
44
45
Ombres et lumières
Le material design, mis en place par Google cette année, propose
une utilisation intéréssante des ombres et des lumières afin de
rendre les interfaces plus chaleureuses.
46
Le site Kikk utilise le mouvement du curseur de notre souris pour faire évoluer la lumière et
les ombres sur le site.
47
Interagir avec son smartphone

De plus en plus d'expériences utilisant l'ordinateur et le
smartphone se propagent sur Internet et viralisent sur les réseaux
sociaux.
En tappant l'URL demandée par l'ordinateur sur son téléphone,
vous pourrez interagir avec son ordinateur et profiter de
l'expérience proposée.
Se servir d'une tireuse à bière, tirer des pénaltys ou shooter des
zombies avec son télépone : tout devient possible !
48
Dans ce jeu, l'internaute doit se servir une bière sans faire trop de mousse en inclinant son
smartphone correctement (il symbolise le verre). Il permet ensuite d'envoyer un SMS à ces
amis pour aller boire une vraie bière, indiquant que le smartphone sera plus utile ainsi !
49
Le site Just A Reflektor vous propose d'utiliser votre téléphone afin de mettre en lumière la
partie du clip d'Arcade Fire que vous souhaitez voir.
50
Facebook Connect
Afin de profiter d'une expérience immersive et d'axer le
storytelling autour de la marque, mais aussi de l'individu
(l'internaute par sa personnalité participe à l'image de l'entreprise),
les sites utilisant Facebook se sont multipliés.
Avec l'accord de l'utilisateur, le site peut utiliser vos photos, vos
amis, vos actualités afin de les transférer dans une métaphore.
Vous êtes donc le personnage principal de l'histoire.
51
Dans cet exemple, le site propose une expérience génante montrant la facilité avec laquelle
un tueur en série peut accéder à vos informations pour mettre en place son meurtre !
52
Sur ce site, il est possible de voir toutes les pages que l'on a liké des débuts de Facebook à
aujourd'hui à travers un tunnel temporel très graphique.
53
Webcam & micro

La multiplication des tablettes et des ordinateurs portables
permet à chaque internaute d'avoir un microphone et une caméra
embarquée.
Toujours dans l'idée d'améliorer son image, marques et produits
rivalisent d'ingéniosité pour utiliser ces ressources.
Gamification et storytelling sont au programme !
54
Dans cet exemple, l'utilisateur peut scanner son visage puis peut interagir avec son futur soi,
lui poser des questions sur son futur, ses usages, les différences avec le présent, etc...
55
Welcome @Typo
C'est aussi l'année de l'avènement de la typographie sur le Web.
Finies les polices natives. Place aux grandes fontes travaillées
à la main, avec des effets de style (ombres, relief, multicolore)
permettent de dynamiser un flat design.
L'outil Google Fonts, proposé par le géant Google permet
d'accéder gratuitement à de nombreuses familles de polices et
de soigner son interface.
56
Si les typographies sans serif et light se sont normalisées sur mobile (meilleure lisibilité), les
interfaces desktop misent sur une gamme plus large et créative.
57
Datadesign
Apple a lancé son application afin de surveiller votre santé, les
montres connectées permettent de connaître votre rythme
cardiaque et d'afficher le nombre de calories brulées par jour.
Il n'a jamais été aussi important de traiter l'information de manière
visuelle et hiérarchisée. Une métaphore visuelle est un vrai plus.
Les infographies se multiplient et seront encore à la une.
58
Chiffrées ou non, les internautes ne veulent plus voir de listes de chiffres, ils attendent des
visuels ludiques, clairs, graphiques (et animés !), qu'ils pourront conserver ou partager.
59
Géometrie
L'un des gros trends graphiques de l'année est l'utilisation (et
la répétition) de formes géométriques afin de créer des effets
cinétiques (ou kaléidoscopiques).
Adaptables dans le cadre d'une grille traditionelles, les
hexagones, cercles, carrés et autres losanges seront au
rendez-vous cette année !
60
Utilisée en background ou pour des éléments de navigation cliquables, ces formes

dynamisent le design et amènent des "accidents visuels" très intéréssants.
61
Dans cet exemple, le fait de jouer avec des formes géométriques ne pose pas de problèmes
pour respecter la grille et intégrer le design au site Internet.
62
Dans cet exemple, le fait de jouer avec des formes géométriques ne pose pas de problèmes
pour respecter la grille et intégrer le design au site Internet.
63
Couleurs vives et saturées

Le flat design mise sur des blocs de couleurs (traités en applat), il
est donc important d'avoir de belles couleurs, vives et lumineuses
afin de proposer une interface affordante.
Il est important de savoir faire varier ses teintes sous Photoshop
via les paramètres TSL (Teinte, Saturation, Luminosité) afin d'avoir
des familles de couleur qui fonctionnent bien ensemble.
64
Le vert fluo proposé par ce site, se matérialise sur les effets de roll-over, sous forme
géométrique et sur les blocs d'appel.
65

09 Tendances Du Design UI

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

09 Tendances Du Design UI

Transféré par

Droits d'auteur :

Formats disponibles

UI design :

Flat, flat, flat

Ce site propose de comprendre les différences entre les deux

Pour y arriver, il combine la magie de la métaphore, un design

Le site Material Up propose de nombreuses ressources (techniques, graphiques,

La mosaïque (ou card design)

Les menus cachés

Aujourd'hui le menu est un élément d'analytics à part entière. En le rendant cliquable, on

Le blog d'Awwwards propose le contenu au goutte à goutte, selon le scroll de l'utilisateur.

Tendance is the new bl ack

Interagir avec son smartphone

Webcam & micro

Utilisée en background ou pour des éléments de navigation cliquables, ces formes

Couleurs vives et saturées

Vous aimerez peut-être aussi