Tendances design 2015 sur le web
Voici un compte rendu qui vous mettra au parfum des tendances design 2015.
Site web adaptatif (responsive)
Le design adaptatif permet d’optimiser un site web afin qu’il fonctionne correctement sur tous les types de plateformes (desktop, tablette et mobile). Les ventes d’appareils mobiles continueront de croître en 2015, et on ne peut donc plus ignorer la compatibilité entre les sites web et le mobile. Les sites web qui ne sont pas adaptatifs vont se voir progressivement marginalisés, car l’utilisateur passant d’un support à l’autre devra retrouver ses repères et son confort. Toutefois, pour différentes raisons, certains sites préféreront proposer une application dédiée pour mobiles, l’un n’empêchant pas l’autre.
Mobile first (le mobile en premier)
C’est un secret de Polichinelle que les appareils mobiles sont de plus en plus populaires pour la navigation sur le web et l’émergence des phablettes* pourrait accélérer ce processus. La notion de mobile first peut être considérée comme un mode de pensée dans lequel on privilégierait la construction d’une interface ergonomique pour mobiles avant d’établir l’ergonomie pour un desktop et ce, afin d’améliorer l’expérience utilisateur (UX). L’élaboration d’une interface ergonomique sous la contrainte d’un faible espace d’affichage force à épurer au maximum les éléments visibles par l’utilisateur; une tendance que l’on retrouve de plus en plus dans l’ergonomie des interfaces web.
Pages uniques en parallaxe
Les sites web à page unique avec effet en parallaxe ont atteint leur apogée en 2014. On appelle «effet parallaxe» un site web où l’image de fond se déplace à une vitesse différente de celle du contenu de la page. Cette tendance diminuera en 2015, non seulement parce qu’elle a été surutilisée, mais parce qu’une page unique n’est pas efficace en terme d’optimisation (un seul jeu de méta / titre / url). De plus, trop d’images sur une seule page peuvent ralentir son chargement et causer le départ de visiteurs impatients. Au lieu de compter sur l’effet de parallaxe pour attirer l’attention des utilisateurs, il serait recommandé d’utiliser des effets subtils d’animation.
Design web en blocs modulaires
Le design modulaire, utilisant une grille et des blocs pour afficher le contenu, fonctionne très bien avec les sites web adaptatifs grâce à sa commodité de mise à l’échelle et sa facilité à s’empiler les uns sur les autres. La majorité des gros joueurs tels Facebook, Google +, Twitter et Pinterest utilisent des systèmes de blocs. Le design modulaire s’associe bien à d’autres tendances, tels que l’approche minimaliste et des sites web plein écran.
Le Flat design et Material Design
La plus grande tendance des dernières années en design a été le flat design, et cette tendance continuera de croître en 2015 en raison de son style propre et simplifié permettant une performance optimisée sur les appareils mobiles. Cette tendance évoluera peut-être vers le Material Design de Google, un nouveau langage visuel révolutionnaire ayant vocation à unifier les interfaces. Par l’utilisation du flat design et d’animations, Google souhaite fluidifier la navigation en la rendant plus intuitive et surtout naturelle, avec des interfaces plus singulières, simples et surtout innovantes. Aujourd’hui, les animations se font à travers une propriété (largeur, opacité, etc.) d’un objet. Cet objet va partir d’un état initial vers un état final, tout cela en s’animant, toujours de manière linéaire. Le Material Design offrira donc la possibilité d’intervenir sur la diffusion de la lumière, de la profondeur, de la gravité, ainsi que la forme et le positionnement dans l’espace.
Faire défiler plutôt que cliquer
Avec le web mobile qui continue de croître, et la recherche d’une expérience plus efficace et agréable en ligne, il est certain que faire défiler une page web plutôt que de cliquer pour obtenir du contenu va continuer de croître. C’est plus intuitif et plus facile à faire. Ça permet aussi de réduire le temps de chargement ainsi qu’une interaction plus dynamique entre l’utilisateur et le site web.
Larges images et vidéos de fond
Les grandes images, appelées Hero banners, ont remplacé les visionneuses en accueil et continueront d’attirer l’attention en 2015. Un principe fort du design est le contraste. Un texte minimal sur une grande bannière photographique ou vidéo peut avoir un impact majeur sur votre page d’accueil. Il permettra d’obtenir un lien affectif avec votre visiteur. L’affichage vidéo continuera aussi de prendre de l’ampleur. La raison en est simple : les gens préfèrent regarder plutôt que de faire la lecture. Il est donc beaucoup plus facile de raconter l’histoire de votre entreprise et de susciter une émotion avec du graphisme en mouvement, même si ce n’est qu’un court clip en rotation.
Menus
Les menus sont maintenant largement inspirés par le mobile. Menu caché, coulissant ou en perspective, les menus se transforment. Certains sites Mobile first choisissent même de garder pour la version desktop le menu dans un onglet sur mobile.
Boutons fantômes (Ghost buttons)
Une tendance entamée en 2014 et qui se poursuivra en 2015 est l’utilisation de boutons fantômes (Ghost). Les boutons fantômes ont une forme de base plate (carré, rectangle, cercle, diamant), sans remplissage et avec un contour simple. Ces types de boutons sont souvent un peu plus grands que les boutons cliquables sur les sites traditionnels. Ils sont placés dans des endroits stratégiques, tels que le centre de l’écran.
Typographie
La typographie affecte grandement la lisibilité, l’accessibilité, la convivialité et l’esthétique globale d’un site web. Avec l’accent mis sur l’augmentation continue des résolutions, on continuera de voir des polices de caractère plus grandes sur le web. Des services comme Typekit et Google Fonts offrent des polices de caractère de haute qualité. Elles modernisent les tendances du design sur le web.
Couleurs
Pantone a consacré Marsala comme couleur de l’année 2015. À plus court terme, on peut voir les couleurs du printemps 2015, toujours selon Pantone. Sur le web, les couleurs sont fraîches, vives et saturées. Les pastels vifs sont progressivement remplacés par des couleurs un peu plus flash.
Animation SVG
Le SVG est un format vectoriel. Il peut être adapté et agrandi, tout en conservant sa netteté. De plus, avec les modules d’animation de SMIL, vous pouvez animer les éléments SVG. Fondamentalement, chaque SVG a sa propre DOM, que vous pouvez manipuler avec le CSS et/ou le Javascript. Le soutien sur les navigateurs est assez complet, sauf sur Internet Explorer. Il est possible de palier ce problème avec l’utilisation de bibliothèques telles que Snap.
Micro-interactions
Les micro-interactions seront également l’une des tendances les plus populaires en 2015. Les micro-interactions sont de petites interactions qui aident à accomplir une tâche simple comme l’affichage d’un statut, changer un paramètre, évaluer une chanson ou aimer un article. Elles encouragent l’engagement et s’utilisent pour rendre une page web normalement statique plus interactive et engageante, tout en étant utiles pour évaluer l’ergonomie, la performance et la réaction des usagers.
En conclusion
Il s’agit des principales tendances en matière de conception de sites web pour 2015, mais de nouveaux développements émergeront sans aucun doute tout au long de l’année. En restant à l’affût de ces tendances, l’équipe de Kryzalid est prête à vous guider dans ces changements et à faire passer votre stratégie numérique au niveau supérieur.
