SlideShare una empresa de Scribd logo
1 de 24
Descargar para leer sin conexión
DESIGN D’INTERFACE
- Les 10 tendances en 2017 -
- ÇA RESTE D’ACTUALITÉ -
TENDANCE N°1
SIMPLICITÉ
ET CLARTÉ
L’omniprésence du mobile a
transformé les interfaces et la
manière d’afficher le contenu : on
montre à l’utilisateur ce qu’il est
venu chercher, on l’aide à effectuer
une action précise et on limite la
quantité de texte.
La présence du blanc est très
importante. On voit de plus en plus de
mises en page aérées et géométriques,
mais parfois également des grilles plus
déstructurées qui permettent de
donner plus de dynamisme à l’écran.
TENDANCE N°2
DE LA COULEUR
ET DES
CONTRASTES
Simple ne veut pas dire froid.
La couleur et les dégradés viennent
ramener de la chaleur dans les
interfaces. On préférera définir un jeu
de couleurs simple et mettre l’accent
sur la couleur d’action/d’accent pour
créer le contraste.
TENDANCE N°3
HIÉRARCHIE ET
TYPOGRAPHIE
Le choix de la police de caractères
est fondamental et contribue à
l’identité de la marque et de la
plateforme.
La typographie reste un moyen
incontournable pour hiérarchiser
l’information grâce à des contrastes de
taille et des variations de graisse.
Les contraintes d'accessibilité, de plus
en plus présentes, et les interfaces
conversationnelles vont redonner à la
typographie toute son importance.
TENDANCE N°4
L’ILLUSTRATION
SOUS TOUTES
SES FORMES
En réponse au flat design et aux
visuels impersonnels des banques
d'images, on voit apparaître de plus
en plus d’illustrations.
L’approche ludique et différenciante
d’une illustration permet de donner une
personnalité aux interfaces, d’affirmer
l’identité d’une marque et de trouver
une nouvelle manière de présenter les
contenus. Elles sont particulièrement
pertinentes pour créer du storytelling.
Il est important pour une marque
d’avoir sa propre bibliothèque
d’illustrations.
TENDANCE N°5
MOTION UI
ET DESIGN
EMOTIONNEL
Les animations ne sont pas là pour
créer le « wahou effect ». Elles aident
à la compréhension de l’interface et
des interactions.
Les animations s’inspirent des lois de la
physique (ex. Material Design) tout en
restant discrètes. Les micro-interactions
permettent de donner du feedback à
l’utilisateur suite à une action.
Attention à ne pas en abuser, à garder
une cohérence et du sens.
- C’EST NOUVEAU (OU PRESQUE) -
Avoir une expérience globale et
cohérente sur tous les supports
passe par la création d’un véritable
langage visuel.
Les futures interfaces ne seront donc
plus pensées par écran mais bien
comme des systèmes de
composants, vivants et évolutifs.
TENDANCE N°6
UN LANGAGE
VISUEL
(éloge de la cohérence)
Avec les objets connectés et
l’impression 3D, le digital se
reconnecte avec le monde physique.
Sans aller jusqu’à revenir au
skeuomorphisme, on observe une
tendance à se rapprocher du monde
physique avec des interfaces qu’on a
envie de toucher (matières) et avec
lesquelles on a envie de jouer (ombres,
animations...).
TENDANCE N°7
DES CRÉAS
QUI SORTENT
DE L’ÉCRAN
Le big data est là, ça ne fait plus de
doute pour personne.
Ces données doivent maintenant être
exploitées et analysées afin de donner
à l’utilisateur la meilleure expérience
possible.
La représentation claire et pertinente
de ces données sera structurante,
d’autant plus sur des applications
bancaires.
TENDANCE N°8
REPRÉSENTER
LES DATAS
TENDANCE N°9
RACONTER
DES HISTOIRES
Le storytelling est plus que jamais
d’actualité pour embarquer
l’utilisateur dans un récit et plus
simplement une suite d’arguments.
Les monopages très longues (fini la
peur du scroll !!!) se composent au fil de
la lecture et deviennent de vraies
narrations.
Cela permet de remplacer une lecture
du contenu parfois monotone par un
délicieux processus de découverte.
On assiste également à la mort des
photos libres de droits et on préférera
de l’authentique, du vécu.
TENDANCE N°10
VIVRE DE
NOUVELLES
EXPÉRIENCES
On ne compte plus les nouveautés
technologiques qui relevaient encore
il y a quelques années de la fiction.
Réalité virtuelle, réalité augmentée, jeux
qui font sortir les utilisateurs dans la
rue (Pokemon Go)...
L’utilisateur va donc être de plus en
plus en demande de nouvelles
expériences (visuelles, sonores et
tactiles) et de produits qui cassent les
codes établis.
Il va également s’attendre, grâce à
toutes ces technologies, à un design
personnalisé, prédictif et intelligent.
Tendances du Design d'Interface 2017
Tendances du Design d'Interface 2017

