Share
Dans le dernier volet, vous avez découvert l'histoire du design d'icônes et son évolution, passant de représentations en noir et blanc d'objets de bureau à des représentations isométriques en couleurs, vitreuses, hyper-rendues et… d'objets de bureau. Dans cet article, je vais approfondir le monde des icônes et explorer ce que les icônes représentent pour nous aujourd'hui..
Ce post est le jour 8 de notre session de conception d'interface. Sessions créatives "Session Jour 7icône - nom (Ordinateurs) une image ou un symbole qui apparaît sur un moniteur et est utilisé pour représenter une commande, comme un tiroir de fichier pour représenter le classement - dictionary.com
Nous connaissons donc la signification du terme "icône" dans le sens informatique traditionnel du mot, mais comment cela explique-t-il toutes les icônes illustratives que nous voyons aujourd'hui? Comment une image magnifiquement rendue d'une théière, d'un vaisseau spatial ou d'un seau de poulet est-elle censée représenter quelque chose dans l'interface utilisateur? Il y a quelques réponses à cette question.
Quelle que soit la complexité de votre conception, toutes les icônes doivent être personnalisées - il y en aura bientôt plus.
Ci-dessous, vous verrez une ventilation de la conception d'icônes modernes. Certaines personnes peuvent faire valoir que les icônes du côté "illustration" du graphique ne doivent pas être considérées comme des icônes. C'est en partie vrai. Ce ne sont pas des icônes traditionnelles, mais des icônes modernes en ce sens qu'elles pourraient représenter des applications, des jeux ou un contexte spécifique..
Les icônes sur le côté gauche du graphique sont des icônes qui seraient considérées comme des icônes traditionnelles avec une touche moderne. Nous associons immédiatement ces icônes à leur fonction. Cela se traduit par plus de 30 ans de langage visuel, ce qui est un facteur puissant dans le succès des conceptions..
Les icônes situées au milieu du tableau sont des icônes qui ne sont ni illustratives ni informatives, mais une combinaison des deux. L’enveloppe est traditionnelle en raison de sa forme, mais elle pourrait être perçue différemment en raison de son rendu. Une conception de ce type fonctionne mieux dans un certain contexte. Blue Twitter Bird est immédiatement reconnu par les utilisateurs d’Internet, mais il est réduit à une illustration d’un oiseau bleu pour les non-utilisateurs (comme ma mère) et le stylistique GTalk Bubble est également assez dépendant de l’association de marques..
Liens vers les icônes ci-dessus (sans ordre particulier)
Pump It Up, de mgilchuk, My Breafast, de blink, SNOW.E 2 XP, de RADE8, CS3 iKons - Win, de -kol, iChat Bubble, de Delta909, Jeu d’icônes de crème glacée, de Miniartx, Batman Mask, de S Dans Spirited We Love, par Raindropmemory, Twitter Bird, par freakyframes, StarWars Vehicles Archigraphs, par Cyberella74, Systematrix Full, par royalflushxx, New Moshii World, par anekdamian, Somatic Rebirth Extras, par Iconfactory et David Lanham
Lorsque vous concevez des icônes pour une interface, vous ne pouvez pas dépasser les conventions. Vérifiez les modèles précédents pour savoir comment vous en approcher. Vous constaterez que la plupart des packages logiciels et des interfaces utilisateur ont des icônes similaires, en raison de l'expérience utilisateur (UX). Si un utilisateur est soudainement confronté à un design auquel il ne s'attend pas ou avec lequel il ne se sent pas à l'aise, il risque de se perdre..
Si vous concevez pour une plate-forme spécifique, vérifiez toujours les notes des développeurs avant de commencer. Celles-ci vous donneront une idée de la taille, de la perspective et de la palette de couleurs que vous devriez utiliser. Vous pouvez trouver des liens vers les notes destinées aux développeurs Apple et Microsoft dans la section "Ressources et informations" à la fin de cet article..
Vert = Bon - Bleu = Aide - Jaune = Alerte - Rouge = Erreur
Les spécifications des icônes se compliquent avec chaque nouvelle technologie ou système d'exploitation. Windows et Mac sont dans une course aux armements de la taille d'une icône. La plus grande icône à ce jour mesure 512 pixels. La tendance pour les grandes icônes a beaucoup à voir avec les résolutions d'écran modernes, mais il y a aussi un certain facteur de bave avec une icône géante parfaitement rendue. Regardez les exemples ci-dessous si vous ne me croyez pas!
Icônes d'application AppZapper, Billings, Things et Coda pour Mac (à l'échelle réduite pour correspondre à ce post!)
Maintenant que je vous ai montré le Bave Digne icônes, passons à certaines icônes que j'ai moi-même conçues. L'exemple ci-dessous est un fichier .ICO non construit construit dans ma vie antérieure en tant que concepteur d'icônes et d'interfaces (ceux qui me connaissent sous le nom de LoungeKat ne le savaient probablement pas). L'icône principale de 256px a été créée dans Adobe Photoshop avec des formes et des styles de calques. Elle a ensuite été redimensionnée pour chaque taille (64, 48, 32, 16) et importée dans Microangelo Toolset pour être combinée en tant que .ICO. L'icône 256px ne fait pas partie du fichier d'icône elle-même, mais est incluse dans le logiciel en tant que fichier PNG transparent sur lequel Windows fait appel si la taille est requise. Cela réduit la taille du fichier.
Comme vous pouvez le constater, j’ai utilisé quelques variations de conception en fonction de la profondeur de couleur et de la taille de l’icône. Les icônes incluent toutes ces tailles et ces espaces colorimétriques afin de prendre en charge les différentes manières dont elles peuvent être visualisées par le système d'exploitation..
Il est important de concevoir chaque taille séparément. La mise à l'échelle d'une grande image peut rendre la conception plus floue. Lorsque vous concevez une icône de 16 pixels, il est toujours préférable de passer directement au pixel. Comme vous pouvez le constater, quelques pixels bien placés peuvent transmettre beaucoup plus que vous ne le pensez. Pour plus d'informations sur les icônes, les différentes spécifications et les recommandations du secteur, consultez le guide des icônes d'Axialis Software..
Un exemple de mise à l'échelle
Pour mieux comprendre les icônes, je vous suggère d’examiner le plus grand nombre possible de systèmes d’exploitation, de programmes, d’interfaces et de portails. Réfléchissez aux différentes manières dont la couleur et la métaphore sont utilisées pour chaque application. Quelles icônes sont faciles à comprendre (peut-être que le dossier ou la corbeille vous semblera le plus reconnaissable?), Quelles icônes ont besoin d'explications supplémentaires? Croyez-moi, vous serez surpris de ce que vous découvrez sur la psychologie derrière le langage visuel que nous utilisons tous les jours et que nous prenons souvent pour acquis.
Accentsconagua