6 étapes faciles pour une meilleure conception d'icônes

Cet article traite d'un ensemble de directives de conception en six étapes. Les étapes suivent les bases de la conception d'icônes sonores, y compris la cohérence, la lisibilité et la clarté. Les principes d'une conception d'icônes efficace ont été longuement discutés par le concepteur d'icônes John Hicks de Hicks Design dans son livre The Icon Handbook, ainsi que par Google dans ses directives de conception matérielle pour les icônes système. Les six étapes décrites dans cet article doivent être considérées comme un guide et non comme une liste dogmatique de règles . Une partie pour devenir un grand designer consiste à apprendre quand enfreindre les règles et quand les suivre, comme nous le démontrerons ici.

Les marchés d'icônes et de vecteurs comme Iconfinder (où je travaille) font des icônes vectorielles bien conçues une ressource peu coûteuse et facilement disponible pour les concepteurs Web et imprimés. Des milliers d'ensembles d'icônes premium de haute qualité et des centaines d'excellents ensembles gratuits sont disponibles.

Chaque ensemble d'icônes soumis à Iconfinder est examiné et évalué pour son attrait potentiel pour les utilisateurs de notre site Web et pour sa valeur commerciale potentielle en tant qu'icônes premium. Lors de l'examen des ensembles d'icônes soumis sur le site Web, nous avons la responsabilité envers nos concepteurs et envers nos clients de nous assurer que toutes les icônes premium sur le site Web sont de la plus haute qualité possible.

Lectures complémentaires sur SmashingMag :

• Comment concevoir des icônes d'application accrocheuses
• Icônes dans le cadre d'une excellente expérience utilisateur
• Comment créer des icônes dans Adobe XD
• Étapes faciles pour améliorer la conception des icônes
  

Pour y parvenir, nous sommes constamment conscients de la différence entre «pas tout à fait assez bon» et «qualité supérieure». La différence est souvent très petite et nécessite généralement des modifications minimes, mais elle a un impact important sur la conception et la valeur du jeu d'icônes. Contrairement à de nombreux autres marchés, nous rejetons rarement les ensembles qui ne répondent pas tout à fait à nos exigences de qualité. Au lieu de cela, nous partagerons des suggestions très spécifiques et exploitables sur la façon dont le concepteur peut améliorer les icônes.

La refonte d'une icône

Dans les exemples d'images qui suivent dans cet article, les six étapes décrites seront appliquées à une refonte d'une icône de chien (un Corgi, pour être exact) qui a été récemment soumise par un utilisateur d'Iconfinder nommé Kem Bardly. L'icône avait du potentiel mais n'était pas assez raffinée pour être considérée comme une "qualité premium". Nous avons fourni à Kem quelques conseils faciles à suivre et, avec un peu de remaniement, ses icônes étaient prêtes à être approuvées en tant qu'ensemble d'icônes premium. L'image ci-dessous montre les versions avant et après l'icône de Kem. Dans les sections qui suivent, nous vous expliquerons comment passer méthodiquement de l'avant à l'après.

Notez que bien que les directives décrites dans l'article concernent les icônes Web, elles s'appliquent généralement également aux icônes d'impression. Les 300 points par pouce (DPI) typiques du matériel imprimé rendent la perfection des pixels essentiellement dénuée de sens. Si vous êtes un concepteur d'impression et que vous lisez ceci, tous les principes abordés sont applicables, mais vous pouvez en grande partie ignorer les éléments de perfection des pixels.

Trois attributs d'une conception d'icône efficace

Les icônes bien conçues présentent une approche méthodique et délibérée des trois principaux attributs qui composent toute conception d'icône : la forme, l'unité esthétique et la reconnaissance. Lors de la conception d'un nouvel ensemble d'icônes, considérez chacun de ces attributs dans une approche itérative, en commençant par le général (forme) et en passant au spécifique (reconnaissabilité). Même si vous créez une seule icône, ces trois attributs sont toujours implicites et peuvent être extrapolés à partir d'un seul design.

Il ne fait aucun doute que plus de trois attributs constituent une conception d'icône efficace, mais les trois élaborés ci-dessous sont un bon point de départ. Par souci de brièveté relative, nous nous sommes concentrés sur ce que nous considérons être les trois attributs principaux.