Más contenido relacionado

Destacado

A developer who knows how to design by Audrey Hacq
A developer who knows how to design by Audrey HacqA developer who knows how to design by Audrey Hacq
A developer who knows how to design by Audrey HacqIdean France
 
Un développeur sachant designer par Audrey Hacq
Un développeur sachant designer par Audrey HacqUn développeur sachant designer par Audrey Hacq
Un développeur sachant designer par Audrey HacqIdean France
 
Sirikit par Julien Coudsi
Sirikit par Julien CoudsiSirikit par Julien Coudsi
Sirikit par Julien CoudsiIdean France
 
Rendering unit tests par Nicolas Fontaine
Rendering unit tests par Nicolas FontaineRendering unit tests par Nicolas Fontaine
Rendering unit tests par Nicolas FontaineIdean France
 
Top UX Trends For 2017
Top UX Trends For 2017Top UX Trends For 2017
Top UX Trends For 2017Amber Shively
 
Digital UX trends 2017
Digital UX trends 2017Digital UX trends 2017
Digital UX trends 2017Mak Kordić
 
Tendances web 2018 #internet #tendances #réseaux
Tendances web 2018 #internet #tendances #réseauxTendances web 2018 #internet #tendances #réseaux
Tendances web 2018 #internet #tendances #réseauxREALIZ
 
Cocoaheads Montpellier Meetup : Comment gérer son onboarding
Cocoaheads Montpellier Meetup : Comment gérer son onboardingCocoaheads Montpellier Meetup : Comment gérer son onboarding
Cocoaheads Montpellier Meetup : Comment gérer son onboardingIdean France
 
Opérer un unbundling : 6 questions que les marques doivent se poser
Opérer un unbundling : 6 questions que les marques doivent se poserOpérer un unbundling : 6 questions que les marques doivent se poser
Opérer un unbundling : 6 questions que les marques doivent se poserIdean France
 
Programmation Orientée Protocole {Cocoaheads Montpellier}
Programmation Orientée Protocole {Cocoaheads Montpellier}Programmation Orientée Protocole {Cocoaheads Montpellier}
Programmation Orientée Protocole {Cocoaheads Montpellier}Idean France
 
CA Layer / Core Animation {Cocoaheads Montpellier}
CA Layer / Core Animation {Cocoaheads Montpellier}CA Layer / Core Animation {Cocoaheads Montpellier}
CA Layer / Core Animation {Cocoaheads Montpellier}Idean France
 
Cocoaheads Montpellier Meetup : 3D Touch for iOS
Cocoaheads Montpellier Meetup : 3D Touch for iOSCocoaheads Montpellier Meetup : 3D Touch for iOS
Cocoaheads Montpellier Meetup : 3D Touch for iOSIdean France
 
Messages Extensions par Nicolas Fontaine
Messages Extensions par Nicolas FontaineMessages Extensions par Nicolas Fontaine
Messages Extensions par Nicolas FontaineIdean France
 
Meetup CocoaHeads Montpellier : conférence sur l'Auto Layout
Meetup CocoaHeads Montpellier : conférence sur l'Auto LayoutMeetup CocoaHeads Montpellier : conférence sur l'Auto Layout
Meetup CocoaHeads Montpellier : conférence sur l'Auto LayoutIdean France
 
