Créez votre bibliothèque visuelle: astuces et défis de conception

Publié: 2020-12-17

L'une des grandes différences entre un designer chevronné et un junior est la bibliothèque visuelle qu'il construit.

Qu'est-ce qu'une bibliothèque visuelle?

Ce sont les choses dans votre tête en ce qui concerne les éléments de l'interface utilisateur et les pratiques UX. Ce que vous avez construit et vous comprenez comment cela fonctionne. Plus votre bibliothèque est riche, plus vite vous pouvez trouver des solutions sur place.

Prenons un exemple: en tant que concepteur, vous êtes chargé de créer un nouveau site Web.

Quel site web? Vous pourriez demander. Eh bien, ce sont toutes les exigences que vous avez. Un défi de la part d'un collègue. Oh, aussi, vous avez une heure pour le faire. C'est un défi que nous avons relevé chez DevriX et voici l'un des résultats après 3600 secondes:

Conception par Alex Dimitrov

Il n'y avait pas beaucoup de temps pour examiner le sujet, donc c'était juste dans l'en-tête. Quels sont les composants d'un en-tête?

  • Un titre à coup sûr
  • La navigation
  • Barre de recherche
  • Quelques liens sociaux
  • Quelques boutons d'appel à l'action, principalement pour s'inscrire et / ou créer un compte
  • Un peu de navigation pour le rendre intéressant

D'où tout cela vient-il? C'était une page blanche avant. Il n'y avait même pas de sujet pour commencer. Tout s'est passé grâce à la bibliothèque visuelle qui avait été créée dans l'esprit du concepteur tout au long des années de création de sites Web, d'applications et de tout ce qui les entourait.

De combien de façons pouvez-vous concevoir un en-tête? Des centaines de façons. Il existe tellement de types d'éléments, de topographies, de couleurs, de superpositions, de boutons, d'éléments et bien plus encore. C'est une expérience intéressante à faire.

Comment créer une bibliothèque visuelle

Bien que la réponse la plus simple soit «de créer plus de designs», ce n'est pas très satisfaisant simplement parce qu'il y a beaucoup plus. Ce qui est plus important, c'est la diversité. Construire différents modèles. Une manière directe dont vous pouvez aborder cela serait de refaire la conception de grands sites.

Voici quelques exemples:

Facebook:

Source de l'image: Dribbble

Gmail:

Source de l'image: Dribbble

Twitter:

Source de l'image: Dribbble

Il y a tellement d'exemples. Plus la conception est complexe, plus vite vous progresserez. Mais comment ça marche exactement?

Jetons un coup d'œil à une liste à titre d'exemple. Une liste peut avoir un en-tête qui la nomme, elle peut avoir des icônes qui peuvent être colorées, de conception similaire ou de conception différente. Il peut également avoir un titre et un sous-titre plus grands, peut-être une étiquette avec un numéro. Ensuite, vous pouvez ajouter des états de survol, des éléments qui peuvent être sélectionnés ou désactivés, etc. Avec toutes ces variantes, vous pouvez créer une grande variété de modèles de listes.

Source de l'image: Dribbble

Être capable de proposer autant de configurations et de mises en page, c'est avoir une bonne bibliothèque visuelle. Pour savoir que vous pouvez y arriver. C'est comme avoir quelqu'un à côté de vous qui dit «Dessine-moi une boîte», puis «Ajoute un titre» et tu le fais sans réfléchir. Toutes ces décisions sont prises parce que vous l'avez déjà fait. En effet, il suit également les principes de base de la conception, mais vous ne pouvez pas accéder à vos notes ou livres tout le temps. C'est comme entraîner une IA - vous devez créer des modèles en utilisant un «ordre d'éléments réussi».

Tous les artistes visuels ont besoin de créer des bibliothèques

Un exemple frappant de ceci est Kim Jung Gi - un génie qui peut créer des œuvres d'art réalistes en utilisant n'importe quelle perspective.

Art par Kim Jung Gi

Dans une interview, il raconte comment, tout au long de sa vie, il a regardé tous les objets autour de lui, essayant de comprendre leur forme et de les dessiner sous un angle différent. Avec cette compétence, il est maintenant capable de dessiner tout ce que vous voyez dans l'image ci-dessus en partant simplement d'un morceau de papier blanc sans aucune référence.

Ou mieux dit - sans références qu'il puisse atteindre parce que ses références sont dans son esprit - sa bibliothèque visuelle. Ceci est un exemple de travail de maître, ce qui est un grand objectif à atteindre pour un designer.

De la même manière que les concepteurs Web découvrent les boutons, les listes, les cartes, les champs de saisie, les fenêtres contextuelles et bien plus encore, les artistes numériques en apprennent davantage sur les matériaux, l'éclairage, les silhouettes, le fonctionnement des muscles, la façon dont la gravité vous tire vers le bas et met une pression sur votre corps et ainsi de suite.

Graphique par Suzanne Helmigh

Voici un exemple de la manière dont les artistes numériques apprennent à connaître divers matériaux en essayant de les appliquer à une sphère. Magma, bois, fourrure, vin, œuf, fromage, tout est valable. Apprendre, le faire avec vos mains, l'imprime petit à petit dans votre cerveau. Et quand vient le temps d'appliquer ce matériau à une vraie peinture, vous avez maintenant une meilleure compréhension de son fonctionnement réel et de l'aspect réaliste du résultat final.

