Découvrez les tendances webdesign 2019, et nos conseils en tant que webdesigner et directeur artistique. Qu'est-ce qu'une tendance ? A quoi sert le webdesign ? Quelles sont les tendances pour 2019 ?

1. Les tendances webdesign 2019
Ce qu’il faut retenir. Ou pas.
Florent Beaufils
Directeur Artistique
florent@concept-image.fr
Ophélie Tardivel
Webdesigner
ophelie@concept-image.fr

2. Vous lisez actuellement le support de présentation utilisé lors d’un atelier organisé à l’agence Concept Image.
Tout le long de la présentation, vous trouverez des slides « NOTES » comme celle-ci. Ce sont les commentaires oraux des
présentateurs.
NOTES

3. Durant cet atelier nous vous donnerons notre avis sur certaines tendances 2019 mais surtout les conseils d’un designer
graphique et web ainsi que d’un directeur artistique.
Ces conseils pourront varier selon votre domaine de prédilection puisque toutes les tendances anciennes et nouvelles ne sont
pas adaptables pour tous.
Il faudra les adapter selon vos objectifs, selon vos besoins ou même selon votre cible.
NOTES

4. une tendance ?
C’est quoi,

5. On peut définir une tendance comme une direction, une orientation dans le sens commun.
Ici, on parlera de direction graphique, un design qui tend vers une aspiration, une opinion.
On peut reprendre cette citation : « La mode se démode, mais jamais le style »
En effet, les tendances sont évolutives tout comme les possibilités de développement web, et donc tout comme la mode.
Pour qu’un site vive plusieurs années, ce dont on doit se soucier, en termes de webdesign, c’est d’avoir une base qui peut
s’adapter au fur et à mesure du temps et des tendances.
Pour cela, nous avons des règles de base en terme de webdesign, des codes graphiques.
NOTES

6. le webdesign ?
À quoi sert
Améliorer l’expérience utilisateur
Renforcer la compréhension de l’ergonomie
Donner de la valeur ajoutée
Transmettre un message

7. Le webdesign, ça ne sert pas seulement à habiller un site pour le rendre « Whaou », le rendre beau. Ca n’a donc pas qu’un but
esthétique.
Il faut que le site se démarque de la concurrence et reste dans la tête de l’utilisateur.
Le but du design d’un site est donc d’être impactant tout en respectant un univers.
Cela passe par différents points :
• la structuration de la page, soit la mise en place des éléments
• l’identité graphique et éditoriale d’une marque,
Et donc plus généralement, le design passe par :
• L’équilibre des espaces et des textes
• Une cohérence des couleurs
• Une hiérarchie de l’information
• Une pertinence de l’iconographie
NOTES

8. on fait ça ?
Comment
Équilibre
des espaces et des textes
Cohérence
des couleurs
Pertinence
de l’iconographie
Hiérarchie
de l’information

9. LES TENDANCES
précédentes

10. L’icône burger et les menus cachés

11. +
Le material design

12. +
+
+
Une cohérence graphiques sur tous les devices
(appareils)
(apparition des design systems et démocratisation de l’atomic design)

13. Minimalisme
Un minimalisme indémodable

