Share
Traduire les caractéristiques «iconiques» d'un objet en un objet métaphoriquement significatif et immédiatement reconnaissable n'est pas une tâche facile, en particulier lorsque la conception doit être aussi efficace en 48x48 pixels qu'en 256x256.!
Une icône mémorable et fonctionnelle est belle, iconique, significative et fonctionnelle. Voici dix conseils judicieux sur la création d’icônes exceptionnelles..
L'un des aspects les plus importants de la conception d'icônes est de créer une icône immédiatement reconnaissable. Qu'il s'agisse de représenter une grenouille bleue ou une boîte de crayons, ce que l'on essaie de décrire doit être identifiable en un coup d'œil ou l'objectif de l'icône est vaincu. Bien entendu, une icône doit être "iconique" de la métaphore qu'elle représente..
Dans un tutoriel sur la conception d'icônes au Smashing Magazine, les concepteurs d'icônes Vu et Min Tran expliquent leur processus derrière le graphique au crayon dans le cadre de leur projet Bright! Jeu d'icônes.
Dessiner une icône signifie dessiner les caractéristiques les plus typiques d'un objet afin qu'il puisse capturer l'action de l'icône ou représenter le concept et la nuance..
Comme vous le savez peut-être, vous avez le choix entre trois types de crayons:
- Corps en forme de prisme avec une extrémité brillante recouverte de vernis.
- Corps en forme de prisme avec une gomme fixée au corps du crayon par un anneau en métal blanc brillant.
- Corps en forme de cylindre sans gomme.
Nous avons choisi le deuxième type pour la conception de l'icône, car elle contient tous les éléments nécessaires, ce qui permet au spectateur de reconnaître plus facilement l'image..
Parfois, il est préférable de choisir la forme plus compliquée d'un objet, car il y a moins d'autres éléments partageant ces caractéristiques uniques, ce qui facilite l'identification de l'objet spécifique que vous essayez de représenter. Outre les crayons (stylos, marqueurs, clous), il existe de nombreux objets cylindriques aux bouts pointus. Il est parfois impossible de les distinguer, mais seul un crayon a un corps en forme de prisme avec une gomme attachée par un anneau en métal blanc brillant. Ça devient 'iconique'.
Pour les créateurs d'icônes, DryIcons, une valeur clé de leur processus de conception consiste à garder leurs icônes relativement simples et sobres en termes de style, par opposition à un style définitif. Cela contribue à rendre les icônes beaucoup plus polyvalentes et utilisables dans une gamme de projets autrefois vendus comme un pack complet aux développeurs de logiciels. Si votre icône ressemble à une maison dans un plus grand nombre de paramètres, son marché potentiel devient plus grand.
En ce qui concerne les tendances, nous estimons qu’il est très important de garder les choses simples et fondamentales afin qu’elles puissent servir leur objectif initial: intégrer un projet comme il semblerait que c’était ce qu’il devait être naturellement. C'est la seule tendance que nous suivons.
Un conseil particulièrement utile lors de la conception de plusieurs icônes pour un pack consiste à assurer la cohérence entre elles, non seulement en termes de style, mais également dans les détails tels que la source de lumière. Bien qu’il s’agisse généralement d’une pensée secondaire, toute discordance d’une icône dans le pack pourrait sérieusement affecter la qualité globale des icônes..
Dans cette vue d'ensemble des icônes de Windows Vista, il est indiqué comment la source de lumière a changé entre les systèmes d'exploitation, mais correspond à toutes les icônes de chaque jeu..
Les ombres dans les objets icône Vista indiquent une profondeur vraie et réaliste, comme ils existent dans n'importe quel objet du monde réel. Les icônes Vista n'ont pas les ombres portées plates en bas à droite qui sont les icônes par défaut pour les icônes Windows XP. La source de lumière est également complètement différente dans les icônes de Vista. Tous les objets font maintenant face directement à la source de lumière. De Windows 95 à Windows XP, la source de lumière de toutes les icônes provient toujours du coin supérieur gauche et les objets pivotent dans le sens contraire des aiguilles d'une montre, à l'opposé de la source de lumière. L'emplacement et l'éclairage des icônes Vista seront complètement opposés par rapport à Windows XP et aux anciennes icônes système Windows..
Les icônes doivent souvent être utilisées dans différentes tailles. C'est donc une bonne occasion de tirer le meilleur parti de la nature évolutive des graphiques vectoriels pour créer un superbe design pouvant être utilisé à plusieurs fins..
De plus, avec les progiciels vectoriels tels qu'Adobe Illustrator, chaque forme, dégradé et contour constituant l'icône peut être modifié et modifié à tout moment, à la différence d'une conception à base de pixels qui doit être redessinée lorsque des modifications sont apportées..
Cet excellent tutoriel de conception d'icônes, ici chez VECTORUTS, décrit le processus de création d'un graphisme époustouflant à partir des formes et des dégradés de base d'Illustrator..
Au contraire, les graphiques vectoriels ne sont pas toujours la meilleure approche pour les concepteurs d'icônes. Avec de nombreuses icônes nécessitant de très petites échelles, les graphiques vectoriels ne parviennent souvent pas à reproduire un rendu net lorsque rasterisés. Dans ces cas, redessiner complètement l’icône selon un certain nombre de tailles spécifiées donne le meilleur résultat..
Les concepteurs d'interface Web, Firewheel Design, soulignent cette approche dans leur discussion entre bitmap et vecteur:
Lorsque vous prenez une image vectorielle, initialement dimensionnée au format 24x24 et redimensionnée au format 16x16, les proportions relatives ne correspondent pas. Il n’ya aucun moyen de répartir uniformément 24 pixels d’information sur 16 pixels d’espace (rappelez-vous qu’il n’existe pas de demi-pixel). Alors l'image floue.
Il est également impossible de mettre à l'échelle uniformément 24 pixels d'information sur 32 pixels d'espace. Encore une fois, l'image est floue.De plus, si vous prenez cette même image vectorielle, initialement dimensionnée au format 24x24 et que vous la redimensionnez à 48x48, vous doublez maintenant les proportions. Vous n'avez plus de lignes nettes de 1 pixel. Vous avez des lignes épaisses de 2 pixels. Faites-le en plus grand (disons en 96x96) et ces lignes deviennent encore plus épaisses.
Semblable au point numéro un, où il a été mentionné qu'il était essentiel de saisir les caractéristiques "emblématiques" d'un objet, il est également important de se rappeler qu'il peut exister d'énormes différences culturelles dans la reconnaissance des objets de tous les jours..
Turbomilk en discute dans son récapitulatif utile de 10 erreurs dans la conception d'icônes, avec l'exemple d'une boîte aux lettres. Quelles peuvent être la forme et la couleur reconnues d’une boîte aux lettres dans un pays, peuvent être totalement fausses pour un autre.
Il est toujours nécessaire de prendre en compte les conditions dans lesquelles votre icône va être utilisée. Un aspect important ici concerne les caractéristiques nationales. Les traditions culturelles, l'environnement et les gestes peuvent différer radicalement d'un pays à l'autre.
Utilisez des images universelles que les gens reconnaîtront facilement. Évitez de vous concentrer sur un aspect secondaire d'un élément. Par exemple, pour une icône de courrier, une boîte aux lettres rurale serait moins reconnaissable qu'un timbre-poste.
Remarque: prêter une attention particulière à cette règle lors de la conception d'icônes basées sur des panneaux d'avertissement et de signalisation, qui diffèrent d'un pays à l'autre.
Si une icône est créée sous la forme d'un graphique fade présenté sous une forme circulaire, il est susceptible d'être négligé. L'utilisation de couleurs vives et d'une forme intéressante renforçant l'objet aidera l'icône à se démarquer. Rappelez-vous que les icônes seront rarement affichées sur un arrière-plan monochrome - dans la plupart des cas, il se passera beaucoup de choses derrière elles, elles devront donc se démarquer. Pensez également à utiliser le brillant et l'ombrage pour créer un effet final plus dynamique..
Jasper Hauser, le concepteur de l'icône Camino, aborde ce sujet dans une interview au cours de laquelle il explique: "Qu'est-ce qui fait une bonne conception d'icône?"
Fondamentalement, deux aspects constituent la base d'une bonne icône: 1) la forme et 2) l'utilisation de la couleur. Si vous regardez l'icône Appzapper, vous verrez qu'elle 1) a une forme originale et 2) utilise des couleurs irrégulières et une combinaison de couleurs irrégulière. Faire un cercle bleu ne se démarquera pas.
Il a déjà été mentionné que les concepteurs d'icônes doivent intégrer de petites tailles dans leurs créations d'icônes. Cependant, avec le développement futur de la technologie, les concepteurs devraient également prendre en compte l'utilisation d'icônes à une échelle beaucoup plus grande que la norme. Un exemple de cela se produit dans Windows Vista, où les icônes peuvent être redimensionnées à 256px!
Dans une interview avec Brian Brasher, un artiste de Firewheel Design, il a été interrogé:
John Marstall: Quelle est votre opinion sur le passage à de plus grandes icônes et à l'indépendance de la résolution?
Brian: Plus les icônes sont grandes, plus les détails sont détaillés, ce qui signifie une expérience utilisateur plus riche, ainsi que la suppression de nombreuses restrictions qu'un fabricant d'icônes lui a imposées pour rendre une image lisible. Malheureusement, le fait de rejeter ces restrictions signifie que beaucoup d'icônes qui paraissent plutôt épineuses en taille réelle seront des horreurs boueuses et crues à 32x32 et au-dessous. Une épée à deux tranchants. Il y aura des victimes.
Le croquis est un processus courant dans tous les aspects de la conception et se poursuit dans la conception des icônes. Formuler une gamme d'idées sur papier aide vraiment à développer un produit concis qui répond aux exigences de son objectif. Dans la mesure où la conception d'une icône doit être conforme à un ensemble défini de proportions et de dimensions tout en restant «emblématique» et immédiatement reconnaissable, la planification prévisionnelle est extrêmement importante..
Michael Matas, un graphiste qui a créé des icônes pour la plate-forme Mac OS X, partage ses propres pratiques de travail:
Je commence toujours sur mon tableau blanc. J'essaie de créer de bonnes métaphores claires pour l'icône. J'esquisse des idées différentes et finis généralement par couvrir tout le tableau blanc. Quand je trouve une bonne métaphore, je commence à dessiner la mise en page de l'icône et l'angle sous lequel je vais la dessiner. Je vais sur la recherche d'images Google et la recherche d'images de Watson et essaie de trouver de bonnes images pour l'objet que je dessine. Je télécharge tout ce qui semble décent et les ouvre dans Photoshop. Je crée un nouveau fichier Photoshop pour dessiner l'icône dans et entourer cette fenêtre des images que j'ai téléchargées à partir du Web. J'utilise les images Web pour m'aider à avoir une idée de la texture et de la forme. Mais si je peux, j'essaie toujours de regarder de vrais objets pour trouver l'inspiration.
Le travail d’une icône est de représenter une action ou une idée sous la forme d’un symbole graphique. Par conséquent, les métaphores jouent un rôle crucial dans la traduction instantanée de cette action ou de cette idée pour l'utilisateur. Lors de la commande d'un ensemble de nouvelles conceptions d'icônes pour Macinstruct, l'équipe a envisagé diverses métaphores pour illustrer la difficulté de leurs tutoriels en ligne:
Les icônes les plus difficiles à choisir étaient peut-être nos jauges de tutoriel. Nous avions besoin d'un moyen de classer la difficulté de nos tutoriels et nous voulions un moyen vraiment créatif et efficace de le montrer. Après quelques jours de brainstorming, nous avons proposé les idées suivantes:
- Thermomètres: les didacticiels faciles sont froids, les didacticiels moyens sont moyens et les didacticiels difficiles sont brûlants.
- Feux de circulation: vert pour facile, orange pour moyen et rouge pour dur.
- Ceintures de karaté: Ceintures blanches, orange et noires, tous niveaux de compétence en karaté.
- Puzzles: Un puzzle avec 1 pièce de côté. De plus petites pièces équivalent à plus dur.
- Thèmes de l’aviation: lunettes de protection faciles, vieux casque en cuir et lunettes de protection moyennes, et casque de pilote de chasse et masque anti-poussière pour les durs.
- Images techniques: un manuel et une carte de circuit imprimé, une carte de circuit imprimé et quelques outils, ainsi qu'un oscilloscope.
En fin de compte, nous avons rejeté toutes ces idées pour une idée proposée par notre propre Ric Getter. Tout le monde a convenu que l'utilisation de protecteurs de poche pour indiquer la difficulté était une excellente idée!
Accentsconagua