Forme

La forme est la structure sous-jacente d'une icône, ou comment elle est faite. Si vous ignorez les détails d'une icône et tracez une ligne autour des formes principales, forment-elles un carré, un cercle, un rectangle horizontal ou vertical, un triangle ou une forme plus organique ? Les formes géométriques primaires - cercle, carré et triangle - créent une base visuellement stable pour la conception d'icônes. Dans notre exemple Corgi de Kem Bardly, la tête du chien est composée de deux triangles et de deux ellipses. Tout comme on commencerait un dessin en esquissant les formes les plus grandes et les plus simples, puis en affinant vers des détails de plus en plus grands, on commencerait une icône à partir des formes les plus simples, puis on ajouterait plus de détails - mais seulement autant de détails que nécessaire pour communiquer le concept être représenté, qu'il s'agisse d'un objet, d'une idée ou d'une action.

Unité esthétique

Les éléments qui sont partagés au sein d'une seule icône et à travers un ensemble d'icônes sont ce que nous appelons l'unité esthétique. Ces éléments sont des choses comme les coins arrondis ou carrés, la taille spécifique des coins (2 pixels, 4 pixels, etc.), les épaisseurs de ligne limitées et cohérentes (2 pixels, 4 pixels, etc.), le style (plat, ligne, rempli ligne ou glyphe), la palette de couleurs et plus encore. L'unité esthétique d'un ensemble est la collection d'éléments de conception et/ou de choix que vous répétez tout au long de l'ensemble pour le lier visuellement en un tout cohérent. Dans les exemples ci-dessous, notez que chacun des trois chiens de l'ensemble de Kem partage des éléments communs, tels que les coins arrondis de 2 pixels, le trait de 2 pixels d'épaisseur autour des visages des chiens et le nez en forme de cœur.

Reconnaissabilité

La reconnaissabilité est un produit de l'essence d'une icône ou de ce qui rend une icône unique. Le fonctionnement d'une icône dépend en fin de compte de la facilité avec laquelle le spectateur comprend l'objet, l'idée ou l'action qu'elle représente. La reconnaissabilité comprend la présentation des propriétés que le spectateur associe généralement à cette idée, mais elle peut également inclure des éléments uniques ou inattendus, tels que le cœur du nez du Corgi. N'oubliez pas que la reconnaissabilité se réfère non seulement à la compréhension de l'objet, de l'idée ou de l'action représentée, mais également à la reconnaissance de votre ensemble d'icônes unique. À cet égard, l'unité esthétique et la reconnaissance peuvent se chevaucher, et le font souvent. Dans l'image ci-dessous, nous reconnaissons chacun des deux chiens comme un Corgi et un Husky sibérien, respectivement, en raison de leurs couleurs, de leur forme de tête et de leurs oreilles uniques, tout en les reconnaissant comme faisant partie du même ensemble en raison des éléments de conception et de style partagés. .

Jusqu'à présent, nous avons examiné ce que nous considérons comme les trois principaux attributs d'une conception d'icône efficace. Dans la section suivante, nous examinerons en profondeur six étapes pour aborder correctement ces trois domaines de préoccupation.

Les six étapes

Commencez toujours par une grille

Les avantages des différentes tailles de grille seraient mieux traités dans un article séparé. Pour nos besoins, nous travaillerons avec une grille de 32 × 32 pixels. Notre grille contient également des guides de base pour nous aider à créer la forme sous-jacente de chaque conception d'icône.

Les 2 pixels extérieurs de la grille sont ce que nous appelons la "zone interdite". Évitez de mettre une partie de l'icône dans cet espace à moins que cela ne soit absolument nécessaire. Le but de la zone interdite est de créer une marge de manœuvre autour de l'icône.

Une partie de la forme d'une icône est la forme générale et l'orientation. Si vous tracez une ligne autour des bords extérieurs d'une icône - la zone de délimitation, si vous voulez - la forme sera généralement un carré, un cercle, un triangle, un rectangle horizontal, un rectangle vertical ou un rectangle diagonal.

