De la conception d'icônes au chef-d'œuvre emblématique (+ PSD gratuit)

Dans cet article, je vais examiner ce qu'il faut faire pour passer du concepteur d'icônes à l'icône pro. Je vais regarder comment le design des icônes a commencé, où il se trouve aujourd'hui et dans l'avenir, en partageant quelques astuces et conseils utiles..


introduction

Il y a un peu plus de six mois, j'ai commencé mon nouvel emploi où on m'a demandé d'étendre un ensemble d'icônes existant. Je pensais que je pouvais faire des icônes, après tout, je les ai créées des centaines de fois auparavant. Ensuite, lorsque j’ai vu le jeu d’icônes existant, cela m’a choqué. C’était la conception la plus simple et j’ai trouvé très difficile de faire quelque chose de si simple. J'avais l'habitude de passer de nombreuses heures sur les icônes que j'avais l'habitude de créer, il me paraissait étrange de n'avoir passé que dix minutes sur ces icônes pour les terminer..

Cela m'a ensuite amené à réfléchir à toute une série de questions relatives aux icônes, telles que "Qu'est-ce qui fait une bonne icône" et "Combien de temps faut-il consacrer à une icône?". Je vais partager certaines des réponses avec vous ci-dessous. J'ai discuté avec d'autres concepteurs d'icônes de premier plan pour connaître leur avis sur le processus. Nous verrons également comment la conception des icônes a commencé, où elle se trouve aujourd'hui et (plus important encore) où elle se situera à l'avenir. Alors restez avec moi, préparez-vous une tasse de thé et créez des potes!


Les premières icônes

Alors d'où viennent ces petits chefs-d'œuvre graphiques? Tout a commencé en 1973, lorsque les ordinateurs n'étaient guère plus que des systèmes basés sur DOS où les utilisateurs naviguaient à l'aide de commandes. C'était une époque où la conception graphique en informatique n'existait pas. Il n'y avait certainement pas de doigt ou de geste pour le faire fonctionner.

Comme vous pouvez l’imaginer, ce n’était pas le moyen le plus simple de contourner votre machine, et une société relativement bien connue aux États-Unis, Xerox, s’efforçait de tout mettre en œuvre pour surmonter ce problème. La même année, ils lancent «The Xerox Alto», qui est devenu le premier ordinateur de l’histoire à fonctionner à l’aide d’une interface utilisateur graphique. Quelques années plus tard, un certain Steve Jobs et son complice criminel, Steve Wozniak, ont repris les idées développées par Xerox et les ont intégrées au premier système d’exploitation commercial au monde à utiliser une interface graphique. Cela s'appelait le Macintosh. Mesdames et Messieurs, l'icône est née!

Les premières icônes à apparaître étaient une gracieuseté d’Apple sur Macintosh.

Ce fut certainement une révolution pour l'informatique. Les répertoires avaient maintenant une représentation graphique sous forme de dossiers, les fichiers ressemblaient à des blocs-notes, des horloges et des calculatrices également.

Une icône d'ordinateur est un pictogramme affiché sur un écran d'ordinateur et utilisé pour naviguer dans un système informatique ou un appareil mobile..


Directives de conception d'icônes

Voici quelques-uns des principes de conception les plus importants lors de la création d'icônes

Gardez-les simples et concis

C'est sans doute l'un des aspects les plus importants de la conception d'icônes. Les icônes doivent avant tout être simples, claires et concises. Dans la plupart des cas, vous devez créer une icône dans un espace limité. Vous devez pouvoir décrire votre produit, votre service ou votre action de manière claire et précise..

Les icônes fonctionnent souvent mieux lorsqu'elles fonctionnent bien en noir et blanc. Une fois que vous avez cela cloué, vous pouvez ajouter de la couleur et rendre vos icônes.

