23/12/2016 Marion Girard-Ruiz
tendances webdesign 2017

On ne cesse de le dire, le web est un environnement continuellement changeant, de tous les points de vue (référencement, développement, webdesign…). Tous les ans de nouvelles modes ou techniques apparaissent, certaines juste en rapide coup de vent, d’autres perdurent un peu plus. Nous allons nous intéresser dans cet article aux tendances webdesign qui feront l’année 2017. Voici mes quelques conseils graphiques. En avant !

 

tendances webdesign 2017 degrades

1 – Des couleurs vives et des dégradés

En 2017, vous verrez apparaitre de plus en plus sur les sites web de belles couleurs riches et brillantes, bien pep’s ! La mode est aussi aux dégradés de couleurs vives, qui viennent souvent se placer en background de quelques sections du site, ou par dessus une image de fond, pour lui donner un peu de chaleur, de dynamisme et d’énergie. Tout cela vous permettra de vous démarquer des autres sites.
Un exemple de marque hyper connue qui est passée par là cette année : Instagram, avec son beau logo multicolore 😉

 

tendances webdesign 2017 ombres

2 – Material design et les ombres

Nous sommes passés dernièrement du flat design (aplats, pas de profondeur, minimalisme), au material design, qui apporte un brin de perspective, avec des formes géométriques, des ombres et du mouvement. En 2017, on reste dans cette optique d’utilisation de profondeur et de perspective, en travaillant avec de belles ombres visibles, plus marquées et plus foncées, qui permettront d’aérer et d’ajouter des zones de respiration dans vos designs.

 

tendances webdesign 2017 grande typo

3 – Des typos grandes et bold

Chaque année on voit de nouvelles tendances typographiques émerger sur le web. Tout le monde est bien conscient de l’importance de la typographie dans l’UX design. Il ne s’agit pas simplement d’assembler de jolies polices ensemble, la typographie est une partie essentielle de chaque design, elle permet de faire véhiculer une ambiance ou un message, et le choix de votre typo peut vraisemblablement faire basculer votre projet. Pour cette tendance webdesign 2017, misez sur des typos bien voyantes et originales, utilisez des font-size XXL, et du bold.

 

tendances webdesign 2017 menu hamburger

4 – Adieu les menus hamburgers !

Le menu hamburger a son avantage sur les écrans des smartphones, mais sinon, il n’est vraiment conseillé sur les sites et applications web, malgré son utilisation intempestive ces derniers temps… On préfèrera donc les menus classiques sous formes d’onglets horizontaux, quitte à repenser et optimiser son arborescence pour rester dans la limite des 7 ou 8 onglets maxi conseillés en terme d’UX.

 

tendances webdesign 2017 micro interaction

tendances webdesign 2017 micro-interaction

5 – Micro-interactions

Retenez bien ce mot, car ce sera lui le roi de cette année 2017 ! Qu’est ce que les micro-interactions ? Ce sont les animations interactives qui accompagnent une interface pour la rendre plus attrayante. Mais attention, elles servent surtout à l’UX : communiquer une situation, visualiser un état ou un résultat, mettre en valeur un changement ou une action de l’utilisateur… Elles permettent aux utilisateurs de comprendre et reconnaître ce qui se passe, s’est passé ou va se passer au moment où ils interagissent avec l’interface.
Tout est dans le détail, car c’est le détail qui fera votre design.

 

tendances webdesign 2017 animation

6 – Animation

Ce point rejoint le précédent : insufflez de la vie à votre design, en utilisant (avec beaucoup de parcimonie) des GIFS animés, ou un effet parallaxe (défilement de l’arrière plan moins rapide que le contenu, ce qui crée un effet de profondeur, style 3D, et anime votre page. Grâce à ces techniques, attirez l’attention sur les éléments importants de votre site.

 

tendances webdesign 2017 scroll onepage

7 – Long scrolling / Mono-page

Le scroll n’est pas nouveau, c’est une fonctionnalité web majeure déjà à la mode depuis quelques années, et ça le restera. Le site « one-page » permet d’éviter les navigations complexes et permet une expérience utilisateur plus simple, fluide et facile à utiliser. Aujourd’hui le scroll est devenu un réflexe pour tout le monde.
Ce mécanisme de navigation a de grands atouts : faire passer très rapidement un maximum d’information à votre utilisateur, sur n’importe quel type d’appareil (ordinateur, tablette, smartphone), de façon narrative et immersive, et surtout je le répète, fluide.

 

tendances webdesign 2017 grille

8 – Cassez la grille

Tout design est conçu sur une grille (habituellement on travaille en « 12 colonnes », qu’on regroupera par exemple par 4 pour diviser la page en tiers, ou par 6 pour deux demie-pages, etc…). Cette fameuse grille est une base pour la conception du webdesign du site, et permet de garder de la cohérence, de l’équilibre et de l’ordre dans la construction.
Même si cette grille est donc importante pour l’UX, elle est aussi restrictive et rigide, et limite les options créatives. En s’éloignant de la grille et des structures de base rigides, on peut créer des interfaces plus originales, intrigantes et expérimentales. Faites toutefois attention à garder en tête l’UX et à ne pas mettre de confusion dans votre interface. Aussi, pensez responsive ! 😉

 

tendances webdesign 2017 design adaptative

9 – Design adaptative

Et oui, on ne parle presque plus de responsive design, mais plutôt d' »adaptative« . Avec l’efflorescence des appareils et donc des tailles d’écrans, il ne s’agit plus ici de faire une version mobile, une version tablette et une version desktop. Votre design doit s’adapter (quasiment) au pixel près, pour être optimisé sur n’importe quel device… Oui, il y a du travail derrière tout cela !

 

tendances webdesign 2017

En résumé, ces tendances webdesign 2017 nous amènent à la même conclusion : nos interfaces doivent se complexifier dans leur conception, avec l’ajout d’animations et la prise en compte du design adaptative, pour se simplifier dans leur utilisation, et surtout innover et donner encore plus envie à votre utilisateur (on s’oriente UX design avant tout).

, ,