Avez-vous remarqué quelque chose de différent sur le site Web moyen de nos jours? Quelque chose a changé dans la façon dont les sites Web étaient conçus il y a à peine quelques années. Et beaucoup appellent ce changement l'arrivée du Web 3.0 - une nouvelle ère de conception Web.
Dans l’ensemble, le Web 3.0 concerne les données et leur gestion. Nous vivons à l'ère de l'information, et à mesure que le volume de données augmente, la nécessité de la gérer augmente également.
Vous en avez entendu parler Blockchain avant, et l'expression Web décentralisé.
Et vous aurez également entendu parler de personnes souhaitant prendre le pouvoir à des entreprises comme Google, et même Facebook - qui a eu une part équitable des problèmes liés à la vie privée au cours des dernières années.
Qu'en est-il de l'intelligence artificielle (IA) et Machine Learning (ML) ?
Ce sont toutes de vraies technologies, incorporées dans le Web moderne sous une forme ou une autre. Et l'objectif est simple, personnaliser l'expérience utilisateur et rendre le Web plus accessible.
Et encore…
This post is about none of those technologies
Bien que je sache que toutes les technologies mentionnées ci-dessus sont exceptionnellement pertinentes à ce jour, je me concentre pour cet article sur Conception Web 3.0.
En d'autres termes, comment les sites Web ont-ils changé au cours des cinq dernières années et comment le côté conception de sites Web a-t-il changé avec le Web 3.0?
Voici à quoi ressemblait autrefois le Web:
Et au milieu des années 2000, nous avons commencé à voir l'émergence du Web 2.0 - qui ressemblait à ceci:
Mais ce n'est rien en comparaison de ce que nous voyons dans les conceptions Web 3.0:
La nouvelle ère de la conception Web met l'accent sur une précision immaculée, des jeux de couleurs percutants et l'ajout de nouveaux éléments de conception qui sont complémentaires à la conception globale.
Alors, comment en sommes-nous arrivés là et que devez-vous savoir?
What is Web Design 3.0: Your questions answered
Pour cette section, je vais me concentrer sur les questions suivantes:
- En quoi les sites Web Web 3.0 sont-ils différents des années précédentes?
- Pourquoi les designers utilisent-ils autant de formes et d'autres éléments de design?
- Les constructeurs de pages suivent-ils les tendances?
Une fois que ces questions auront été répondues, nous examinerons les outils de conception de pointe et quelques plates-formes où vous pourrez trouver de l'inspiration en matière de conception.
Alors, passons à la première question.
# 1: En quoi les sites Web Web 3.0 sont-ils différents des années précédentes?
Je dirais que le changement le plus important de ces dernières années est l'ajout d'éléments créatifs.
Les concepteurs sont de plus en plus à l'aise avec l'utilisation d'éléments d'arrière-plan tels que des formes et des courbes pour imposer un chemin de navigation de conception spécifique.
Lorsqu'il est utilisé correctement, formes et blobs peut aider à mettre en évidence un contenu précieux tout en offrant une interface utilisateur agréable.
En plus de cela, les conceptions Web 3.0 utilisent beaucoup plus d'illustrations et de contenu visuel au total. Non seulement pour enrichir les pages, mais souvent pour illustrer un produit ou une cause spécifique.
Dès que vous voyez un design comme celui-ci, vous savez que l'entreprise spécifique a travaillé dur pour rendre l'expérience utilisateur agréable.
En fin de 2018, MailChimp a renommé tout son site Web, et l'une des choses qu'ils ont choisi d'introduire était l'utilisation d'illustrations.
Voici les 3 principales raisons pour lesquelles vous devez envisager d'utiliser des illustrations:
D'abord et avant tout, les illustrations captent l'attention des visiteurs comme nulle part ailleurs, mais ce n'est pas la question.
- Transformez le complexe en simple. Traditionnellement, les concepteurs Web s'appuyaient sur les titres pour expliquer leur produit. De nos jours, les illustrations peuvent faire le gros du travail à votre place. Vous pouvez concevoir un ensemble d'illustrations complet autour de vos produits et de ses fonctionnalités. Après tout, l'apprentissage visuel est une chose!
- Image de marque. Le style des illustrations que vous utilisez peut contribuer à promouvoir une image de marque positive. Les illustrations peuvent mettre en valeur différentes valeurs, forces et qualités de la marque. Pas quelque chose que vous seriez capable de représenter avec la rédaction uniquement.
- Caractère visuel. Chaque marque est différente. Et avec des visuels, vous pouvez représenter une identité qui vous distingue des autres.
Cela s'applique également à des éléments tels que les icônes et les animations. Les deux nécessitent un travail un peu plus individuel - de préférence par un graphiste -, mais les récompenses sont là!
Et le troisième changement le plus important est typographie.
La police de caractères est toujours restée une partie importante de tout design. Et si vous n'êtes pas convaincu, je vous ai mis au défi de changer les polices de votre site Web en quelque chose de complètement aléatoire.
La différence que bonne typographie fait est énorme. Et depuis que les sites Web 3.0 ont fait leur apparition dans le courant dominant, la variété des polices de caractères l'est également.
Vous pouvez vous en tirer avec une conception Web simple uniquement pour le type de polices que vous utilisez. Je recommande le bookmarking Typewolf.
Ce site est une mine d'or pour tout ce qui concerne la typographie et les polices de caractères. Jeremiah Shoaf le dirige. Il a maintenu son site Web pendant de nombreuses années et a des milliers d'annonces différentes sur son site.
De plus, il rédige des guides et maintient régulièrement son annuaire «Site du jour». Chaque fois que je travaille sur un nouveau projet, Typewolf est l'un des premiers sites que je visite.
En apprenant la typographie et ses effets sur la conception Web, vous gagnerez beaucoup de temps lorsqu'il s'agit de rendre la conception professionnelle.
# 2: Pourquoi les designers utilisent-ils autant de formes et d'autres éléments de design?
Ce ne sont pas seulement les sites Web conçus par des professionnels qui utilisent cette nouvelle tendance. Plus thèmes et cadres WordPress modernes sont également conçus pour mettre en œuvre ces tendances.
Mais pourquoi les formes et comment profitent-elles à la conception d'un site Web? Les deux principaux facteurs sont esthétique et minimalisme. Les formes et autres éléments géométriques aident à rassembler la conception entière, assurant flux fluide et expérience utilisateur cohérente.
Traditionnellement, les sections étaient divisées avec des couleurs individuelles seules, et parfois sans aucune couleur du tout.
Dans cet exemple, vous pouvez voir comment l'utilisation d'illustrations simples enrichit ce design minimaliste et prend en charge les motifs d'arrière-plan. Ceci, à son tour, contribue à accentuer la lisibilité des principaux éléments de navigation.
Vous pouvez également utiliser des éléments d'arrière-plan de support pour mettre en évidence le contenu important, comme ceci:
Dans l'ensemble, c'est un mélange de cohérence et de pensée créative. Une forme d'arrière-plan, comme indiqué ci-dessus, peut aider mettre en œuvre la psychologie des couleurs pour améliorer davantage l'expérience utilisateur.
Plus tard dans l'article, nous examinerons les sites d'inspiration de conception Web les plus populaires. C'est là que vous verrez différentes techniques pour implémenter des formes géométriques dans la conception Web.
# 3: Les constructeurs de pages suivent-ils les tendances?
Il n'y a pas que des constructeurs de pages comme Visual Composer et Elementor qui vous aident à créer de meilleures pages de destination. Des marques comme Squarespace, Webflow et Weblium font également des progrès significatifs dans l'espace de création de sites Web. Et bien sûr, tous ces outils de conception suivent les dernières tendances en matière de conception Web.
Elementor, qui a enregistré plus de 25 millions de téléchargements, fait constamment évoluer sa bibliothèque de composants pour inclure des éléments qui composent le Web moderne. Et Weblium utilise l'IA pour aider les webmasters inexpérimentés à créer des sites Web visuellement époustouflants.
La meilleure partie est que vous n'avez jamais à écrire une seule ligne de code. Les constructeurs de pages modernes fournissent Dispositions basées sur la grille sans toutes les technicités.
Vous pouvez créer de nouvelles lignes, sections et redimensionner des composants individuels à l'aide des outils de glisser-déposer. Ou, vous pouvez éviter cela complètement et utiliser des modèles prédéfinis.
Il va sans dire, l'apprentissage du HTML et du CSS est toujours fortement encouragé comme c'est apprentissage de l'art vectoriel et de la conception graphique générale. Les constructeurs de pages sont sujets à des inefficacités qui ne peuvent être résolues qu'en se salissant avec le code.
Web 3.0 Design Tools: The current trends
Auparavant, les sites Web étaient créés à partir de structures filaires et de croquis que vous deviez concevoir sur une feuille de papier. Photoshop a contribué à atténuer un peu ce problème, mais certainement pas au même niveau que les outils dont nous disposons actuellement.
Les outils de conception modernes se concentrent spécifiquement sur l'idée de concevoir des sites Web et des applications mobiles. Cela ouvre la porte à une conception au pixel près avec la possibilité d'exporter certaines de vos conceptions sous forme de sites Web prêts à l'emploi.
Une fois que vous avez un design personnalisé, vous pouvez vous concentrer sur le codage vous-même ou sur l'utilisation de constructeurs de pages pour obtenir une copie presque parfaite de ce design.
Voici les outils qui feront toute la différence.
# 1: Croquis
Croquis est un outil de conception unique pour Mac OS et est sans doute l'un des meilleurs outils de conception numérique du marché. Même s'il est limité à un système d'exploitation spécifique.
L'une des choses qui rend Sketch si populaire et si recherché est le fait qu'il fournit à peu près tout ce dont vous avez besoin pour la conception numérique, ce qui comprend la conception de sites Web, d'applications mobiles, de graphiques vectoriels, ainsi que des éléments comme le prototypage et des plugins externes pour des fonctionnalités supplémentaires. .
Personnellement, l'une des choses que j'aime vraiment dans Sketch, c'est que c'est un logiciel vraiment robuste. C'est en regardant d'autres options sur le marché. Sketch illustre la norme d'un logiciel conçu par des professionnels.
Et en ce qui concerne la conception Web, je veux dire, l'une des fonctionnalités intéressantes de Sketch est qu'il est conçu pour prendre en charge la conception de sites Web. Ainsi, vous pouvez créer des grilles, vous pouvez créer plusieurs couches et bien plus encore.
À bien des égards, c'est comme Photoshop, mais pour la conception Web. Il n'inclut pas vos fonctionnalités moyennes pour éditer des photos, mais il fournit tout ce dont vous avez besoin pour éditer vos graphiques vectoriels, insérer des images, gérer les polices, gérer les tailles de page, créer des grilles supplémentaires, tout.
Si vous regardez les sites Web modernes, aujourd'hui, en particulier ceux de certaines grandes marques, alors 99% du temps, le site Web a été conçu avec Sketch, il est donc très connu des designers professionnels.
Et, si vous êtes un débutant et que vous cherchez à apprendre, jetez un œil à ceci Cours en ligne.
# 2: Folie
Comme mentionné, Sketch est conçu exclusivement pour MacOS. Heureusement, Icons8 a pris l'initiative de créer une alternative pour les utilisateurs de Windows. Et la meilleure partie est que c'est totalement gratuit.
Folie est un outil d'édition de vecteur basé sur Windows qui a beaucoup inspiré Sketch. Il est entièrement fonctionnel en tant que logiciel d'édition vectorielle individuel, mais prend également en charge les fichiers Sketch.
Ainsi, si vous téléchargez des projets créés avec Sketch, vous pourrez les utiliser avec Lunacy. Dernier point mais non le moindre, Lunacy est soutenu par la communauté. Cela signifie que vous pouvez demander et voter sur des fonctionnalités qui ont été soumises par d'autres.
Tout cela au nom de rendre le processus de conception de sites Web plus facile et plus simple.
# 3: Figma
Le dernier outil de conception Web majeur est Figma. En l'occurrence, Figma est également un concurrent proche de Sketch. Et son utilisation est entièrement gratuite. Il est conçu pour le navigateur, mais dispose également d'une application de bureau.
Comme il est gratuit et dispose d'un large éventail de fonctionnalités, Figma est également une application que j'utilise moi-même le plus souvent. L'interface utilisateur semble naturelle, sans frais généraux. Tous les boutons et fonctionnalités sont conçus pour vous permettre de créer des designs personnalisés.
En passant, j'aime également utiliser Figma pour tout type de travail vectoriel général. Qu'il s'agisse de créer des citations, de nouveaux styles de boutons et à peu près tout le reste.
Web 3.0 Design Inspiration: Learn from the best
Vous n'avez pas besoin de vous inscrire à un Cours UX pour apprendre grands principes de conception. Tout ce dont vous avez besoin est d'accéder à quelques sites d'inspiration sélectionnés, et vous comprendrez rapidement ce qui est tendance.
La section suivante est dédiée à vous aider à trouver la meilleure inspiration de conception pour vos prochains projets Web 3.0.
L'utilisation de sites qui répertorient les conceptions professionnelles peut vous encourager à faire de meilleurs choix de conception à l'avenir.
# 1: Lapa Ninja
Lapa ninja doit être l'un de mes sites Web d'inspiration préférés à utiliser. Je l'aime en termes de type de sites Web qu'il répertorie, et aussi de la façon dont il se tient au courant de toutes les dernières nouveautés en matière de conception Web.
Et très franchement, il n'y a vraiment aucun autre site Web qui le fasse de la même manière. En plus de cela, il a déjà plus de 2000 listes dans sa base de données. Vous n'avez donc pas nécessairement besoin d'attendre que de nouveaux modèles soient ajoutés. Et l'une des autres choses que j'aime vraiment à propos de cette plate-forme spécifique est que vous pouvez réellement parcourir un site Web ou des sites Web individuels et leurs conceptions par catégorie.
Et ce n'est pas seulement vous savez, blog ou entreprise, mais vous pouvez en fait choisir parmi des catégories spécifiques telles que le portefeuille, la santé et différents types d'industries. Vous pouvez donc vraiment affiner votre recherche.
En plus de cela, c'est vraiment simple à parcourir et cela inclut la plupart de ce dont nous avons parlé dans cet article spécifique.
En regardant les listes individuelles, il est vraiment facile de voir les changements que nous constatons actuellement dans la conception Web.
C'est donc juste une ressource inestimable à visiter de temps en temps ou à visiter chaque fois que vous êtes coincé sur un design ou que vous prévoyez de concevoir quelque chose de nouveau.
# 2: OnePageLove
Un site Web d'une page est essentiellement un site Web sans pages supplémentaires. Certains appellent cela des pages de destination, mais la plupart des gens l'appellent des sites Web d'une page. Ils sont beaucoup plus courants que vous ne le pensez. Et OnePageLove est probablement le meilleur site pour faire une exposition appropriée pour ces sites.
De la même manière que Lapa Ninja, vous pouvez affiner votre recherche à des catégories spécifiques. Chaque liste comprend une capture d'écran pleine page et quelques détails sur l'auteur.
En dehors de cela, vous pouvez naviguer à votre guise et consulter n'importe quel site Web qui capte votre attention. Je ne peux pas me souvenir du nombre de fois où j'ai emprunté mon inspiration à des sites répertoriés par Une page d'amour. C'est si bon!
# 3: Awards
Dernier point mais non le moindre, nous avons Awards. Peut-être le plus ancien site d'inspiration de site Web au monde. Et pourtant, parvient à conserver la cohérence d'année en année.
L'idée derrière Awwwards est que les gens soumettent des conceptions de sites Web et que les membres votent pour leurs favoris. Par la suite, le comité Awwwards procède à un vote individuel et décide de sélectionner quelques gagnants pour une période donnée.
En devenant un gagnant, vous pouvez ajouter un badge spécial à votre site Web qui met en évidence votre excellence dans la compréhension du design.
Et pour ce qui est de l'inspiration, bon nombre des modèles répertoriés sur ce site sont extrêmement exclusifs. C'est un terrain de jeu pour les designers vraiment créatifs et ambitieux.
Cela vaut la peine de mettre en favori et de revenir une fois par semaine.
Conclusion : où aller à partir d'ici ?
La conception Web est une industrie compétitive. Et pas parce que les gens veulent créer de meilleurs sites Web que d'autres. C'est le plus compétitif en termes d'interface utilisateur et d'UX.
Découvrir une nouvelle façon de capter l'attention des gens peut se traduire par de meilleurs résultats de vente. De plus, en fournissant une expérience utilisateur solide, vous constaterez que les gens reviennent plus souvent sur votre site Web.
Depuis 2018, il y a eu un énorme afflux de designs qui favorisent l'aspect visuel du design. Et en tant que tel, attendez-vous à voir beaucoup plus de changements et d'ajouts dans ce domaine.
