Que nous réserve 2017 dans le design web? Les designers conjuguent les habitudes de consommation des internautes avec les objectifs des marques pour assurer à l’un et à l’autre des environnements toujours plus performants.
La vidéo, toujours en croissance
D’ici 2018, la vidéo constituera 79 % du trafic sur Internet et, déjà, elle fait l’objet de 50 % du trafic mobile.
Fine animation ou vidéo, une image en mouvement capte instantanément l’attention. À la différence d’une photographie statique, la vidéo utilisant le son et le mouvement permet de retenir l’intérêt de l’usager plus longtemps.
C’est aussi un moyen très efficace de passer un message et d’attirer les utilisateurs vers une marque. Support de longue date et polyvalent, la vidéo est utile pour la narration d’histoire, le marketing, l’enseignement, le vlog, etc.
Les statistiques suggèrent que, d’ici 2018, la vidéo constituera 79 % du trafic sur Internet et que, déjà, elle fait l’objet de 50 % du trafic mobile. C’est aussi un excellent moyen de propager son message sur les médias sociaux, qui encouragent vivement l’utilisation de la vidéo.
Le site web de Recollection est un bel exemple de l’usage de la vidéo, de l’interaction et du son pour offrir une expérience incomparable.
Le retour des photographies et des illustrations originales
Les images stock sont révolues! Le contenu visuel original dominera le design web en 2017 et certainement pendant plusieurs années.
« Déjà, on peut constater davantage de photographies, d’illustrations et de montages graphiques originaux à travers les sites web. En 2017, on peut s’attendre à ce que de nombreux sites deviennent visuellement plus diversifiés et originaux avec un contenu plus créatif et unique. », soutient notre chef de service web, Dominic Larochelle.
« Ceci poussera les marques à mobiliser davantage d’efforts pour faire valoir leur unicité et bâtir leur propre esthétique sur le web en utilisant la photographie, la vidéo, l’illustration et la typographie. », poursuit-il.
Dans le style d’illustrations à l’aquarelle jumelées avec une extrême finesse dans les animations et transitions, le site de House at Klebny nous en met plein la vue.
Le design web prend des couleurs!
En 2017, faisons preuve d’audace! Les couleurs riches seront à l’honneur, tout comme l’utilisation de dégradés, de saturation et de teintes vibrantes. On peut maintenant se le permettre grâce, entre autres, aux progrès technologiques des appareils mobiles, dont les moniteurs reproduisent de plus en plus fidèlement une gamme de couleurs beaucoup plus puissantes.
Un bel exemple d’audace et de jeu de couleurs, Culture.pl, avec son guide culturel nommé A Foreigner’s Guide to, se démarque par ses couleurs vibrantes et contrastées.
Les animations, oui, mais tout en finesse
Les animations apportent de la validité à une action, dynamisent le contenu, ajoutent une plus-value à l’expérience utilisateur
Le web se développe à la vitesse grand V depuis plusieurs années, les ressources s’améliorent sans cesse et on remarque une grande évolution des technologies. Pour un design web plus organique et tout en subtilité, l’animation a pris une place importante dans l’élaboration de l’expérience utilisateur d’un site.
Légère transition de couleur lorsqu’on survole une image, zoom sur une photo, icône qui se modifie ou animation lors d’un chargement de contenu : les animations apportent de la validité à une action, dynamisent le contenu, ajoutent une plus-value à l’expérience utilisateur.
Dans cette foulée, Google a développé une expertise franchement intéressante il y a quelques années avec le « Material Design », dans le but de rendre l’expérience plus fluide et organique.
Typographies « big and bold »
La typographie constitue un puissant média visuel en design web, capable d’apporter de la personnalité, d’évoquer l’émotion et de donner le ton.
Attendez-vous à des tailles surdimensionnées de caractères et à une utilisation plein écran qui rompt la grille. Belle, unique, la typographie rendue à la main et le texte dynamique en superposition travailleront en tandem avec le défilement en parallaxe.
Pour bien présenter sa nouvelle collection automne/hiver, Lois Jeans a su se démarquer en utilisant un jeu de typographie très marquée et des transitions en parallaxe qui font penser à de la vidéo.
Priorité au design mobile
Qu’on se le dise, en 2017, votre site sera consulté sur un appareil portable dans un ratio de visite non négligeable. Un site mobile performant fera assurément la différence dans vos statistiques de consultation et dans la réalisation de vos objectifs de vente.
On parle de design « mobile-first ». En fait, on considère l’expérience sur mobile en priorité en déclinant ensuite l’expérience sur les formats plus grands. Quand la clientèle est sur mobile, par exemple dans le cas d’une application, il est primordial de considérer cette approche.
Place à la navigation intuitive
Dans le même sens, on adopte dorénavant la navigation de type menu tactile simplifié. On laisse davantage de place aux visuels tout en dirigeant l’usager dans une expérience plus intuitive. Le menu « hamburger » devient la norme de la navigation épurée.
Les menus déployés en plein écran, devenus beaucoup plus créatifs, permettent une grande liberté et sont franchement plus accessibles et agréables sur mobile et tablette.
Design plein écran, tellement plus efficace
Qui plus est, 79 % des usagers sur mobile vont quitter le site web si celui-ci n’est pas optimisé, et 51 % des usagers seront moins tentés d’adhérer à la marque si l’expérience usager sur mobile est médiocre.
On ne parle plus de site web adaptatif ou « responsive », puisque, en 2017, on assume que c’est une norme! Évidemment, les moteurs de recherche tels que Google priorisent les résultats vers les sites qui possèdent une version mobile. Qui plus est, 79 % des usagers sur mobile vont quitter le site web si celui-ci n’est pas optimisé, et 51 % des usagers seront moins tentés d’adhérer à la marque si l’expérience usager sur mobile est médiocre.
Le design web adaptatif, ce n’est pas nouveau. Et depuis quelques années déjà, on remarque une orientation vers le plein écran. En parallèle avec le design mobile en priorité, on développe des sites et des grilles qui tirent avantage de l’espace complet de l’écran du navigateur. Si on conseillait, il y quelques années, de travailler dans une zone de 960 pixels, puis de 1200 pixels, il n’y a maintenant plus de limites. Les grilles adaptatives permettent de s’ajuster au format.
La qualité de l’expérience en est vivement décuplée, l’accent étant dirigé vers la richesse du contenu plutôt que vers la rigidité du contenant.
Le superbe site de National Geographic intitulé A Bear’s Eye View of Yellowstone démontre une belle utilisation de l’espace et une variété de contenus interactif qui donne une expérience sans pareille.
Osons les grilles asymétriques
Les grilles explosent! On se débarrasse de la symétrie et on voit apparaitre des sites plutôt asymétriques, toutefois très agréables esthétiquement.
« Bien que les marques fortement axées sur le contenu continuent à utiliser des UI de cartes et des structures plus traditionnelles à base de grilles, nous prévoyons une augmentation des mises en page expérimentales, car les marques cherchent à créer des expériences uniques qui les distinguent. », affirme Dominic.
Pour ce faire, les concepteurs web ont recours à la typographie, aux images et à d’autres contenus pour créer des juxtapositions et des mises en page uniques qui attirent l’attention et suscitent l’intérêt.
Ces designs web s’harmonisent fantastiquement avec la parallaxe et la mécanique de défilement. Les couches dynamiques de contenu en mouvement favorisent le sentiment de profondeur et guident l’utilisateur à travers sa visite. Tout est dans l’expérience usager et la richesse du contenu visuel!
Très audacieuse, la marque Ming se démarque par son originalité autant que par sa simplicité de navigation et sa grille déstructurée.
Pages de destination plus que pages d’accueil
Le contenu est roi! Les moteurs de recherche positionnent un contenu pertinent. Si la page d’accueil résume la globalité de l’offre, les pages de destination claires permettent d’attirer le bon trafic au bon endroit et de donner plus de chances de valoriser l’offre.
La compétition est forte; il importe de travailler son produit ou son offre de service en tenant compte que chacune des pages de contenu devienne une page d’atterrissage potentielle en réponse à une recherche.
Une bonne stratégie de référencement est à la base de cet exercice, additionnée d’une stratégie de marketing performante et d’un design orienté vers l’expérience usager. Voilà comment on se distingue de la compétition!
Ce n’est pas pour tout le monde!
Bien que plusieurs de ces tendances de design web apparaissent comme un « must » en 2017, il n’est pas nécessaire d’adopter chacune d’elles demain matin dans un projet de refonte! À considérer d’abord : son usager, sa clientèle cible, le type de contenu, la quantité de contenu et bien d’autres caractéristiques.
On imagine mal par exemple une institution financière se lancer dans des grilles asymétriques en parallaxe, plus libres et chaotiques. Le design doit rigoureusement respecter l’image d’un domaine structuré, organisé, clair, et inspirer la confiance.
L’an prochain, ce sera autre chose. On en sera à la réalité virtuelle et à d’autres innovations pour favoriser l’expérience multiplateformes. Pour l’entreprise, il importe de bien gérer son image et de ne pas tomber dans la saveur du mois qui malheureusement ne dure pas.
- White paper: Cisco VNI Forecast and Methodology, 2015-2020. http://www.cisco.com/c/en/us/solutions/collateral/service-provider/visual-networking-index-vni/complete-white-paper-c11-481360.html
- Mobile and tablet internet usage exceeds desktop for first time worldwide. http://gs.statcounter.com/press/mobile-and-tablet-internet-usage-exceeds-desktop-for-first-time-worldwide
- Verma, Vikram (2014) Adobe. Lavacon 2014 – The State of Mobile Publishing. http://www.slideshare.net/vickymatch/lavacon-2014-the-state-of-mobile-publishing-lavacon-keynote-vikram
- Google (2012) What Users Want Most From Mobile Sites Today, a study from Google (conducted by Sterling Research and SmithGeiger). http://googlemobileleads.blogspot.com/2012/09/mobile-friendly-sites-turn-visitors.html