Directives pour créer votre propre jeu d'icônes

L'iconographie fait partie intégrante de tout projet de conception d'interface utilisateur de nos jours. Les icônes ont la capacité de communiquer des idées, des fonctions et des significations dans un langage visuel commun. Examinons la quantité de travail nécessaire pour créer un jeu d'icônes, ainsi que les phases logiques à suivre pour le faire..

Pour les besoins de cet article, nous allons travailler avec un jeu d’icônes que j’ai récemment conçu et appelé Uicons..


Pour télécharger le jeu d’icônes référencé dans cet article, visitez le site www.uicons.co.

Étape 1: recherche

La communauté des concepteurs de sites Web aime les grandes ressources. Open source ou non, ils facilitent tellement la vie de nos concepteurs. Avant de vous lancer dans la création d'un jeu d'icônes, il est judicieux de vérifier s'il en existe déjà un qui conviendra à vos besoins..

La première étape consiste donc à vérifier les jeux d’icônes existants; vous pourriez économiser du temps et de l'énergie en ne recréant pas ce qui existe déjà.


Étape 2: placement

Le placement concerne le point de différence entre votre jeu d’icônes proposé et l’un des mille jeux d’icônes existants. Cela découle vraiment de notre phase de recherche; sans savoir ce qui est déjà disponible, comment savez-vous qu'il existe une demande ou un besoin??

Le choix des styles d'icônes est vaste et vous devrez choisir le style de vos icônes. Qu'ils soient mono, couleur, multicolore, tridimensionnel, cartoon, réaliste, silhouettes, dessinés à la main ou en pixel, choisissez un style et respectez-le..

Avant de créer Uicons, j’ai trouvé un besoin / besoin d’icônes vectorielles multicouches de pixels parfaits. Je voulais un jeu d'icônes plus profond et détaillé que la plupart des jeux d'icônes mono existants, sans avoir à utiliser des icônes en couleur.

Donc, une fois que vous avez trouvé un point de différence et choisi un style, il est temps de passer à la phase de planification.


Étape 3: planification

La planification consiste simplement à décider quelles icônes vous souhaitez inclure dans votre ensemble. Vous devrez déterminer à qui votre jeu d'icônes fera appel, puis créer une liste (mieux conçue sous forme de feuille de calcul) en fonction de ces paramètres..

Un bon conseil est de scinder votre liste en sous-catégories telles que médias sociaux, types de fichiers, transport, etc. En plus de garder les choses commandées, cela vous sera utile pendant la phase de conception, car cocher la liste au fur et à mesure rendra l'achèvement de votre liste d'icônes moins intimidant..

La phase de planification est également le moment idéal pour choisir la ou les tailles à offrir à vos icônes. Les dimensions courantes sont de 16, 32 et 48 pixels, mais nous commençons à voir de plus en plus de jeux d’icônes livrés dans des formats évolutifs comme le .CSH (fichier de forme Photoshop) et les formats de police. Plus sur les formats plus tard.

Au cours de la phase de planification, il est bon de réfléchir aux recherches que vous avez effectuées lors de la première phase. Il y a des centaines de glyphes et d'icônes qui devraient être considérés pour un ensemble complet - vous ne pourrez pas vous en souvenir tous sans un quelconque matériel de référence..

Soyez dur avec vous-même pendant la phase de planification. N'ayez pas peur de dire non à une idée ou d'éliminer la liste, cela peut exploser de manière ridicule. La création d'icônes de qualité prend du temps et la création d'un ensemble de 5 000 (par exemple) ne prendra pas seulement une éternité, il est difficile à gérer pour l'utilisateur final.

Pendant les 4 mois qu'a duré la création d'Uicons, je me suis constamment retrouvé à cueillir et à compléter la liste jusqu'à la parution. Même maintenant, je pense toujours aux icônes à inclure dans la prochaine version..


Étape 4: Conception

Vous devriez maintenant avoir votre liste remplie d'idées pour vos icônes kick ass. Vous êtes maintenant prêt à commencer à concevoir.

Au cours des phases 2 et 3, vous avez décidé du style de votre icône. Votre style spécifique aura une incidence sur l'application ou la méthode que vous utilisez pour créer vos icônes..

Dans le cas de Uicons, je créais des icônes évolutives (vecteurs), que les utilisateurs pouvaient redimensionner sans perte de qualité. La plupart des concepteurs utilisent Illustrator ou d'autres applications graphiques vectorielles. Toutefois, un programme vectoriel peut vous rendre la vie difficile si vous créez des icônes de pixels dessinés à la main. Choisissez la bonne application pour le travail.

Maintenant, quand je parle d'inspiration, je ne parle pas de «plagiat». Faites le vôtre.

Les icônes sont des formes de base arrangées pour rendre quelque chose de reconnaissable. Il peut être difficile d’imaginer toutes vos icônes et de les visualiser à partir de zéro. Heureusement, vous avez les recherches que vous avez faites dans la phase 1 et possédez une liste de points de référence pour l'inspiration visuelle.

