Blog d'un Éternel Geek

Les 10 meilleurs Tendances web qui vont marquer 2016

http://media.giphy.com/media/oL4fyR2JD3Law/giphy.gif

 

Un site Web doit avoir une contenu propre c'est clair, nous l'avons vu et cela a été largement soutenu par Google. Cependant, le design du Website est important également. Si vous concevez des sites vous savez que tout comme les fringues, vos clients vous demanderont le blog nouvelle tendance ou forum à la mode.

Ces petits artifices anodins qui font le ravissement des clients et de leurs membres lors de la navigation. Par conséquent, la popularité d'un site est autant proportionnel à son produit, sa facilité d'accès, sa rapidité de pagination, son référencement qu'à son Design. Associer à cela de subtil déclinaison d'animation, photo zoom-able et de carte de personnalisation et vous aurez un endroit magique pour l'utilisateur.

 

Nous allons voir ensemble 10 tendances qui risquent de faire fureur chez les webmasters en 2016.

 

IL y a déjà beaucoup de tendances qui seront toujours d’actualité de 2015, sûrement qu’elles évolueront mais elles vont laisser également de la place au concept émergeant de 2016.

 

La communication visuelle voila le maître mot pour cette prochaine année. 
Communication visuelle
Communication auditive
Communication textuelle

Tout sera mis en oeuvre pour toucher l'internaute comme s'il étais spectateur d'un bon film. on s'écarte des sites habituelles pour proposer quelques chose de plus intimistes.

Voyons ensemble ces bouleversements.

 

  1. La typographie

 

Le paysage typographique 2016 va voir sa liste rallonger surtout grâce à GoogleFont qui va offrir de nouveaux types de police. GoogleFont met en avant des polices plutôt originales qui mettent en valeur le texte vis-à-vis du lecteur. Comment on le sait, et je l’ai déjà mainte fois répétée, une police que ça soit sa taille et son type est prépondérant pour apporter une aisance de lecture aux visiteurs ou membres de votre blog.

 

IL y a des standards typographiques qui obéissent au mode du Web. Des réseaux sociaux connus tels que Pinterest nous montre un aperçu de ce que pourrait être une présentation des nouvelles paginations à l’aide de ces polices en 2016.

 

https://www.pinterest.com/highlanderc/typography-2016/

 

En se baladant sur le blog Espagnols fundamentos-gab.blogspot.fr on peut voir des exemples, on constate que la technique est percutante et s’apparente beaucoup à du marketing visuel.

http://vivageek.livehost.fr/data/images/news/design/designpage.jpg            http://vivageek.livehost.fr/data/images/news/design/desinpolice.jpg

 

 

Un autre exemple d’une page élégante avec des textes représentant cinq GoogleFont présentant un contenu intéressant et utilisant déjà les techniques 2016, j’ai retenu Playfair display qui est vraiment pas mal du tout.

 

https://www.google.com/fonts/specimen/Playfair+Display

 

http://vivageek.livehost.fr/data/images/news/design/design.png

 

  1. Conception à la carte

 

http://vivageek.livehost.fr/data/images/news/design/design6.jpg

Toujours dans l’esprit responsive et se soucie d’adapter son blog, son site, son forum à toutes les tailles et types d’écrans rencontrés, arrive et même est déjà la, le concept des cartes imbriquées dans une page.

Ce type de news présentation permet une meilleure densité et compréhension de celle-ci. On peut remplir une page d'accueil avec presque tout son contenu et il suffit à l'utilisateur de choisir son menu du jour. Ce design risque d’être très tendance en 2016 et de plus en plus courant vis-à-vis des webmasters.

 

A l'instar de Twitter comme ici précurseur en la matière : https://dev.twitter.com/cards/overview

 

 

En effet c’est plus attrayant d'offrir des petites cartes d’accès applicables qui permettent immédiatement d’accéder soient à l’article sélectionner, soit au diverse autres parties de ce blog. On peut même dire d’après les concepteurs designers de demain qui travaille certains pour Google, Facebook, Twitter et d’autres grands groupent d’Internet que ce concept à la carte risque fort d’être le moteur design de l’année 2016.

 

