Transcription
Il existe six techniques de conception très simples que vous pouvez utiliser pour créer des sites Web qui non seulement convertissent, mais incitent quelqu'un à s'arrêter et à dire : « Hé, c'est vraiment génial. » Le meilleur, c'est que vous pouvez les appliquer immédiatement sur n'importe quel site Web que vous construisez, sans avoir besoin d'une tonne d'expérience ou d'un diplôme complet en conception Web. Commençons donc par le gain le plus rapide : la correction de la typographie. Vous entendrez souvent les gens dire : « N'utilisez qu'une seule police sur un site Web. » Honnêtement, je l'ai dit aussi. Ce n'est pas que ce soit un mauvais conseil, mais c'est juste le niveau un de la typographie. Pour les sites Web, il existe deux autres niveaux. Le niveau deux consiste à utiliser quelque chose appelé « Super Familles ». Ce sont juste des polices massives où vous aurez une famille spécifique qui a des polices sans-serif, et même monospaces. Parfois, et elles sont toutes conçues pour s'harmoniser parfaitement. Maintenant, les niveaux un et deux sont d'excellentes options. Vous verrez beaucoup de sites Web géniaux utiliser ces techniques, mais le niveau trois leur donne ce petit coup de pouce supplémentaire, et il s'agit d'utiliser différentes familles de polices provenant de différentes fonderies qui s'assemblent comme si elles étaient faites l'une pour l'autre. Nous parlons de combinaisons de polices, et ce qui rend la combinaison de polices beaucoup plus facile, c'est de commencer par ce que l'on appelle votre police d'ancrage. Maintenant, la plupart des gens vous diront que vous voulez ancrer tous vos choix de polices autour de votre police de corps. Je fais en fait le contraire. Je commence par le titre d'abord, puis je trouve tout le reste pour soutenir ce dernier. Alors, pourquoi commencer par les titres ? Eh bien, sur un site Web, le titre est le texte principal que vous voyez, et j'ai l'impression que votre ancre devrait définir la personnalité de la page. Est-elle plus moderne ? Est-elle plus technique ? Peut-être est-elle chaleureuse et accessible, mais quoi qu'il en soit, l'ancre doit toujours correspondre à la marque de l'entreprise. Une fois que vous avez réglé cela, il est temps de trouver des polices qui soutiennent automatiquement cette ancre. Ainsi, chaque police que vous ajoutez par la suite devrait donner l'impression qu'elle provient au moins du même univers, mais idéalement, elle ajoute également du contraste pour rendre les choses visuellement intéressantes. Mais voici où vous voulez être prudent. Ne choisissez pas des polices qui sont trop similaires, comme Georgia et Times New Roman. Elles sont si proches, mais en même temps très différentes. Cela donne donc l'impression d'être involontaire. Ce que vous recherchez vraiment, c'est quelque chose qui a suffisamment de contraste pour créer un intérêt visuel sans rendre les choses confuses pour l'utilisateur. Une excellente ressource qui rend cela beaucoup plus facile est un site Web appelé Fonts in Use. Vous pouvez y aller et rechercher n'importe laquelle de vos polices d'ancrage et voir ce que d'autres designers ont utilisé pour les associer à cette police spécifique. Alors, faisons-le nous-mêmes dès maintenant. Prenons ce site Web, qui n'est pas mauvais, mais qui n'est pas super intéressant, et donnons-lui un peu de piment. Pour notre police d'ancrage, je vais en choisir une appelée "Instrument Serif". C'est une police Google gratuite, mais elle est aussi assez cool. Et comme elle est super condensée, nous pouvons en fait la rendre beaucoup plus grande, ce que j'adore pour les titres. Ils attirent vraiment l'attention lorsqu'ils ont plus de taille. Alors, prenons notre ancre, prenons "Instrument Serif", allons sur "Fonts in Use" et tapons-la pour voir ce que nous obtenons. Et déjà, nous avons une poignée d'excellentes options ici. Elles sont toutes entièrement gratuites. Mona Sans, Anton. D'excellentes polices solides pour lesquelles nous n'aurons pas à payer. Certaines d'entre elles nécessiteraient un paiement, mais je vais m'en tenir à une pour laquelle nous n'aurons pas à dépenser beaucoup d'argent afin qu'elle soit accessible à tous. J'aime vraiment beaucoup "Geist Sans" et regardez à quel point elle est différente par rapport à la largeur de chaque caractère. "Instrument Sans" est beaucoup plus condensée et "Geist" est beaucoup plus étalée. Cela va donc fournir le contraste que nous recherchons. Alors, prenons cette police "Geist", allons dans notre fichier Figma et changeons notre sous-titre pour voir comment cela fonctionne. Parfois, il faut juste tester beaucoup de variations différentes. Mais cela semble plutôt bien. Il y a beaucoup de bon contraste entre notre en-tête et notre sous-titre, mais on n'a pas l'impression qu'ils viennent d'extrémités totalement opposées du spectre. Je pense donc que nous allons régler cela avec "Geist" et juste avec ce petit changement, cela commence déjà à être beaucoup plus attrayant visuellement. Il n'y a toujours rien qui vous fasse vraiment arrêter de faire défiler. C'est le prochain conseil. Vous avez probablement entendu beaucoup de gens dire que les sites Web ennuyeux ou simples sont bien meilleurs pour les affaires, et que vous voulez toujours rester simple. Et en tant que concepteur Web, vous n'essayez pas d'impressionner d'autres concepteurs ou de gagner des prix, et ce n'est pas un mauvais conseil. Mais un site Web n'est pas juste une machine à encaisser. C'est souvent la première et la seule rencontre que les gens auront avec vous ou la marque de votre client. Et si cela ne fait pas ressentir quelque chose à quelqu'un, vous ne serez pas mémorisé. Et lorsque vous commencez à chercher de l'inspiration sur les sites Web, vous constaterez que chaque site Web qui attire vraiment votre attention, il y a quelque chose que vous remarquez presque immédiatement. Peut-être est-ce un certain type de police, peut-être est-ce une image ou un objet. C'est ce que j'aime appeler la star du spectacle. C'est une chose qui fait ressentir quelque chose aux gens et qui ancre leur attention suffisamment longtemps pour qu'ils accomplissent l'action que nous voulons qu'ils fassent. Par exemple, regardez ce site Web ici. La première chose que vous remarquez, ce sont ces éléments dégradés avec du texte dessus et les dégradés vraiment cool. Ils ont été très bien réalisés. Le mouvement est net, et vous pouvez ensuite aller et venir et interagir avec. C'est quelque chose qui est définitivement la star du spectacle. Cela attire votre attention et me fait vraiment me soucier de ce que le reste de la page dit. Mais c'est là que beaucoup de designers se perdent. Choisir une star juste parce qu'elle a l'air cool, c'est là que ça tourne mal. Je suis un grand fan de Brandon Sanderson. Des fans de Sanderson ici ? Les nerds s'unissent. Si vous ne savez pas qui il est, c'est un auteur de fantasy assez prolifique et je me souviens qu'il disait que beaucoup des livres qu'il écrit commencent par ce qu'il appelle une "graine". La "graine d'émeraude" en est un parfait exemple. Son "et si" était : et si "La Princesse Mariée" était inversé et que la princesse partait sauver le prince ? À partir de cette seule question, il a construit tout cet univers. Votre star fonctionne de la même manière. C'est votre graine. Vous choisissez une chose qui est connectée à l'histoire globale du site Web, et vous laissez tout le reste se développer autour de cela. Pour ce site sur lequel nous travaillons, il s'agit d'un produit SaaS, et en lisant un peu à son sujet, il gère les opérations pour les entreprises de services. Le but d'un produit comme celui-ci est de prendre un désordre de données complexes et de le rendre très simple grâce à des choses comme des tableaux de bord et des graphiques. Alors, et si la star rappelait cela ? Et si elle faisait référence visuellement au graphique et aux tableaux de bord que les utilisateurs associeront à ce produit ? Maintenant, nous n'essayons pas juste de mettre un graphique ici. Nous voulons que cela semble un peu plus abstrait. Alors, allons sur Unsplash et voyons si nous pouvons trouver quelque chose qui convient. Je vais juste taper "dégradé orange" pour qu'il corresponde à notre bouton, puis "lignes verticales" pour correspondre à l'idée de graphique que nous recherchons. Dès le départ, cette image est assez cool. Elle ressemble à un graphique de manière abstraite, mais elle est aussi visuellement époustouflante. Alors, prenons notre image, déposons-la sur notre site Web et centrons-la un peu, et plaçons-la sous tous nos éléments. Et comme nous ne voulons pas que toute cette couleur rivalise avec notre texte, allons-y et retournons-la horizontalement, puis ajoutons une petite forme en dessous et masquons-la de manière à ce qu'elle soit subtile, mais qu'elle ait un impact. Ajustons cela un peu et je pense que nous serons prêts. Et regardez déjà d'où nous venons. Nous n'avons fait que deux choses, et cela semble beaucoup mieux, mais il existe une autre technique que nous pouvons utiliser pour tout lier. L'ajout de petits choix de conception ou même de petits éléments de conception qui apparaissent de manière cohérente de différentes manières sur votre site Web rend l'ensemble beaucoup plus cohérent, et cela peut également améliorer l'expérience utilisateur. C'est là qu'intervient ce qu'on appelle la rime visuelle. La rime visuelle consiste à répéter de petits détails sur le site afin que tout semble provenir du même univers. Par exemple, regardez ce site Web ici. Ils ont pris ces formes courbes de leur logo, les ont mises dans ces superpositions sur leurs boutons, et même dans cette flèche à côté de ce lien. C'est beaucoup de rimes visuelles cool, mais cela ne doit pas nécessairement être que des formes. Cela pourrait être des couleurs, comme une multitude de dégradés différents qui apparaissent de différentes manières, peut-être même différentes textures. Cela ne signifie pas nécessairement que vous répétez simplement des éléments visuels. Il s'agit plutôt de prendre des composants d'un élément visuel fort, comme la star du spectacle, et de les utiliser tout au long du site sur d'autres éléments différents. Regardez ce site Web ici. Ils ont clairement fait de la star du spectacle cet élément clé ici, ce qui est vraiment cool car il s'agit de débloquer votre activité de location, mais en faisant défiler vers le bas, vous voyez différents éléments de cette clé apparaître de différentes manières. Regardez toutes ces cartes de texte qui apparaissent autour de cela. Même l'arrière-plan de cet élément, ils ont fait un excellent travail sur cette rime visuelle. C'est le genre de site Web qui vous inspire et vous donne envie de tout abandonner en même temps. C'est donc très bien. Bon travail à celui qui a fait cela. De notre côté, je pense que nous pouvons faire quelque chose avec ces triangles dans le logo. Tout d'abord, remplaçons ces icônes plus par une bonne vieille icône de menu déroulant, ce qui donne déjà une impression de plus grande cohérence. Ensuite, ajoutons presque une flèche dans notre appel à l'action principal, et quelque chose qui, je pense, aura un impact encore plus grand, c'est de remplacer ces rectangles par des triangles, en utilisant les triangles comme masque sur notre image, puis le triangle pour la boîte de mise en évidence. Et comme nous avons ce motif de graphique, je ne pense pas que nous ayons besoin du graphique dans cette petite carte ici non plus. Cool. Nous avons beaucoup de rimes maintenant, mais même avec tout cela, beaucoup de sites Web se démarquent parce que vous avez l'impression d'y entrer plutôt que de simplement faire défiler de haut en bas. Donc, pour que les utilisateurs ne quittent pas notre site Web, parce que tout semble normal, nous devons rendre le site plus tangible, comme s'il existait dans le monde réel, et un moyen très simple de le faire est d'utiliser ce que j'aime appeler la profondeur. La profondeur est quelque chose qui comble le fossé entre le monde tangible et le monde en ligne. Pensez donc à des choses comme des textures sur l'arrière-plan principal ou peut-être des éléments 3D que vous avez l'impression de pouvoir presque toucher sur le site au lieu de simplement y faire défiler. Mais voici la clé : dans tout cela, toutes ces textures, toute cette profondeur doit être subtile. Nous ne voulons pas rivaliser avec la star du spectacle. Pensez-y comme à des détails du monde réel qui sont juste là. Vous les remarquez, mais elles ne demandent pas votre attention. Alors, faisons cela avec l'exemple sur lequel nous travaillons. Tout d'abord, ajoutons de la texture à la star du spectacle. Nous allons y ajouter un peu de bruit. Il existe un plugin très cool appelé "Noise and Texture" qui vous permet de le faire directement dans Figma sans avoir à ouvrir Photoshop. Il suffit de sélectionner quelques paramètres et hop, c'est bon. Ensuite, je pense qu'il y a une opportunité de faire un clin d'œil à l'aspect vitreux de la star du spectacle, puis d'y ajouter un peu plus de profondeur en prenant ces cartes et certains des éléments de notre navigation et en ajoutant un effet de verre. Et maintenant, cela commence vraiment à ressembler à plus que du code et des pixels sur une page flottante. Notre prochaine étape est encore plus subtile, si vous pouvez le croire, mais elle peut faire une grande différence. Au début de mon parcours de conception Web, je me suis vraiment intéressé à la lecture des systèmes de conception d'autres entreprises. Un peu geek, je sais, mais utile. Et lorsque je lisais le Material Design de Google, j'ai remarqué quelque chose. Ils n'utilisent pas seulement une opacité de 100 % sur tout leur texte. Ils indiquent littéralement 87 % d'opacité pour le texte à haute emphase ou les éléments importants. Et puis 60 % pour l'emphase moyenne. Il y a un peu de débat sur la raison pour laquelle ils font cela, mais quel que soit votre point de vue, l'utilisation de l'opacité est un énorme avantage pour la hiérarchie. Votre œil sait immédiatement quoi lire en premier, quoi survoler, et puis peut-être quoi ignorer à moins que vous n'en ayez vraiment besoin, et vous pouvez reprendre cette idée exacte sur votre propre site Web. Gardons ce titre à 100 % d'opacité. C'est en fait ce sur quoi nous voulons que les gens portent le plus attention lorsqu'ils visitent notre site Web pour la première fois. Mais nous pouvons prendre ce sous-titre et le baisser jusqu'à 70 %. Et voici un petit avant-après. Celui du haut, 100 % d'opacité sur tout le texte, celui du bas a plusieurs niveaux. Comme je l'ai mentionné précédemment, c'est assez subtil, mais cela rend vraiment cette page intentionnelle. Ce dernier conseil est quelque chose que la plupart des concepteurs Web ne feront pas, mais cela fera une énorme différence dans le résultat des sites Web sur lesquels vous travaillez. J'ai eu cette idée d'un concept que j'ai appris lorsque je faisais de la musique, et je produisais des albums pour des gens, et j'ai appris que les meilleurs producteurs entendent la chanson d'un artiste, puis lui font accélérer beaucoup, puis ralentir beaucoup. Peut-être chanter à l'octave supérieure ou à l'octave inférieure, peut-être changer de tonalité. Faire cela force les musiciens à sortir de leur pensée originale afin qu'ils puissent enfin trouver la meilleure version de la chanson. Mais vous ne pouvez pas faire cela si vous prenez simplement la première version et que vous essayez de l'ajuster jusqu'à ce qu'elle soit de mieux en mieux. Vous devez simplement faire quelque chose de complètement différent. Et il en va de même pour la conception Web. Prenez votre première idée, puis essayez quelque chose de totalement différent. Peut-être faire un mode clair, peut-être changer la mise en page, essayer une autre star du spectacle. Cet exemple que je vous ai montré tout au long de la vidéo avait 12 versions différentes de la même star. La première version aurait probablement été bien, mais si je n'avais pas continué, elle n'aurait pas été aussi bonne. Alors, expérimentez, amusez-vous avec vos idées jusqu'à ce que l'ange soit sculpté dans la roche, comme disait Michel-Ange. Ces conseils peuvent instantanément améliorer presque n'importe quel site Web sur lequel vous travaillez, mais il ne s'agit encore que de conseils. Si vous voulez devenir le genre de designer qui peut aborder n'importe quel projet et savoir exactement quoi faire, vous devez dépasser les conseils et développer les compétences sous-jacentes. C'est pourquoi j'ai créé cette vidéo : les cinq seules compétences en conception Web qui comptent vraiment. Regardez-la ensuite, et concevez quelque chose de génial. N'oubliez pas, si vous n'abandonnez pas, vous gagnez.