Les icônes circulaires sont centrées dans la grille et touchent généralement les quatre bords les plus à l'extérieur de la zone de contenu, sans entrer dans la zone interdite. Notez qu'une raison courante pour enfreindre la règle de la zone interdite est si un accent ou un élément mineur doit s'étendre au-delà du cercle afin de maintenir l'intégrité de la conception, comme illustré ci-dessous.

Les icônes carrées sont également centrées dans la grille mais, dans la plupart des cas, ne s'étendent pas jusqu'aux bords les plus extérieurs de la zone de contenu. Pour maintenir un poids visuel cohérent avec les icônes circulaires et triangulaires, la plupart des icônes rectangulaires et carrées s'aligneront sur la ligne clé au milieu (la zone orange dans l'image ci-dessous). Le moment de l'alignement sur chaque ligne clé est déterminé par le poids visuel de l'icône elle-même ; avoir une idée de quand utiliser quelle taille demande juste de la pratique. Regardez l'image de disposition carrée ci-dessous. Les trois carrés concentriques mentionnés ci-dessus sont représentés en bleu clair, orange et vert clair.

À l'intérieur du carré de 32 pixels, vous remarquerez les rectangles verticaux et horizontaux de 20 × 28 pixels. Nous suivons vaguement ces rectangles pour les icônes d'orientation horizontale ou verticale et essayons de faire en sorte que les dimensions de toutes les icônes soient orientées ainsi, pour correspondre aux dimensions de 20 × 28 pixels de ces rectangles.

Les icônes orientées en diagonale sont alignées sur les bords de la zone de contenu circulaire, comme le montre l'image ci-dessous. Notez que les points les plus à l'extérieur de la scie sont approximativement alignés sur les bords du cercle. C'est un domaine où vous n'avez pas besoin d'être précis ; proche est assez bon.

N'oubliez pas que vous n'avez pas besoin de suivre la grille et les guides exactement à chaque fois. La grille est là pour vous aider à rendre les icônes cohérentes, mais si vous devez choisir entre rendre une icône géniale et suivre les règles, enfreignez les règles - faites-le avec parcimonie. Comme l'a dit Hemmo de Jonge, mieux connu sous son surnom Dutch Icon :

L'essence d'une icône individuelle l'emporte sur l'importance de la cohésion de l'ensemble.

Commencez avec des formes géométriques simples

Commencez vos conceptions d'icônes en décrivant grossièrement les formes principales avec de simples cercles, rectangles et triangles. Même si une icône finit par être principalement de nature organique, commencez par les outils de forme d'Adobe Illustrator. Lorsqu'il s'agit de créer des icônes, en particulier pour les petites tailles à l'écran, les légères variations des bords résultant du dessin à la main rendront l'icône moins raffinée. Commencer par des formes géométriques de base rendra les bords plus précis (en particulier le long des courbes) et vous permettra d'ajuster rapidement l'échelle relative des éléments dans un dessin, ainsi que de vous assurer que vous suivez la grille et la forme.

En chiffres : bords, lignes, coins, courbes et angles

Autant que possible sans donner au design un aspect trop mécanique et ennuyeux, les coins, les courbes et les angles doivent être mathématiquement précis. En d'autres termes, suivez les chiffres et n'essayez pas de le regarder ou de le faire à main levée lorsqu'il s'agit de ces détails. L'incohérence de ces éléments peut diminuer la qualité d'une icône.

Angles

Dans la plupart des cas, respectez des angles de 45 degrés ou des multiples de ceux-ci. L'anticrénelage sur un angle de 45 degrés est échelonné uniformément (les pixels actifs sont alignés bout à bout), de sorte que le résultat est net, et la diagonale parfaite de cet angle est un motif facilement reconnaissable, que l'œil humain aime beaucoup. Ce modèle reconnaissable renforce la cohérence dans un ensemble d'icônes et l'unité au sein d'une seule icône. Si votre conception vous oblige à enfreindre cette règle, essayez de le faire par moitiés (22,5 degrés, 11,25, etc.) ou par multiples de 15 degrés. Chaque situation est différente, alors décidez au cas par cas. L'avantage d'utiliser des moitiés de 45 degrés est que le pas dans l'anticrénelage sera toujours assez uniforme.

Courbes