Dans certains scénarios, il peut être judicieux d'utiliser un seul objet, ou un seul caractère par exemple. Cette méthode fonctionne généralement bien que parfois un autre objet peut être nécessaire. Pas plus de deux objets et j'approcherais avec prudence, car cela peut parfois sembler peu clair et dissuader de faire la mise au point à partir de l'icône. Si vous vous trouvez dans cette situation, essayez de retirer des objets jusqu'à ce que votre message soit encore évident..

Une icône représente une action qu'un utilisateur va entreprendre

Cohérence

Si vous êtes chargé de créer un ensemble d’icônes, elles devront être cohérentes. Cela peut prendre la forme de palettes de couleurs, de formes et d’objets spécifiques. La cohérence doit également être présente tout au long de l'application. Que se passe-t-il lorsque votre utilisateur clique sur l'icône? Est-ce que l’écran sur lequel ils sont conçus a un style similaire à celui de votre icône? Si la réponse à cette question est "non", vous devrez peut-être réécrire certaines de vos décisions (les utilisateurs font souvent un lien entre les deux événements en cliquant sur une icône et l'écran suivant sur lequel ils apparaissent). Si vous enfreignez cette convention, vous risquez beaucoup plus de briser la confiance de vos utilisateurs..

Comprendre votre cible démographique

Quel genre de personne sera probablement en cliquant sur l'icône? L'icône est-elle destinée aux enfants âgés de cinq ou soixante-cinq ans? Est-ce pour les utilisateurs en Chine ou pour les utilisateurs en Angleterre? Si vous créez une icône relative aux aliments, il ne serait pas utile d'utiliser des baguettes comme couverts si elles sont destinées au marché anglais. Vous devrez réfléchir à cela et vous assurer que votre groupe démographique cible sera en mesure de bien correspondre à votre conception..

Faites-les pop, faites-les crier

Maintenant plus que jamais, vos icônes doivent se démarquer de la foule. Avec les app stores de plus en plus populaires, des téléphones intelligents aux téléviseurs intelligents.

Ces icônes de Ramotion et George Gliddon montrent les qualités des bonnes icônes qui apparaissent.

Si votre icône est pour une application, elle sera souvent le premier point de contact pour cette application. C'est votre vitrine au monde. Les gens sont finalement influencés par le design. Vous avez peut-être la meilleure application au monde, mais les gens seront désactivés s'ils ne sont pas d'abord engagés par votre icône. Pensez-y, voudriez-vous vraiment entrer dans un magasin qui a l'air aussi minable que l'enfer de l'extérieur? C'est le même principe; peu de gens vont passer à l'étape suivante pour en savoir plus sur votre application ou pour passer au prochain appel à l'action.

Esquisse est votre ami - conceptualisez!

Ok je vais l'admettre. L'art numérique a été mon premier contact avec le monde de l'art. Photoshop était mon carnet de croquis et la souris mon crayon. Je n'avais même jamais envisagé de dessiner des choses auparavant; après tout, j'avais toujours eu le béguin pour le dessin à main levée pendant mes études. Ce n’est que lorsque j’ai expliqué à un de mes conférenciers que c’était elle qui s’est tournée vers moi et a dit: "Aaron esquisse est ton ami". Elle a ensuite expliqué comment il n’était pas nécessaire d’être le meilleur illustrateur au monde à dessiner..

Dessiner vos icônes en premier peut souvent servir de point de départ décent pour votre conception finale.

L'esquisse ne consiste pas à créer une représentation réaliste de ce que vous pouvez réellement voir, mais plutôt à créer une base pour fonder une idée, une inspiration, un concept ou une vision. À partir de ce jour, je porte toujours un carnet de croquis avec moi et le plus souvent, je dessine mes dessins d'icônes. Cela peut vraiment être inestimable et peut vous faire gagner beaucoup de temps. Il vous aide à obtenir la base de votre icône et peut souvent servir de point de départ décent pour votre conception finale..


Étude de cas

J'ai réussi à prendre quelques minutes avec le talentueux concepteur d'icônes Alex Volkov et lui ai posé quelques questions sur le design d'icônes..

Icônes créées par Alex Volkov. Celles-ci témoignent des progrès réalisés au fil des ans en matière de conception d’icônes..

QQuel est le facteur le plus important pour créer une bonne icône?

Le facteur le plus important est de trouver le style le plus expressif pour dépeindre l'icône, qui correspondra à la tâche la plus évidente et à l'efficacité avec laquelle elle remplira sa fonction. Surtout l'icône doit être belle.


QCombien de temps faut-il consacrer à une icône?

Cela dépend de la tâche de l'icône, de l'idée et du style sélectionné. Cela peut prendre de deux à seize heures. C'est le temps qu'il me faudrait pour créer l'icône, tandis que le temps nécessaire pour rechercher des idées et obtenir l'approbation du client varie et peut parfois prendre beaucoup plus de temps que la mise en œuvre..


Conseils et astuces

Voici quelques astuces et conseils qui devraient aider vos conceptions d'icônes à passer du niveau un au niveau expert. Bien sûr, comme pour toute conception, plus vous essayez, plus vous ferez d’erreurs. Mais plus vous commettez d'erreurs, mieux vous deviendrez.

Obtenez la lumière droite

Si vous voulez ajouter du réalisme à vos icônes, il est primordial de comprendre la direction dans laquelle la lumière l’éclaire. Vous devez être capable de visualiser (dans votre tête) une lumière imaginaire qui brille sur l'icône. L'image ci-dessous en témoigne.

Cette image exagérée montre notre source de lumière et son impact sur l’icône. À partir de cela, nous sommes en mesure de déterminer où les zones de lumière et les ombres.

En visualisant cela, nous pouvons ajouter des rehauts et des ombres à l’icône comme ils tomberaient dans le monde réel..

La beauté est dans le détail

Lors de la création d'icônes, il est très important de porter une attention particulière aux détails: reflets, ombres, réflexes, reflets, propriétés des matériaux. Regardez le monde qui vous entoure et songez à quoi il ressemblerait dans la vie réelle. L'interaction et le comportement avec la lumière et les matériaux environnants sont importants. La lumière peut souvent tomber différemment selon les conditions météorologiques. Par exemple, la lumière ne circulera pas de la même manière dans une pièce vide que dans une pièce remplie de fumée. Lorsque nous prenons en compte ces facteurs, nous ne pouvons pas simplement créer une forme d’icône, nous pouvons créer des icônes avec certaines ambiances et certains sentiments..


La liste de contrôle de mauvaise icône

  • Utilisez peu ou pas de texte
  • L'icône est-elle universellement reconnaissable? Par exemple, une voiture de police aux États-Unis ne sera pas la même chose qu'une voiture de police en Australie.
  • Avez-vous trop d'objets dans un espace limité??
  • Avez-vous conçu l’icône à la taille qui va le devenir? Si non, alors vous devriez peut-être.

Icônes d'application

Avec l'introduction de téléphones intelligents (notamment l'iPhone), de tablettes et d'applications sur la scène, les icônes ont connu une révolution. Jamais les icônes n’ont été aussi polies, réelles et pleines de profondeur, de couleur et d’intensité.

