7 conseils pour une utilisation efficace des icônes dans les projets de conception
La conception d'icônes peut être très amusante. Mais une fois que vous avez un bon ensemble, que faites-vous avec eux?
Les icônes ne sont pas seulement des liens miniatures pour Facebook ou Instagram - elles peuvent être des indices entièrement interactifs qui aident à guider les utilisateurs dans une conception et fournissent une étincelle visuelle supplémentaire. Les icônes peuvent être petites ou grandes, en noir et blanc ou en couleur, plates ou complexes. Peu importe le style qui vous plaît, l'utilisation efficace des icônes peut améliorer la convivialité et la valeur esthétique de presque tous les projets de conception.
Explorez Envato Elements
1. Ajoutez un intérêt visuel
Toutes les images ne seront pas un paysage à couper le souffle. Parfois, les images échouent.
Une iconographie amusante peut aider à ajouter plus d'intérêt à ces photos quelque peu inintéressantes. Utilisez des icônes pour améliorer le contenu de la photo, fournir un peu d'informations supplémentaires et fournir un signal d'interaction.
Prenons l'exemple ci-dessus pour une clinique dentaire (certes, ce n'est pas le concept visuel le plus intéressant.) Le design est frais, lumineux et accueillant. L'icône simple à côté du visage est une nouvelle interprétation de «l'idée de l'ampoule» - notez les petites dents. L'équilibre entre la partie claire de l'écran à gauche et l'icône blanc brillant aide également à attirer l'œil sur le design. Le reste du site utilise également d'autres minuscules icônes pour la navigation.
2. Créer une interaction
Les icônes n'ont pas à s'insérer dans des emplacements spécifiques pour encourager l'interaction des utilisateurs. (Trop de modèles utilisent la combinaison icône / texte à trois colonnes dans le défilement.
Les icônes peuvent en fait être l'élément qui stimule l'interactivité. Associez l'iconographie et le défilement de parallaxe pour que les éléments se déplacent sur l'écran. Superposez des icônes avec des images ou un autre arrière-plan pour créer un élément un peu inattendu.
Boone Selections crée une scène de voyage pour ses vins en utilisant l'iconographie d'une manière qui vous donne envie de faire défiler. L'icône d'avion se déplace dans un avion en suivant les flèches à l'écran (qui réagissent au défilement). Chaque icône de dessin au trait s'affiche sous forme de dessin lorsque l'utilisateur fait défiler jusqu'à cette partie de l'écran. Les mouvements sont simples, classiques et très efficaces.
3. Utilisez l'animation
Personne n'a jamais dit que les icônes devaient être des éléments statiques. Animez-les!
Mais ne deviens pas trop fou. Les meilleures animations d'icônes concernent le contenu de l'icône elle-même. Les mouvements ne devraient pas être trop rapides car cela peut être un peu énervant. Les mouvements ne devraient pas être trop lents car les utilisateurs pourraient les manquer. Il y a un endroit idéal au milieu où le mouvement des icônes procure un peu de plaisir.
Sweet Punk le fait avec brio. L'icône est la «même vieille ampoule» qui s'utilise partout, mais avec un cachet de personnalisation. Notez l'intérieur de l'ampoule - c'est une flamme. Ensuite, il y a une action de vol stationnaire amusante alors que l'ampoule rebondit avec un tourbillon d'idées. De plus, le motif de cercle autour de l'ampoule se déplace doucement et semble répondre aux motifs de survol.
4. Créer des groupes d'icônes
Des grappes de formes intéressantes, des croquis ou d'autres icônes artisanales peuvent créer un visuel intéressant. Le concept est généralement affiché sur les sites Web qui distribuent des packs d'icônes (comme celui ci-dessus), mais il a une application plus large.
Considérez les rangées d'icônes - jouez avec leur utilisation sous ou surdimensionnée pour plus d'impact - lorsque vous manquez d'un bon visuel. Les icônes peuvent fonctionner comme des liens ou simplement des images autonomes. Les clusters peuvent inclure seulement deux ou trois icônes ou trois fois plus. Laissez votre contenu guider ce processus décisionnel.
Ce qui est bien avec les icônes en cluster, c'est que vous pouvez vraiment sortir des sentiers battus et faire quelque chose de créatif. L'autre bonus? Vous pouvez même commencer avec un pack d'icônes si vous le souhaitez et personnaliser les icônes pour les personnaliser. Les deux options peuvent être très amusantes et vous permettre d'essayer quelque chose de totalement différent.
5. Combinez avec des éléments tendance
Les icônes ne devraient être qu'une partie de la stratégie de conception d'un projet. Pensez à votre contenu et associez l'iconographie à un autre élément tendance pour créer une esthétique moderne.
La bonne chose à propos de l'utilisation des icônes est la flexibilité du style. Les icônes se présentent sous toutes les formes, des dessins au trait, des styles basés sur des croquis aux dessins découpés à plat pour élaborer des œuvres d'art miniatures. Une fois que vous avez défini un style de conception pour un projet, créez un ensemble d'icônes correspondant à ce ton visuel.
Le site Web pour une histoire des icônes le fait magnifiquement. Le site montre comment les styles d'icônes ont évolué au fil des ans - ce qui est une étude de cas intéressante en soi si vous recherchez plus d'inspiration - mais chaque icône est placée à l'intérieur d'un élément de conteneur dans un motif de style de conception matérielle, avec des couches plutôt plates, tactiles mouvements, typographie propre et couleurs vives.
6. Mettez une touche fantaisiste dessus
Pour certaines icônes, il existe des conceptions standard que vous voudrez utiliser pour que les utilisateurs sachent exactement ce que font ces éléments. Cela peut inclure des icônes pour les liens vers les réseaux sociaux, la recherche, les paniers d'achat et les flèches de navigation. Vous ne devez jamais sacrifier la convivialité pour un nouveau design.
Mais vous pouvez apporter votre propre touche fantaisiste à ces styles d'icônes standard. Changez la couleur, ajustez la forme ou redessinez même les icônes de votre style. L'astuce consiste à faire quelque chose qui semble unique tout en conservant la reconnaissance visuelle afin que les utilisateurs ne remettent pas en question la signification de l'icône.
Des changements simples peuvent aller très loin. Ce type d'ajustement peut également aider les éléments communs à faire partie de votre conception et de votre histoire visuelle.
Little Puds & Co. fait cela d'une manière absolument charmante. Les icônes communes dans le coin supérieur sont identifiables, mais prennent la couleur de marque du site Web. Les icônes semblent un peu plus douces qu'elles ne le seraient dans les palettes de couleurs normales de Facebook et Instagram et semblent correspondre au style plus fantaisiste et enfantin utilisé tout au long du design.
7. Créez des croquis personnalisés
Les icônes peuvent être des toiles d'art miniatures en elles-mêmes. Alors que les tendances iconographiques se tournent davantage vers des rendus de dessins au trait super plats, les esquisses détaillées peuvent fournir une excellente option personnalisée qui est la vôtre.
Chaque ensemble esquissé à la main sera différent. Il n'y a pas de véritable moyen de les classer autrement que de trouver quelque chose que vous pouvez posséder. Les icônes esquissées font souvent partie de l'identité de la marque qui les utilise.
Infinity Foods utilise à merveille ce style tout au long de sa conception. (Vous devriez vraiment cliquer pour regarder l'ensemble des icônes.) Le style d'esquisse commence par le logo et le même style de crayon détaillé est utilisé pour chaque élément d'icône dans la conception.
Conclusion
Bien que les icônes soient l'un des éléments les moins pensés d'un projet de conception, elles peuvent être l'une des plus intéressantes. Une bonne iconographie peut rassembler un projet d'une manière qui lui donne un peu de poli et de finesse.
La bonne chose à propos de l'utilisation des icônes est qu'un bon ensemble basé sur des vecteurs peut être utilisé de plusieurs façons et à différentes tailles. Intéressé à saisir des milliers d'icônes pour un prix d'abonnement avantageux? Creative VIP vous a couvert!