Les possibilités sont diverses grâce aux CSS3, HTML5 et JS et vont permettre de personnaliser ses cartes pour les rendre les plus attrayantes possible. Sur le site consultant six.com on voie 15 exemples de ce que seront les Webdesign à la carte de 2016 : sur i Phone, un mail client Pinterest, Linkedin, et bien d’autres.

Ce concept à la carte est séduisant de part sa forme mais aussi ses possibilités de modélisation.

En effet c’est modulable à l’infini et surtout la facilité d’accès à l’ensemble du site qui est proposé.

On risque fort de voire se multiplier les Framework se basant sur la Card Design.

 

 

Card Design est parfait pour les appareils mobiles avec différentes tailles d'écran. Rappelez-vous que les appareils mobiles sont le cœur et l'âme de votre future entreprise, peu importe qui vous êtes et ce que vous faites. Les cartes peuvent être empilées verticalement dans une activité de ruban sur l'écran du téléphone ou horizontalement dans plusieurs colonnes, si vous faites pivoter la plaque de 90 degrés. Ils peuvent être fixes ou à hauteur variable.

 

Il est déjà clair que les concepteurs d'applications utilisent activement card design. La même chose est vraie pour les commerçants et les créateurs pub. Tout en poursuivant la croissance du marché des médias sociaux et de leur décadence dans de nombreux produits de niche (occupant chaque jour de plus en plus de notre espace Web) les budgets de marketing suivront inévitablement. Le modèle dominant dans la conception de nouveaux services et applications seront sur cartes. Les données de consommation de Facebook, Twitter, Pinterest, Instagram, Linkedin, et tous les autres services sont tous basés sur les cartes.

http://www.google.com/design/

 

 

  1. Le Flat design

 

Ce concept, qui marche en parallèle du material design, est un concept adopté déjà depuis presque un an par la plupart des Web designer. On aime le plat, le presque plat ou le semi-plat mais les volumes sont laissés de côté pour une simplicité des icônes, Headers, Logos qui n’abordent plus d'effets reliefs et des typographies stylisées avec un panel de couleurs ton pastel. Le plus gros exemple de cette tendance flat reste l’interface de Windows 8.

Exit les boutons avec effet biseauté qui laisse place à des boutons tout plats aux couleurs choisis dans les tons les plus simplistes.

On parle même de Ghost buttons. Un peu comme un spectre inquiétant planant dans un coin, ils ne sont pas destinés à vous distraire, juste attirer votre attention d'une manière subtile.

Ils sont transparents, mais ont une forme reconnaissable, sont bordées par une ligne très mince et contenir des polices de lumière sans-serif.

Ils ne sont pas tout à fait un appel à l'action. Parfait pour les concepteurs ne souhaitent pas encombrer leurs sites avec la navigation mais nécessaire.

Egalement, Les tendances arrondies sont dépassé. Donc si vous avez encore des Headers ou des boutons arrondis sachez qu’il est temps de vous mettre au carré.

 

http://vivageek.livehost.fr/data/images/news/design/flat.png

 

  1. Les élèments photographiques

 

Un concept qui est apparu récemment est l’utilisation et le déploiement de grands éléments photographiques au sein même d’un contenu voire même d’une page Web. Cela amène le visiteur à avoir vision plus globale de l’image cela rend plus intéressant le contenu.

Vous l'avez compris pour 2016 on n'est pas radin sur les grandes tailles XXL de nos images si cela peut faire imploser le visuelle graphique de notre page. Mais attention tout ceci dans le respect des normes standards : Zoom, responsive… Il ne s'agit pas d'agresser l'internaute. De préférence utiliser des images de haute résolution cela impressionne plus.

Ceci est permis grâce à HTML5 et au CSS3 qui accepte ces affichages haute résolution sur différents formats. De plus en plus de portfolio utilise ses avantages techniques afin d’amener leur site à proposer des murs d'images où l'on peut zoomer sur un simple clic.

Ce n'est plus réservé à Pinterest et les blogs se mettront au goût des auditeurs en mettant des images de belles qualités.

Si vous passez sur mon blog depuis un moment déjà vous remarquerez que j'utilise quelques une de ces techniques depuis le début.

 

  1. Utilisation de l'image animée à haute résolution

 

