Comment transformer rapidement des icônes ennuyeuses en chefs-d'œuvre originaux

Les icônes font partie intégrante de nos conceptions. Ce sont des repères visuels pour indiquer diverses actions, et ils peuvent donner une identité unique à un produit. Mais trop souvent, nous choisissons de célébrer leur importance en téléchargeant les mêmes jeux d'icônes et en faisant en sorte que chaque icône de chaque site Web se ressemble plus ou moins. Quelle façon de traiter quelque chose d'une telle importance.

Afin de résoudre ce problème, j'ai créé un guide pour aider les concepteurs à ajouter de la profondeur visuelle à leurs icônes et à les rendre uniques au produit qu'elles représentent. Ce didacticiel est largement inspiré de la conception influente de Google Material.

Principes de conception de matériaux de Google

Comme le dit Google, "le matériel est une métaphore". Il emprunte des repères visuels au monde physique et crée un nouveau langage visuel pour standardiser toutes leurs interfaces. Les principes du Material Design sont accessibles et peuvent être rapidement appliqués pour améliorer l'attrait des interfaces et l'expérience utilisateur.

1. Utilisez des formes géométriques simples et des couleurs vives

La tendance du design plat a inspiré le Material Design, qui est également basé sur des formes plates de base. Sélectionnez soigneusement la forme qui représente le mieux l'élément représenté par l'icône.

2. Ajoutez de la profondeur avec des ombres subtiles

Une ombre portée est un bon moyen de tromper l'œil et de donner une impression de profondeur à votre conception, car elle stimule l'effet de la lumière projetée sur un objet.

Notez que la lumière naturelle est souvent simulée comme provenant du coin supérieur gauche.

3. Utilisez des nuances de couleur pour remplacer les ombres portées

Chaque couleur est utilisée dans plusieurs nuances pour simuler la profondeur visuelle. Par exemple, dans l'icône Gmail, vous pouvez voir que différentes nuances de rouge sont utilisées pour la forme du M, et une nuance de gris plus foncée est utilisée sous le couvercle de l'enveloppe.

Comment vous pouvez le faire aussi : démos étape par étape

Nous appliquerons une version simplifiée du style Material Design, et pour chaque icône, nous n'utiliserons que trois nuances de la même couleur et garderons les ombres plates et courtes, au lieu de l'effet commun "long shadow".

Ressources

• Consultez l'ensemble complet d'icônes gratuites de Google ici.

Commençons.

1. Icône de boulon

Cassez l'icône d'origine en deux et faites apparaître la partie supérieure soulevée. Vous pouvez y parvenir en créant un effet d'ombre à l'intersection des deux formes. Utilisez trois nuances de jaune - plus claires en haut, plus foncées en bas et gardez la teinte la plus foncée pour l'ombre.

2. Icône de chat

Sur l'icône d'origine, nous avons un soupçon d'effet d'ombre dans l'espace entre les deux bulles, c'est là que vous allez créer une ombre.

Sur la forme inférieure, sélectionnez le point formant l'angle droit dans l'espace et déplacez-le vers le haut vers la gauche jusqu'à ce que vous formiez un angle droit dans le coin supérieur gauche.

Dupliquez la bulle du haut et déplacez la copie vers le bas et vers la droite. Sélectionnez la copie et la forme de bulle inférieure, utilisez le "Pathfinder" pour créer une division et ne conservez que l'intersection avec votre copie précédente.

Vous pouvez maintenant appliquer trois nuances de bleu et donner la plus claire en haut, la plus foncée au milieu et la deuxième plus foncée en bas.

3. Icône de coche

Nous allons créer un effet de papier plié.

Dupliquez l'icône et supprimez les deux points supplémentaires tout en haut à droite, puis à l'extrême gauche pour sortir deux pièces.

Dupliquez le pli de gauche et déplacez-le au-dessus de celui de droite.

Intersectez les deux formes pour créer l'effet d'ombre. Ensuite, appliquez trois nuances de couleur en gardant la plus foncée pour l'ombre, la deuxième plus foncée pour la pièce longue et la plus claire pour le haut.

4. Icône de drapeau

Commencez par arrondir les bords, puis extrayez la base du drapeau.

Pour créer un effet de pliage, tracez deux lignes qui se croisent en diagonale. À l'aide du "Pathfinder", divisez la forme du drapeau avec les lignes et appliquez trois nuances de vert au drapeau tout en gardant la base grise.