App groups, faire communiquer ses applications {Cocoaheads Montpellier}
App groups, faire communiquer ses applications {Cocoaheads Montpellier}App groups, faire communiquer ses applications {Cocoaheads Montpellier}
App groups, faire communiquer ses applications {Cocoaheads Montpellier}Idean France
 
Cocoaheads Montpellier Meetup : L'analyse de Code Statique avec Objective-C /...
Cocoaheads Montpellier Meetup : L'analyse de Code Statique avec Objective-C /...Cocoaheads Montpellier Meetup : L'analyse de Code Statique avec Objective-C /...
Cocoaheads Montpellier Meetup : L'analyse de Code Statique avec Objective-C /...Idean France
 
CocoaPods par David Yang
CocoaPods par David YangCocoaPods par David Yang
CocoaPods par David YangIdean France
 
Les Formulaires - Les bonnes pratiques pour une meilleure expérience utilisat...
Les Formulaires - Les bonnes pratiques pour une meilleure expérience utilisat...Les Formulaires - Les bonnes pratiques pour une meilleure expérience utilisat...
Les Formulaires - Les bonnes pratiques pour une meilleure expérience utilisat...Idean France
 

Destacado (20)

Tendances Web Design 2017/2018
Tendances Web Design 2017/2018Tendances Web Design 2017/2018
Tendances Web Design 2017/2018
 
A developer who knows how to design by Audrey Hacq
A developer who knows how to design by Audrey HacqA developer who knows how to design by Audrey Hacq
A developer who knows how to design by Audrey Hacq
 
Un développeur sachant designer par Audrey Hacq
Un développeur sachant designer par Audrey HacqUn développeur sachant designer par Audrey Hacq
Un développeur sachant designer par Audrey Hacq
 
Sirikit par Julien Coudsi
Sirikit par Julien CoudsiSirikit par Julien Coudsi
Sirikit par Julien Coudsi
 
Rendering unit tests par Nicolas Fontaine
Rendering unit tests par Nicolas FontaineRendering unit tests par Nicolas Fontaine
Rendering unit tests par Nicolas Fontaine
 
Top UX Trends For 2017
Top UX Trends For 2017Top UX Trends For 2017
Top UX Trends For 2017
 
Digital UX trends 2017
Digital UX trends 2017Digital UX trends 2017
Digital UX trends 2017
 
UX is not UI!
UX is not UI!UX is not UI!
UX is not UI!
 
Tendances web 2018 #internet #tendances #réseaux
Tendances web 2018 #internet #tendances #réseauxTendances web 2018 #internet #tendances #réseaux
Tendances web 2018 #internet #tendances #réseaux
 
Cocoaheads Montpellier Meetup : Comment gérer son onboarding
Cocoaheads Montpellier Meetup : Comment gérer son onboardingCocoaheads Montpellier Meetup : Comment gérer son onboarding
Cocoaheads Montpellier Meetup : Comment gérer son onboarding
 
Opérer un unbundling : 6 questions que les marques doivent se poser
Opérer un unbundling : 6 questions que les marques doivent se poserOpérer un unbundling : 6 questions que les marques doivent se poser
Opérer un unbundling : 6 questions que les marques doivent se poser
 
Programmation Orientée Protocole {Cocoaheads Montpellier}
Programmation Orientée Protocole {Cocoaheads Montpellier}Programmation Orientée Protocole {Cocoaheads Montpellier}
Programmation Orientée Protocole {Cocoaheads Montpellier}
 
CA Layer / Core Animation {Cocoaheads Montpellier}
CA Layer / Core Animation {Cocoaheads Montpellier}CA Layer / Core Animation {Cocoaheads Montpellier}
CA Layer / Core Animation {Cocoaheads Montpellier}
 
Cocoaheads Montpellier Meetup : 3D Touch for iOS
Cocoaheads Montpellier Meetup : 3D Touch for iOSCocoaheads Montpellier Meetup : 3D Touch for iOS
Cocoaheads Montpellier Meetup : 3D Touch for iOS
 
Messages Extensions par Nicolas Fontaine
Messages Extensions par Nicolas FontaineMessages Extensions par Nicolas Fontaine
Messages Extensions par Nicolas Fontaine
 