Ce qui va être fort tendances aussi sera l'utilisation d’images animées à haute résolution, je l'appelle le cinéma du pauvre ou pour ceux qui ne connaissent pas trop le cinéma-graph. C’est une technique visuelle qui peut être faite à partir par exemple d’un éditeur graphique comme Photoshop afin de créer une image appelée GIF souvent une photo en mouvement.

 

2016 sera l'année où l'internaute deviendra spectateur, il en prendra plein les mirettes. Le WebMaster tel un réalisateur fera en sorte d'utiliser les Fontions avancées HTML5 et CSS3 pour créer un environnement qui nous transportera dans son univers.

 

L’utilisation de ces GIF afin de d'agrémenter le site Web pour la présentation d’un contenu ou d’un contenant devient de plus en plus répandue chez les utilisateurs Webdesigner. Cela amène une note dynamique au site qui pour le coup est plus accrocheur.

 

https://d13yacurqjgara.cloudfront.net/users/4414/screenshots/661699/flip_card.gif  https://d13yacurqjgara.cloudfront.net/users/566817/screenshots/2159013/swing.gif

 

 

 Pour fidéliser un internaute il faut le pousser à rester le plus longtemps possible sur notre blog. Le but étant qu'il s'abonne, like nos contenus ou mette notre site en favoris.

Ces techniques peuvent être aguicheuses mais pourtant elles fonctionnent.

 

  1. Racontez-leur une histoire

 

La nouvelle interface design 2016 doit amener le site à raconter une histoire à internaute. Comme un conte qui va le séduire et lui donner envie d'en voire plus.

 

http://mintdesigncompany.com/work/

Magnifique réalisation de ce concept par mintdesign.

 

http://vivageek.livehost.fr/data/images/news/design/design7.png

 

http://sidigital.co/ est un exemple flagrant de ce qui précède.

D'autres exemple : http://zervice.com/ , http://www.blueacorn.com/, http://www.sbs.com.au/theboat/ , http://www.blitzagency.com

http://vivageek.livehost.fr/data/images/news/design/design8.png

 

 

Il faut que le thème de l'histoire soit en rapport avec le Site ou produit défendus par le webmaster. Mais on comprend l'intérêt de ce type de design qui permet de mettre en valeur la page d'accueil et de procurer une excuse pour que l'internaute reste un peu plus devant notre page.

Le plus étant de créé une action qui force l'internaute à devoir s'inclure dans l'animation pour accaparer son attention au maximum.

Je vous met les 2 liens suivant qui vont très loin dans l'animation.

http://www.intacto10years.com

http://thegoodman.cc/

 

  1. Une page pour les dominer tous

 

Une étude Design a démontré que l'internaute avait du mal à avaler le départ d'une page où il s'est posé. Il n'aime plus aller et venir comme avant. C'est finis le temps ou il ouvré 20 onglets, il préfère stagner sur place et profiter d'un contenus sans se disperser.

Ils ont remarqué que l’internaute préféré et avaient plus confiance sur le fait de rester sur la même page plutôt que de devoir cliquer pour quitter cette page ou la changer pour une autre. L'époque des Target_Blank (ouverture sur un nouvel onglet) est révolue.

Il est évident que la tendance à la sur-dimension d’image sur une page rallonge notamment la longueur de défilement d’un site ou d’un blog mais il paraîtrait que cela n’influe pas sur la qualité du blog au contraire d'après l'étude faite sur des internautes il préférerait ce style de défilement.

Cette technique va permettre de récolter un maximum d’informations et ainsi d’adapter progressivement ses contenus à l’ensemble des utilisateurs de son site Web.

Concentrer son contenu sur une page est chose aisé pour un blog, plus difficile pour un site ou forum mais si l'on regarde les techniques de Card Design c'est déjà plus facile à imaginer.

 http://vivageek.livehost.fr/data/images/news/design/design5.png

 

  1. Responsive à tout prix

 

Nous parlions tout à l’heure de l’importance à ce que le site Web soit adapté table à chaque type d’écran rencontré. Alors aujourd’hui, la plupart des utilisateurs ne se cantonne pas à naviguer avec un simple PC. Ils vont utiliser la plupart des technologies qui leur est alloué. Ainsi, ils vont être amenés à venir sur votre site Web à partir d’un iPhone, smartphone, un pc portable, une tablette ce qui amène la question sensible chez les webmasters :

