8 tendances en design web pour 2016

tendances design web

En raison de la forte croissance des appareils intelligents, le design web a dû s’adapter aux habitudes de navigation des mobinautes*. Influencés par ce courant, les designers et programmeurs cherchent à créer des interfaces qui proposent aux utilisateurs une expérience unique et plus personnelle. Voici donc 8 tendances qui représenteront bien cette réalité en 2016.

*Mot utilisé pour désigner les personnes qui naviguent sur Internet à partir d’un appareil mobile (Larousse).

1. Menu hamburger

Le terme « hamburger » réfère au pictogramme de trois barres horizontales, utilisé pour présenter le menu. Les internautes doivent cliquer sur celui-ci pour faire afficher les différentes pages du site.

Exemple

exemple projet menu hamburger

La mention « menu » a été conservée pour diriger les internautes, puisque cette fonctionnalité n’est pas encore généralisée.

Visitez le site

2. Défilement long (long scroll ou endless scrolling)

L’utilisation grandissante des appareils mobiles et des réseaux sociaux influence le design des sites, qui seront de plus en plus nombreux à proposer une navigation verticale. De cette façon, les mobinautes peuvent consulter une page web dans son intégralité, avec un simple geste du doigt. Cette tendance fonctionne particulièrement bien pour les sites qui souhaitent attirer des utilisateurs à travers le storytelling, puisque chaque idée ou étape est divisée en section claire.

Exemple

exemple de projet defilement long

3. Design responsive

Selon Google, en 2015, les recherches sur mobile ont surpassé celles sur ordinateur, et ce, dans 10 pays dont les États-Unis (1). Le moteur de recherche a également annoncé la mise à jour de son algorithme, afin de classer favorablement dans les résultats de recherche les sites optimisés pour le mobile (2). Le design responsive, c’est-à-dire un site dont le contenu s’adapte à la taille de l’écran, permet d’offrir aux visiteurs le même niveau d’expérience que sur un ordinateur.

Source : (1) Blogue Google (2) Blogue Google

Exemple

exemple de projets design responsive
Visitez le site

4. Material Design

Sans surprise, Google influence les tendances web, grâce à la création d’un nouveau langage visuel nommé Material Design. Lancé en 2014, l’ensemble des règles graphiques est basé sur un esthétisme minimal et moderne, qui met l’accent sur l’ergonomie de l’interface et l’expérience utilisateur. L’objectif est de permettre aux internautes de bénéficier d’une plateforme intuitive et dynamique, uniformisée sur tous les supports. Cette approche mise notamment sur le style mosaïque (voir point 7), les animations et transitions, les effets de profondeur, les icônes et les formes colorées.

Exemple

exemple de projet material design
Visitez le site

5. Illustrations, photos et cinemagraphs

Illustrations
Les illustrations gagnent en popularité, car elles apportent un caractère ludique et convivial au design. Par leur look « dessiné à la main », elles ajoutent de la personnalité au site et le rendent plus personnel. Les illustrations créées sur mesure peuvent aider les entreprises à raconter leur histoire et à faire vivre une expérience mémorable aux utilisateurs.

Photos
Même si l’illustration sera au top des tendances 2016, il demeure parfois plus approprié d’utiliser des photos. Dans ce cas-ci, l’authenticité, la qualité et le réalisme des images sont les trois critères à privilégier, en raison de la confiance des internautes qui tend à diminuer et la multiplication des contenus. Pour en apprendre davantage sur le sujet, nous vous invitons à consulter notre dernier article sur le storytelling visuel.

Cinemagraphs
Généralement au format GIF animé, un cinemagraph est une photo statique dans laquelle on retrouve un léger mouvement donnant l’impression que l’image prend vie. Plus expressive que la photo, cette option consomme moins de bande passante que la vidéo et permet de conserver l’attention des visiteurs.

Exemple 

exemple de projet illustration
Visitez le site

6. Couleurs audacieuses et typographies imposantes

L’utilisation efficace de la couleur et de la typographie n’est pas un atout uniquement esthétique. Au cœur de l’image de votre marque, ces dernières permettent de renforcer vos valeurs et transmettre des messages importants. Ce choix doit représenter au mieux votre entreprise et guider l’atmosphère de votre site.

Couleurs
L’année 2016 sera marquée par une palette de couleurs vives et dynamiques qui rappellent les années 80. Inspiré par la signalisation routière, les terrains sportifs et les bandes de couleurs peintes sur le pavé, le Material Design propose des teintes audacieuses et saturées, juxtaposées aux couleurs neutres (3). Avec son bleu et son rose pâles, Pantone aura également une influence sur toutes les sphères du design, qui se tourneront vers les couleurs pastel.

Source : (3) Google

Exemple 

couleurs material design

Source : Google

couleurs pantone

Source : Pantone 

Typographies
Grâce au choix de plus en plus grand et accessible, on peut s’attendre à voir de nouveaux traitements typographiques, non plus réservés aux titres, qui changeront la façon de présenter le texte. Avec la renaissance du flat design et la popularité du minimalisme, on constate l’émergence de certaines tendances : contraste dans la taille de police, texte superposé sur les images, typographies artistique et personnalisée, polices script (écrit à la main) et à empattement épais (slab serif).

7. Disposition mosaïque (card layout)

Inspiré par Pinterest, le style mosaïque connaîtra une popularité grandissante au cours de la prochaine année. Visuellement attrayant, il permet aux visiteurs d’obtenir un aperçu rapide et bien organisé du contenu qui les intéresse. Cette disposition s’inscrit parfaitement avec la tendance du design responsive, puisque les blocs peuvent être présentés un à la suite de l’autre sur les écrans de petite taille.

Exemple

exemple de projet style mosaique
Visitez le site

8. Vidéo et animation

Vidéo
Plus que jamais, la vidéo deviendra un outil incontournable pour attirer le regard et susciter l’intérêt des internautes instantanément. Elle est également une excellente façon de convertir les visiteurs, puisqu’elle inspire confiance : vous pouvez exprimer qui vous êtes et ce que vous offrez.

Animation
Les animations contribuent à rendre l’expérience de l’internaute plus interactive et ludique. Pour capter son attention, on peut recourir à différentes techniques : animations de chargement ou de survol, transitions de photos, arrière-plans animés et effet parallaxe.

Exemple

Visitez le site