Meetup CocoaHeads Montpellier : conférence sur l'Auto Layout
Meetup CocoaHeads Montpellier : conférence sur l'Auto LayoutMeetup CocoaHeads Montpellier : conférence sur l'Auto Layout
Meetup CocoaHeads Montpellier : conférence sur l'Auto Layout
 
App groups, faire communiquer ses applications {Cocoaheads Montpellier}
App groups, faire communiquer ses applications {Cocoaheads Montpellier}App groups, faire communiquer ses applications {Cocoaheads Montpellier}
App groups, faire communiquer ses applications {Cocoaheads Montpellier}
 
Cocoaheads Montpellier Meetup : L'analyse de Code Statique avec Objective-C /...
Cocoaheads Montpellier Meetup : L'analyse de Code Statique avec Objective-C /...Cocoaheads Montpellier Meetup : L'analyse de Code Statique avec Objective-C /...
Cocoaheads Montpellier Meetup : L'analyse de Code Statique avec Objective-C /...
 
CocoaPods par David Yang
CocoaPods par David YangCocoaPods par David Yang
CocoaPods par David Yang
 
Les Formulaires - Les bonnes pratiques pour une meilleure expérience utilisat...
Les Formulaires - Les bonnes pratiques pour une meilleure expérience utilisat...Les Formulaires - Les bonnes pratiques pour une meilleure expérience utilisat...
Les Formulaires - Les bonnes pratiques pour une meilleure expérience utilisat...
 

Similar a Tendances du Design d'Interface 2017

Nouvelles tendances ui ux avec notes
Nouvelles tendances ui ux avec notesNouvelles tendances ui ux avec notes
Nouvelles tendances ui ux avec notesConcept Image
 
telmedia* : tendances webdesign 2015, l'année de l'UX
telmedia* : tendances webdesign 2015, l'année de l'UXtelmedia* : tendances webdesign 2015, l'année de l'UX
telmedia* : tendances webdesign 2015, l'année de l'UXtelmedia
 
C2E Poitiers - Tablettes tactiles : terminaux, usages et marchés
C2E Poitiers - Tablettes tactiles : terminaux, usages et marchésC2E Poitiers - Tablettes tactiles : terminaux, usages et marchés
C2E Poitiers - Tablettes tactiles : terminaux, usages et marchéstablettetactile
 
Ideation phase: "As many ideas as I have"
Ideation phase: "As many ideas as I have"Ideation phase: "As many ideas as I have"
Ideation phase: "As many ideas as I have"charlesbail
 
Dagobert Trends 2013 : Persocial Years
Dagobert Trends 2013 : Persocial YearsDagobert Trends 2013 : Persocial Years
Dagobert Trends 2013 : Persocial YearsDagobert
 
Les tendances du webdesign 2019 à retenir
Les tendances du webdesign 2019 à retenirLes tendances du webdesign 2019 à retenir
Les tendances du webdesign 2019 à retenirConcept Image
 
Retour d'expérience sur la conception et la construction d'une application ME...
Retour d'expérience sur la conception et la construction d'une application ME...Retour d'expérience sur la conception et la construction d'une application ME...
Retour d'expérience sur la conception et la construction d'une application ME...Microsoft Technet France
 
MobiliTeaTime #14 : L'Atomic Design
MobiliTeaTime #14 : L'Atomic DesignMobiliTeaTime #14 : L'Atomic Design
MobiliTeaTime #14 : L'Atomic DesignUSERADGENTS
 
Les tendances graphiques pour avoir un site agréable et moderne - Agence Pilo...
Les tendances graphiques pour avoir un site agréable et moderne - Agence Pilo...Les tendances graphiques pour avoir un site agréable et moderne - Agence Pilo...
Les tendances graphiques pour avoir un site agréable et moderne - Agence Pilo...Julien Dereumaux
 
Concevoir des Interfaces Utilisateur efficaces et vendeuses
Concevoir des Interfaces Utilisateur efficaces et vendeusesConcevoir des Interfaces Utilisateur efficaces et vendeuses
Concevoir des Interfaces Utilisateur efficaces et vendeusesMicrosoft
 