Est-ce que votre site est capable d’accepter tous ces formats d’écran ?

Nous l’avions vu quand je parlais de SO que cela peut avoir une importance primordiale vis-à-vis des moteurs de recherche surtout Google qui va préférer un site responsive à un autre pour le simple faite qu’il y aura une correspondance des tailles.

http://vivageek.livehost.fr/data/images/news/design/design4.png

  1. Personnaliser l’expérience des utilisateurs

 

L'agrégation devient un Art en 2016.

L'agrégation dépend de:

  • La personne qui consomme du contenu, ses intérêts, ses préférences et ses comportements.
  • Les intérêts de ses amis, de leurs préférences et les comportements.
  • Lieu et contexte.
  • Publicité ciblé.
  • Produits demandés

Cette nouvelle tendance plus marketing que design utilise le sens pratique des cookies installés chez les internautes.

 

Les cookies qui s'installe sur vos navigateurs non seulement permet d'être de nouveau reconnus tout comme votre IP par le site où l'on a l'habitude d'aller mais en plus en arrière plan, il permet au webmaster de construire une véritable stratégie marketing offensive à votre égard.

 

Dans l’avenir, la personnalisation va permettre non seulement d’offrir une expérience accueillante pour l’internaute arrivé sur votre blog car vous allez centrer essentiellement sur ses goûts, ses préférences, ses intérêts, ses passions, mais en plus grâce d'adapter le contenu à l’ensemble de vos besoins.

 

Ils ont su s’adapter à une demande qui est de plus en plus croissante vis-à-vis d’utilisateurs aguerris au plus fort zonage et qui pour ne pas quitter le réseau utilise d’autres types de technologies que le PC classique.

 

Les internautes ont une Zapette dans les mains et votre site risque le pire s'il ne tient pas compte de ces futures possibilités.

 

Ceux qui profiteront de ces avantages sont bien entendus les entreprises et sociétés de commerce en ligne. Déjà, les sites d'Ecommerce ont personnalisé leur design en ce sens en proposant par ailleurs des volets de personnalisation user au sein de la même page.

http://vivageek.livehost.fr/data/images/news/design/design3.png

  1. La pluralité au sein d'une même interface

 

Le design 2016 ressemblera à celui d'un mobile ou d'une interface Windows. On aura accès à tous librement de la page d'accueil. On pourra ainsi basculer d'une page à l'autre sans vraiment bouger. Ceci est possible grâce au JS. Finis de basculer de fenêtre en fenêtre. Vous pourrez vous enregistrer puis lire les articles, regardez une vidéo, écrire un commentaire et ceci grâce à des menus contextuelles qui sauront se faire discret.

Cela va révolutionner la navigation pour l'internaute en lui facilitant grandement la compréhension du site. Jusqu'à présent les menus étaient trop linéaire et ne profiter pas au site car visuellement on a un regard trop élargis alors qu'avec ce type de menus on a tout sur la main et surtout tout sous les yeux.

Les conséquences sur les sites de commerce vont être bénéfique.

 

Conclusion

Les techniques de 2016 visiblement seront utilisées pour permettre une meilleure mise en page du contenu que ce soit comme nous l’avons vu avec un défilement vertical continu au détriment de la pagination ou des contenus à la carte permettant rapidement de sauter d’un contenu à l’autre.

On remarque aussi que l’originalité sera de rigueur en 2016 et que l’utilisation de nouvelles polices de nouvelles manières de mettre son site en valeur comme utilisation de Gif cinéma graphe en fond de toile ou en présentations de contenus également d’animer son site que l’utilisateur et l’impression d’entrer comme dans une histoire vivante et enlever cet aspect terne et fade qu’avaient les sites de l’époque.

 

2016 va être l'année de l'animation, d'une véritable complicité avec l'internaute, on pourra impliquer ce dernier dans l'animation afin de fixer sa concentration.