L'un des domaines les plus notables qui peut dégrader la qualité d'une icône et qui peut faire la différence entre l'aspect professionnel et amateur est les courbes moins que parfaites. Alors que l'œil humain peut détecter de très légères variations de précision, la coordination œil-main ne peut pas toujours atteindre un haut niveau de précision. Fiez-vous aux outils de forme et aux nombres pour créer autant que possible des courbes, plutôt que de les dessiner à la main. Lorsque vous avez besoin de dessiner une courbe manuellement, utilisez la touche de modification de contrainte d'Adobe Illustrator (ou de votre logiciel vectoriel) (la touche Maj) ou, mieux encore, utilisez VectorScribe et InkScribe par Astute Graphics pour un contrôle encore plus précis sur les courbes de Bézier.

Comme nous le voyons dans l'image "avant" ci-dessus, les lignes dessinées à la main créent des courbes irrégulières qui nuisent à la qualité du design.

Coins

Une valeur courante de coin arrondi (ou rayon) est de 2 pixels. Dans une icône de 32 × 32 pixels, un rayon de 2 pixels est suffisamment grand pour être clairement vu comme arrondi mais n'adoucit pas les coins au point de changer la personnalité du design (donnant ce look "bulle"). La valeur que vous choisirez dépendra de la personnalité que vous souhaitez donner au design. Que vous utilisiez des coins arrondis est une décision esthétique à prendre en tenant compte de l'esthétique globale de l'ensemble.

Après avoir commencé avec des formes géométriques, nous avons maintenant ajouté un contour de 2 pixels, démontrant comment les outils de forme, ainsi que la cohérence des détails tels que les coins arrondis, améliorent la conception.

Cette version grandement améliorée montre l'essentiel du nouveau design, avec des coins uniformément arrondis, des courbes douces et une base pour les poids des lignes autour des oreilles.

Pixel-Perfection

Un alignement parfait au pixel près est important lors de la conception pour de petites tailles. L'anticrénelage sur les bords d'une icône de petite taille peut rendre l'icône floue. L'espace entre les lignes qui ne s'alignent pas sur la grille de pixels sera anticrénelé et apparaîtra flou. L'alignement de l'icône sur la grille de pixels rendra les bords parfaitement nets sur les lignes droites et plus nets sur les angles et les courbes précis.

Comme mentionné, les angles de 45 degrés sont les meilleurs (après les lignes droites) car les pixels utilisés pour définir l'angle sont empilés, ou échelonnés, bout à bout parfaitement en diagonale. Il en va de même pour les coins et les courbes : plus ils sont mathématiquement précis, plus l'anticrénelage sera net. Notez cependant que la perfection des pixels est moins pertinente, du moins pour l'anti-aliasing, à des tailles plus grandes et sur des écrans à plus haute résolution, tels que les écrans "Retina".

Épaisseurs de ligne

En ce qui concerne les poids de ligne, deux sont idéaux, mais trois sont parfois nécessaires. Le but est de fournir une hiérarchie visuelle et de la variété, sans introduire trop de variété et ainsi détruire la cohérence d'un ensemble. Plus de trois et un ensemble peut perdre sa cohésion. L'avantage des épaisseurs de ligne de 2 et 4 pixels est qu'elles sont des multiples de 2 et, par conséquent, facilement mises à l'échelle vers le haut et vers le bas par incréments pairs. Dans la plupart des cas, évitez les lignes très fines, en particulier dans les glyphes et les icônes plates. À moins que vous ne créiez délibérément des icônes de «style de ligne», comptez sur la lumière et l'ombre, plutôt que sur les lignes, pour définir la forme.

Utilisez des éléments de conception et des accents cohérents sur les icônes

Hemmo de Jonge de Dutch Icon a donné une brillante conférence au Icon Salon 2015 dans laquelle il a longuement parlé de cet aspect de la conception d'icônes. Dans son projet de système d'icônes de deux ans et plus pour le gouvernement néerlandais, Hemmo et son partenaire de conception ont incorporé une encoche dans chacune des icônes. Toutes les icônes n'ont pas l'encoche, mais la plupart en ont une. Ce type d'accent, utilisé de manière conservatrice mais cohérente dans un ensemble d'icônes, peut vraiment lier l'ensemble.