Human Talk - Faire du design par composant avec l'Atomic Design
Human Talk - Faire du design par composant avec l'Atomic DesignHuman Talk - Faire du design par composant avec l'Atomic Design
Human Talk - Faire du design par composant avec l'Atomic DesignLoïc Vanderschooten
 
Tendances Webdesign 2018 by @vanksen
Tendances Webdesign 2018 by @vanksenTendances Webdesign 2018 by @vanksen
Tendances Webdesign 2018 by @vanksenRaphaël Vian
 
Livre blanc : Les tendances du web design 2018
Livre blanc : Les tendances du web design 2018Livre blanc : Les tendances du web design 2018
Livre blanc : Les tendances du web design 2018Ametys
 
Réconcilier l’identité de mon application avec les guidelines
Réconcilier l’identité de mon application avec les guidelinesRéconcilier l’identité de mon application avec les guidelines
Réconcilier l’identité de mon application avec les guidelinesMicrosoft Technet France
 
Le skeuomorphisme et l'approche authentiquement numérique de Microsoft
Le skeuomorphisme et l'approche authentiquement numérique de MicrosoftLe skeuomorphisme et l'approche authentiquement numérique de Microsoft
Le skeuomorphisme et l'approche authentiquement numérique de MicrosoftMicrosoft Décideurs IT
 
La Petite Tribu | Présentation
La Petite Tribu | PrésentationLa Petite Tribu | Présentation
La Petite Tribu | PrésentationAbdoulaye GNING
 

Similar a Tendances du Design d'Interface 2017 (20)

Nouvelles tendances ui ux avec notes
Nouvelles tendances ui ux avec notesNouvelles tendances ui ux avec notes
Nouvelles tendances ui ux avec notes
 
telmedia* : tendances webdesign 2015, l'année de l'UX
telmedia* : tendances webdesign 2015, l'année de l'UXtelmedia* : tendances webdesign 2015, l'année de l'UX
telmedia* : tendances webdesign 2015, l'année de l'UX
 
C2E Poitiers - Tablettes tactiles : terminaux, usages et marchés
C2E Poitiers - Tablettes tactiles : terminaux, usages et marchésC2E Poitiers - Tablettes tactiles : terminaux, usages et marchés
C2E Poitiers - Tablettes tactiles : terminaux, usages et marchés
 
Ideation phase: "As many ideas as I have"
Ideation phase: "As many ideas as I have"Ideation phase: "As many ideas as I have"
Ideation phase: "As many ideas as I have"
 
Dagobert Trends 2013 : Persocial Years
Dagobert Trends 2013 : Persocial YearsDagobert Trends 2013 : Persocial Years
Dagobert Trends 2013 : Persocial Years
 
Les tendances du webdesign 2019 à retenir
Les tendances du webdesign 2019 à retenirLes tendances du webdesign 2019 à retenir
Les tendances du webdesign 2019 à retenir
 
Retour d'expérience sur la conception et la construction d'une application ME...
Retour d'expérience sur la conception et la construction d'une application ME...Retour d'expérience sur la conception et la construction d'une application ME...
Retour d'expérience sur la conception et la construction d'une application ME...
 
MobiliTeaTime #14 : L'Atomic Design
MobiliTeaTime #14 : L'Atomic DesignMobiliTeaTime #14 : L'Atomic Design
MobiliTeaTime #14 : L'Atomic Design
 
NEMO EDITIONS
NEMO EDITIONSNEMO EDITIONS
NEMO EDITIONS
 
Les tendances graphiques pour avoir un site agréable et moderne - Agence Pilo...
Les tendances graphiques pour avoir un site agréable et moderne - Agence Pilo...Les tendances graphiques pour avoir un site agréable et moderne - Agence Pilo...
Les tendances graphiques pour avoir un site agréable et moderne - Agence Pilo...
 
Concevoir des Interfaces Utilisateur efficaces et vendeuses
Concevoir des Interfaces Utilisateur efficaces et vendeusesConcevoir des Interfaces Utilisateur efficaces et vendeuses
Concevoir des Interfaces Utilisateur efficaces et vendeuses
 
Tendances Web Design 2015
Tendances Web Design 2015Tendances Web Design 2015
Tendances Web Design 2015
 