5. Icône du cœur

Dupliquez l'icône du cœur.

Isolez la moitié gauche de la forme.

Tracez une ligne diagonale vers le bas, en partant du point supérieur droit.

Superposez la forme obtenue avec le cœur, puis déplacez-le vers la droite pour soustraire la forme de l'ombre. Appliquez vos trois nuances de rose.

6. Icône des montagnes

L'espace vide à l'intérieur de l'icône d'origine indique où nous pouvons placer une ombre.

Créez les deux formes triangulaires à partir de chaque médiator.

Déplacez une copie de la plus petite vers la droite et extrayez l'intersection résultante en tant que forme d'ombre.

Appliquez trois nuances de marron en gardant la plus claire à gauche, la deuxième plus claire au grand triangle, et la plus foncée pour l'ombre au milieu. Appliquez un rayon de coin pour adoucir le résultat.

7. Icône de personnes

Sélectionnez et dupliquez la partie inférieure de la personne à gauche. Alignez cette copie avec la personne à droite. Maintenant, sélectionnez les trois formes qui se chevauchent et appliquez l'outil "Diviser" du panneau "Pathfinder". Maintenant, appliquez les couleurs pour finir.

8. Icône carrée flottante

Sélectionnez la forme inférieure et déplacez son point central vers le haut jusqu'à ce qu'il ressemble à un diamant.

Dupliquez la forme de diamant supérieure et déplacez la copie vers le bas de 10 ou 20 px.

Sélectionnez les deux formes inférieures et appliquez l'outil "Diviser" du panneau "Pathfinder".

À partir des formes intersectées résultantes, ne conservez que les deux pièces inférieures et supprimez tous les points supplémentaires.

Enveloppez-le en appliquant trois nuances de rouge tout en attribuant le plus foncé au milieu.

9. Icône de lettre

Avec "l'outil de sélection directe (A)", choisissez le deuxième point supérieur de la forme de l'enveloppe.

Ajoutez un point sur le segment à sa droite à l'aide de "l'outil Plume".

Maintenant que vous avez un point supplémentaire, vous pouvez remodeler cet espace négatif pour qu'il ressemble à un papier en soulevant les deux points supérieurs et en les déplaçant à droite et à gauche comme indiqué.

Sélectionnez tout et appliquez une division à partir du panneau "Pathfinder". Séparez la forme de papier supérieure de l'enveloppe, puis dupliquez la partie enveloppe sur le dessus du papier pour découper la forme d'ombre avant d'appliquer trois nuances de bleu.

10. Icône de gâteau

Isolez une version dupliquée de la partie inférieure du gâteau.

Réduisez sa largeur en déplaçant les bords gauche et droit vers l'intérieur.

Déplacez la forme résultante au-dessus de l'icône d'origine et étendez les points les plus élevés pour chevaucher la forme de glaçage.

Créez une division de toutes les formes qui se chevauchent avec le "Pathfinder" et supprimez les points supplémentaires à côté de la base de gâteau étroite que vous avez créée précédemment.

Complétez votre gâteau en appliquant un orange clair sur le glaçage et la bougie, une teinte plus foncée sur la base et un orange encore plus foncé pour la forme de la flamme et le bord de l'ombre.

Améliorez l'apparence de votre jeu d'icônes

La création d'icônes avec le style de Material peut être réalisée avec simplicité. Vous n'avez besoin que d'une bonne combinaison de formes géométriques réfléchies, de nuances de couleurs vives et d'un effet d'ombre portée.

La bonne nouvelle est que vous n'avez même pas besoin de créer toutes les icônes à partir de zéro, comme nous l'avons fait dans ce didacticiel. Vous pouvez commencer à partir d'icônes plates gratuites existantes et appliquer les techniques simples que vous venez d'apprendre.

Dites-nous ce que vous en pensez! S'il vous plaît laissez vos pensées, commentaires et commentaires ci-dessous.

• • •

Pour en savoir plus sur le blog Toptal Design :

• Les principes de conception et leur importance
• Les meilleurs portefeuilles de concepteurs UX - Études de cas et exemples inspirants
• Explorer les principes de conception de la Gestalt
• Adobe XD vs Sketch - Quel outil UX vous convient le mieux ?
• Les 10 livrables UX utilisés par les meilleurs designers