Share
Infinite Skills est une société de logiciels qui développe des supports d’apprentissage destinés à permettre aux utilisateurs d’approfondir leurs connaissances de diverses applications, allant des logiciels industriels aux programmes de traitement de texte usuels. Infinite Skills m'a contacté pour créer une série d'icônes d'application qui accompagneront leur logiciel. Inutile de dire que, avec mon appétit insatiable pour la conception d’icônes et le marquage, c’était un jeu sur lequel!
Le projet devait être évalué pour déterminer la bonne approche. Le lancement de ces applications sur l'iTunes Store étant une nouvelle entreprise pour eux, ils ne disposaient d'aucun paramètre de conception d'icône pour lequel je devais rester. J'ai saisi cette opportunité pour vraiment disséquer le problème et arriver à la meilleure solution possible.
Premièrement, et le plus important, je devais décider quels seraient les éléments fédérateurs dans la campagne des icônes. Je savais qu'ils auraient besoin de travailler en famille, tout en restant suffisamment différents pour que le téléspectateur les reconnaisse rapidement comme des logiciels différents..
Grâce à des lignes de communication ouvertes, il a été établi qu’il y aurait une liste exhaustive de titres de logiciels (ce que vous voyez ci-dessous n’est qu’une liste partielle.) Le client m’a envoyé les titres prévus pour pouvoir mieux évaluer la propension au partage d’icônes similitudes au cours de la création de toutes les icônes.
Après de longues réflexions, des croquis et des délibérations, j'ai décidé de créer quatre éléments principaux permettant de distinguer chacune des icônes: lettre, couleur, mise en valeur des graphismes et arrière-plan..
Chacune des icônes serait principalement reconnue par une grande lettre. J'ai utilisé une police de caractère sans empattement et en caractères gras pour que l'icône ne soit ni fragile ni trop aérée. La lettre est tournée sur un angle pour afficher un look plus dynamique.
Étant donné que plusieurs éléments commencent par la lettre "F", par exemple, la couleur permet en outre de distinguer une lettre en double d'une autre application. Adobe Flash et Apple Final Cut Pro en sont des exemples.
Chacune des icônes recevrait également un graphique d'amélioration indiquant ce que le logiciel va vous apprendre. Là où les logiciels étaient plus génériques, j'ai aussi utilisé un graphisme générique d'amélioration..
La texture de fond est une différence subtile qui ne doit pas être remarquée à première vue. Lorsque cela est possible, chaque texture d’arrière-plan est indiquée par le logiciel. Dans Final Cut Pro, l'arrière-plan est constitué d'étoiles qui coïncident avec un film, un appareil photo, des films, etc..
Après avoir décidé des éléments de différenciation, je suis passé au traitement des structures filaires pour chacune des icônes. Je voulais me donner la meilleure occasion d'harmoniser les icônes. C'est dans cet esprit que j'ai travaillé sur plusieurs wireframes à la fois..
Cela rend très clair les éléments à affiner pour travailler plus étroitement en tant qu’unité. Travailler sur deux ou trois icônes en même temps constituait un bon point de départ pour déterminer la similarité. De plus, comme les icônes étaient finies, je les utilisais toujours pour faire en sorte que les moindres détails soient cohérents..
Comme les lettres par icône variaient, je devais être créatif et flexible en ce qui concerne les graphiques d'accompagnement. Parfois une lettre était vraiment large et d'autres fois très grande. Pour compenser cette différence, j'ai implémenté deux types de graphiques. Les articles longs et minces courraient sur un angle allant du coin supérieur gauche au coin inférieur droit. Si un élément correspondant n'était pas fin et plat, je l'ai dessiné de façon plus carrée et je l'ai placé devant la lettre. Il était important de noter l'utilisation de chacune de ces occurrences afin que l'une ne soit pas utilisée de manière excessive par rapport à l'autre..
Lors de la création d'une série d'icônes, il est important de s'assurer que les icônes ressemblent les unes aux autres. De nombreux facteurs influent sur la réussite de l’exécution, notamment: le sujet, l’orientation et la surface, pour ne citer que quelques exemples..
Plusieurs fois, il y a des paramètres sur lesquels il faut travailler. Un paramètre que j'ai rencontré au cours de ce projet était que le client souhaitait utiliser un bâtiment dans l'icône AutoCad et une caméra dans l'icône Photoshop pour les photographes. Comme vous le savez très bien, un bâtiment diffère en détail de quelque chose d'aussi petit qu'une caméra.
Pour Photoshop pour les photographes, j'ai dessiné une grande partie des détails que vous verriez dans un appareil photo. Bien sûr, quelque peu distillé en considérant le fait que la pièce résultante est une icône. Comparez cela avec un bâtiment. Afin d'intégrer le bâtiment, je devais l'illustrer de manière à ce qu'il possède suffisamment de détails pour être considéré comme un bâtiment, même si son échelle est beaucoup plus petite. Cela dit, j’ai réduit le bâtiment aux éléments essentiels à inclure pour qu’il soit reconnu en tant que tel: les fenêtres, les éléments de toit et les garnitures restaient l’essentiel..
Infinite Skills savait qu'ils produiraient du contenu pour des segments spécifiques au sein d'un groupe d'utilisateurs. Par exemple, ils ont un logiciel plus général destiné aux utilisateurs de Photoshop. Ils ont également créé une autre version spécifiquement pour les photographes. En règle générale, le contrôle de version est désigné par un snipe (mots écrits sur un angle au-delà de quelque chose), mais dans ce cas, le client a préféré un tout nouveau graphique correspondant: une caméra..
Il va sans dire que les icônes doivent apparaître comme une unité. Cependant, il est également important que le spectateur ne perde pas l’intérêt de voir les éléments, car leur exécution les ennuie. Gardant cela à l'esprit, je me suis efforcé de créer l'illusion de surfaces différentes sur chacun des éléments d'accompagnement par rapport à la lettre à côté de laquelle elle se trouvait..
Il n’existe pas de règle absolue selon laquelle les icônes doivent être abordées de cette manière. Il s’agit plutôt d’une licence artistique que j’ai exercée. Dans certains cas, il est illogique de créer l'illusion d'une surface différente, comme dans l'icône Microsoft Excel où un diagramme à barres est censé refléter, mais dans l'icône Adobe Illustrator, vous remarquerez que le stylo a un aspect plastique terne. tandis que le "je" a un regard très réfléchissant. Cela insuffle un peu plus d’intérêt et permet d’afficher l’objet sous un jour plus réaliste..
Bien que chaque icône prenne plusieurs heures du début à la fin, j’ai fourni un aperçu encore plus grand de la création d’une partie de l’une des icônes. J'espère que vous avez apprécié la lecture de mon processus et que vous utiliserez certaines des informations que vous avez trouvées utiles et que vous les appliquerez à vos propres projets..
Time Lapse App Icon Creation de Jonathan Patterson sur Vimeo.
Accentsconagua