![\"tendances](\"https:\/\/academy.visiplus.com\/blog\/wp-content\/uploads\/2021\/07\/couleurs-lumineuses-tendances-webdesign-2021.jpg\")
<\/figcaption><\/figure><\/div>\n\n\n\n
Une tendance que s’explique facilement, les consommateurs ayant plus que jamais :<\/p>\n\n\n\n
- besoin de joie, de chaleur et de r\u00e9confort pour \u00e9chapper au climat anxiog\u00e8ne cr\u00e9\u00e9 par la crise sanitaire ;<\/li>
- l’envie de se replonger dans leurs \u00ab\u00a0tendres ann\u00e9es\u00a0\u00bb, lorsque la vie \u00e9tait beaucoup plus simple qu’aujourd’hui…<\/li><\/ul>\n\n\n\n
Rien d’\u00e9tonnant donc \u00e0 ce que les webdesigners s’inspirent fortement des ann\u00e9es 80 pour cr\u00e9er leurs cocktails de couleurs vitamin\u00e9es<\/strong>. Jusqu’\u00e0 reproduire parfois les mythiques enseignes n\u00e9ons de l’\u00e9poque pour jouer \u00e0 fond la carte de la nostalgie !<\/p>\n\n\n\n
Bon \u00e0 savoir \u00e9galement : pour chaque tendance Webdesign, il existe une contre-tendance. Certaines entreprises optent ainsi pour un style minimaliste en noir et blanc. Avantage : cela leur permet de se d\u00e9marquer sur la Toile au milieu de cette \u00ab\u00a0vague color\u00e9e\u00a0\u00bb. Sans parler du fait que ce style peut vraiment \u00eatre tr\u00e8s \u00e9l\u00e9gant quand il est bien ma\u00eetris\u00e9 ! En revanche, il risque de para\u00eetre bien froid aux visiteurs \u00e0 notre \u00e9poque : \u00e0 vous de trancher. <\/p>\n\n\n\n
Effets 3D : focus sur 2 tendances fortes du Webdesign en 2021<\/h2>\n\n\n\n
De la typographie jusqu’aux illustrations en passant par les animations, la 3D et les effets de profondeurs envahissent de plus en plus la Toile ! Un ph\u00e9nom\u00e8ne qui s’explique \u00e0 la fois par : <\/p>\n\n\n\n
- le fait que les marques cherchent \u00e0 proposer des exp\u00e9riences toujours plus immersives et proches de la r\u00e9alit\u00e9 pour garder le lien avec leur client\u00e8le durant la pand\u00e9mie ;<\/li>
- la d\u00e9mocratisation des logiciels 3D. En effet, beaucoup d’entre eux sont d\u00e9sormais accessibles aux d\u00e9butants et aux petites bourses, comme la suite de cr\u00e9ation 3D gratuite et open source Blender <\/a>par exemple. <\/li><\/ul>\n\n\n\n
Si diff\u00e9rentes techniques sont utilis\u00e9es, nous retenons surtout la mont\u00e9e en puissance des animations complexes en scroll parallaxe et des pr\u00e9sentations interactives en 3D sur les sites e-commerce en 2021 !<\/p>\n\n\n\n
Le scroll parallaxe, c’est quoi ?<\/h3>\n\n\n\n
Pour rappel, le scroll parallaxe ou d\u00e9filement parallaxe est une animation qui s’actionne lorsque l’internaute fait d\u00e9filer la page. Comme son nom l’indique, elle s’appuie sur l’effet parallaxe, une illusion d’optique bien connue dans le monde r\u00e9el. <\/p>\n\n\n\n
\u00ab\u00a0Les effets parallaxe se produisent lorsque les \u00e9l\u00e9ments sont situ\u00e9s \u00e0 des distances diff\u00e9rentes les uns des autres. Si ceux-ci se d\u00e9placent en d\u00e9filant, nous percevons leur mouvement \u00e0 des vitesses diff\u00e9rentes.\u00a0\u00bb<\/p> Source : Raidboxes <\/cite><\/blockquote>\n\n\n\n
Plus concr\u00e8tement, le principe est de faire d\u00e9filer l’image d’arri\u00e8re-plan moins vite que les \u00e9l\u00e9ments situ\u00e9s \u00ab\u00a0au premier plan\u00a0\u00bb de votre page pour donner une impression de profondeur proche de la 3D<\/strong>. Si cette technique est utilis\u00e9e depuis les ann\u00e9es 2010, elle servait surtout \u00e0 cr\u00e9er des effets tr\u00e8s simples. Depuis quelques mois en revanche, on voit de plus en plus d’entreprises proposer des animations complexes, faisant d\u00e9filer jusqu’\u00e0 8 images superpos\u00e9es \u00e0 des vitesses diff\u00e9rentes pour transformer leur site en une v\u00e9ritable petite sc\u00e8ne de th\u00e9\u00e2tre. Effet Waouh garanti lorsque cette technique est bien ma\u00eetris\u00e9e ! Vous en trouverez notamment un tr\u00e8s bel exemple sur le site de dogstudio<\/a>, qui marie parfaitement animation 3D et d\u00e9filement parallaxe. <\/p>\n\n\n\n
![\"Webdesign](\"https:\/\/academy.visiplus.com\/blog\/wp-content\/uploads\/2021\/07\/webdesign-2021-tendances-animations-complexes-parallaxe.jpg\")
Capture d’\u00e9cran dogstudio<\/figcaption><\/figure><\/div>\n\n\n\n \u00c0 noter \u00e9galement que de nombreuses entreprises emploient cette technique pour dynamiser leur storytelling : on parle alors plus pr\u00e9cis\u00e9ment de scrollitelling<\/strong>. Une tendance forte que l’on retrouve d’ailleurs aussi dans les m\u00e9dias en ligne ! Vous pouvez ainsi en voir un exemple int\u00e9ressant dans le New York Times.<\/a><\/p>\n\n\n\n
Conseil bonus : si le scroll parallaxe peut provoquer un v\u00e9ritable effet Waouh, retenez qu’il d\u00e9clenche parfois aussi des vertiges. Mieux vaut donc ajouter une option permettant de le d\u00e9sactiver par pr\u00e9caution : vos visiteurs les plus \u00ab\u00a0sensibles\u00a0\u00bb vous en seront reconnaissants… Et ne fuiront pas votre site !<\/p>\n\n\n\n
Les pr\u00e9sentations interactives en 3D \u00e0 l’honneur sur les sites e-commerce <\/h3>\n\n\n\n
En 2021, de plus en plus de marques optent \u00e9galement pour des pr\u00e9sentations interactives en 3D de leurs produits. En quelques clics, leurs clients peuvent ainsi manipuler et examiner l’article de leurs r\u00eaves sous toutes ses coutures, (pratiquement) comme ils le feraient en magasin. Une tr\u00e8s belle id\u00e9e pour r\u00e9enchanter le parcours clients en ligne<\/strong> !<\/p>\n\n\n\n
Certaines marques, comme Deejo <\/a>par exemple, incluent m\u00eame des options de personnalisation qui s’affichent en temps r\u00e9el selon les choix du visiteur. N’h\u00e9sitez pas \u00e0 vous en inspirer !<\/p>\n\n\n\n
![\"tendances](\"https:\/\/academy.visiplus.com\/blog\/wp-content\/uploads\/2021\/07\/webdesign-2021-tendances-pr\u00e9sentation-produits-3d.jpg\")
Capture d’\u00e9cran Deejo<\/figcaption><\/figure><\/div>\n\n\n\n Conseil bonus : pensez \u00e0 int\u00e9grer un petit mode d’emploi, pour que vos visiteurs comprennent tout de suite qu’ils peuvent interagir avec le produit via leur souris ou les fl\u00e8ches directionnelles de leur clavier !<\/p>\n\n\n\n
Le \u00ab\u00a0fait-main\u00a0\u00bb s’impose sur la Toile !<\/h2>\n\n\n\n
\u00c9criture manuscrite, pictogrammes et autres illustrations esquiss\u00e9es au crayon… Pas de doute : le Handmade <\/strong>compte bien parmi les tendances Webdesign de 2021 ! L\u00e0 encore, on peut y voir un lien avec la crise sanitaire, les p\u00e9riodes de confinement ayant grandement renforc\u00e9 l’attrait de la population pour le DIY (Do It Yourself) : il fallait bien trouver une fa\u00e7on de s’occuper… <\/p>\n\n\n\n
D’apr\u00e8s un sondage Toluna r\u00e9alis\u00e9 en octobre 2020, 96% des Fran\u00e7ais ont pratiqu\u00e9 le DIY l’an dernier.<\/p>Source : LSA<\/a><\/cite><\/blockquote>\n\n\n\n
Pensez-y pour humaniser le site de votre entreprise et lui donner un c\u00f4t\u00e9 plus \u00ab\u00a0authentique\u00a0\u00bb. C’est une bonne mani\u00e8re de vous rapprocher de vos clients !<\/p>\n\n\n\n
Bon \u00e0 savoir \u00e9galement : l’esprit DIY n’envahit pas seulement le Webdesign. En effet, de nombreuses enseignes d\u00e9veloppent aussi de nouveaux produits pour aider leurs clients \u00e0 r\u00e9aliser leurs propres cr\u00e9ations en 2021 !<\/p>\n\n\n\n
![\"La](\"https:\/\/academy.visiplus.com\/blog\/wp-content\/uploads\/2021\/07\/DIY-webdesign2021.gif\")
<\/figure><\/div>\n\n\n\nAnimer au maximum son site : l’une des tendances phares du Webdesign en 2021<\/h2>\n\n\n\n
Exit les sites statiques ! Cette ann\u00e9e, la tendance est de proposer les sites les plus vivants, immersifs et interactifs possibles. D’o\u00f9 un recours massif aux animations de toutes sortes !<\/p>\n\n\n\n
Si on peut une fois encore citer la mont\u00e9e en puissance du scroll parallaxe, les micro-interactions<\/strong> (ex. : barre de chargement, modification de l’apparence d’un bouton lorsqu’un visiteur clique dessus) se font \u00e9galement beaucoup plus nombreuses et \u00ab\u00a0voyantes\u00a0\u00bb que par le pass\u00e9, gr\u00e2ce \u00e0 des animations plus travaill\u00e9es et plus humoristiques. Une bonne fa\u00e7on d’optimiser l’UX (exp\u00e9rience utilisateur) ! En effet, non contentes d’\u00eatre ludiques, ces micro-interactions rassurent \u00e9galement vos visiteurs. Gr\u00e2ce \u00e0 elles, ils sont s\u00fbrs que chacune des actions qu’ils effectuent sur votre site est bien prise en compte. <\/p>\n\n\n\n
Quant aux vid\u00e9os, elles restent tr\u00e8s pris\u00e9es sur les sites d’entreprise en 2021. Surtout en background ! Elles permettent alors de capter l’attention des internautes et de leur fournir visuellement des informations importantes. Etant \u00e9tendu qu’ils ne prennent plus forc\u00e9ment le temps de lire les contenus textuels \u00e0 notre \u00e9poque…<\/p>\n\n\n\n
Cela \u00e9tant dit, gardez toujours \u00e0 l’esprit que les vid\u00e9os comptent parmi les formats les plus lourds du web. Elles peuvent donc drastiquement ralentir le chargement de vos pages si vous en utilisez trop ! C’est pourquoi les webdesigners pr\u00e9f\u00e8rent multiplier les animations \u00ab\u00a0l\u00e9g\u00e8res\u00a0\u00bb, pour donner un maximum de vie au site tout en pr\u00e9servant la qualit\u00e9 de l’exp\u00e9rience utilisateur<\/strong>. Comme les animations Lotties <\/a>par exemple ! <\/p>\n\n\n\n
![\"Le](\"https:\/\/academy.visiplus.com\/blog\/wp-content\/uploads\/2021\/07\/webdesign-tendances-2021-lottie.jpg\")
Capture d’\u00e9cran LottieFiles<\/figcaption><\/figure><\/div>\n\n\n\n M\u00e9langer photographie et illustration, c’est tendance en 2021 !<\/h2>\n\n\n\n
De plus en plus de webdesigners osent \u00ab\u00a0fusionner\u00a0\u00bb les photographies et les illustrations cette ann\u00e9e. Une technique int\u00e9ressante, qui permet \u00e0 la fois de :<\/p>\n\n\n\n
- donner une identit\u00e9 visuelle unique au site. Top pour se d\u00e9marquer des concurrents ;<\/li>
- faire passer facilement les messages les plus complexes<\/strong> ;<\/li>
- cr\u00e9er une atmosph\u00e8re plus chaleureuse et amusante, particuli\u00e8rement appr\u00e9ciable en cette p\u00e9riode de pand\u00e9mie… <\/li><\/ul>\n\n\n\n
Bref : vous aussi, n’h\u00e9sitez pas \u00e0 adopter cette bonne pratique !<\/p>\n\n\n\n
![\"Tendances](\"https:\/\/academy.visiplus.com\/blog\/wp-content\/uploads\/2021\/07\/webdesign-tendances-2021-m\u00e9langer-photgraphie-et-illustration.jpg\")
Capture d’\u00e9cran Michel & Augustin<\/figcaption><\/figure><\/div>\n\n\n\n L’asym\u00e9trie conna\u00eet toujours un succ\u00e8s croissant<\/h2>\n\n\n\n
Les sites aux sections parfaitement align\u00e9es ont longtemps r\u00e9gn\u00e9 sans partage sur la Toile. Mais d\u00e8s 2018, les designs asym\u00e9triques ont commenc\u00e9 \u00e0 gagner du terrain. Pourquoi ? En grande partie parce qu’ils permettent de donner plus de dynamisme et de personnalit\u00e9 aux interfaces. Ils leur conf\u00e8rent \u00e9galement un c\u00f4t\u00e9 beaucoup plus \u00ab\u00a0organique\u00a0\u00bb et naturel. Sans surprise, ce ph\u00e9nom\u00e8ne s’acc\u00e9l\u00e8re encore en 2021 car il s’inscrit parfaitement dans la tendance de cr\u00e9er des sites plus humains, vivants et chaleureux <\/strong>! <\/p>\n\n\n\n
Certes, obtenir un r\u00e9sultat \u00e0 la fois harmonieux et pratique pour les internautes demande alors une certaine ma\u00eetrise. Notamment dans le domaine du responsive webdesign<\/a> car les mises en page asym\u00e9triques sont plus d\u00e9licates \u00e0 adapter sur mobile. Cependant, tous ces efforts en valent la peine pour vous distinguer sur le Net et capter l’attention de vos visiteurs !<\/p>\n\n\n\n
Tendances Webdesign : les emojis s’invitent de plus en plus sur les sites internet en 2021<\/h2>\n\n\n\n
Apr\u00e8s avoir envahi les SMS, les r\u00e9seaux sociaux, les newsletters et les messages publicitaires, les emojis trouvent d\u00e9sormais \u00e9galement leur place sur les sites internet. Soit dans les illustrations, soit directement dans le corps du texte ! Dans un cas comme dans l’autre, ils sont surtout utilis\u00e9s pour v\u00e9hiculer facilement des \u00e9motions et instaurer un sentiment de complicit\u00e9 avec les visiteurs<\/strong>. Les emojis transmettent en effet, les \u00e9motions beaucoup plus rapidement et explicitement que les textes ! Un gros atout, surtout \u00e0 notre \u00e9poque o\u00f9 les gens lisent beaucoup moins…<\/p>\n\n\n\n
Autres avantages : <\/p>\n\n\n\n
- les emojis ne connaissent pas la \u00ab\u00a0barri\u00e8re de la langue\u00a0\u00bb car ils conservent la m\u00eame signification dans tous les pays. Du moins pour les plus connus d’entre eux !<\/li>
- quel que soit leur \u00e2ge, la tr\u00e8s grande majorit\u00e9 des visiteurs comprennent parfaitement la signification des emojis, car ils les utilisent eux-m\u00eames r\u00e9guli\u00e8rement dans leurs SMS ou sur les r\u00e9seaux sociaux. <\/li><\/ul>\n\n\n\n
N’h\u00e9sitez donc pas vous aussi \u00e0 les utiliser !<\/p>\n\n\n\n
Webdesign : 2 grandes tendances de la typographie en 2021<\/h2>\n\n\n\n
Jouez la carte de la nostalgie <\/h3>\n\n\n\n
Si la typographie 3D est en hausse, force est de reconna\u00eetre que beaucoup d’entreprises pr\u00e9f\u00e8rent faire vibrer la corde nostalgique de leur client\u00e8le avec :<\/p>\n\n\n\n
- des polices con\u00e7ues sp\u00e9cialement dans un style r\u00e9tro ou vintage,<\/strong> comme les polices \u00ab\u00a0Monthoers\u00a0\u00bb, \u00ab\u00a0Lazer 84\u00a0\u00bb et \u00ab\u00a0Alt retro\u00a0\u00bb par exemple ;<\/li>
- ou tout simplement les ind\u00e9modables typographies \u00e0 empattement <\/strong>(\u00ab\u00a0serif\u00a0\u00bb) utilis\u00e9es par les journaux depuis d\u00e9j\u00e0 de nombreuses ann\u00e9es. Parmi elles citons par exemple la c\u00e9l\u00e8bre police Times New Roman, cr\u00e9\u00e9e \u00e0 l’origine pour le journal The Times dans les ann\u00e9es 1930 !<\/li><\/ul>\n\n\n\n
![\"Les](\"https:\/\/academy.visiplus.com\/blog\/wp-content\/uploads\/2021\/07\/webdesign-tendances-2021-les-polices-r\u00e9tro-sont-en-vogue.jpg\")
Source : dafont<\/figcaption><\/figure><\/div>\n\n\n\n Le texte s’affiche en (tr\u00e8s) grand !<\/h3>\n\n\n\n
Derni\u00e8re grande tendance Webdesign 2021 de notre s\u00e9lection, mais non des moindres : utiliser des polices surdimensionn\u00e9es.<\/strong> Et ce, aussi bien pour les titres que dans le corps m\u00eame des paragraphes. <\/p>\n\n\n\n
Bien entendu, l’objectif est d’attirer l’attention des visiteurs sur le texte pour les inciter \u00e0 le lire. Une strat\u00e9gie qui s’av\u00e8re d’ailleurs souvent payante, du moment que le message est court et percutant !<\/p>\n\n\n\n
Pour aller plus loin…<\/h2>\n\n\n\n
Nous vous avons pr\u00e9sent\u00e9 les bonnes pratiques de l’ann\u00e9e 2021 pour optimiser votre site d’entreprise, mais force est de reconna\u00eetre que vous devez ma\u00eetriser de nombreux outils (ex. : Photoshop, InDesign) et techniques pour les appliquer correctement… Si vous manquez d’exp\u00e9rience dans le domaine, envisagez donc de suivre une formation en design graphique <\/a>pour bien commencer !<\/p>\n\n\n\n
Cela \u00e9tant dit, si vous \u00eates vraiment passionn\u00e9(e) par le Webdesign, pourquoi ne pas en faire votre nouveau m\u00e9tier ? De nos jours, vous trouverez facilement une formation professionnelle permettant de devenir Webdesigner ou UX designer<\/a> (sp\u00e9cialisation du Webdesign ax\u00e9e sur l’optimisation de l’exp\u00e9rience utilisateur). Vous pourrez m\u00eame la suivre int\u00e9gralement en ligne selon l’organisme de formation ! Le top pour : <\/p>\n\n\n\n
- ou tout simplement les ind\u00e9modables typographies \u00e0 empattement <\/strong>(\u00ab\u00a0serif\u00a0\u00bb) utilis\u00e9es par les journaux depuis d\u00e9j\u00e0 de nombreuses ann\u00e9es. Parmi elles citons par exemple la c\u00e9l\u00e8bre police Times New Roman, cr\u00e9\u00e9e \u00e0 l’origine pour le journal The Times dans les ann\u00e9es 1930 !<\/li><\/ul>\n\n\n\n
- des polices con\u00e7ues sp\u00e9cialement dans un style r\u00e9tro ou vintage,<\/strong> comme les polices \u00ab\u00a0Monthoers\u00a0\u00bb, \u00ab\u00a0Lazer 84\u00a0\u00bb et \u00ab\u00a0Alt retro\u00a0\u00bb par exemple ;<\/li>
- cr\u00e9er une atmosph\u00e8re plus chaleureuse et amusante, particuli\u00e8rement appr\u00e9ciable en cette p\u00e9riode de pand\u00e9mie… <\/li><\/ul>\n\n\n\n