Il est bon de jouer avec des idées de conception alternatives pour vos icônes. Il y a plusieurs façons de représenter un magasin, de représenter des outils, de représenter n'importe quoi. Sois créatif. En plus d'offrir une présentation standard du sujet de votre icône, essayez d'offrir une nouvelle perspective. Si tous les concepteurs d'icônes partageaient les mêmes idées de la même manière, le monde de l'interface utilisateur serait plutôt ennuyeux..

Ce n’est pas parce que vous avez conçu quelque chose que vous devez effectuer la coupe finale. Soyez sélectif sur ce que vous finissez par rendre public. Dans le cas d’Uicons, environ 10% des icônes ont été laissées sur le sol de la salle de découpe pour une raison ou une autre.

La phase de conception est évidemment la phase qui prend le plus de temps de l’ensemble du projet. Il est donc important d’endurance, de résistance et de cohérence..


Étape 5: Continuité

Pas vraiment une phase dédiée, mais une approche globale de votre jeu d’icônes. Tout au long du processus de conception, veillez à ce que le jeu d’icônes reste cohérent dans le style et l’apparence. Si vous n'êtes pas trop préoccupé par la cohérence du processus, la continuité deviendra une phase dédiée à mesure que vous réviserez tous vos styles d'icônes à la fin..

Une mauvaise attention portée à la cohérence peut conduire à des poids inégaux, des tailles incorrectes, des perspectives erronées ou tout simplement totalement erronées. Après chaque icône, prenez du recul et voyez comment cela s’accorde avec ceux que vous avez déjà créés - il peut être facile de choisir l’intrange.


Étape 6: Livraison

Vous avez peut-être choisi de livrer votre jeu d'icônes au format vectoriel, tel que .EPS, .AI ou .SVG, auquel cas vous avez coupé une partie du travail. Vous pouvez être encore plus intelligent et choisir de publier vos icônes sous forme de fichier de police ou de fichier .CSH. L'une ou l'autre de ces options rendra un concepteur expérimenté comme votre jeu d'icônes encore plus. Cette route nécessite un peu plus d'effort, car vous devrez convertir vos icônes Illustrator dans un autre format, mais le travail supplémentaire produit d'énormes avantages..

En raison de mon point de différence en concevant Uicons, j'avais un peu plus de travail devant moi à ce stade. Mon désir était de créer des icônes vectorielles multicouches de pixels parfaits. J'aurais pu faire la chose multi-couches dans Illustrator et les laisser comme ça pour que les gens les copient et les collent dans Photoshop, mais je voulais des vecteurs de pixels parfaits dans un programme raster.

Photoshop est génial. C'est-à-dire, jusqu'à ce que vous commenciez à créer des icônes. Pour de nombreuses bonnes raisons, Photoshop autorise des variations sur la largeur en pixels. Vous pouvez avoir un demi-pixel ou même les deux tiers si vous le souhaitez. L'anti-aliasing comme on l'appelle est idéal pour les polices et les courbes de Bézier, mais peut être frustrant lorsqu'il s'agit de créer des icônes parfaites en pixels.

Uicons nécessitait d'importer plusieurs formes vectorielles indépendamment d'Illustrator dans Photoshop, de les aligner, de les redimensionner et de les styler, puis de les optimiser pour obtenir la perfection en pixels, en incrémentant progressivement les chemins pour créer des contours nets.


Étape 7: Distribution

Félicitations pour aller si loin! Ce n'est pas une mince tâche de créer votre propre jeu d'icônes. Maintenant que tout le travail est fait, il ne vous reste plus qu'à rendre publiques vos icônes. À ce stade, vous avez décidé si vous offriez ceci en tant qu'ensemble d'icônes gratuit à la communauté des concepteurs ou si vous souhaitez obtenir un petit remboursement pour les centaines d'heures consacrées à la création de votre ensemble d'icônes tueur..

Quoi qu'il en soit, vous avez besoin d'une étape à partir de laquelle les utilisateurs peuvent prévisualiser et télécharger. L'option gratuite est la plus simple, car vous pouvez littéralement les envoyer sur un ensemble de sites de ressources graphiques et de blogs pour les publier, attendre et attendre les félicitations..

Cependant, si vous souhaitez vendre votre jeu d'icônes tueur, vous avez encore du travail à faire. Le moyen le plus simple de les vendre est de les héberger sur l'un des sites de ressources de conception tels que GraphicRiver. Le téléchargement et le paiement sont pris en charge pour vous et vous avez l'avantage du trafic de leur site existant..

Si vous êtes plus proactif, une autre option consiste à créer votre propre site Web pour afficher et télécharger vos icônes à prix modique. Si tel est le cas, il existe d'excellentes options pour vous aider à gérer le téléchargement et le paiement..

Les services de livraison numérique tels que Fetch et Quixly facilitent la vente de votre jeu d’icônes en prenant soin de la commande, du téléchargement et du paiement. Il vous suffit de concevoir et de construire un site cool pour afficher votre travail. Tous les trucs technologiques lourds sont pris en charge.


Conclusion

L'iconographie, comme tout langage visuel, doit être claire et concise. Quoi que vous essayiez de représenter avec des icônes, restez simple et clair et vos chances de compréhension universelle seront plus grandes..