030 fondamentaux di
030   fondamentaux di030   fondamentaux di
030 fondamentaux di
 
Metro design
Metro designMetro design
Metro design
 
Human Talk - Faire du design par composant avec l'Atomic Design
Human Talk - Faire du design par composant avec l'Atomic DesignHuman Talk - Faire du design par composant avec l'Atomic Design
Human Talk - Faire du design par composant avec l'Atomic Design
 
Tendances Webdesign 2018 by @vanksen
Tendances Webdesign 2018 by @vanksenTendances Webdesign 2018 by @vanksen
Tendances Webdesign 2018 by @vanksen
 
Livre blanc : Les tendances du web design 2018
Livre blanc : Les tendances du web design 2018Livre blanc : Les tendances du web design 2018
Livre blanc : Les tendances du web design 2018
 
Réconcilier l’identité de mon application avec les guidelines
Réconcilier l’identité de mon application avec les guidelinesRéconcilier l’identité de mon application avec les guidelines
Réconcilier l’identité de mon application avec les guidelines
 
Le skeuomorphisme et l'approche authentiquement numérique de Microsoft
Le skeuomorphisme et l'approche authentiquement numérique de MicrosoftLe skeuomorphisme et l'approche authentiquement numérique de Microsoft
Le skeuomorphisme et l'approche authentiquement numérique de Microsoft
 
La Petite Tribu | Présentation
La Petite Tribu | PrésentationLa Petite Tribu | Présentation
La Petite Tribu | Présentation
 

Más de Idean France

Start with a Concept and Stop Designing like a Machine
Start with a Concept and Stop Designing like a MachineStart with a Concept and Stop Designing like a Machine
Start with a Concept and Stop Designing like a MachineIdean France
 
Design Systems : à votre marque, prêts, partez !
Design Systems : à votre marque, prêts, partez !Design Systems : à votre marque, prêts, partez !
Design Systems : à votre marque, prêts, partez !Idean France
 
Design systems : Bench et reco sur les outils
Design systems : Bench et reco sur les outilsDesign systems : Bench et reco sur les outils
Design systems : Bench et reco sur les outilsIdean France
 
La recette graphique
La recette graphiqueLa recette graphique
La recette graphiqueIdean France
 
Graph QL par Andy Gigon
Graph QL par Andy GigonGraph QL par Andy Gigon
Graph QL par Andy GigonIdean France
 
Cocoheads react native + redux par Nicolas Fontaine
Cocoheads   react native + redux par Nicolas FontaineCocoheads   react native + redux par Nicolas Fontaine
Cocoheads react native + redux par Nicolas FontaineIdean France
 
Meetup langages visuels - Backelite - novembre 2017
Meetup langages visuels - Backelite - novembre 2017Meetup langages visuels - Backelite - novembre 2017
Meetup langages visuels - Backelite - novembre 2017Idean France
 
Sketch pour les designers : pourquoi, quand et comment l'utiliser ?
Sketch pour les designers : pourquoi, quand et comment l'utiliser ?Sketch pour les designers : pourquoi, quand et comment l'utiliser ?
Sketch pour les designers : pourquoi, quand et comment l'utiliser ?Idean France
 
From Business to Buttons by Pierre Harlé
From Business to Buttons by Pierre HarléFrom Business to Buttons by Pierre Harlé
From Business to Buttons by Pierre HarléIdean France
 
RX Swift avril 2017 - David Yang
RX Swift avril 2017 - David YangRX Swift avril 2017 - David Yang
RX Swift avril 2017 - David YangIdean France
 
FLUPA - UX Days 2016 : "Quand les militaires se prennent au jeu du Design Spr...
FLUPA - UX Days 2016 : "Quand les militaires se prennent au jeu du Design Spr...FLUPA - UX Days 2016 : "Quand les militaires se prennent au jeu du Design Spr...
FLUPA - UX Days 2016 : "Quand les militaires se prennent au jeu du Design Spr...Idean France
 
Cocoaheads Montpellier Meetup : La programmation réactive sur iOS avec Réacti...
Cocoaheads Montpellier Meetup : La programmation réactive sur iOS avec Réacti...Cocoaheads Montpellier Meetup : La programmation réactive sur iOS avec Réacti...
Cocoaheads Montpellier Meetup : La programmation réactive sur iOS avec Réacti...Idean France
 
