Après une année comme celle que nous venons de vivre, s'aventurer dans les tendances à venir prend des proportions presque utopiques. Après tout, qui aurait pensé en 2020 à quelle vitesse le monde peut et va changer ? Et à quelle vitesse nous pouvons nous adapter aux changements. Examinons ensemble les tendances du web design en 2021 !
La nouvelle normalité nous tient tous fermement en main : la technologie est devenue plus importante pour nous et plus intégrée dans notre vie quotidienne. Par conséquent, notre technologie doit évoluer dans une direction qui permette davantage de personnalisation, d'intégration et d'interaction. Et pour nous tous.
Le verrouillage, le bureau à domicile et autres ont fait que nous nous sommes davantage tournés vers le numérique. Toutefois, cette tendance entraîne également une croissance rapide des produits numériques. Il en va de même pour le secteur du commerce électronique. Tout cela exige plus d'individualité et de compétences pour pouvoir se positionner face à un plus grand nombre de concurrents.
Pour l'instant, il est important de se concentrer sur les utilisateurs finaux. Il s'agit de les étonner, de les intégrer et de personnaliser l'internet. Et de toujours se concentrer sur une fonctionnalité maximale.
Tendances du web design 2021 : entre dimension et interaction
Ainsi, au cours de la nouvelle année, nous voyons davantage de possibilités de personnalisation. On voit plus souvent la possibilité de passer du mode sombre au mode clair ou même de personnaliser les couleurs d'un dessin lui-même.
Nous voyons des dessins plus audacieux et moins symétriques. La contre-tendance à l'intégration de couleurs et d'éléments organiques demeure. Nous obtenons plus de personnalité grâce aux collages, aux médias mixtes et à l'intégration d'effets d'animation. Examinons maintenant en détail les tendances du web design en 2021 !
1. défilement
Parallax & Parallax Scroll Animations
La parallaxe, surtout pour les images simples, est une technique que nous utilisons depuis plusieurs années. Récemment, nous avons ajouté des animations complexes de défilement de parallaxe. Utilisés correctement, ils transforment votre site web d'un fond plat de type 2D en un monde numérique interactif - comparable à une scène de théâtre.
Qu'est-ce que l'effet parallaxe ?
Les effets de parallaxe se produisent lorsque les éléments sont situés à des distances différentes les uns des autres. Si ceux-ci se déplacent en défilant, nous percevons leur mouvement comme des vitesses différentes.
Veuillez noter : Pour les utilisateurs qui souffrent de vertiges, trop de mouvements sur votre site web peut provoquer un malaise.
Quelques conseils pour réussir l'intégration de l'effet Parallax :
- Veillez à ce que les informations importantes soient toujours présentées clairement et ne soient pas éclipsées par l'effet.
- Veillez à ce que toutes les fonctionnalités de votre site soient maintenues sur tous les appareils, même dans des conditions sous-optimales, comme une mauvaise réception de l'Internet.
- Minimiser l'utilisation des effets de parallaxe.
- Envisagez d'inclure une option permettant de désactiver l'effet.
Le site web du jeu Firewatch utilise huit images PNG différentes dans l'en-tête, qui sont animées ensemble pour donner l'impression d'un vrai paysage. Dans la version mobile, cependant, l'effet de parallaxe est remplacé par une image statique.
Animations de défilement
Les animations à défilement étendues ne sont pas non plus entièrement nouvelles, mais elles ont reçu moins d'attention jusqu'à présent - probablement parce que leur composition exige des compétences en dessin. Comme toujours, moins c'est plus. Bien utilisées, les animations défilantes donnent à votre site web un flux harmonieux.
ToyFight est une agence de création basée à Manchester. Grâce à l'utilisation intelligente d'animations à défilement, l'agence ajoute de la vitalité et de la personnalité à son site web. Même sur des appareils plus petits, les animations fonctionnent - même si le temps de chargement est quelque peu affecté.
La société Prevint propose un concept global contre la violence sexualisée. Grâce à l'utilisation minimale d'animations défilantes, les trois plus importantes précautions de prévention sont visualisées. L'utilisation du défilement vertical et horizontal est particulière : La navigation principale se fait sur un niveau vertical, tandis que le défilement horizontal permet d'approfondir le sujet respectif.
Les flèches de navigation au bas de l'écran fournissent une orientation supplémentaire. Côté mobile, la navigation se fait en appuyant uniquement sur des boutons.
Défilement horizontal
Même si les opinions sur le défilement horizontal ont beaucoup varié dans le passé, nous voyons des sites web l'utiliser de plus en plus souvent. Surtout du point de vue de l'expérience des utilisateurs, leur utilisation était auparavant considérée comme plutôt douteuse.
Le site web de Home Société, construit comme un seul pager, fonctionne de manière totalement horizontale. La navigation collante, que l'on trouve généralement en haut, se trouve sur le côté gauche. Il fonctionne de la même manière avec les Anchor Links que dans un One Pager orienté verticalement. Sur le mobile, on obtient la page affichée verticalement.
Le site web de Kwok Yin Mak est un portfolio de design qui défile horizontalement à travers toutes les pages intégrées. La différence avec la Home Société est l'utilisation du défilement infini: si vous arrivez à la fin d'une page, vous êtes ramené au début sans être remarqué. Cette page se passe également de défilement horizontal sur une base mobile.
Quelques conseils pour réussir l'intégration du défilement horizontal :
- Donnez à vos utilisateurs un plan B, tel que des flèches ou un menu collant, pour naviguer sur votre site.
- Réfléchissez au contenu de votre page qui bénéficiera du défilement horizontal.
- Essayez de vous en tenir à une seule direction autant que possible. Passer d'une direction à l'autre trop souvent sème la confusion chez vos utilisateurs.
- Faites attention au mélange de textes longs et de défilement horizontal. Cette mise en page peut rendre vos textes moins lisibles.
Quelle est la police qui convient à mon site web ?
Une police de caractères adaptée rend votre site web non seulement visuellement beaucoup plus intéressant. Les polices de caractères ont une influence décisive sur le fait que des parties de texte soient ignorées ou lues. Dans ce Poster Je vais vous montrer comment trouver la police parfaite pour votre site web !
Défilement
Le scrolling est une narration visuelle par le biais d'un défilement animé. Cela donne au site web une personnalité et un sens de l'interactivité. Le contenu long est présenté de manière à être facilement digérable. Les histoires sont construites de manière plus intéressante et communiquées de manière plus attrayante. L'internet est de plus en plus utilisé comme un moyen de raconter des histoires de manière interactive.
Le New York Times utilise ici une approche relativement minimaliste. L'image d'en-tête consiste en un effet de parallaxe suivi de beaucoup de texte. Il est présenté sous forme de paragraphes clairs et est soutenu visuellement par des sections de parallaxe en style comique.
Meilleures pratiques, conseils et lignes directrices en matière de conception de sites web
Qu'est-ce qui fait un bon design web ? Et qu'est-ce que nous définissons comme norme de conception ? Vous trouverez les conseils les plus importants pour des sites web réussis dans mon article sur les meilleures pratiques en matière de conception web.
Un exemple intéressant est également le Webflow. Le site vous invite à un voyage à travers l'histoire de l'art à la recherche des tendances du web design de demain.
L'effet ne perd pas non plus de son attrait en cours de route.
canals-amsterdam.nl combine le défilement avec la navigation horizontale, l'animation et la parallaxe. Un détail particulier : le menu collant change de couleur de fond en fonction de la couleur de la position actuelle. Vous trouverez de plus amples informations à ce sujet dans le guide de défilement.
Cartes à défilement
Par défilement de cartes, nous entendons le défilement vertical ou horizontal, qui s 'enclenche dans la fenêtre suivante avant que nous ne poursuivions notre navigation. Vous pouvez le souligner visuellement, par exemple, par des séparations colorées, qui donnent l'impression de cartes, comme dans l'exemple de Green Meadow.
Les autres particularités sont les animations de texte qui se rechargent sans cesse, ainsi que le défilement infini, qui nous donne l'impression d'un site web infini.
2. les compositions et la mise en page des dessins
Intégration des caractéristiques physiques du produit à vendre
Ora London vend entre autres du vernis à ongles. Pour la mise en page de leur site web, ils utilisent la texture de leur produit.
Sur le site web de Main Squeeze Juice, il y a des taches de couleur qui pourraient ressembler à une version lavée de leurs jus de fruits. Cet effet est également utilisé pour certaines rubriques.
Ora The Floral Agency a mis en valeur visuellement son site web avec des fleurs de sa gamme.
Néomorphisme
Le néumorphisme ou nouveau morphisme est déclaré comme une tendance depuis un certain temps. Mais si les dessins minimalistes ont été traités avec aversion dans le milieu de la création, c'est principalement pour ces deux raisons :
- Le néumorphisme est difficile à reproduire. S'il n'est pas créé correctement, le dessin a rapidement l'air peu professionnel.
- En raison de la douceur des ombres et du faible contraste, les éléments du nouveau morphisme peuvent poser des problèmes à l'utilisateur final.
En 2021, la tendance au néumorphisme devrait prendre un peu plus d'ampleur. Le modèle Neu Vision montre une intégration conviviale du néomorphisme au quotidien.
Tutoriel : Comment créer de nouveaux éléments de morphisme
Avec l'outil Neumorphism.io, vous pouvez vous essayer au Neumorphisme. Le code CSS correspondant est inclus dans le paquet. Vous trouverez plus d'informations sur le sujet dans cet article.
Compositions abstraites, collage et médias mixtes
Comme mentionné précédemment, les sites web sont autorisés à montrer plus de personnalité. L'une des façons d'y parvenir est de recourir à des compositions abstraites ou à des collages. Le mélange de différents supports - qu'il s'agisse d'illustrations dessinées à la main associées à des formes géométriques parfaites - est également autorisé.
City Circus utilise des collages sur tout son site web.
Effet de flou et de verre givré
L'effet de verre dép oli est idéal pour rendre le texte des images lisible. Il peut également être utilisé comme effet de survol. Un tutoriel sur la façon d'implémenter l'effet Frosted Glass dans CSS peut être trouvé ici.
3. les couleurs
Organique et discret
Le site web pureorganix.ca a tendance à utiliser peu de couleurs naturelles et vives. Les teintes organiques existent depuis un certain temps et resteront un thème en 2021.
Noir Blanc
L'absence totale de couleur donne à votre site web un aspect minimaliste, épuré et propre. La touche de sérieux créée par l'omission des teintes amicales a été bien équilibrée par l'utilisation d'illustrations de la base de données UX.
Conception de l'UX et utilisation du Web
Pourquoi devriez-vous vous intéresser à la convivialité et à l'expérience des utilisateurs en tant que concepteur de sites web ? Et comment obtenir une réelle valeur ajoutée pour vos utilisateurs grâce à une bonne UX ? Je vous en dirai plus dans cet article.
4. 3D
Icônes et images
Comme pour la réalité virtuelle (RV), nous attendons depuis un certain temps déjà que les objets 3D fassent enfin leur grande percée. Comme au début de chaque année, les éléments 3D et la RV devraient jouer un rôle plus important à partir de maintenant. Il n'y aura pas de différence en 2021.
Les éléments 3D seront de plus en plus utilisés en 2021 : par exemple, en remplacement des icônes et illustrations 2D, pour représenter les produits, et comme éléments de conception géométrique.
Nous verrons également la 3D comme une partie interactive du site web, comme c'est le cas pour l'agence Dogstudio.
Ou en tant qu'élément statique ou animé, comme le montre l'exemple suivant.
E-Commerce
La réalité augmentée a déjà été utilisée sporadiquement à des fins de commerce électronique dans le passé. Comme avec l'application IKEA.
Diesel, en revanche, s'appuie davantage sur la variété interactive en 3D.
Les deux approches sont judicieuses pour le produit concerné. Pouvoir tester virtuellement des meubles dans votre future maison ne réduit pas seulement les chances de faire un mauvais achat. L'application est également amusante et incite à la décoration et au shopping.
Diesel, en revanche, essaie de créer une sorte de sensation 3D en permettant aux utilisateurs finaux d'examiner et de sentir virtuellement le produit avant de l'acheter.
Dans le passé, l'intégration d'éléments de réalité augmentée/virtuelle et d'éléments 3D était souvent très coûteuse et donc réservée aux grandes entreprises. Avec les nouveaux outils, l'intégration de la réalité augmentée (RA) est désormais possible pour les petites entreprises.
Voici deux exemples :
5. contenu
Le web devient plus personnel, plus interactif et s'adapte à nous
Google offre un exemple d'interactivité avec son Blob Opera. Les propres créations peuvent également être enregistrées et donc partagées avec tout le monde.
Sur la page de contact de Madwell, chaque élément graphique est interactif.
Avec beaucoup de personnalité, Sennep propose ses services.
Conception de sites web pour les causes
De plus, 2020 vient de montrer que nous pouvons tous nous mettre en réseau et que nous devons même partiellement le faire. Le web est devenu plus humain. La conception de sites web pour des causes devient de plus en plus pertinente. Les sites web éthiques, les sites web verts, les sites web qui défendent nos intérêts et ceux de nos semblables (pour ne citer que quelques sujets) ont pris beaucoup d'importance l'année dernière. Nous pouvons nous attendre à ce que cette tendance se poursuive fortement au moins en 2021.
Conclusion
Rester en contact avec des amis du monde entier, travailler à distance, commercialiser des produits et des services en ligne - tout cela n'a rien de nouveau. Et pourtant, jusqu'à présent, elle a plutôt été une réalité pour une minorité de la population.
De nombreuses entreprises et personnes dans ce pays ont jusqu'à présent abordé le sujet de manière plutôt traditionnelle : Nous avons les possibilités de présence sur le web et de mise en réseau, mais nous ne les utilisons que de manière secondaire. Le contact personnel était au premier plan.
La fonctionnalité de nos produits en ligne est donc particulièrement importante - aussi parce que la concurrence est beaucoup plus grande. Et à l'avenir, nous ne pouvons plus nous permettre d'ignorer des sujets tels que l'accessibilité.
Bien entendu, un appel vidéo ne peut pas remplacer une importante réunion en face à face. Mais peut-être apprendrons-nous à travers la situation actuelle à distinguer entre les réunions vraiment importantes et ce qui peut éventuellement être fait à l'aide d'un coup de téléphone. Cette approche se reflète souvent dans la qualité de la présence numérique.
Des phrases comme "Si quelqu'un veut savoir, il nous appellera ou nous demandera" sont quelque chose que j'ai entendu plus souvent par le passé lors de la planification de projets en ligne. Avec l'accent mis sur l'isolement et le télétravail, nous n'avons plus ce luxe.
C'est pourquoi la conception, les performances et la convivialité des téléphones portables, entre autres, resteront des facteurs importants dans la création de votre site web en 2021.
En chargeant le tweet, vous acceptez la politique de confidentialité de Twitter.
En savoir plus
Commentaires sur cet article