La revue des tendances de la conception Web 2021 est ici! Découvrez comment des designers distingués conçoivent leurs sites Web et comment leurs tendances deviennent les meilleures pratiques pour la création Web en 2021.
Les tendances du design sont souvent influencées par les changements culturels qui se produisent dans le monde entier. Cette année, nous avons connu des changements remarquablement spectaculaires dans le domaine de la conception numérique. COVID-19 nous a mis en quarantaine, nous poussant à plonger plus profondément dans le monde numérique et à changer la façon dont nous vivons nos vies. La réalité à distance, rester à la maison à laquelle nous avons été confrontés a mis les concepteurs au défi de recréer des expériences de la vie réelle et de les rendre disponibles numériquement.
Les créateurs Web se sont montrés à la hauteur en explorant plusieurs voies de communication visuelle qui peuvent générer des niveaux d’engagement accrus. Cela comprend l’art de la typographie de nouveauté, les jeux de couleurs inhabituels, les simulations de produits 3D pour les acheteurs en ligne, pour n’en nommer que quelques-uns.
Dans ces 13 exemples, vous trouverez des tendances individuelles qui s’adaptent chacune à des industries et à des personnalités d’utilisateurs distinctes. Il est essentiel de se rappeler que la mise en œuvre de ces styles n’est pas simplement une décision esthétique. Il s’agit essentiellement d’un équilibre entre la qualité et la quantité. Cela signifie que l’application d’autant de tendances que possible à un site Web ne permettra pas d’atteindre nos objectifs de création Web. Décider quelle tendance spécifique convient à nos objectifs commerciaux, cependant, est ce qui aura un impact positif sur notre public et son plan d’action.
Tendances de conception de typographie
1. Polices Serif élégantes
La vieille croyance d’utiliser des polices sans empattement comme style de police de choix pour la conception Web a changé avec le temps. En effet, les polices sans empattement ont toujours été appréciées des concepteurs Web pour leur lisibilité élégante et leur structure simple.
Avance rapide jusqu’en 2021: les tailles d’écran et les résolutions sont plus grandes et plus claires qu’elles ne l’étaient autrefois. Contrairement à leurs prédécesseurs «dépassés», tels que les moniteurs CRT des années 1980, les écrans pour lesquels nous concevons maintenant sont plus invitants aux polices à empattement décorées et plus lourdes. Des écrans plus grands, par exemple, permettent aux polices serif de paraître moins encombrées et plus lisibles – grâce à un espace accru autour des mots. De même, la résolution plus élevée rend les lettres les plus lourdes ou les plus illustres plus claires.
Il existe en fait des familles de polices serif spécifiques que les concepteurs adorent, pour lesquelles nous avons remarqué une préférence marquée pour les polices de style «élégant». Des exemples de tels incluent les familles de polices bien connues Georgia ou Times (toutes deux trouvées dans Google Fonts ). Les polices moins connues sont également devenues populaires, telles que Portrait ou Noe Display.
Comme nous le voyons dans l’exemple ci-dessus, ferdu.be (qui d’ailleurs était un gagnant pour notre Showcase d’août 2020 ), utilise Noe Display pour son texte de héros, qui est sans aucun doute très lisible et clair sur son fond sombre. Il y a beaucoup d’espace autour du texte, de sorte que chaque lettre soit clairement sculptée et distinguable.
2. Effets et animations de typographie ludiques
La société de barres protéinées Lupii présente des éléments typographiques animés qui utilisent une phrase ou une collection de mots à des fins décoratives. Cette tendance de conception créative diffère des techniques liées au type que nous avons l’habitude de voir, telles que la création d’une police personnalisée ou l’utilisation d’ une association de polices intelligente .
Une chaîne de mots animée sera souvent structurée comme une forme particulière, contrairement au format de phrase horizontal standard de gauche à droite. En fin de compte, le rôle de l’élément sera toujours à des fins décoratives et pas uniquement en tant que texte à lire. Les concepteurs utiliseront généralement cette technique pour transmettre un objectif de marque ou de marketing, créant une ambiance ou un thème visuel souhaité.
Lupii combine le traditionnel avec le non conventionnel. Sur le côté gauche, vous trouverez la proposition de valeur du produit sous forme de H1, une brève description et un bouton d’appel à l’action. Sur la droite, il y a un tourbillon animé composé de mots, élaborant sur la valeur ajoutée du produit dans un ton de voix plus informel et centré sur le client.
3. Utilisation des émojis
Un autre gagnant de la vitrine d’août 2020, Diangelo Santos est un concepteur de marque et numérique brésilien qui travaille à la fois en tant que pigiste et chez GeekHunter, un marché du travail pour les programmeurs et les développeurs.
Ce n’est pas une nouvelle pour nous que la communication mondiale ait adopté l’interaction numérique. Qu’ils soient distants de 5 000 miles ou 5 mètres l’un de l’autre dans une maison, les gens interagissent constamment via leur clavier. Cela inclut les e-mails, les applications de messagerie, les forums de groupe, etc. Les choses ont évolué bien au-delà des mots – les caractères alphanumériques accompagnés d’émojis ludiques dans les éléments de texte écrit font désormais partie intégrante de notre lexique numérique.
La popularité croissante des emojis a également fait son chemin dans la boîte à outils du concepteur Web. Les créateurs Web ont adopté le langage ludique et attachant des emojis, en les utilisant dans le cadre du contenu de leur site Web lui-même. Tirer parti de ces gestes illustrés est désormais un moyen efficace et simple d’illustrer le sentiment de la marque et la messagerie non verbale dans un langage familier aux utilisateurs de tous horizons. La communication avec des publics cibles de toutes les langues et dialectes repose sur cette technique – la voix de votre marque peut désormais être entendue de manière visuelle et non verbale.
Tendances de conception de couleur
4. Couleurs claires
L’utilisation de couleurs claires dans la conception Web et d’interface représente l’une des plus grandes différences entre la conception imprimée et la conception Web. La qualité et la visibilité des couleurs claires sont souvent compromises lorsqu’elles sont utilisées dans la conception d’impression – perdant leur richesse et apparaissant comme plus opaques et troubles.
Les couleurs claires ont l’effet inverse à l’écran et peuvent même être préférées aux couleurs sombres et plus vives. La netteté et la clarté de l’écran peuvent en fait rendre ces couleurs dominantes et même stressantes pour l’œil humain. Les concepteurs ont maintenant adopté l’avantage d’utiliser des couleurs claires afin d’éviter ces dernières. En fait, la valeur ajoutée de l’utilisation de couleurs claires dans la conception Web va au-delà de l’expérience visuelle du visiteur – les couleurs claires sont également propices à l’engagement des utilisateurs.
L’effet apaisant des couleurs claires encourage souvent les utilisateurs à rester sur la page plus longtemps, profitant de la tranquillité et de la chaleur de la palette de couleurs. Sur la page d’accueil de Dockyard Social , le jaune moutarde pâle et le rouge marron fané ressemblent à un coucher de soleil fané, créant une ambiance de tranquillité d’esprit apaisante.
5. Couleurs négatives
À l’autre extrémité du spectre des couleurs, se trouve une tendance de couleur d’une nature entièrement différente. De plus en plus de créateurs se tournent vers l’utilisation de couleurs très audacieuses, avec un accent concerté sur les couleurs primaires: rouge, bleu et jaune. Cela implique souvent de multiples combinaisons de couleurs primaires profondément contrastées, semblables à des thèmes de type bande dessinée et à des motifs de style 90’s. Il va sans dire que ces types de palettes de couleurs ciblent souvent un public plus jeune, accentuant une ambiance optimiste et excitante.
La palette de couleurs que nous voyons sur le site de Goliath Entertainment représente clairement leur contenu de conception – des ordinateurs de la vieille école des années 90, des téléphones rotatifs, des boombox et d’autres éléments emblématiques auxquels la génération des années 90 s’identifiera sur place.
Images et illustrations
6. Illustrations en noir et blanc avec des textures
Il était une fois dans l’industrie du journalisme, l’impression en couleur n’était pas une option. Pour ajouter des effets artistiques à leur contenu, les journaux présenteraient des dessins en noir et blanc dessinés à la main par des dessinateurs. Ce style unique, inspiré du dessin animé, a compensé le manque de visuels et d’images colorés.
Les dessinateurs ont également commencé à utiliser des illustrations noires basées sur des textures pour compléter la grande quantité de texte qu’un journal ou une publication similaire est tenue d’inclure. La virtuosité de ces éléments graphiques est la façon dont ils équilibrent les articles textuels en allégeant la charge cognitive du lecteur avec des images simples et attrayantes.
Cela étant dit, les illustrations basées sur des textures sont désormais créées numériquement, ce qui les fait inévitablement paraître légèrement différentes de leurs prédécesseurs dessinés à la main. Ce changement subtil a des implications de conception mineures, comme une nuance de noir plus uniforme et une symétrie et un alignement plus précis. La page d’accueil de Mailchimp illustre cette dichotomie, car leur style d’image de héros diffère légèrement de la section à trois colonnes avec trois illustrations numériques noires.
Qu’elle soit identique au style original des illustrations basées sur la texture ou non, il est passionnant de voir cette tendance du design réapparaître en 2021 et conquérir le monde du design numérique.
7. Contour noir
Le motif des illustrations noires que les concepteurs de sites Web adorent (mentionné ci-dessus) est également devenu populaire dans d’autres formats: des contours noirs autour de différents éléments de leur site Web. Ces lignes et bordures noires peuvent varier en épaisseurs – souvent utilisées comme séparateurs de page, en particulier comme boîtes de grille de nombreuses tailles.
Ce que nous aimons également dans cette tendance de design à venir, c’est la façon dont ses éléments de conception combinent souvent ces lignes et illustrations noires avec de vraies images photographiées, comme le montre le schéma de conception de Roze Bunker . Ces images ont tendance à être une photographie entière ou une découpe. Quoi qu’il en soit, les bordures et les accents noirs ont un impact puissant sur l’engagement des utilisateurs. Grâce à ce type de visuel captivant, les visiteurs du site Web remarquent presque toujours ces images immédiatement – en consacrant toute leur attention aux messages et aux expériences que le concepteur cherche à relayer.
8. Formes simples
Le style artistique de l’ère des années 90 a également fait son retour dans les tendances de la conception Web – cette fois sous la forme de motifs de forme simples intégrés dans les schémas de conception. Ces illustrations de formes simplistes en deux dimensions offrent une nuance de couleur et aucune profondeur ni texture. Vous pouvez voir des exemples de ces styles de forme sur le site Web de Happy Socks , qui utilise un design bidimensionnel sur l’emballage de leur produit et sur le site réel.
Ces formes de base peuvent également avoir du texte écrit dessus et rappellent souvent le design des autocollants des années 80 ou 90. Ces formes peuvent également être utilisées comme boutons (statiques ou animés), ou comme autocollant qui nous informe d’une promotion à durée limitée. Quel que soit l’aspect ou l’aspect de ces autocollants, leur objectif commun est d’attirer l’attention du visiteur du site.
9. Photos de produits créatifs et atypiques
Pour ceux qui sont moins à l’aise avec les achats en ligne, cette prochaine tendance est pour vous. Le plus grand défi dans l’achat de produits en ligne est de ne pas savoir à quoi ils ressemblent dans la vraie vie. De nombreux magasins de commerce électronique ont commencé à utiliser des simulations 3D pour fournir une solution visuelle à cette mise en garde. Ce que nous nous attendons à voir en 2021, ce sont des techniques de visualisation 3D encore améliorées, avec des subtilités détaillées et des résolutions extrêmement élevées.
Ces visuels simulés en 3D créés par Adidas illustrent deux des plus grandes limitations de ne voir qu’un vêtement en ligne. Leurs images permettent aux acheteurs en ligne de mieux comprendre la texture du tissu de la veste et à quoi elle ressemble sous tous les angles. Ce sont les types exacts de détails recherchés par les acheteurs en ligne.
11. Art du collage
Le concept de collage dans l’industrie artistique remonte à 1914, principalement en France – à une époque où le cubisme, mouvement artistique du début du XXe siècle, était très populaire. Le concept d’art du collage fréquente de nombreux types de médias, tels que les journaux, les magazines, les affiches, mais ils sont rares dans les médias numériques.
Les créations artistiques de collage ont récemment fait leur retour sur les réseaux sociaux. Un format incontournable pour les histoires et le contenu du fil d’actualité, les collages ont également fait leur chemin dans le domaine de la conception Web. Le collage d’un site Web incarnera le plus souvent un visuel pleine largeur, une découpe précise d’une image (généralement une photographie) – le tout intégré à un mélange de graphiques de couleur unie et d’illustrations à motifs.
Dans la carte illustrée «MEILLEURS CADEAUX» d’ Urban Outfitters , l’assortiment de t-shirts en forme de collage garantit aux acheteurs en ligne que ce magasin vend un large éventail de styles, augmentant ainsi la probabilité qu’ils trouvent des produits adaptés à leur style personnel.
12. Surréalisme sans couture
De nombreux designers ont poussé la tendance de l’art du collage encore plus loin, en concevant leurs sites Web dans un style surréaliste. Cette technique se caractérise par la façon dont elle positionne les éléments sur des arrière-plans inhabituels et contre-intuitifs. L’exemple de Gucci place chaque sac à main sur un arrière-plan unique basé sur l’image. Les acheteurs peuvent alors voir chaque article sous un jour entièrement différent. Tout à coup, il y a une couche supplémentaire de l’apparence et de la sensation de chaque sac à main et de son ambiance à la mode.
Le surréalisme dans la conception Web implique également des couleurs et des textures flamboyantes qui présentent l’esprit abstrait et artistique du créateur. Au fil du temps, de plus en plus de sites Web de commerce électronique utilisent cette tendance pour présenter leurs produits d’une manière nouvelle et émotionnelle.
13. Menu Galerie de survol
Enfin, les menus du site Web , l’un des éléments les plus fondamentaux de l’interface, ont été l’épicentre de plusieurs tendances de conception. En prenant un tour sur la structure de menu traditionnelle, c’est ce que nous appelons une «galerie demi-survol, moitié menu de navigation». Cela ressemble à un menu standard standard à sa valeur nominale, mais une fois survolés, des images apparaissent, révélant un aperçu du contenu que nous verrons à l’étape suivante.
Cette expérience engageante peut aller encore plus loin (comme vous le verrez avec CHIVICHIVI ): chaque élément de menu séparé sur lequel vous survolez (presque toujours) affiche une image différente, indiquant les expériences riches et variées qui attendent sur chaque page que nous rencontrons.
Soyons des pionniers
La nouvelle année offre de nouvelles opportunités pour adopter ces tendances de design et attirer les visiteurs en se démarquant dans notre paysage concurrentiel. Nous devons soigneusement réfléchir à la manière d’intégrer ces tendances individuelles avec leur propre cas d’utilisation pertinent – en fonction du langage de conception de notre marque et des intérêts du public. Gardez à l’esprit que les 13 tendances que nous avons répertoriées ici ne sont qu’un avant-goût de ce qui nous attend. Il y a tellement plus à voir et à faire.
Si vous remarquez de bons exemples des tendances que nous avons énumérées ci-dessus, ou si vous avez une autre tendance que vous suggérez de rechercher, veuillez partager dans les commentaires!
0 commentaires