Intégrateur recherche picto idéal
Vous l’ignorez peut-être, mais chaque pictogramme présent sur votre site ou votre application est traduit en lignes de codes lors de l’intégration, le développeur chargé de l’intégration spécifiera notamment sa taille, sa couleur, ses comportements etc.
La conception des picto est souvent un point de friction entre les webdesigners et les intégrateurs : un picto mal conçu aura pour effet de nécessiter plus de temps en intégration, et donc plus de frais. Voici donc quelques conseils à destination des webdesigners, afin de créer le picto idéal : il simplifiera la vie de votre intégrateur et vous évitera quelques allers-retours inutiles.
On passe à table !
Nous avons fait le choix de vous guider pour la création de pictogrammes sur la suite Adobe, et plus spécifiquement illustrator, car c’est à ce jour le logiciel le plus utilisé, malgré l’émergence de l’excellent Sketch !
Ouvrez Illustrator et chargez un nouveau document de 40 × 40 pixels par exemple (inutile de rappeler les spécifications pour le Web : 72 dpi / RVB ).
Une fois votre document créé, placez les repères de manière à avoir des marges de 2 px tout autour de votre format (c’est la “No-go Zone”, qui vous permettra d’aérer le contenu de votre format).
Repérez le centre.
Vous y êtes ?
Simple comme bonjour
Il est maintenant temps de rentrer dans le vif du sujet, pour cela je vous conseil de faire au plus simple : commencez par sketcher votre picto sur papier avant pour en faire ressortir les formes les plus simples, une fois satisfait, vous pourrez vous remettre sur illustrator.
Utilisez les outils de formes : rectangles, ellipses, etc… ; l’outil plume lui n’est pas recommandé pour ce type de travail car il n’offre pas de courbes assez parfaites et votre picto risquerait fort de ressembler à un Picasso terriblement mal imité.
Une fois vos formes en place, ajustez la largeur du tracé selon vos envies : des lignes plus fines donnerons un rendu plus haut-de-gamme, tandis qu’un tracé épais apportera un côté enfantin.
Arrondissez ensuite les angles selon le rendu désiré.
Fusionnnn !
Avant de commencer pensez à vectoriser votre tracé ( Objet > Tracé > Vectoriser le contour), vérifiez bien que votre picto est terminé car une fois vectorisé, il vous sera impossible de retourner en arrière et modifier le tracé (pour ma part, je vous conseille d’enregistrer votre tracé à part… juste au cas où le chef de projet ou le client vous fasse tourner en bourrique).
L’outil Pathfinder deviendra ensuite votre meilleur allié : il va vous permettre de joindre les formes entre elles pour n’en former qu’une et supprimer par la même occasion les points d’ancrages intuiles. Ainsi, vous obtiendrez un picto constitué du nombre de tracés minimum, et non d’une série de points d’ancrage.
Maintenant que votre picto est terminé vous pouvez l’enregistrer, en .svg bien entendu.
Pit-Stop
Je vous vois venir, vous vous dites que c’est exactement ce que vous faites, et que donc vous ne voyez pas pourquoi vous continuez à lire cet article.
Et bien sachez que non, ce n’est pas fini, l’ultime étape consiste à optimiser ce .svg pour votre intégrateur.
Pour cela rendez-vous sur SVGOMG, ce site offre des tas d’options pour simplifier encore le code de votre picto une fois intégré.
Cliquez sur “Open SVG”, votre picto s’affiche au milieu de l’écran.
A droite de la fenêtre, s’ouvre un menu avec de nombreuses options : cochez toutes les options en dehors de “Remove Viewbox”, puis enregistrez votre picto avec la flèche bleue en bas à gauche du menu.
Votre fichier est maintenant prêt, vous pouvez faire une dernière passe dessus avec ATOM pour voir si le code est bien propre avant envoi à votre intégrateur.
À vous de jouer maintenant !
A lire également
Top 5 UI trends pour 2023
UI DesignNos 5 tendances UI favorites pour 2023 Il est temps de se pencher sur les tendances design qui vont marquer
Figma vol.1 : Les librairies & composants
Méthodologie • UI DesignDepuis quelques mois, nous avons commencé à utiliser Figma, un outil de design collaboratif qui nous surprend par sa puissance.