How to design forms that deliver a great user experience
How to design forms that deliver a great user experienceHow to design forms that deliver a great user experience
How to design forms that deliver a great user experienceIdean France
 
The top 9 Tech trends for 2016
The top 9 Tech trends for 2016The top 9 Tech trends for 2016
The top 9 Tech trends for 2016Idean France
 

Más de Idean France (14)

Start with a Concept and Stop Designing like a Machine
Start with a Concept and Stop Designing like a MachineStart with a Concept and Stop Designing like a Machine
Start with a Concept and Stop Designing like a Machine
 
Design Systems : à votre marque, prêts, partez !
Design Systems : à votre marque, prêts, partez !Design Systems : à votre marque, prêts, partez !
Design Systems : à votre marque, prêts, partez !
 
Design systems : Bench et reco sur les outils
Design systems : Bench et reco sur les outilsDesign systems : Bench et reco sur les outils
Design systems : Bench et reco sur les outils
 
La recette graphique
La recette graphiqueLa recette graphique
La recette graphique
 
Graph QL par Andy Gigon
Graph QL par Andy GigonGraph QL par Andy Gigon
Graph QL par Andy Gigon
 
Cocoheads react native + redux par Nicolas Fontaine
Cocoheads   react native + redux par Nicolas FontaineCocoheads   react native + redux par Nicolas Fontaine
Cocoheads react native + redux par Nicolas Fontaine
 
Meetup langages visuels - Backelite - novembre 2017
Meetup langages visuels - Backelite - novembre 2017Meetup langages visuels - Backelite - novembre 2017
Meetup langages visuels - Backelite - novembre 2017
 
Sketch pour les designers : pourquoi, quand et comment l'utiliser ?
Sketch pour les designers : pourquoi, quand et comment l'utiliser ?Sketch pour les designers : pourquoi, quand et comment l'utiliser ?
Sketch pour les designers : pourquoi, quand et comment l'utiliser ?
 
From Business to Buttons by Pierre Harlé
From Business to Buttons by Pierre HarléFrom Business to Buttons by Pierre Harlé
From Business to Buttons by Pierre Harlé
 
RX Swift avril 2017 - David Yang
RX Swift avril 2017 - David YangRX Swift avril 2017 - David Yang
RX Swift avril 2017 - David Yang
 
FLUPA - UX Days 2016 : "Quand les militaires se prennent au jeu du Design Spr...
FLUPA - UX Days 2016 : "Quand les militaires se prennent au jeu du Design Spr...FLUPA - UX Days 2016 : "Quand les militaires se prennent au jeu du Design Spr...
FLUPA - UX Days 2016 : "Quand les militaires se prennent au jeu du Design Spr...
 
Cocoaheads Montpellier Meetup : La programmation réactive sur iOS avec Réacti...
Cocoaheads Montpellier Meetup : La programmation réactive sur iOS avec Réacti...Cocoaheads Montpellier Meetup : La programmation réactive sur iOS avec Réacti...
Cocoaheads Montpellier Meetup : La programmation réactive sur iOS avec Réacti...
 
How to design forms that deliver a great user experience
How to design forms that deliver a great user experienceHow to design forms that deliver a great user experience
How to design forms that deliver a great user experience
 
The top 9 Tech trends for 2016
The top 9 Tech trends for 2016The top 9 Tech trends for 2016
The top 9 Tech trends for 2016
 

