{"id":57411,"date":"2019-10-29T18:44:01","date_gmt":"2019-10-29T18:44:01","guid":{"rendered":"https:\/\/codewebbarcelona.com\/tendencias-en-diseno-web-2020\/"},"modified":"2026-06-10T13:33:14","modified_gmt":"2026-06-10T13:33:14","slug":"tendances-design-web-2020","status":"publish","type":"post","link":"https:\/\/codewebbarcelona.com\/fr\/tendances-design-web-2020\/","title":{"rendered":"Tendances du design web 2020"},"content":{"rendered":"<p>Si vous souhaitez rester \u00e0 la pointe et d\u00e9marrer l\u2019ann\u00e9e prochaine du bon pied, cet article vous pr\u00e9sente les grandes tendances du webdesign pour 2020 : Canvas, 3D, typographies XXL, contrastes, intelligence artificielle, machine learning, reconnaissance vocale, et bien plus encore.<\/p>\n<p>[superfeatured]7076[\/superfeatured]<\/p>\n<p>Comme chaque ann\u00e9e, nous sommes de retour pour pr\u00e9parer la suivante. \u00c0 l\u2019approche de novembre, nous voulons \u00eatre pr\u00eats pour l\u2019ann\u00e9e \u00e0 venir, et nous souhaitons que nos visiteurs le soient aussi. Fid\u00e8les \u00e0 notre habitude, nous avons donc r\u00e9dig\u00e9 un article pour d\u00e9crypter ce qui va marquer l\u2019univers du webdesign en 2020.<\/p>\n<h6>On suit l\u2019\u00e9volution \u2192 les <a href=\"https:\/\/codewebbarcelona.com\/blog\/tendencias-diseno-web-2026\/\">tendances du webdesign 2026<\/a> misent sur le minimalisme, l\u2019IA et des exp\u00e9riences plus humaines.<\/h6>\n<p>Ce type d\u2019article fait partie des piliers de notre blog : il attire chaque ann\u00e9e de nombreux visiteurs et de nombreuses demandes de devis de la part de professionnels ou de curieux en qu\u00eate des derni\u00e8res tendances en design web, graphique et marketing. C\u2019est pourquoi nous y consacrons chaque ann\u00e9e plus d\u2019attention, d\u2019efforts et de soin. Notre objectif : proposer du contenu de qualit\u00e9 \u00e0 nos lecteurs, qu\u2019ils soient designers ou futurs clients \u00e0 la recherche d\u2019inspiration pour leur prochain site. Et puis, produire du contenu pertinent nous aide \u00e0 rester bien positionn\u00e9s dans les moteurs de recherche. Vous connaissez la chanson : Content is king !<\/p>\n<h6>WOWWW MEC ! On a d\u00e9j\u00e0 publi\u00e9 le nouvel article sur les <a href=\"https:\/\/codewebbarcelona.com\/blog\/tendencias-en-diseno-web-2021\/\">tendances webdesign 2021<\/a> !!!<\/h6>\n<p>Articles des ann\u00e9es pr\u00e9c\u00e9dentes qui pourraient vous int\u00e9resser : <a href=\"https:\/\/codewebbarcelona.com\/blog\/tendencias-en-diseno-web-2019\/\" target=\"_blank\" rel=\"noopener\">Tendances webdesign 2019<\/a> &#8211; <a href=\"https:\/\/codewebbarcelona.com\/fr\/tendances-design-web-2018\/tendencias-diseno-web-2018\/\" target=\"_blank\" rel=\"noopener\">Tendances webdesign 2018<\/a> &#8211; <a href=\"https:\/\/codewebbarcelona.com\/blog\/tendencia-de-diseno-web-y-grafico-para-el-2016-vol-1\/\" target=\"_blank\" rel=\"noopener\">Tendances webdesign 2016<\/a><\/p>\n<h2>Tendances webdesign 2020 : prenez une longueur d\u2019avance<\/h2>\n<h3>Des typographies encore plus imposantes<\/h3>\n<p><img decoding=\"async\" class=\"alignnone wp-image-3883 size-full\" title=\"tendencias en dise\u00f1o web 2020 big typos\" src=\"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2019\/10\/bigtypos.jpg\" alt=\"\" width=\"1200\" height=\"631\" \/><\/p>\n<p>L\u2019une des tendances phares du webdesign en 2020 sera sans conteste l\u2019utilisation de typographies surdimensionn\u00e9es. Pas seulement pour les titres, mais aussi dans le corps du texte.<\/p>\n<p>Avec la g\u00e9n\u00e9ralisation des \u00e9crans larges et haute r\u00e9solution, et la baisse de leur co\u00fbt, la taille des textes sur le web s\u2019est nettement \u00e9loign\u00e9e des 12 ou 14 pixels des ann\u00e9es 2010. Aujourd\u2019hui, il n\u2019est pas rare d\u2019utiliser du 20 pixels et plus, selon le projet et le site.<\/p>\n<p>Pour les titres, il n\u2019y a plus vraiment de limite, si ce n\u2019est le bon go\u00fbt et le sens de l\u2019\u00e9quilibre. Osez les tailles XXL pour cr\u00e9er un contraste fort. Des titres g\u00e9ants, bien r\u00e9dig\u00e9s, donneront une vraie personnalit\u00e9 \u00e0 tout site web qui souhaite sortir du lot, en 2020 comme dans les ann\u00e9es \u00e0 venir.<\/p>\n<h4>Comment et quand l\u2019adopter<\/h4>\n<p>Adoptez cette tendance sur des sites qui :<\/p>\n<ol>\n<li>ont besoin d\u2019un design tr\u00e8s visuel et percutant<\/li>\n<li>manquent d\u2019images et n\u00e9cessitent un renfort graphique fort. Des typos massives, assum\u00e9es, donneront le punch visuel recherch\u00e9<\/li>\n<li>ne s\u2019adressent pas \u00e0 un public trop conservateur<\/li>\n<li>visent une audience \u00e9quip\u00e9e de mat\u00e9riel moderne, notamment de grands \u00e9crans<\/li>\n<\/ol>\n<p>\u00c0 garder en t\u00eate :<\/p>\n<ol>\n<li>Pensez \u00e0 adapter les tailles selon les r\u00e9solutions d\u2019\u00e9cran. Pr\u00e9voyez des exceptions responsive, du 2560px (grand \u00e9cran) jusqu\u2019aux 1330px (portable) les plus courants<\/li>\n<li>Veillez \u00e0 la coh\u00e9rence des tailles sur mobile, car la majorit\u00e9 des internautes naviguent d\u00e9sormais sur smartphone<\/li>\n<\/ol>\n<h4>Sites qui illustrent la tendance<\/h4>\n<p><strong>Rogue Studio<\/strong><\/p>\n<p><img decoding=\"async\" class=\"alignnone wp-image-3884 size-full\" title=\"tendencias en dise\u00f1o web 2020 tipografias 1\" src=\"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2019\/10\/tendencias-diseno-web-2020-tipografias-1.jpg\" alt=\"\" width=\"1200\" height=\"631\" \/><\/p>\n<p><a href=\"https:\/\/rogue.studio\/\" target=\"_blank\" rel=\"noopener\">Voir le site<\/a><\/p>\n<p>Ici, l\u2019utilisation de typographies n\u2019est pas seulement grande\u2026 elle est EXTR\u00caMEMENT grande. Et le r\u00e9sultat est bluffant.<\/p>\n<p>Je suis certain que ce site figurera parmi les candidats de notre s\u00e9lection annuelle des meilleurs webdesigns.<\/p>\n<p><strong>Granyon Summer Party<\/strong><\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-3885\" src=\"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2019\/10\/tendencias-diseno-web-2020-tipografias-2.jpg\" alt=\"tendencias en dise\u00f1o web 2020 tipografias 2\" width=\"1200\" height=\"631\" \/><\/p>\n<p><a href=\"https:\/\/granyonparty.webflow.io\/\" target=\"_blank\" rel=\"noopener\">Voir le site<\/a><\/p>\n<p>Encore un excellent exemple d\u2019application de cette tendance. Non seulement les titres sont \u00e9normes, mais le corps du texte l\u2019est aussi.<\/p>\n<p><strong>Team Elite Kickboxing<\/strong><\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-3886\" src=\"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2019\/10\/tendencias-diseno-web-2020-tipografias-3.jpg\" alt=\"tendencias dise\u00f1o web 2020 tipografias 3\" width=\"1200\" height=\"631\" \/><\/p>\n<p><a href=\"https:\/\/teamelitekickboxing.org\/\">Voir le site<\/a><\/p>\n<p>Dernier exemple pour illustrer cette tendance. On remarque aussi que ce site exploite parfaitement la tendance suivante, que nous allons aborder.<\/p>\n<h3>Contrastes, couleurs invers\u00e9es et teintes flashy<\/h3>\n<p><img decoding=\"async\" class=\"alignnone wp-image-3887 size-full\" title=\"tendencias dise\u00f1o web 2020 contrastes 1\" src=\"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2019\/10\/tendencias-diseno-web-2020-contrastes-1.jpg\" alt=\"\" width=\"1200\" height=\"631\" \/><\/p>\n<p>L\u2019utilisation de contrastes forts et de couleurs invers\u00e9es s\u2019est largement r\u00e9pandue ces derni\u00e8res ann\u00e9es dans le webdesign. En 2020, la tendance se confirme : on verra des sites percutants, qui assument pleinement ce parti pris.<\/p>\n<p>L\u00e2chez-vous avec des contrastes marqu\u00e9s et des couleurs vives. Appliquez des filtres sur vos images, que ce soit en amont (Photoshop, etc.) ou via des outils web plus r\u00e9cents comme les modes de fusion CSS ou m\u00eame le canvas.<\/p>\n<h4>Comment et quand l\u2019adopter<\/h4>\n<p>\u00c0 privil\u00e9gier sur des sites qui :<\/p>\n<ol>\n<li>ont besoin d\u2019un design tr\u00e8s visuel et impactant<\/li>\n<li>ne s\u2019adressent pas \u00e0 un public trop conservateur<\/li>\n<li>cherchent \u00e0 attirer l\u2019attention et \u00e0 ne laisser personne indiff\u00e9rent<\/li>\n<\/ol>\n<p>\u00c0 garder en t\u00eate :<\/p>\n<ol>\n<li>Pour les sites corporate \u00e0 destination d\u2019entreprises traditionnelles, utilisez cette approche avec parcimonie<\/li>\n<li>Veillez \u00e0 la coh\u00e9rence avec l\u2019identit\u00e9 visuelle et les couleurs de la marque<\/li>\n<li>M\u00eame avec du contraste, gardez une harmonie visuelle en cr\u00e9ant une palette coh\u00e9rente<\/li>\n<\/ol>\n<h4>Sites qui illustrent la tendance<\/h4>\n<p><b>Ninja guru<\/b><\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-3888\" src=\"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2019\/10\/tendencias-diseno-web-2020-contrastes-2.jpg\" alt=\"tendencias en dise\u00f1o web 2020 contrastes 2\" width=\"1200\" height=\"631\" \/><\/p>\n<p><a href=\"http:\/\/ninjaguru.eu\/\" target=\"_blank\" rel=\"noopener\">Voir le site<\/a><\/p>\n<p>Ici, les contrastes sont pouss\u00e9s \u00e0 l\u2019extr\u00eame : couleurs invers\u00e9es (noir\/blanc), associations flashy (bleu\/orange).<\/p>\n<p><strong>Festa da Francofonia 2019<\/strong><\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-3889\" src=\"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2019\/10\/tendencias-diseno-web-2020-contrastes-3.jpg\" alt=\"tendencias en dise\u00f1o web 2020 contrastes 3\" width=\"1200\" height=\"631\" \/><\/p>\n<p><a href=\"https:\/\/www.festadafrancofonia.com\/\" target=\"_blank\" rel=\"noopener\">Voir le site<\/a><\/p>\n<p>Couleurs \u00e9clatantes, contrastes, \u00e9l\u00e9ments g\u00e9om\u00e9triques anim\u00e9s\u2026 Un site qui ne laisse pas indiff\u00e9rent et illustre parfaitement cette tendance cl\u00e9 du webdesign 2020.<\/p>\n<p><strong>Kombu<\/strong><\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-3890\" src=\"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2019\/10\/tendencias-diseno-web-2020-contrastes-4.jpg\" alt=\"tendencias en dise\u00f1o web 2020 contrastes 4\" width=\"1200\" height=\"631\" \/><\/p>\n<p><a href=\"https:\/\/www.kombudrinks.com\/\">Voir le site<\/a><\/p>\n<p>Ici, le contraste est utilis\u00e9 pour diff\u00e9rencier les packagings de chaque boisson, en lien direct avec leur saveur. L\u2019effet \u00ab wavy \u00bb sur les lignes diagonales, parfaitement synchronis\u00e9 avec le packaging, est une vraie r\u00e9ussite. Un bel exemple d\u2019utilisation intelligente des contrastes et d\u2019effets JS, tout en conservant une communication adapt\u00e9e au produit.<\/p>\n<h3>L\u2019exp\u00e9rience mobile, plus cruciale que jamais<\/h3>\n<div style=\"width: 420px;\" class=\"wp-video\"><video class=\"wp-video-shortcode\" id=\"video-57411-1\" width=\"420\" height=\"746\" preload=\"metadata\" controls=\"controls\"><source type=\"video\/mp4\" src=\"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2019\/10\/mobile-first.mp4?_=1\" \/><\/video><\/div>\n<p>&nbsp;<\/p>\n<p>Aujourd\u2019hui, tout le monde conna\u00eet le responsive design. Ce n\u2019est plus vraiment une tendance, du moins si l\u2019on parle du responsive \u00ab classique \u00bb.<\/p>\n<p>Avec la majorit\u00e9 des internautes naviguant sur mobile, il est essentiel de penser \u00e0 ces utilisateurs et de leur offrir une exp\u00e9rience r\u00e9ellement adapt\u00e9e \u00e0 leur appareil et \u00e0 leurs usages. Il s\u2019agit d\u2019aller plus loin que le simple responsive, et de s\u2019inspirer des applications mobiles.<\/p>\n<p>Il ne suffit plus d\u2019avoir un site \u00ab qui s\u2019adapte \u00bb. Il faut d\u00e9sormais penser l\u2019exp\u00e9rience comme une app : si la navigation sur votre site se rapproche de celle d\u2019une application, vous serez en phase avec les attentes des utilisateurs.<\/p>\n<p>Autre point crucial pour les mobinautes : optimiser au maximum les temps de chargement.<\/p>\n<h4>Quelques conseils<\/h4>\n<ol>\n<li>\u00c9vitez le lancement automatique des vid\u00e9os, pour ne pas consommer la data de l\u2019utilisateur (surtout hors wifi)<\/li>\n<li>Optimisez les images en servant des versions adapt\u00e9es \u00e0 la largeur de l\u2019appareil, pour acc\u00e9l\u00e9rer le chargement<\/li>\n<li>Adoptez le menu \u00ab burger \u00bb pour compacter la navigation fa\u00e7on app<\/li>\n<\/ol>\n<h4>Sites qui illustrent la tendance<\/h4>\n<p><strong>Nicholas Munt<\/strong><\/p>\n<div style=\"width: 420px;\" class=\"wp-video\"><video class=\"wp-video-shortcode\" id=\"video-57411-2\" width=\"420\" height=\"746\" preload=\"metadata\" controls=\"controls\"><source type=\"video\/mp4\" src=\"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2019\/10\/tendencias-diseno-web-mobile-2.mp4?_=2\" \/><\/video><\/div>\n<p>&nbsp;<\/p>\n<p><a href=\"https:\/\/nicholasmunt.com\/\" target=\"_blank\" rel=\"noopener\">Voir le site<\/a><\/p>\n<p>Ce site utilise l\u2019ajax pour charger chaque page, ce qui le rend tr\u00e8s mobile friendly, avec une navigation proche de celle d\u2019une application.<\/p>\n<p><strong>Salmoon &amp; Sons<\/strong><\/p>\n<div style=\"width: 368px;\" class=\"wp-video\"><video class=\"wp-video-shortcode\" id=\"video-57411-3\" width=\"368\" height=\"656\" preload=\"metadata\" controls=\"controls\"><source type=\"video\/mp4\" src=\"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2019\/10\/tendencias-diseno-web-mobile-3-1.mp4?_=3\" \/><\/video><\/div>\n<p>&nbsp;<\/p>\n<p><a href=\"https:\/\/wsalamoon.com\" target=\"_blank\" rel=\"noopener\">Voir le site<\/a><\/p>\n<p>Sur la version mobile de ce site, on remarque un slider parfaitement adapt\u00e9 au swipe, avec une image qui suit le doigt \u00e0 la perfection. Le menu burger, qui glisse depuis le c\u00f4t\u00e9, est \u00e9galement tr\u00e8s r\u00e9ussi.<\/p>\n<p><strong>Volia<\/strong><\/p>\n<div style=\"width: 420px;\" class=\"wp-video\"><video class=\"wp-video-shortcode\" id=\"video-57411-4\" width=\"420\" height=\"746\" preload=\"metadata\" controls=\"controls\"><source type=\"video\/mp4\" src=\"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2019\/10\/mobile-first.mp4?_=4\" \/><\/video><\/div>\n<p>&nbsp;<\/p>\n<p><a href=\"https:\/\/studiovoila.com\" target=\"_blank\" rel=\"noopener\">Voir le site<\/a><\/p>\n<p>Ici, les typos sont tr\u00e8s grandes, mais parfaitement g\u00e9r\u00e9es m\u00eame sur mobile. Le menu burger est \u00e9galement tr\u00e8s bien con\u00e7u, avec une transition fluide et originale.<\/p>\n<h6>WOWWW MEC ! On a d\u00e9j\u00e0 publi\u00e9 le nouvel article sur les <a href=\"https:\/\/codewebbarcelona.com\/fr\/meilleurs-designs-web-2019-2020\/mejores-disenos-web-2019-2020\/\">meilleurs webdesigns 2019-2020<\/a> !!!! <a href=\"https:\/\/codewebbarcelona.com\/fr\/meilleurs-designs-web-2019-2020\/mejores-disenos-web-2019-2020\/\">Cliquez vite !<\/a><\/h6>\n<h3>Curseurs et scrollbars personnalis\u00e9s<\/h3>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-3895\" src=\"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2019\/10\/tendencias-diseno-web-2020-scroll-cursores-1.jpg\" alt=\"tendencias en dise\u00f1o web 2020 cursores 1\" width=\"1200\" height=\"631\" \/><\/p>\n<p>Une tendance qui prend de l\u2019ampleur : remplacer le curseur par d\u00e9faut du navigateur par un curseur personnalis\u00e9.<\/p>\n<p>Ces curseurs interagissent souvent avec les \u00e9l\u00e9ments du site, en changeant de taille, de couleur, etc. C\u2019est une tendance r\u00e9cente, qui va clairement s\u2019accentuer en 2020.<\/p>\n<p>M\u00eame chose pour les scrollbars : de plus en plus de sites adoptent des barres de d\u00e9filement sur-mesure, avec un effet de \u00ab smooth scrolling \u00bb.<\/p>\n<p>On voit aussi de plus en plus de sites qui n\u2019affichent plus du tout la scrollbar, m\u00eame si le contenu d\u00e9passe. Cette tendance minimaliste va s\u2019imposer : les utilisateurs sont d\u00e9sormais tellement habitu\u00e9s \u00e0 scroller qu\u2019on peut se permettre de supprimer la barre, voire de la remplacer par un simple pictogramme \u00ab scroll down \u00bb pour guider l\u2019utilisateur.<\/p>\n<h4>Comment et quand l\u2019adopter<\/h4>\n<p>\u00c0 privil\u00e9gier sur des sites qui :<\/p>\n<ol>\n<li>souhaitent affirmer leur personnalit\u00e9<\/li>\n<li>s\u2019adressent \u00e0 un public averti, habitu\u00e9 au web<\/li>\n<\/ol>\n<p>\u00c0 garder en t\u00eate :<\/p>\n<ol>\n<li>Testez le scroll sur tous les navigateurs pour garantir la compatibilit\u00e9<\/li>\n<li>Sur mobile, le scroll peut r\u00e9agir de fa\u00e7on impr\u00e9visible : mieux vaut alors le masquer compl\u00e8tement<\/li>\n<\/ol>\n<h4>Sites qui illustrent la tendance<\/h4>\n<p><strong>Aluxion<\/strong><\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-3896\" src=\"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2019\/10\/tendencias-diseno-web-2020-scroll-cursores-2.jpg\" alt=\"tendencias en dise\u00f1o web 2020 cursores 2\" width=\"1200\" height=\"631\" \/><\/p>\n<p><a href=\"https:\/\/www.aluxion.com\/\" target=\"_blank\" rel=\"noopener\">Voir le site<\/a><\/p>\n<p>Ici, le scroll personnalis\u00e9 se compose de deux cercles, un grand et un petit, qui suivent le curseur avec un l\u00e9ger d\u00e9calage et proposent un effet hover tr\u00e8s visuel. La scrollbar personnalis\u00e9e s\u2019int\u00e8gre parfaitement au design global.<\/p>\n<p><strong>Joseph Berry<\/strong><\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-3897\" src=\"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2019\/10\/tendencias-diseno-web-2020-scroll-cursores-3.jpg\" alt=\"tendencias en dise\u00f1o web 2020 cursores 3\" width=\"1200\" height=\"631\" \/><\/p>\n<p><a href=\"https:\/\/joseph-berry.webflow.io\/\">Voir le site<\/a><\/p>\n<p>Ce curseur, similaire au pr\u00e9c\u00e9dent, se distingue par sa circonf\u00e9rence ext\u00e9rieure typographique. Ici, pas de scrollbar du tout : une tendance qui va s\u2019accentuer, car les utilisateurs sont d\u00e9sormais conditionn\u00e9s \u00e0 scroller instinctivement.<\/p>\n<p><strong>Matt VBRG<\/strong><\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-3898\" src=\"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2019\/10\/tendencias-diseno-web-2020-scroll-cursores-4.jpg\" alt=\"tendencias en dise\u00f1o web 2020 cursores 4\" width=\"1200\" height=\"631\" \/><\/p>\n<p><a href=\"https:\/\/www.mattvbrg.com\/\" target=\"_blank\" rel=\"noopener\">Voir le site<\/a><\/p>\n<p>Ici, le curseur interagit avec tout le contenu du site, modifiant les couleurs et appliquant des effets visuels spectaculaires, comme l\u2019effet chrom\u00e9 sur les images.<\/p>\n<h3>Canvas et \u00e9l\u00e9ments 3D avec Three.js<\/h3>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-3901\" src=\"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2019\/10\/tendencias-diseno-web-2020-3d-3.jpg\" alt=\"tendencias en dise\u00f1o web 2020 3d 3\" width=\"1200\" height=\"631\" \/><br \/>\nL\u2019int\u00e9gration du Canvas dans le webdesign a pris une place de plus en plus importante ces derni\u00e8res ann\u00e9es, et en 2020, c\u2019est LA tendance incontournable pour cr\u00e9er des sites nouvelle g\u00e9n\u00e9ration.<\/p>\n<p>Gr\u00e2ce au canvas, on peut exploiter OpenGL pour cr\u00e9er des exp\u00e9riences qui repoussent largement les<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Si vous souhaitez rester \u00e0 la pointe et d\u00e9marrer l\u2019ann\u00e9e prochaine du bon pied, cet article vous pr\u00e9sente les grandes tendances du webdesign pour 2020 : Canvas, 3D, typographies XXL, contrastes, intelligence artificielle, machine learning, reconnaissance vocale, et bien plus encore. [superfeatured]7076[\/superfeatured] Comme chaque ann\u00e9e, nous sommes de retour pour pr\u00e9parer la suivante. \u00c0 l\u2019approche [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":12093,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[494,495,497],"class_list":["post-57411","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design-graphique","category-conception-developpement-web","category-inspiration"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.7 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Tendencias dise\u00f1o web 2020 - Estudio de dise\u00f1o web Code<\/title>\n<meta name=\"description\" content=\"Exploramos en profundidad las tendencias en dise\u00f1o web para 2020. \u00bfQu\u00e9 mejor que hacerlo con ejemplos? Inspiraci\u00f3n a tope!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/codewebbarcelona.com\/fr\/tendances-design-web-2020\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Tendencias dise\u00f1o web 2020 - Estudio de dise\u00f1o web Code\" \/>\n<meta property=\"og:description\" content=\"Exploramos en profundidad las tendencias en dise\u00f1o web para 2020. \u00bfQu\u00e9 mejor que hacerlo con ejemplos? Inspiraci\u00f3n a tope!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/codewebbarcelona.com\/fr\/tendances-design-web-2020\/\" \/>\n<meta property=\"og:site_name\" content=\"CODE\" \/>\n<meta property=\"article:published_time\" content=\"2019-10-29T18:44:01+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-06-10T13:33:14+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2019\/11\/Active-Theory-01.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1290\" \/>\n\t<meta property=\"og:image:height\" content=\"700\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"cd26Bc\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"cd26Bc\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/codewebbarcelona.com\\\/fr\\\/tendances-design-web-2020\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/codewebbarcelona.com\\\/fr\\\/tendances-design-web-2020\\\/\"},\"author\":{\"name\":\"cd26Bc\",\"@id\":\"https:\\\/\\\/codewebbarcelona.com\\\/fr\\\/#\\\/schema\\\/person\\\/3af5f44aaf0de2919e9225aa5ca32567\"},\"headline\":\"Tendances du design web 2020\",\"datePublished\":\"2019-10-29T18:44:01+00:00\",\"dateModified\":\"2026-06-10T13:33:14+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/codewebbarcelona.com\\\/fr\\\/tendances-design-web-2020\\\/\"},\"wordCount\":1709,\"image\":{\"@id\":\"https:\\\/\\\/codewebbarcelona.com\\\/fr\\\/tendances-design-web-2020\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/codewebbarcelona.com\\\/wp-content\\\/uploads\\\/2019\\\/11\\\/Active-Theory-01.jpg\",\"articleSection\":[\"Design graphique\",\"Conception et d\u00e9veloppement web\",\"Inspiration\"],\"inLanguage\":\"fr-FR\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/codewebbarcelona.com\\\/fr\\\/tendances-design-web-2020\\\/\",\"url\":\"https:\\\/\\\/codewebbarcelona.com\\\/fr\\\/tendances-design-web-2020\\\/\",\"name\":\"Tendencias dise\u00f1o web 2020 - Estudio de dise\u00f1o web Code\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/codewebbarcelona.com\\\/fr\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/codewebbarcelona.com\\\/fr\\\/tendances-design-web-2020\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/codewebbarcelona.com\\\/fr\\\/tendances-design-web-2020\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/codewebbarcelona.com\\\/wp-content\\\/uploads\\\/2019\\\/11\\\/Active-Theory-01.jpg\",\"datePublished\":\"2019-10-29T18:44:01+00:00\",\"dateModified\":\"2026-06-10T13:33:14+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/codewebbarcelona.com\\\/fr\\\/#\\\/schema\\\/person\\\/3af5f44aaf0de2919e9225aa5ca32567\"},\"description\":\"Exploramos en profundidad las tendencias en dise\u00f1o web para 2020. \u00bfQu\u00e9 mejor que hacerlo con ejemplos? Inspiraci\u00f3n a tope!\",\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/codewebbarcelona.com\\\/fr\\\/tendances-design-web-2020\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/codewebbarcelona.com\\\/fr\\\/tendances-design-web-2020\\\/#primaryimage\",\"url\":\"https:\\\/\\\/codewebbarcelona.com\\\/wp-content\\\/uploads\\\/2019\\\/11\\\/Active-Theory-01.jpg\",\"contentUrl\":\"https:\\\/\\\/codewebbarcelona.com\\\/wp-content\\\/uploads\\\/2019\\\/11\\\/Active-Theory-01.jpg\",\"width\":1290,\"height\":700},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/codewebbarcelona.com\\\/fr\\\/#website\",\"url\":\"https:\\\/\\\/codewebbarcelona.com\\\/fr\\\/\",\"name\":\"CODE\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/codewebbarcelona.com\\\/fr\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/codewebbarcelona.com\\\/fr\\\/#\\\/schema\\\/person\\\/3af5f44aaf0de2919e9225aa5ca32567\",\"name\":\"cd26Bc\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/b904e836584635855eaa0ee2922bae4fe2aa94ffb558048dcc5dac5f98f0fadc?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/b904e836584635855eaa0ee2922bae4fe2aa94ffb558048dcc5dac5f98f0fadc?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/b904e836584635855eaa0ee2922bae4fe2aa94ffb558048dcc5dac5f98f0fadc?s=96&d=mm&r=g\",\"caption\":\"cd26Bc\"},\"sameAs\":[\"https:\\\/\\\/codewebbarcelona.com\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Tendencias dise\u00f1o web 2020 - Estudio de dise\u00f1o web Code","description":"Exploramos en profundidad las tendencias en dise\u00f1o web para 2020. \u00bfQu\u00e9 mejor que hacerlo con ejemplos? Inspiraci\u00f3n a tope!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/codewebbarcelona.com\/fr\/tendances-design-web-2020\/","og_locale":"fr_FR","og_type":"article","og_title":"Tendencias dise\u00f1o web 2020 - Estudio de dise\u00f1o web Code","og_description":"Exploramos en profundidad las tendencias en dise\u00f1o web para 2020. \u00bfQu\u00e9 mejor que hacerlo con ejemplos? Inspiraci\u00f3n a tope!","og_url":"https:\/\/codewebbarcelona.com\/fr\/tendances-design-web-2020\/","og_site_name":"CODE","article_published_time":"2019-10-29T18:44:01+00:00","article_modified_time":"2026-06-10T13:33:14+00:00","og_image":[{"width":1290,"height":700,"url":"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2019\/11\/Active-Theory-01.jpg","type":"image\/jpeg"}],"author":"cd26Bc","twitter_card":"summary_large_image","twitter_misc":{"Written by":"cd26Bc","Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/codewebbarcelona.com\/fr\/tendances-design-web-2020\/#article","isPartOf":{"@id":"https:\/\/codewebbarcelona.com\/fr\/tendances-design-web-2020\/"},"author":{"name":"cd26Bc","@id":"https:\/\/codewebbarcelona.com\/fr\/#\/schema\/person\/3af5f44aaf0de2919e9225aa5ca32567"},"headline":"Tendances du design web 2020","datePublished":"2019-10-29T18:44:01+00:00","dateModified":"2026-06-10T13:33:14+00:00","mainEntityOfPage":{"@id":"https:\/\/codewebbarcelona.com\/fr\/tendances-design-web-2020\/"},"wordCount":1709,"image":{"@id":"https:\/\/codewebbarcelona.com\/fr\/tendances-design-web-2020\/#primaryimage"},"thumbnailUrl":"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2019\/11\/Active-Theory-01.jpg","articleSection":["Design graphique","Conception et d\u00e9veloppement web","Inspiration"],"inLanguage":"fr-FR"},{"@type":"WebPage","@id":"https:\/\/codewebbarcelona.com\/fr\/tendances-design-web-2020\/","url":"https:\/\/codewebbarcelona.com\/fr\/tendances-design-web-2020\/","name":"Tendencias dise\u00f1o web 2020 - Estudio de dise\u00f1o web Code","isPartOf":{"@id":"https:\/\/codewebbarcelona.com\/fr\/#website"},"primaryImageOfPage":{"@id":"https:\/\/codewebbarcelona.com\/fr\/tendances-design-web-2020\/#primaryimage"},"image":{"@id":"https:\/\/codewebbarcelona.com\/fr\/tendances-design-web-2020\/#primaryimage"},"thumbnailUrl":"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2019\/11\/Active-Theory-01.jpg","datePublished":"2019-10-29T18:44:01+00:00","dateModified":"2026-06-10T13:33:14+00:00","author":{"@id":"https:\/\/codewebbarcelona.com\/fr\/#\/schema\/person\/3af5f44aaf0de2919e9225aa5ca32567"},"description":"Exploramos en profundidad las tendencias en dise\u00f1o web para 2020. \u00bfQu\u00e9 mejor que hacerlo con ejemplos? Inspiraci\u00f3n a tope!","inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/codewebbarcelona.com\/fr\/tendances-design-web-2020\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/codewebbarcelona.com\/fr\/tendances-design-web-2020\/#primaryimage","url":"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2019\/11\/Active-Theory-01.jpg","contentUrl":"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2019\/11\/Active-Theory-01.jpg","width":1290,"height":700},{"@type":"WebSite","@id":"https:\/\/codewebbarcelona.com\/fr\/#website","url":"https:\/\/codewebbarcelona.com\/fr\/","name":"CODE","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/codewebbarcelona.com\/fr\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Person","@id":"https:\/\/codewebbarcelona.com\/fr\/#\/schema\/person\/3af5f44aaf0de2919e9225aa5ca32567","name":"cd26Bc","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/secure.gravatar.com\/avatar\/b904e836584635855eaa0ee2922bae4fe2aa94ffb558048dcc5dac5f98f0fadc?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/b904e836584635855eaa0ee2922bae4fe2aa94ffb558048dcc5dac5f98f0fadc?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b904e836584635855eaa0ee2922bae4fe2aa94ffb558048dcc5dac5f98f0fadc?s=96&d=mm&r=g","caption":"cd26Bc"},"sameAs":["https:\/\/codewebbarcelona.com"]}]}},"_links":{"self":[{"href":"https:\/\/codewebbarcelona.com\/fr\/wp-json\/wp\/v2\/posts\/57411","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codewebbarcelona.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codewebbarcelona.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codewebbarcelona.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codewebbarcelona.com\/fr\/wp-json\/wp\/v2\/comments?post=57411"}],"version-history":[{"count":2,"href":"https:\/\/codewebbarcelona.com\/fr\/wp-json\/wp\/v2\/posts\/57411\/revisions"}],"predecessor-version":[{"id":57436,"href":"https:\/\/codewebbarcelona.com\/fr\/wp-json\/wp\/v2\/posts\/57411\/revisions\/57436"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codewebbarcelona.com\/fr\/wp-json\/wp\/v2\/media\/12093"}],"wp:attachment":[{"href":"https:\/\/codewebbarcelona.com\/fr\/wp-json\/wp\/v2\/media?parent=57411"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codewebbarcelona.com\/fr\/wp-json\/wp\/v2\/categories?post=57411"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}