Conception d'icônes en 2020: les tendances clés
Les icônes peuvent être l'un des exemples de conception les plus importants - et sous-estimés - de votre portefeuille. Voici un aperçu de la conception des icônes avec des exemples inspirants.
Les éléments d'icônes sont affichés presque partout, mais sont parfois produits après coup. Cela ne devrait pas être le cas. Un superbe design d'icônes peut être distinctif et ajouter de la finesse et du flair à un projet.
Jetons un coup d'œil aux nouveautés et aux nouveautés en matière de conception d'icônes en 2020!
Explorez Envato Elements
1. Icônes de ligne avec des formes de couleur
Les icônes de ligne sont toujours un choix populaire, grâce à un style polyvalent qui convient à presque tous les autres éléments de conception. La tendance ajoute un peu plus d'intérêt visuel avec une touche de couleur, souvent sous la forme d'un cercle ou d'un carré, derrière l'icône de la ligne.
La forme de la couleur peut remplir une partie de la conception de l'icône de ligne, mais le plus souvent, elle flotte simplement en arrière-plan. Ce petit intérêt visuel peut lier un ensemble d'icônes ensemble, souligner une couleur de marque ou simplement rafraîchir un ancien site d'icônes de ligne.
La partie délicate de la conception de l'icône est le placement et la taille de l'élément de forme de couleur. S'il est trop grand ou trop lumineux, il peut s'éloigner de l'icône. Si la forme est trop petite, vous risquez qu'elle ressemble à une erreur.
Bien qu'il n'y ait pas de taille parfaite, la plupart des icônes utilisant cette tendance maintiennent la forme de la couleur à environ un quart de la taille totale de l'icône.
2. Formes d'icônes abstraites
Vous ne savez pas quelle icône représente votre contenu? Une forme d'icône abstraite pourrait être la réponse.
De plus en plus de designers créent des icônes de style abstrait à utiliser sur tous les sites Web. La bonne chose à propos de ce style - et de la tendance en général - est que les styles abstraits créent un sentiment de fantaisie et d'émerveillement qui correspond à certaines des grandes tendances générales du design.
La clé pour travailler avec des formes abstraites est de s'assurer que vous ne reproduisez pas quelque chose par erreur et que les icônes sont vraiment abstraites. (N'essayez pas de créer des icônes similaires à votre logo, par exemple, elles pourraient simplement ressembler à des erreurs.) Pour quelque chose qui correspond vraiment, utilisez la même palette de couleurs pour les icônes et les matériaux de marque.
3. Couleurs primaires
Les palettes de couleurs primaires sont un choix audacieux, lumineux et engageant pour les petits éléments de conception.
Cette tendance de conception d'icônes utilise le rouge, le bleu, le vert et le jaune (ainsi que le violet et l'orange) pour créer un ensemble de règles de couleur de base. Ce qui fait que ce style fonctionne, c'est l'accent mis sur la couleur pour attirer l'attention sur les petits éléments de l'écran. Les couleurs primaires se démarqueront également de toutes les couleurs vives «Matériel» qui ont dominé ces dernières palettes.
Adoucissez le design avec des dégradés (ou des dégradés faux-ombrés, comme dans l'exemple ci-dessus) pour empêcher la palette de couleurs de paraître trop élémentaire. N'exagérez pas lorsque vous travaillez avec des couleurs primaires. Ils peuvent être un peu accablants. Envisagez une palette primaire en sourdine ou un schéma monochromatique.
4. Icônes avec icônes d'arrière-plan
Certaines icônes de tendance ont leurs propres icônes. Sérieusement!
Pour des utilisations plus élaborées des icônes - nous ne prenons pas ici de minuscules favicons - les icônes peuvent être empilées et superposées pour créer plus d'un élément artistique.
Cette tendance utilise souvent la couleur et l'ombrage pour faire la différence entre l'icône focale principale et les icônes d'arrière-plan. L'icône principale est souvent en couleur ou une icône remplie. Les icônes d'arrière-plan sont presque toujours de style ligne et peuvent avoir des palettes de couleurs claires.
Vous pouvez créer cet effet avec de nombreux kits d'icônes premade en mélangeant et en faisant correspondre les icônes de différentes manières. Créez de la profondeur et de l'intérêt visuel avec des icônes d'un thème similaire et respectez une poignée d'éléments pour éviter que la scène ne soit trop occupée. N'ayez pas peur d'utiliser et de réutiliser des éléments et d'utiliser les mêmes icônes (ligne alternée et remplie) en arrière-plan et au premier plan.
5. Icônes bicolores
Une autre tendance de conception d'icônes qui s'appuie sur les styles d'icônes de ligne populaires consiste à créer des éléments bicolores.
Les icônes bicolores peuvent s'appuyer sur votre palette de couleurs existante ou sur les couleurs de la marque ou combiner presque toutes les autres paires de couleurs. Lors de la conception à l'aide de la tendance des icônes, recherchez les paires de couleurs qui se démarqueront de l'arrière-plan sur lequel vous prévoyez de les utiliser.
En ce qui concerne la conception, choisissez une couleur principale pour la plupart de l'icône. Utilisez une couleur secondaire pour accentuer un élément de l'icône. (Pensez à utiliser la couleur primaire pour 70% à 80% du dessin et la couleur secondaire pour le reste.)
Cela crée un accent dans la conception de l'icône qui aidera à attirer l'œil sur l'élément de conception et, espérons-le, sur le contenu environnant également.
6. Icône «sténographie»
Si vous parcourez une boutique d'applications, vous verrez de nombreuses marques communes - enveloppes pour les applications de messagerie, vérifie les applications de productivité, verrouille les applications de sécurité.
Ce raccourci d'icône fournit un message visuel rapide qui indique aux utilisateurs ce que fait l'application. Ce même raccourci s'applique presque universellement à tous les designs d'icônes. Alors que les concepteurs expérimentent des icônes dans leur propre style, il y a une tendance à utiliser des icônes pour une signification spécifique.
Et c'est une bonne chose. Une icône doit être facile à voir et à comprendre en un coup d'œil. Une icône doit aider les utilisateurs à savoir ce qu'ils doivent faire et comment ils doivent interagir avec la conception. Ce raccourci d'icône commun est une belle évolution de la façon de faire exactement cela.
7. Couleur lumineuse
Les choix de couleurs vives ont joué un rôle important dans tous les aspects de la conception. Ce n'est pas différent avec les icônes. Une couleur vive est un moyen séduisant d'attirer l'œil sur l'icône.
La couleur est utilisée de différentes manières en ce qui concerne la tendance de conception d'icônes:
- Comme arrière-plan avec une icône de style de ligne blanche ou noire
- Pour des éléments d'icônes en couleur avec un aspect plus réaliste
- Pour les éléments d'icônes avec un design plus plat, dégradé ou super lumineux
Les choix de couleurs populaires dans la famille lumineuse incluent les jaunes, les bleus, les verts et les violets. Ces couleurs ont tendance à être du bon côté et l'élaboration d'une palette de couleurs avec trois à cinq teintes pour un jeu d'icônes est populaire.
Vous ne savez pas par où commencer? La palette de matériaux présente des couleurs qui jouent un rôle important dans la tendance de conception des icônes de couleur.
8. Icônes dans les logos
Prenez note du nombre d'icônes de logos. Une fois que vous commencerez à y penser, il ne sera pas difficile de voir toutes les petites icônes dans la conception de logo.
Ce qui est bien avec une icône dans un logo, c'est qu'elle fonctionne avec le nom de la marque, et avec du temps et l'équité de la marque peut être autonome. Pensez à l'exemple ci-dessus, Spotify. Même si le fournisseur de musique n'existe pas depuis si longtemps (dans le cadre des marques), le cercle à trois lignes est très identifiable.
L'icône fonctionne en couleur et sans - une clé d'une icône forte - et peut être autonome ou avec un lettrage. Cette polyvalence permet de comprendre facilement pourquoi les icônes sont un élément populaire dans la conception de logo.
9. Cercles
Les cercles sont l'une des formes les plus harmonieuses. Et quand il s'agit de conception d'icônes, elles sont plutôt populaires. Des icônes contenues dans une sphère aux cercles à l'intérieur des objets, la création d'une marque de conception à l'aide de cercles peut créer la sensation idéale pour les utilisateurs.
(Vous voulez en savoir plus sur les cercles dans la conception? Nous l'avons ici.)
Une partie de l'influence du cercle dans la conception des icônes peut être liée à certaines des directives énoncées par Google avec Material Design. Tous ces boutons circulaires sont parfaits pour taper sur les téléphones mobiles. Et cette même philosophie s'applique au design d'icônes. (Pensez simplement à la fréquence à laquelle une icône est un élément tactile ou cliquable.)
La partie qui peut être un petit truc sur cette tendance d'icônes consiste à mailler des cercles à tous les endroits où d'autres formes sont utilisées. Les icônes d'application ont tendance à être carrées; les profils des médias sociaux sont circulaires (et carrés).
Lors de la création d'une icône ronde, assurez-vous que le contenu de la conception de l'icône est facile à comprendre à de petites tailles, car vous devez le rétrécir souvent pour l'adapter à d'autres endroits.
10. Conception d'icônes de style de ligne
Les icônes de style de ligne semblent être la tendance qui ne vieillit jamais.
Cela s'explique en partie par le fait que ce style d'icône peut fonctionner pratiquement n'importe où sur n'importe quel type d'arrière-plan. De nombreux packs d'icônes téléchargeables populaires incluent souvent une conception de style de ligne en raison de cette polyvalence.
C'est facile à voir dans l'exemple ci-dessus. Chaque icône est facile à voir et à comprendre à pratiquement n'importe quelle taille.
11. Éléments et représentations simples
Comme pour la plupart des autres tendances du design en 2020, la simplicité fait également partie du design des icônes. Les formes simples et la géographie se combinent pour créer des représentations presque simplistes pour les icônes.
Le résultat est un design assez astucieux qui fait ressembler les utilisateurs.
Dans l'exemple utilisant les icônes de nourriture ci-dessus, chaque icône utilise le fil conducteur d'un cercle dans l'icône. Cela peut être la forme générale de l'icône elle-même ou une partie de la conception de l'icône. Cette forme relie chaque icône les unes aux autres dans le projet.
12. Icônes avec dégradés
La tendance des couleurs dégradées qui est devenue l'un des thèmes dominants de 2019 est également un facteur dans la conception des icônes. Des dégradés simples en traits (tels que l'exemple ci-dessus) à la coloration complète du dégradé en passant par les icônes blanches sur un fond dégradé, ce jeu de couleurs est populaire.
C'est peut-être ce qui est si attrayant dans l'utilisation des dégradés dans les icônes (et dans l'ensemble) - il y a tellement de façons différentes d'utiliser la tendance. Vous pouvez ajouter un dégradé et ne pas avoir de projet qui ressemble à autre chose.
13. Focus sur la coloration simple
Les concepteurs d'icônes adoptent également l'approche opposée avec la couleur et s'en tiennent à des palettes de couleurs simples, plus limitées et plus basiques pour ces petits éléments de conception.
L'utilisation d'une palette limitée est une excellente idée. Avec un design si petit, trop de couleurs ou de détails peuvent submerger rapidement l'espace et provoquer une fatigue oculaire.
Vous ne voulez pas que les utilisateurs doivent penser à ce qu'est l'icône ou à la couleur. Limiter la quantité de détails - y compris la coloration élaborée - peut rendre chaque icône individuelle un peu plus facile à voir et à comprendre. C'est le plus important avec les icônes qui seront utilisées aux plus petites tailles.
14. Tout style d'application
L'une des raisons pour lesquelles les icônes ont tellement gagné en popularité est que nous les concevons déjà pour presque tout. Des icônes d'application aux icônes de style d'application pour les favicons ou les icônes de bureau, ce style est pratiquement partout.
Les icônes de style application ont un style distinct presque propre. Ceci comprend:
- De forme carrée
- Des bords arrondis
- Arrière-plan coloré (généralement une couleur)
- Forme simple à l'intérieur de l'icône
- Beaucoup de contraste entre l'icône et la couleur d'arrière-plan
- Pas de texte ni de lettrage
15. Coups épais et uniformes
Non seulement les icônes de style ligne sont populaires, mais les icônes avec des traits épais sont particulièrement populaires.
Conçues souvent pour des applications monochromes, ces icônes sont fréquemment utilisées en blanc ou en noir sur des arrière-plans en couleur ou photo.
Les icônes avec des traits épais et uniformes sont le plus souvent utilisées seules, comme une icône de panier ou une icône de contact. Ils ne sont pas souvent utilisés dans une collection d'icônes.
16. Les icônes plates restent populaires
Alors qu'une grande partie de l'attention portée au design plat s'est évaporée, le design des icônes est toujours assez plat (ou du moins presque plat).
Cela est probablement dû à la nature super simple du design plat et à l'idée que ce look peut s'intégrer assez facilement à un certain nombre d'autres styles.
Même en regardant certains des exemples et des tendances de conception d'icônes présentés ici, vous verrez que beaucoup d'entre eux sont plats. (Les icônes de style de ligne sont presque toujours plates, par exemple.)
17. Icônes Emoji
Les émojis sont presque devenus leur propre langue - une forme de communication plus visuelle qui est de plus en plus généralement acceptée.
La conception des icônes prend également une touche emoji-esque. Ces icônes sont identifiables en raison de l'accent mis sur la forme de la tête d'une personne ou d'une créature. (Les icônes emoji inspirées de Star Wars ci-dessus sont un excellent exemple de la façon de s'amuser avec la conception d'icônes.)
Ce style d'icône peut très bien fonctionner pour une page de contact ou pour représenter des personnes ou des personnages dans un design.
Comment concevoir une meilleure icône
Fabriquer une bonne icône ou un ensemble d'icônes, c'est plus que simplement passer à certaines des dernières tendances en matière de conception d'icônes. En raison de la petite taille des icônes, l'attention aux détails et la précision sont une partie importante du processus de conception.
Des règles simples restent valables pour la conception d'icônes en 2019. Associez ces lignes directrices à certaines des idées de tendances ci-dessus pour créer quelque chose que vous aimerez:
- Commencez avec une grille
- Construisez avec la géométrie
- Créez une forme unique
- Donnez beaucoup d'espace aux icônes
- Restez fidèle aux couleurs de votre marque
- Utilisez des divots cohérents
- Concevez pour la plus petite taille dont vous avez besoin
- Ne décore pas
Directives de conception d'icônes
Un bon moyen de suivre ce qui se passe est de consulter les normes graphiques et les guides de style. Chaque fois qu'Apple ou Google change d'approche, tout le monde le fait aussi. En partie parce qu'ils le doivent et en partie parce que le nouveau style reflète souvent l'époque et les tendances du design d'icônes.
Vous pouvez trouver des directives ici:
- Icônes d'application Apple
- Icônes d'application Android
- Icônes de produit de conception matérielle
- Icônes du système de conception matérielle
Conclusion
Les icônes sont un outil de conception utile. De l'utilisation en tant qu'icônes d'application aux marques de site Web ou favicons aux divots qui peuvent être utilisés dans un logo ou tout au long d'un projet de conception, l'icône est une marque qui est là pour rester.
Approchez la conception des icônes de la même manière que vous le feriez pour presque n'importe quel autre projet, mais pensez vraiment à la simplicité et à la taille. Les icônes sont conçues pour être regardées rapidement et sont souvent petites. Cela peut avoir un grand impact sur la conception.