Tendances du Design d'Interface 2017

  • 1. DESIGN D’INTERFACE - Les 10 tendances en 2017 -
  • 2. - ÇA RESTE D’ACTUALITÉ -
  • 3. TENDANCE N°1 SIMPLICITÉ ET CLARTÉ L’omniprésence du mobile a transformé les interfaces et la manière d’afficher le contenu : on montre à l’utilisateur ce qu’il est venu chercher, on l’aide à effectuer une action précise et on limite la quantité de texte. La présence du blanc est très importante. On voit de plus en plus de mises en page aérées et géométriques, mais parfois également des grilles plus déstructurées qui permettent de donner plus de dynamisme à l’écran.
  • 4.
  • 5. TENDANCE N°2 DE LA COULEUR ET DES CONTRASTES Simple ne veut pas dire froid. La couleur et les dégradés viennent ramener de la chaleur dans les interfaces. On préférera définir un jeu de couleurs simple et mettre l’accent sur la couleur d’action/d’accent pour créer le contraste.
  • 6.
  • 7. TENDANCE N°3 HIÉRARCHIE ET TYPOGRAPHIE Le choix de la police de caractères est fondamental et contribue à l’identité de la marque et de la plateforme. La typographie reste un moyen incontournable pour hiérarchiser l’information grâce à des contrastes de taille et des variations de graisse. Les contraintes d'accessibilité, de plus en plus présentes, et les interfaces conversationnelles vont redonner à la typographie toute son importance.
  • 8.
  • 9. TENDANCE N°4 L’ILLUSTRATION SOUS TOUTES SES FORMES En réponse au flat design et aux visuels impersonnels des banques d'images, on voit apparaître de plus en plus d’illustrations. L’approche ludique et différenciante d’une illustration permet de donner une personnalité aux interfaces, d’affirmer l’identité d’une marque et de trouver une nouvelle manière de présenter les contenus. Elles sont particulièrement pertinentes pour créer du storytelling. Il est important pour une marque d’avoir sa propre bibliothèque d’illustrations.
  • 10.
  • 11. TENDANCE N°5 MOTION UI ET DESIGN EMOTIONNEL Les animations ne sont pas là pour créer le « wahou effect ». Elles aident à la compréhension de l’interface et des interactions. Les animations s’inspirent des lois de la physique (ex. Material Design) tout en restant discrètes. Les micro-interactions permettent de donner du feedback à l’utilisateur suite à une action. Attention à ne pas en abuser, à garder une cohérence et du sens.
  • 12.
  • 13. - C’EST NOUVEAU (OU PRESQUE) -
  • 14. Avoir une expérience globale et cohérente sur tous les supports passe par la création d’un véritable langage visuel. Les futures interfaces ne seront donc plus pensées par écran mais bien comme des systèmes de composants, vivants et évolutifs. TENDANCE N°6 UN LANGAGE VISUEL (éloge de la cohérence)
  • 15.
  • 16. Avec les objets connectés et l’impression 3D, le digital se reconnecte avec le monde physique. Sans aller jusqu’à revenir au skeuomorphisme, on observe une tendance à se rapprocher du monde physique avec des interfaces qu’on a envie de toucher (matières) et avec lesquelles on a envie de jouer (ombres, animations...). TENDANCE N°7 DES CRÉAS QUI SORTENT DE L’ÉCRAN
  • 17.
  • 18. Le big data est là, ça ne fait plus de doute pour personne. Ces données doivent maintenant être exploitées et analysées afin de donner à l’utilisateur la meilleure expérience possible. La représentation claire et pertinente de ces données sera structurante, d’autant plus sur des applications bancaires. TENDANCE N°8 REPRÉSENTER LES DATAS
  • 19.
  • 20. TENDANCE N°9 RACONTER DES HISTOIRES Le storytelling est plus que jamais d’actualité pour embarquer l’utilisateur dans un récit et plus simplement une suite d’arguments. Les monopages très longues (fini la peur du scroll !!!) se composent au fil de la lecture et deviennent de vraies narrations. Cela permet de remplacer une lecture du contenu parfois monotone par un délicieux processus de découverte. On assiste également à la mort des photos libres de droits et on préférera de l’authentique, du vécu.
  • 21.
  • 22. TENDANCE N°10 VIVRE DE NOUVELLES EXPÉRIENCES On ne compte plus les nouveautés technologiques qui relevaient encore il y a quelques années de la fiction. Réalité virtuelle, réalité augmentée, jeux qui font sortir les utilisateurs dans la rue (Pokemon Go)... L’utilisateur va donc être de plus en plus en demande de nouvelles expériences (visuelles, sonores et tactiles) et de produits qui cassent les codes établis. Il va également s’attendre, grâce à toutes ces technologies, à un design personnalisé, prédictif et intelligent.