Déployer une nouvelle app sur l’AppStore c’est à la fois super excitant et super stressant. SuperText n’a pas échappé à cette règle. Seulement, à la différence des apps précédentes, je n’avais toujours pas trouvé une icône satisfaisante à quelque jour de la sortie. Et pourtant, après un redesign, l’icône de SuperText est devenue l’une dont je suis le plus fier.

En tant que dev, j’ai tendance à vouloir peaufiner au maximum l’interface de mes apps pour que l’expérience utilisateur soit au petits oignons. Mais il ne faut pas oublier que pour que les utilisateurs puissent tester l’app, il faut avant tout qu’ils la téléchargent. Et la première chose qu’ils verront sur l’AppStore, c’est bien l’icône (et peut-être aussi les captures d’écran, mais ça, ce sera pour un autre article). Créer une icône d’app, c’est bien plus que dessiner un logo qui logera sur l’écran d’accueil de votre iPhone, c’est un vrai enjeu marketing.

Pour SuperText, ça n’a pas été simple.

Noter les mots clés qui entourent l’app est l’étape numéro un. Ça me permet d’explorer rapidement des premiers concepts et de définir une direction créative. Voici ceux que j’ai retenus pour SuperText :

• correction orthographique
• intelligence artificielle
• texte
• simplicité
• rapidité
• magique

L’étape numéro deux, c’est de voir ce qui existe, ce qui se fait de mieux chez la crème de la crème des designers. Bienvenue sur Dribbble, ma source d’inspiration dans ce domaine. Je tape donc mes mots clés un par un. Les idées sont vagues, les résultats sont nombreux, parfait pour s’inspirer de pleins de créations très différentes. Je scroll, j’observe, je note et j’admire le travail de tous ces gens bien meilleurs que moi qui ont des idées de fou.

À ce moment j’ai tous les éléments en main pour commencer à prototyper et explorer des idées. C’est l’étape numéro trois. Le problème, c’est qu’à la différence de mes apps précédentes, les mots clés que j’ai noté ne sont pas facilement représentables par des objets physiques. Calculatrice RPN : facile, une calculette. Storma : facile, des éclairs. Mais quand on parle d’ « IA », de « texte » ou encore de « correction orthographique », c’est bien plus compliqué. Je vais devoir me creuser les méninges.

Je décide de commencer par le mot qui me parle le plus : texte.

Si on avait demandé à une IA une icône pour une app de traitement de texte magique, elle aurait probablement dessiné quelque chose d'aussi impersonnel et inexpressif que ça. L'effet de metal chromé sur la deuxième icône est un échec total.

L'idée me semblait intéressante, mais les pictogrammes étaient trop petits pour être reconnaissables.

Les essais sur ce mot-clé ne donnent rien, alors j’en choisi un autre qui me parle : magique. Il ne faut pas hésiter à changer drastiquement de direction. Ça fait partie du processus.

Une icône qui a une personnalité forte, mais bien trop éloignée de l'idée de correction orthographique et qui semble plus associée au mot « sorcellerie ».

Soyons honnête, c’est vraiment pas dingue. À ce stade, pourquoi ne pas tenter quelque chose de complètement différent ?

Une mascotte peut rendre une icône beaucoup plus sympathique. Mais il est difficile ici de trouver un lien avec le concept de l'app.

Mes premiers essais ne donnent pas grand-chose. Le problème, c’est que le temps passe et le développement de l’app avance à grands pas. Si bien que je suis prêt à sortir une première version de l’app… sans avoir d’icône. Il faut alors prendre une décision rapidement. Tant pis pour l’icône trop classe qui n’existe que dans mes rêves, je dois sortir une version 1.0. Je me laisse alors une dernière chance et voici ce qui en ressort.

La première, beaucoup trop simple. La seconde, vulgairement pompée sur Dribbble. La troisième, plus originale, mais trop simpliste.

Je choisis la troisième icône pour la v1, insatisfait, mais ce n'est que partie remise.

Deuxième round

Le temps a passé depuis la sortie de l'app et ça m'a permis de prendre du recul. Avoir un regard neuf quand on galère, c'est super important.

Pour une raison complètement arbitraire, je décide de me concentrer sur le concept de baguette magique. Plutôt que de partir sur un design plat, je me dis que créer une icône semi-réaliste serait une bonne idée. Pour ça, je vais m’inspirer du design des lunes de Super Mario Odyssey. Leur effet brillant donne un côté attrayant et super puissant.

Les objets brillants et lumineux sont des éléments récurrents dans le jeu. Les lunes sont visibles de loin et incitent le joueur à les attraper.

Plus j’y pense et plus mes idées commencent à prendre du sens. Je dessine donc un nouveau prototype.

Et là, c’est la révélation ! C’est encore loin d’être la version finale, mais la direction que prend cette icône me plaît énormément.

• La grosse baguette magique la rend reconnaissable.
• Ça brille et les couleurs sont vives : c’est attrayant.
• Elle a un côté fun.

Voici les itérations qui ont suivi.

Sur la première ligne, j'ai tenté de modifier les couleurs de l'étoile pour lui donner plus d'importance. Sur la seconde ligne, j'ai accentué les reflets et l'effet brillant. Le résultat paraît plus réaliste.

Et enfin, la version finale.

Le dégradé en arrière-plan est une variante de la couleur rose principale. Il rajoute une ambiance et du contraste.

Je suis vraiment très satisfait du résultat ! Ça m’aura demandé bien plus de temps que je ne l’aurais imaginé. Attendre, prendre le temps et avoir du recul en valait vraiment la peine.

Quelques astuces

• Utiliser des dégradés de blanc flous permet de donner plus de relief et de brillance à l'icône et renforce le réalisme de l'objet.
• Les ombres colorées accentuent l'effet lumineux de la baguette et lui donnent une aura magique.
• Le dégradé de couleur en arrière-plan permet de donner plus de profondeur à l'icône tout en renforçant le contraste. Il permet à la baguette de mieux se distinguer et de conserver l'ambiance rose de l'app.