Dans notre exemple de chien, nous avons utilisé un élément stylistique commun avec le nez en forme de cœur. La bizarrerie visuelle d'utiliser un cœur pour un nez relie non seulement les icônes, mais ajoute un élément fantaisiste et communique une affection pour nos amis à quatre pattes.

Dans de nombreux cas, même si les principaux aspects d'un ensemble d'icônes sont modifiés - le style, par exemple - les éléments qui créent l'unité esthétique peuvent toujours lier l'ensemble, comme indiqué ci-dessous. Nous avons recréé les trois mêmes icônes de chien dans un style glyphe, plutôt qu'un style plat, et leur esthétique est toujours cohérente.

Utilisez les détails et les décorations avec parcimonie

Les icônes doivent communiquer rapidement un objet, une idée ou une action. Trop de petits détails introduiront de la complexité, ce qui peut rendre l'icône moins reconnaissable, en particulier à des tailles plus petites. Le niveau de détail que vous incluez dans une seule icône ou un ensemble d'icônes est également un aspect important de l'unité esthétique et de la reconnaissabilité. Une bonne règle empirique pour déterminer le bon niveau de détail dans une icône ou un ensemble est d'inclure le strict minimum de détails nécessaires pour rendre la signification claire.

Dans la version ci-dessus, nous sommes assez proches de notre conception améliorée et terminée. Les contours noirs autour des oreilles sont devenus la zone brune recouverte de fourrure autour des oreilles. Les lignes noires autour du visage ont disparu mais sont toujours détectables dans l'espace de 2 pixels au-dessus de la marque blanche sur le visage du Corgi. Notez cependant que nous avons encore quelques éléments de la version "avant", comme le nez uni. Nous aborderons cela dans la prochaine étape.

Rendez-le unique

Le nombre de designers talentueux qui créent des ensembles d'icônes de haute qualité, dont beaucoup sont disponibles gratuitement, semble augmenter chaque jour. Malheureusement, beaucoup de ces designers s'appuient trop sur les tendances ou les styles des designers les plus populaires. En tant que professionnels de la création, nous devrions regarder en dehors de l'industrie des icônes, vers l'architecture, la typographie, le design industriel, la psychologie, la nature et tout autre domaine dans lequel nous pouvons trouver l'inspiration. Étant donné que de nombreux ensembles d'icônes se ressemblent de nos jours, il est de plus en plus important de rendre vos conceptions uniques.

Dans l'image finale "après", nous avons une touche unique dans le nez en forme de cœur, qui ajoute une touche de nouveauté et de légèreté au design.

Ces étapes simples doivent être considérées comme un point de départ et non comme un guide définitif. Il n'y a pas une seule façon de concevoir des icônes. Dans cet article, nous avons décrit les bases d'une approche cohérente du design, mais d'autres designers ont certainement leurs propres opinions et techniques. La meilleure façon de devenir un meilleur designer est de regarder autant de références visuelles que possible, de lire une variété de documents, de dessiner régulièrement (emportez un carnet de croquis partout où vous allez) et de pratiquer, pratiquer, pratiquer.

Conclusion

Nous avons partagé les principes fondamentaux de la création d'icônes de qualité supérieure. Ces fondamentaux sont les compétences techniques ; tout le monde peut les apprendre et les maîtriser avec la pratique. N'oubliez pas que pour créer de meilleures icônes, commencez par le général (forme) et travaillez vers le spécifique (reconnaissabilité). Et gardez vos icônes cohérentes en interne, ainsi que cohérentes dans l'ensemble, en prêtant attention aux éléments partagés (l'unité esthétique) de l'icône ou de l'ensemble. Une fois que vous avez maîtrisé les fondamentaux techniques, vous pouvez concentrer votre énergie sur ce qui distingue vraiment une icône : votre vision créative unique.

Vous avez vos propres techniques, astuces ou fondamentaux que vous aimeriez partager ? Laissez-les dans les commentaires ci-dessous.

Lectures complémentaires

• Tutoriels, Le blog Iconfinder
• Tutoriels d'icônes, IconUtopia
• Le manuel des icônes , Jon Hicks
• Icônes matérielles (directives de conception), Google