Cette image montre les différentes tailles d'icônes d'application

L'iPhone a défini des limites et des instructions sur la manière d'afficher les icônes d'applications sur leur écran tactile. Plus évidemment, ils doivent s’inscrire dans une boîte de 57 x 57 pixels (résolution 114 x 114 pixels). Ces limitations enflamment l'imagination des communautés de concepteurs. De ce fait, nous avons maintenant toutes sortes d'icônes étranges et merveilleuses basées sur la limitation de l'icône carrée de l'iPhone..

Certaines limitations d'icônes ont créé un tout nouveau style de conception d'icônes, telles que celles de Livie Leontidis, Ramotion et Jackie Tran Anh..

L'avenir de la conception d'icônes

En regardant la route que les icônes ont déjà empruntée, nous pouvons essayer de prédire comment les icônes seront à l'avenir et quelle forme elles pourront prendre. Bien sûr, l’avenir des icônes dépend énormément, non seulement des principes de base d’une bonne conception des icônes, mais également des outils utilisés pour créer ces icônes. Par exemple, chaque nouvelle fonctionnalité ajoutée à un logiciel tel que Photoshop peut potentiellement contribuer à façonner l'avenir des icônes. Cependant, les principes de base d'une bonne conception des icônes restent les mêmes. Rob Janoff est une personne qui en sait peut-être plus que d'autres sur le bon design iconique. Rob a conçu le logo Apple dans les années 70. J'ai réussi à prendre une discussion sur Skype avec Rob qui m'a dit ce qu'il pensait être une bonne icône..

