Les tendances du web design se suivent et se ressemblent – ou pas. Chaque année, des modes disparaissent, d’autres naissent, d’autres encore continuent de prospérer, et chacune d’entre elles apporte son pixel au visage du web tel que nous le connaissons.
Il est évident que ces évolutions sont le fruit de changements technologiques (l’utilisation des mobiles), graphiques (nouvelles interfaces Microsoft, Apple, Google) et comportementaux (addiction progressive aux réseaux sociaux). Néanmoins, comme nous le verrons, elles sont également la conséquence indirecte d’un facteur plus intéressant encore : elles reflètent l’état d’esprit global des internautes.
Comme vous le savez, Wix vous propose des modèles de sites qui suivent les tendances du web design religieusement. Nous vous présentons celles qui domineront la Toile en 2016 – avec exemples à l’appui :
Tendances générales
Material Design : la Flat Design, revu par Google
Qui dit Web dit Google. Le géant a décidé d’adopter un nouveau langage visuel qui influence progressivement nos habitudes de consommateurs numériques : le Material Design. Le principe ? Un design à la fois minimaliste et multidimensionnel qui permet à chacun de s’orienter à l’aide d’icônes, de volumes, d’animations discrètes et de formes colorées. Les utilisateurs profitent ainsi d’outils plus intuitifs et dynamiques. Au passage, ce nouveau design permet d’uniformiser l’expérience sur tous les supports.
Le Flat Design, largement initié par Microsoft, avait déjà ouvert la voie à un nouveau mode de réflexion autour de l’utilisabilité des sites en favorisant les icônes aux menus de navigation à niveaux et en mettant un terme à l’idée que le Web devait ressembler à la vie réelle (voir skeuomorphisme – à mes souhaits).
Pour résumer toute cette sombre histoire : les icônes et les blocs de couleurs vont prospérer et les internautes vont continuer d’économiser les clics. Ajoutez à cela une touche de volume et d’animation, et vous avez tout le « matériel »pour surfer sur le Material Design. Google-a-dit-a-dit : ” Matérialisez “, alors on matérialise. Point.
Des couleurs rassurantes : que du bonheur
Cette année a été particulièrement chargée émotionnellement et les internautes semblent être à la recherche d’espoir plus que jamais. Il n’est donc pas surprenant que les couleurs gaies et douces reprennent les devants du Web. Le noir et blanc ne se démode pas vraiment, c’est simplement qu’il se fera voler la vedette par des couleurs pastel (pour les plus doux) ou vives (pour les dynamiques). Le choix de votre palette équivaut au choix de l’atmosphère sur votre site. N’hésitez pas à prouver que vous êtes optimiste et positif.
[Petit aparté : “Je positive” et “J’optimisme” ne seraient pas les deux derniers leitmotivs d’une enseigne célèbre de supermarchés ? Simple matière à réflexion.]
Ci-dessous, une vidéo (en anglais) très intéressante sur les couleurs de l’année.
Play-Mobile – en avant les e-Stores
Non, ce n’est pas une pub pour les célèbres figurines à la coupe au bol interchangeable. Quelle que soit la tendance qui vous séduit, vous devez garder à l’esprit à tout moment que les mobinautes se multiplient à la vitesse grand V. Il est donc impératif d’optimiser votre site pour répondre à leurs besoins. Si, pour vous, ce bon vieux 3310 fait parfaitement le travail, sachez que Google voit les choses d’un autre œil. En effet, le moteur de recherche a décidé cette année de récompenser les sites adaptés aux appareils mobiles.
En outre, le M-commerce est en pleine explosion : avec 6 millions d’acheteurs dans l’Hexagone, il représente 21 % du chiffre d’affaires des sites E-commerce. Vérifiez soigneusement que votre site est esthétique et utilisable autant sur le grand écran que sur la petite lucarne (tactile), et vous gagnerez sur tous les tableaux.
Long Scrolling évolution
Vous avez sûrement remarqué que, ces derniers temps, les sites internet se rallongent à vue d’œil. Dans le jargon, cette tendance s’appelle le Long Scrolling. Son objectif : offrir aux internautes une navigation verticale, similaire à celle qu’ils peuvent expérimenter sur leur smartphone et sur les réseaux sociaux. Étant donné que nous devenons progressivement accros à notre molette (alias roulette de souris) et suivons notre fil d’actualité à coups d’index, il est naturel que les sites internet s’étendent pour nous faciliter la vie.
Inspirez-vous : Réalisations Deelynx
Ci-dessous, quelques mini-tendances dérivées du Long Scrolling qui vous aideront à prendre « une longueur » d’avance :
Parallax Scrolling : tout le monde en parle
Le para quoi ? Le Parallax Scrolling est une tendance qui permet de créer une sensation de profondeur sur un site internet. En faisant défiler à des rythmes différents des éléments superposés, il est possible d’insuffler à vos pages Web une sensation de dynamisme proche de la 3D. Mais encore ? Notre article sur l’effet parallaxe lève le voile sur le sujet.
Bandes en largeur : une organisation plus visuelle
L’un des pièges du Long Scrolling est qu’il devient difficile de structurer son contenu visuellement. Si à l’époque où chaque page tenait sur l’écran, le menu faisait usage d’intercalaire, à l’ère du défilement vertical (ou scrolling) il est nécessaire de distinguer clairement chaque section – puisque chaque page devient plus longue, donc plus riche. C’est là que les bandes sur toute la largeur du site interviennent. Elles permettent de construire des pages composées de plusieurs « tranches ». À cet effet, il est recommandé de varier les styles (vidéo/image/couleur) pour chaque catégorie/bande de contenu (Accueil, À propos, Contact, etc.) [cf. exemple précédent].
Éléments fixes : là où il faut, quand il faut
L’ennui avec les sites qui défilent pendant plusieurs secondes est que l’on a vite fait de perdre de vue l’objet de notre visite. Une technique aussi esthétique que pratique pour éviter cet écueil consiste à « fixer sur l’écran » certains éléments stratégiques : en-tête, pied de page, boutons sociaux, ou encore – sans saumon, mais notre préféré – un menu de navigation interne composé d’ancres. Pas certain de comprendre le principe ? Cliquez sur le Template ci-dessous !
Animations : Design in motion
Attention danger ! Les animations peuvent porter votre design à un niveau supérieur tout comme elles peuvent le dévaster bêtement. Par exemple, si vous animez vos textes pour les faire apparaître subtilement à mesure du scrolling, vous gagnez doublement : votre site devient dynamique et vos messages attirent naturellement l’attention. En revanche, si vous commencez à faire de la surenchère d’animations, vous risquez fort de vous retrouver avec une page Web qui ressemble à une partie de Candy Crush qui a mal tourné. A utiliser avec modération – et bon goût.
Split Screen : deux fois plus de plaisir
Le petite dernière, qui semble prendre davantage d’ampleur chaque année est la tendance du Split Screen – traduisez écran divisé. En séparant certaines sections de votre site en deux parties (plus ou moins) symétriques, il est possible de conjuguer le contenu visuel et textuel avec un charme très particulier. En effet, les textes, incrustés sur des blocs de couleur, sont plus lisibles, et les images, accolées aux paragraphes, illustrent les propos de façon naturelle et agréable. Comme nous le disions, si l’un des objectifs du long scrolling est de présenter un maximum d’information (de façon concise !) au sein d’une même page, cette technique vient ajouter une touche visuelle sophistiquée et offre une lecture plus agréable. Au final, les visiteurs sont forcément conquis. C’est ce que l’on appelle : diviser pour mieux régner.
Le plein écran, un classique
Voyez grand ! Une vidéo en plein écran, une belle image en arrière-plan, un fond coloré avec une typographie imposante, toutes ces tendances existent depuis belle lurette et ne sont pas prêtes de s’évanouir de nos écrans. Leur but est clair : envoyer un message fort (visuel ou textuel) aux visiteurs dès le premier regard. La question qui vous turlupine : quelle tendance utiliser et pourquoi ?
Vidéo : mettez-en plein la vue !
La vidéo est sûrement le format qui suscite le plus d’intérêt sur le Web. Et pour preuve, si Facebook s’acharne à empiéter toujours plus sur le terrain de YouTube, c’est que l’enjeu est de taille. De manière générale, on verra cette année un nombre croissant de sites internet avec un fond animé. Si c’est votre choix, assurez-vous que votre clip soit visuellement irréprochable. Les pixels sont de véritables tue-l’amour, surtout en plein écran. La bonne nouvelle, c’est qu’avec Wix, utiliser un clip en arrière-plan sur votre site est d’une facilité déroutante – c’est cadeau.
Le diagnostic de nos designers :
- Avantage : elle en dit long sur votre activité et captive le regard instantanément.
- Inconvénient : elle peut s’avérer difficile à produire et risque de détourner l’attention des visiteurs du cœur du message. Ah oui, et sur mobile il faut avoir un plan de secours – une image fera très bien l’affaire.
Images authentiques : n’illustrez pas, montrez
Les grandes images de fond connaissent un succès stable depuis plusieurs années. Forcément : un beau visuel fait toujours effet. Néanmoins, il n’est plus suffisant d’aller piocher une jolie illustration dans une banque d’images libres de droits. A l’heure où les sites web se multiplient et où la confiance des internautes diminue, faire preuve d’authenticité est devenu un must. Il est donc recommandé de prendre des photos professionnelles de vos locaux/équipes/produits et d’en faire usage sur votre site. Pour les artistes et les photographes, cela ne devrait pas poser problème. En revanche, pour les autres, n’hésitez pas à vous intéresser aux bases de la photographie ou à faire appel un pro si votre budget le permet.
Le diagnostic de nos designers :
- Avantage : très simple à importer, à choisir et à éditer, une image est toujours esthétique et efficace.
- Inconvénient : elle n’est pas bien bavarde. Mais il vous suffit de superposer du texte pour propulser votre message.
Si vous décidez d’opter pour cette option, notez que même les photos ont des tendances. Et voici les deux dernières :
- Close-up : les photographies prises de près mettent en valeur vos produits dans leurs moindres détails.
- Vue aérienne : ce type de photos donne une vue plus globale de vos services/produits et offre une perspective originale de votre entreprise.
Les typographies imposantes : une question de caractère(s)
Une belle typographie ou une police de caractères originale ne constituent pas uniquement des atouts visuels de choix. Elles sont au cœur de votre image de marque et permettent de transmettre votre message avec une efficacité redoutable. À l’instar des couleurs, les polices doivent être choisies et utilisées avec la plus grande précaution. Vous pouvez décider de les conjuguer avec des images, de les marier avec une texture colorée, ou de les intégrer sur une vidéo. Tant que vous le faites en respectant les règles, votre site prendra du grade.
Le diagnostic de nos designers :
- Avantage : elles permettent de véhiculer un message clair.
- Inconvénient : elles sont délicates à utiliser et peuvent empiéter sur le reste du design si elles sont trop imposantes.
Pour conclure, nous vous invitons à participer à un exercice intellectuel intéressant. Comme nous le disions dans l’intro, les tendances du Web Design ne sont pas uniquement la conséquence des changements technologiques. Elles incarnent les préoccupations des internautes et leur proposent un monde visuel sur mesure. D’après vous, comment cette vidéo de Google reflète-t-elle les tendances ci-dessus ?
L’aventure digitale vous tente ? Contactez-Nous
Laissez un Commentaire