Les tendances du webdesign 2019 à retenir
- 1. Les tendances webdesign 2019 Ce qu’il faut retenir. Ou pas. Florent Beaufils Directeur Artistique [email protected] Ophélie Tardivel Webdesigner [email protected]
- 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
- 10. L’icône burger et les menus cachés
- 12. + + + Une cohérence graphiques sur tous les devices (appareils) (apparition des design systems et démocratisation de l’atomic design)
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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