Ce que je recherche habituellement, c'est la simplicité et l'élégance. Avec l'avènement de la technologie, les rendus d'icônes sont de plus en plus compliqués. Ce qui est agréable à regarder mais parfois la technique est substituée au concept. Quand les choses sont très simples, elles sont plus faciles à retenir. - Rob Janoff

Pour comprendre également l’avenir des icônes, nous devons examiner les plates-formes sur lesquelles elles sont utilisées. Dans une récente interview, Bill Gates a été interrogé sur ses attentes concernant l'avenir de l'Internet. Il a répondu:

Des connexions Internet ultra-rapides et des améliorations matérielles rendront possible la création d’un World Wide Web qui fournira des informations en 3D Bill Gates

Cela pourrait donner une idée de l'avenir des icônes. Peut-être pourraient-ils s'éloigner d'objets plats en 2D et faire partie du monde qui nous entoure. Les icônes peuvent potentiellement devenir des poignées que nous tirons, des cadrans que nous tournons et des objets sur lesquels nous appuyons..

Les icônes du futur deviendront meilleures, plus professionnelles et plus intéressantes. Les concepteurs essaient déjà de créer de beaux dessins accrocheurs et on espère que cette tendance se poursuivra.


La lentille Icon.PSD

Cet article est accompagné d'un fichier .PSD que vous pouvez télécharger et utiliser dans vos projets, peaufiner ou simplement jeter un coup d'œil. La raison d’inclure cette conception est de vous présenter quelques techniques utilisées dans la troisième partie de la conception d’icônes; le rendu.

La première étape devrait consister à rassembler toutes vos idées, à jeter un coup d’œil sur Internet et aux objets que vous voyez autour de vous, à essayer de trouver de l’inspiration (cela aide toujours). La seconde consiste à esquisser quelques idées et à vous assurer que l'appel à l'action ou le message que vous essayez de représenter est clair, concis et évident. La troisième partie est le rendu. C'est la partie où vous commencez à ajouter de la couleur, des ombres et de la lumière. À mon avis, c’est la partie la plus excitante de la vie de nos icônes..

Regardez à travers le PSD et vous devriez être capable de voir comment l’icône est construite.


Conclusion

Il ne fait aucun doute que les icônes ont été totalement régénérées au cours des dernières années et qui aurait pu penser que les concepteurs consacreraient tant de temps et d'efforts à quelque chose qui peut être aussi petit que 16x16 pixels!

Ce sont toutefois ces icônes qui nous aident à naviguer plus facilement dans nos appareils et, au bout du compte, à enrichir nos vies jour après jour. Pouvez-vous imaginer à quel point la vie serait frustrante si nous étions de retour dans les années 70 et que nous devons naviguer à l'aide d'invites de commande? Ce serait un cauchemar. Heureusement, les choses ont progressé depuis et il est de notre devoir, en tant que concepteurs, de repousser les limites en matière d’icônes; nous devrions adopter les technologies que nous avons aujourd'hui autour de nous pour pouvoir produire des icônes comme elles ne l'ont jamais été auparavant. Si vous ne faites que commencer à utiliser le design d'icônes ou si vous êtes encore une icône vierge, le moment est venu de se lancer, sachant que vous êtes maintenant doté des connaissances fondamentales de cet article, qui vous permettront de prendre les bonnes voies. créer vos propres chefs-d'œuvre d'icônes.

Jusqu'à la prochaine fois, heureux designer peeps!