Le design se veut plus accueillant, plus conceptuel avec des tons, poile et formes simplifiés. On donne de la place aux images afin qu'elles puissent donner leur qualité maximale. On et Lors de la conception du site, nous pouvons utiliser toutes ces techniques, en complétant leur animation et le mouvement Nous pouvons intégrer le système de Card Design dans les photos, vidéos, musique.

 

L'animation portera une importance primordiale de ce nouveau design qui tout en douceur comblera les attentes des internautes et les conduira vers un regard nouveau de la navigation web. Sous des attraits certains, il seront guider vers la découverte du site. Ce genre de technique visuel aura le mérite de permettre d'influencer l'auditeur qui d'habitude ne regarde que 20% d'un site avant de partir. Il aura envie de continuer et de se frayer un chemin dans cette expérience virtuelle puis sans s'en rendre compte on lui aura présenter l'éventail de nos produits et services.

 

Cela me fait penser à disneyland vous savez quand on est dans la file d'attente en colimaçon. Tout autour il y a des animations, des objets, des personnages tout est mis en oeuvre pour que l'on ne s'ennuie pas. Un client qui s'ennuie et un client qui part.

 

La simplicité également au niveau des graphismes avec le flat design mis à l’honneur ainsi que le matériel design des polices originales de mise en page simple le tout dans une harmonie destinée à produire un effet visuel réconfortant pour l’internaute voilà il n’y a plus qu’à se mettre en marche vers l’avenir et à mettre à jour nos blogs.

 

On peut remarquer comme http://officeart.gr/ ou

http://www.ridleyville.com/#Homepage

Une parfaire intégration réussis de la plupart des fonctionnalités du futur standard design 2016.

http://www.google.com/design/

 

Par contre je n'ai pas parler du son. En effet je ne pouvais vous laisser sans vous transmettre l'évolution de la musique au sein des sites web.

http://dreamteam.pl en est l'illustration typique. On remarque du flat et Material Design , de l'animation, une typo soignée ,un menu contextuelle mais aussi de la musique. Pour l'instant peu se sont lançé dans cette voie, pourquoi ? Je pense que c'est compliqué de concilier musqque et libre accès. Souvent les personnes sont dans des lieux publics ou chez eux mais il est tard, une musique mettra mal à l'aise ces personnes.

 

C'est un choix. Il n'est pas encore pris de partie. L'utilisation de vidéo implique la possibilité ou non de l'activer en champ libre mais le son même à accès libre doit être lancé automatiquement. L'internaut ne comprendra pas qu'il doit appuyer sur tel bouton pour avoir une musique qui accompagne son avancement dans le site.

 

C'est pourquoi je n'en ai pas parler. Je pense qu'il est trop tôt pour savoir ce qu'il sera dans le futur l'avenir du son et de la musique. Sur un site dédié à de la musique ou qui raconte une histoire (boat), il sera de bon ton d'en mettre , à contrario sur un site de E-commerce cela pourrais dénaturer complètement la structure édifié dans le sens de marketer le client.

 

Bien entendu nous y reviendrons car c'est un sujet que je n'ai pas finis de traiter tellement il est étendu et le Design évolue rapidement.

 

Merci à bientôt.

 

PS: Je mettrais mes techniques pour faire du flat design sur photoshop Lorsque je vais faire la découpe de mon thème pour la mise en place de mon ViVHaccess.






 Geek me     Je suis un Geek dans l'âme. 18 ans à silloner internet pour récolter des informations afin de comprendre son fonctionnement. Idéalement j'étudie également le comportement humain.

C'est afin de vous partager mes connaissances que j'ai ouvert ce blog alors je vous souhaite une bonne lecture.



À lire également


2 commentaires

1 - jeudi 27 août 2015 @ 20:08 Jean Claude Gonnet a dit :

Il n’y pas mieux pour commencer la journée que de vous lire ! merci

2 - jeudi 24 décembre 2015 @ 16:56 shiqeri a dit :

Article complet, merci.
Un article intéressant sur les 5 meilleurs sites web 2015 en Suisse pour illustrer tout ceci:
http://www.3levels.ch/blog/le-meilleur-du-webdesign-suisse-2015

Écrire un commentaire

Votre adresse de messagerie ne sera pas publiée.

Quelle est la deuxième lettre du mot fqsdx ? :