Voici un exemple où la peau, le cuir, le métal et les cheveux sont tous utilisés pour produire un très beau produit final. Le manque de compréhension fondamentale de ces matériaux pourrait donner au métal l'apparence du plastique, du papier semblable à du cuir, etc.

Source de l'image: Artstation

Défis des composants de conception Web

Maintenant, jetons un nouveau coup d'œil à certains composants courants que vous utiliserez souvent dans la conception Web et à certaines pratiques à faire:

1 - Boutons

L'un des composants les plus fondamentaux d'un site Web. Les boutons sont de toutes formes et tailles. Vous pouvez définir des dégradés, changer les couleurs, ajouter une ombre de texte, ajouter des bordures (plus d'un), ajouter un style de brillance, les définir, changer leur forme (carré, coins arrondis, cercle), certains sont livrés avec des icônes, d'autres ont des icônes séparées en zone sous-cliquable.

Source de l'image: Dribbble

Tâche : concevoir un bouton dans 20 styles différents. Plus la différence est grande, mieux c'est. Pour chacun d'entre eux, continuez à suivre les meilleures pratiques de conception en termes de contraste, d'équilibre, etc.

2 - Cartes

Les cartes ou les boîtes sont un autre composant très commun. Il peut contenir n'importe quel type de contenu, bien que certains éléments communs puissent être un en-tête / pied de page + contenu principal.

Source de l'image: Dribbble

Tâche : En utilisant le contenu, formez les cartes ci-dessus, concevez 10 variantes, idéalement aussi différentes que possible. Changez de style, ajoutez de nouveaux éléments, faites-les pivoter, utilisez des dégradés, des ombres, des icônes et des illustrations. Essayez de vous déchaîner avec.

3 - Commentaires

Presque tous les blogs ont une forme de système de commentaires. Mais avez-vous pensé que l'élément de commentaire ne contenait peut-être pas vraiment un commentaire mais plutôt un changement de «statut»?

Source de l'image: Dribbble

Tâche: l'exemple ci-dessus illustre exactement cela. Maintenant, essayez de trouver tout ce qui est lié à un composant de commentaire - commentaires des utilisateurs, statuts de mise à jour des tâches (qui se trouvent dans la zone de commentaires), commentaires de type chat, tout. Tout ce qui se situe entre 7 à 10 variations serait un bon nombre. Encore une fois, essayez de les garder tous différents. Recherchez plus, trouvez des idées, parcourez des sites.

Le but de ces exercices est de trouver des moyens de réaliser des éléments communs d'une manière nouvelle que vous ne connaissiez pas auparavant.

4 - Curseurs

Les curseurs sont l'un des composants que de nombreux développeurs frontaux détestent en raison de l'énorme quantité de problèmes qu'ils créent ainsi que du JavaScript lourd qui pourrait s'exécuter en arrière-plan. Mais cela ne signifie pas que vous n'aurez pas besoin d'en créer un.

Source de l'image: Dribbble

Tâche: Parcourez le Web et les différents modèles pour en savoir plus sur les différentes présentations et approches. Jetez peut-être un œil aux bibliothèques JS où ils font des diapositives pour voir ce qu'ils ont. À partir de là, concevez 10 à 15 modèles différents pour les curseurs. Encore une fois, essayez de rendre chaque design aussi différent que possible du précédent, n'utilisez pas seulement de légères améliorations.

5 - Formulaires de saisie

Les formulaires de saisie sont une autre partie essentielle de presque tous les sites Web. Intéressant avec eux, c'est qu'ils reçoivent des informations au lieu d'en sortir une.

Source de l'image: Dribbble

Tâche: votre travail ici consiste à trouver le type d'informations le plus étrange dont quelqu'un pourrait avoir besoin sur un site Web. Téléchargez un fichier PDF ou PSD (choisissez-en un), des informations de carte de crédit, ajoutez une recette de cookies, calculez les ratios de mélange de peinture, créez un configurateur de concession automobile. Tout ce qui vous vient à l'esprit, le plus unique sera le mieux. Encore une fois, continuez à parcourir les sites Web pour voir de vraies solutions. Concevez au moins 10 formes uniques différentes avec des designs uniques.

Sommaire

Construire une bibliothèque de conception en tant que concepteur est l'un des principaux tremplins pour améliorer votre flux de travail, produire rapidement des conceptions, résoudre les problèmes de vos clients et trouver des moyens uniques et géniaux d'améliorer l'expérience utilisateur. Lorsque vous commencez à parcourir et à regarder de près chaque élément sur le Web, vous commencez à considérer les actions de l'utilisateur, ce qu'il voit et comment cela pourrait être amélioré.

Utiliser les tâches ci-dessus comme devoirs vous aidera à remplir votre portfolio. Ne vous limitez pas aux 5 tâches mentionnées, allez là-bas, parcourez des sites Web, faites des refontes, étudiez-les et continuez à développer vos sens du design et à créer votre propre bibliothèque visuelle!