14. SPLITSCREEN
Le split screen design
(Ou tendance aussi appelée « écran divisé vertical »

15. TRÈS
Des typos surdimensionnées,
mais simples et lisibles

16. Crédit photo : Patryk Gauza on Unsplash
Renforcement du contraste

17. DU NOIR, DU BLANC, ET DEUX COULEURS VIVES
Pas plus de deux couleurs.
Et des couleurs vives

18. Crédit : Google
Une iconographie sur mesure et impactante.

19. Plus de vraies photos, moins de
banques d’images.

20. La vidéo

21. La non-vidéo (ou cinemagraph)

22. La technique du cinemagraph consiste à donner l’impression au visiteur qu’il est sur une image fixe, mais seul un détail va venir
accrocher son œil à travers une légère animation laissant la sensation de douceur.
Par exemple, le clin d’œil d’un personnage ou une feuille qui tombe.
NOTES

23. Le vidéo immersive (où l’on peut naviguer)

24. Crédit photo : Malte Wingen
Le son

25. Mais le son semble toujours plus perçu comme intrusif que comme un élément qui permet d’enrichir le design ou l’expérience
utilisateur.
NOTES

26. Pour conclure sur cette partie …
Retrouvez un bilan des tendances 2017 (avec des exemples) sur notre blog :
https://blog.concept-image.fr/design/tendances-web-design-2017-1/

27. Les tendances annoncées
pour 2019

28. Typographie

29. Des typographies oversize et grasses.
Crédit : Sagmeister et Walsh

30. Place au serif

31. Les polices avec serif ont toujours été utilisées sur les supports papier. Ce n’était pas le cas sur le digital à cause de la qualité
des écrans qui pouvait altérer la lisibilité en interprétant mal les empattements.
Avec des écrans possédant des définitions de plus en plus élevées, il ne serait pas étonnant de voir de plus en plus de texte de
labeur dans des caractères avec serif.
Notre avis :
-Ces typographies doivent répondre à votre univers.
-A ne pas utiliser si vous avez une charte graphique déjà établie
NOTES

33. C’est le retour à des codes plus pop, à des compositions rappelant de vieilles enseignes
NOTES

34. https://www.marvel.com/captainmarvel/

35. Le film Captain Marvel se déroule dans les années 90. Le site un peu aussi
Il possède :
-Des typographies différentes
-Des effets de couleurs sur les polices
-Des gifs et des animations vintages
NOTES

36. https://www.adidas.com/com/apps/yungUS18/

37. Adidas sort une réédition d’un modèle de baskets des années 90. Son site est aussi resté dans le temps.
On y retrouve :
• un menu sur la gauche
• un fond matière
• une typographie en 3D fuchsia
• des boutons avec un effet or
NOTES

39. Tendance qui casse les codes de l”harmonie”
D’après “webdesigner trends”, la tendance brutaliste dans le web design s’exprime par des mises en page atypiques et
déstructurées. La gamme de couleurs utilisée ne semble pas suivre de règles, idem pour la typographie et les grilles.
Il semble que cette tendance exprime le rejet de la masse, qui elle privilégie les interfaces minimalistes et « trop propres ». Un
acte de résistance en somme, qui donne naissance à des expériences intéressantes.
En 2019, tout semble indiquer que cette sorte de « sous-culture » du design continuera à briller sous le feu des projecteurs.
NOTES

40. http://blockchainkids.xyz/

41. Notre avis
Il est encore trop tôt pour dire si oui ou non cette tendance va venir bousculer le minimalisme qui a su s’imposer dans les mêmes
conditions il y a quelques années (à la place du skeumorphisme pourtant initié par Apple et bien en place). Pour le moment plus
adapté à des marques de mode, de labels de musique par exemple, il est quand même nécessaire de surveiller cette tendance.
NOTES

42. Discuter avec son interface

43. LES CHATBOTS
En français agents conversationnels, sont présents depuis déjà quelques années. Mais, cette
année c’est leur grand retour.

46. Notre avis
Les chatbots s’imposent de plus en plus. Nous ne pouvons plus passer à côté.
Comme tout élément de vos interfaces, il devient nécessaire de les personnaliser au maximum pour que vos utilisateurs aient
l’impression de discuter avec une identité représentant l’image de la marque, et d’être immergés dans votre univers.
L’idée de la mascotte est intéressante si on trouve un axe de cohérence avec l’univers de marque. En effet, on assume le fait que
ce n’est pas un humain de l’autre côté, contrairement à il y a quelques temps.
NOTES

47. Les interfaces vocales

48. Notre avis
Ça fait quelques mois, quelques années que l’on annonce que le contrôle par la voix est le nouveau terrain de jeu du digital. Ce
qui paraît logique de par sa facilité d’utilisation. Cependant il semble que ça ait tout de même du mal à s’imposer.
Notre avis est de surveiller cela, car il faudra des designs en cohérence / adaptés avec cette utilisation (ex : un message “j’ai
compris votre demande”), car ça va finir par exploser, mais c’est encore trop tôt pour mettre toute son énergie, tout son budget
sur ce fonctionnement.
NOTES

49. La vidéo

50. Des vidéos immersives, personnalisées et de plus en plus qualitatives
Notre avis
La vidéo s’impose (s’est imposée) depuis maintenant de nombreuses années de par l’interactivité de ce média. Mais là où on
mettait de la vidéo juste pour habiller ou animer une interface, maintenant il faut que la vidéo ait un sens (donner des réponses à
l’utilisateur, l’emmener plus loin dans vos services, lui faire découvrir les coulisses…) et immerge votre utilisateur.
Les vidéos ne sont plus simplement un média mais une immersion dans un univers, ce sont des vidéos d’ambiance. Cela semble
logique dans une époque ou l’UX design est roi et où le nerf de la guerre est l’engagement et l’attachement des utilisateurs
auprès de l’univers des marques/sociétés.
NOTES

51. L’image

52. Des illustrations plus organiques et géométriques

53. Notre avis
Nous sortons de plus en plus de l’utilisation des photos :
• parce qu’on a beaucoup vu des photos de paysages
• parce qu’Unsplash est aujourd’hui connu et que tout le monde les utilise
• parce que les gens repèrent maintenant très vite le style des banques d’images. Les fausses images ne donnent ni
projection, ni identification de l’utilisateur
• parce que gérer des shoots photos personnalisés coûte cher
NOTES

55. Du coup les illustrations qui permettent une personnalisation plus facile gagnent du terrain. Il est plus facile d’oser et de
remplacer si ça ne convient pas (sauf si vous faites appel à un illustrateur très connu !)
NOTES

56. Les masques d’images

57. Le temps des blocs carrés, ou ronds quand on était un peu foufou est révolu. L’arrivée du SVG permet de réaliser des zones
d’images plus organiques, plus personnalisées et plus détaillées graphiquement.
NOTES

59. Notre avis
Ça ne peut être qu’une bonne nouvelle ! Cela offre plus de liberté pour personnaliser une interface, singulariser et affirmer votre
marque. Cela permettra aussi de sortir de cette “uniformisation” observée ces dernières années avec l’arrivée du Responsive
Design.
NOTES

60. L’animation

61. Les micro-interactions

62. Notre avis sur les micro interactions
Commençons par cette citation du site graphiste.com «Dans quelques mois ou années, les sites qui n’intégreront
pas de micro-interactions sembleront dépassés aux internautes. Et ce n’est certainement pas votre but.”
Nous sommes d’accord avec cela. Le web évolue, le web évolue même très vite. Les possibilités sont de plus en
plus nombreuses. Et l’animation des interfaces rentre dans ce cadre avec une utilité qui est de mieux faire
comprendre les éléments, les contenus de votre interface à vos utilisateurs.
Sur les zones d’actions (push / zones de clics /CTA).
Notre avis sur le survol
L’effet de survol à toujours existé. Mais on passait généralement simplement d’une couleur à une autre. Aujourd’hui
on nous annonce qu’il va falloir beaucoup plus pousser cela. Par exemple des informations de livraison qui
apparaissent lors d’un survol d’ajout au panier. Cela doit servir l’interface et l’aide à la compréhension globale de
l’interface et du message à véhiculer. C’est une tendance annoncée comme étant très forte, et ça semble être
logique quand on la met en rapport avec l’évolution du digital.
C’est une option qui est d’ailleurs de plus en plus poussée et travaillée dans les softs de création graphiques (XD,
Studio, Sketch…), ce qui ne fait que confirmer cette évolution, et cette sortie du statique.
NOTES

63. Crédit : Twitter
Exemple de micro-interaction : le clic sur « Ajouter aux favoris » sur le site
Twitter.

64. La structure
C’est à dire la mise en place des éléments d’une page, c’est de la mise en page.
On aura donc, comme vu précédemment, une structure déstructurée. Nous cassons
les codes et sortons de la grille de base d’une page web.

65. Le blanc

66. On annonce de plus en plus de blanc dans les interfaces minimalistes
Notre avis :
Nous pensons que cette tendance est à prendre en compte et pas seulement dans les design minimalistes.
• la ligne de flottaison n’est plus vraiment un point à prendre en compte
• contrairement à ce qu’on croit, condenser des informations sur une même zone de lecture ne favorise pas du
tout l’accès à tous les contenus
• les animations d’interaction étant promis à prendre de plus en plus d’importance, il faut leur laisser de la place
pour s’exprimer
• laissons respirer le design, les magazines print l’ont compris depuis longtemps
NOTES

67. Crédit : Pratik Hedge

68. Crédit : Pratik Hedge

69. Webdesign asymétrique

72. Notre avis :
L’époque où l’on se fiait strictement à la grille est révolu ! Et c’est tant mieux.
Aujourd’hui elle doit servir de repères, mais la tendance est à la tordre pour proposer aux utilisateurs des
expériences toujours plus marquantes et immersives !
Tout ça est cohérent avec cette promesse qui est que le web devient de plus en plus dynamique !
NOTES

74. Notre avis :
Cela fait quelques temps que nous observons une sortie du Flat Design qui a inondé l’univers du design digital ces
dernières années.
Le Material Design (inventé par google et qui est une sorte de Flat Design avec du relief) amène un plus car il apporte
de la hiérarchie aux zones importantes, aux zones de clics etc…
Il permet aussi une évolution en douceur du Flat Design sans revenir vers un skeuomorphisme beaucoup plus
chargé.
Notre avis est donc d’intégrer cette tendance aux interfaces.
NOTES

75. Évolution des menus
Les emplacements standards des menus seront remis en cause.
De plus en plus et pas que sur mobile, les menus vont être placés sur le bas
comme sur les applis que nous utilisons tous les jours.

76. Crédit : Google

77. Notre avis :
Mobile first, mobile first, mobile first ! On entend cela depuis des mois et partout / depuis des mois partout, pour
tous.
Mais est-ce vraiment pour tous et qu’est-ce que cela veut dire? Mobile first comme son nom l’indique, c’est la
priorité au mobile, c’est à dire que nous travaillons tout le projet (UX, design…) en premier sur mobile puis sur
desktop. Ce choix de mobile first est dû à une étude de cible principale sur mobile.
Ce terme est différent de responsive, qui lui veut simplement dire adaptatif aux écrans.
Effectivement Google va aujourd’hui prioriser les versions mobiles… ce qui ne veut pas dire qu’il faut délaisser les
versions desktop…
Nous avions déjà vu ce “syndrome” lors de l’apparition du désormais célèbre menu “burger”.
Pas mal d’interfaces mobiles l'utilisaient aussi pour leur version desktop… avant de revenir à un menu plus classique
et plus adapté…
En effet le menu burger a une utilité sur mobile dû à la réduction de capacité d’écran. mais sur desktop on a la place
pour mettre l’information de façon plus claire !
Pourquoi s’en priver. Notre sensation est que ça va être un peu la même chose avec ces menus bas…
NOTES

78. Réalité augmentée
Les fonctionnalités utilisant cette technologie vont être de
plus en plus présentes.

79. Crédit : Google

80. Notre avis :
C’est un peu comme les interfaces vocales… On en entend beaucoup parler, on sait que ça arrivera, mais on a pas
encore vu grand chose…
Il semble que ça soit aujourd’hui surtout utilisé par les grandes marques plus pour des modules visant à faire de la
communication que pour répondre à des réelles envies utilisateurs. Par exemple, voir la vidéo d’Ikea «Explore our
2016 Catalogue with Augmented Reality | IKEA Australia”.
Nous ne pensons pas que ça soit encore une priorité.
Au vu de l’utilité actuelle mais aussi des budgets que ça engendre, sauf à faire une opération de communication.
Mais c’est à surveiller car il y a fort à parier que ça sera vraiment un incontournable un jour.
NOTES

81. Le design inclusif

82. Le design inclusif, ce n’est pas une tendance graphique, c’est une façon de penser la conception des interfaces.
On nous annonce des interfaces plus éthiques où l’on redonne du sens au contenu, où l’on s’échappe des
algorithmes et où l’on est moins exposés aux fake news.
Notre avis :
Cela parait logique. Les gens ont aujourd’hui conscience des enjeux, mais aussi des dangers de la toile. Il faut être
authentique avec eux dans les interfaces et tenir des propos vérifiés et sans ambiguïtés.
NOTES

83. Chercher les points d’exclusion
Par exemple, si vous proposez une vidéo, pensez aux
personnes malentendantes.

84. Identifier les difficultés
environnementales
Mais aussi, plus largement, penser aux personnes qui vont
regarder votre vidéo dans un environnement bruyant qui ne
leur permet pas de profiter du son.

85. Reconnaître les biais personnels
Et donc tester, pour ne pas se dire « ça fonctionne pour moi,
donc ça fonctionne pour tout le monde ».

86. Proposer des méthodes alternatives
Par exemple en proposant des sous-titres ou une
transcription de votre vidéo.

87. Fournir des expériences équivalentes
C’est-à-dire donner des outils pour que les utilisateurs bénéficiant de solutions alternatives puissent
en profiter dans de bonnes conditions.
Par exemple en proposant différentes vitesses de lecture, ou tout simplement en s’assurant que les
sous-titres sont bien lisibles.

88. Élargir à tous les utilisateurs
Les sous-titres ou la transcription ne sont pas utiles qu’aux personnes
malentendantes. Ils peuvent servir aux personnes ayant une mauvaise
connexion, ou se trouvant dans un environnement qui ne leur permet pas
d’utiliser le son.

89. « L’enjeu du webdesign n’est plus seulement
l’habillage pour faire transpirer l’identité d’une marque,
mais la navigation et l’histoire pour embarquer un
utilisateur et lui faciliter son expérience et sa relation
digitale avec la marque. »

90. Les tendances 2019, hors du web

91. Des identités dynamiques
qui s’adaptent au contexte
Plus des chartes figées.
Cohérence avec des interfaces de plus en plus dynamiques et des
supports de plus en plus différents.

92. Le retour du baroque
En réaction au minimalisme (retour des typos serif pour contre
balancer avec l’aseptisation générale (ex logo du luxe). Ca correspond
à une tendance aussi annoncée sur le web

93. Photo Serge Mouraret/Corbis News/Getty Images

94. Design responsable
Minimalisme de moyens face aux enjeux sociétaux (impératif)
ex : pas de moyens démentiels dans des shootings. Correspond avec la
tendance illustration, et plus largement au design inclusif

95. Brutal design
Une tendance « brutaliste » qui s’est surtout illustrée sur des sites de
mode, ou de musique au départ. Ca arrive doucement sur le web

96. Webdesigner Trends
Un site que nous recommandons pour de la veille