Le projet Articartes : une carte personnalisée qui joint l’utile à l’agréable
Il y a des projets qui naissent d’une blague prise au premier degré. C’est exactement ce qui s’est produit pour le projet Articartes. Cette application de création de cartes digitales a été pensée pour transcrire, traduire, exporter une présentation personnelle vers un support visuel, partageable et fun, supplément sentiment d’appartenance. Zoom sur la démarche, le processus créatif et les possibilités d’utilisation.
La genèse de l’idée
Tout est parti d’une blague lancée sur le serveur Discord Digital Artichaut. Une de ces idées lancées en l’air, qui fait rire, et qu’on oublie généralement en fin de journée… ou pas !
Car en ce qui me concerne, cette idée s’est mise à germer dans mon esprit. Me voilà donc lancé dans la création d’une application permettant de créer une carte de visite numérique qui emprunte ses codes visuels aux cartes à collectionner qu’on connaît tous (Pokémon, Magic, Yu-Gi-Oh!)… Des designs devenus mythiques, qui marquent les esprits et donnent envie d’échanger, de partager au-delà de la dimension physique du concept.
Ici, plutôt que de capturer des créatures fantastiques, il s’agit de capturer l’essence d’un profil, à la croisée des chemins entre les liens amicaux et les liens professionnels.
Mobiliser mes compétences en design
et en développement
Mon métier de graphiste et webmaster me pousse à rechercher constamment les meilleures options pour allier design, fonctionnalité et expérience utilisateur. Cet éditeur de cartes s’inscrit dans une démarche plus large : développer des applications web qui répondent à un besoin concret, tout en offrant une interface intuitive et agréable.
Avec le recul, ce projet était l’occasion d’explorer plus en profondeur les possibilités offertes par mes outils habituels et les nouveautés proposées sur le marché (dont l’IA, avec toute la vigilance que cela implique). À tel point que j’ai déjà d’autres projets sur le feu, dont notamment un agenda optimisé et un logiciel de simulation de caisse, bâtis sur le même socle de la praticité, de l’esthétique et de l’efficacité.
Focus sur l'éditeur de cartes personnalisées
Les Articartes en 5 points clés
- Une identité visuelle ancrée dans l’univers des Artipotes* (c’est-à-dire les membres de Digital Artichaut)
- Un format partageable en un clic (1080 x 1350 pixels, parfait pour Instagram)
- La possibilité de condenser son identité professionnelle de façon ludique et avec style (un exercice plus accessible qu’une création de CV)
- Un outil pensé pour tous les profils (indépendant, salarié, hybride…)
- Une infinité de combinaisons possibles en mode Aléatoire (plus sérieusement, 160 au total avec 4 effets visuels, 5 familles graphiques et 2 styles de fond)
Quid de la personnalisation ?
Côté personnalisation, plusieurs options sont possibles pour qu’aucune carte ne se ressemble. L’essentiel est dans l’onglet Détails, où vous pourrez renseigner et décrire votre spécialité ainsi que votre citation fétiche. Trois éléments qui vous rendent unique et qui contribueront à créer une carte à votre image.
L’onglet Badges, lui, a été pensé comme un clin d’œil direct aux membres de Digital Artichaut. Le champ Équipe fait notamment référence aux étiquettes professionnelles que chacun peut choisir à son arrivée sur le serveur Discord. Les deux champs Badge 1 et Badge 2, eux, peuvent être interprétés librement, chaque badge étant associé à un pictogramme libre d’interprétation.
À vous d’explorer pour créer une carte qui ne ressemble à aucune autre… et qui vous correspond !
L’interface : deux phases, deux expériences
Le projet Articartes repose sur deux interfaces complémentaires :
- L’UI de la carte emprunte les codes visuels des cartes à collectionner : effets graphiques, typographie soignée, hiérarchie visuelle claire. Tout cela, pour un résultat final qui ressemble à ces objets qu’on est fier de conserver, d’exposer, de partager.
- L’UI de l’éditeur mise sur la simplicité et l’intuitivité. Qui a dit qu’il fallait être graphiste pour créer une carte qui fait tilt ? Je me suis occupé de créer un outil intermédiaire pour assurer cette partie technique. Votre mission ? Vous concentrer sur le contenu, ni plus, ni moins.
Ces détails qui font la différence
À ces paramètres de base s’ajoutent quelques contraintes techniques que j’ai intégrées pour que l’outil reste fluide :
- La gestion intelligente de la typographie – Si vous écrivez un texte trop long, la taille de police se réduit automatiquement pour préserver la lisibilité de l’ensemble sans casser l’harmonie visuelle avec les autres cartes.
- Des règles typographiques automatiques – L’application corrige discrètement les doubles espaces et les mots orphelins, intègre les ligatures (æ, œ) et passe automatiquement les numérations en exposant.
- Un module photo pensé comme sur les réseaux sociaux – Le drag and drop fonctionne dans la zone dédiée, le redimensionnement est automatique et vous pouvez recadrer et zoomer votre photo de profil, l’ajuster à gauche ou à droite, en haut ou en bas. Comme sur n’importe quel réseau social, si vous zoomez trop, tout ne sera pas visible. Un choix assumé pour une interface familière.
Enfin, il me semblait évident de rester intransigeant sur la protection de la vie privée des utilisateurs. Pour cette raison, aucune donnée ni image n’est sauvegardée : chacun crée sa carte et la télécharge, sans avoir à créer de compte ni à stocker sa photo sur un serveur, quel qu’il soit.
7 étapes pour créer votre Articarte
- Rendez-vous sur l’éditeur de cartes
- Remplissez vos informations dans les onglets Identité et Détails
- Ajoutez votre photo dans l’onglet Visuel et ajustez selon vos préférences
- Personnalisez le design grâce à l’onglet Identité (Famille et Style de fond)
- Choisissez votre équipe et vos badges dans l’onglet Badges
- Téléchargez votre carte
- Profitez-en et partagez-la où vous le souhaitez
À toi de jouer !
Éditeur
L’après projet Articartes : une ouverture sur de nouvelles possibilités
Cet éditeur de cartes m’a permis de mettre le pied à l’étrier pour élargir ma palette de compétences en matière de développement d’outils et d’interfaces. Il m’a aussi permis d’asseoir mon approche technique, que je compte affiner au fil du temps.
L’agenda et le logiciel de simulation de caisse suivront la même logique : créer des outils qui simplifient la vie, avec une interface facile à prendre en main, et tout en respectant les fondamentaux du graphisme et de l’expérience utilisateur. Cette fois, les projets ne partiront pas d’une blague, mais ils seront réalisés avec autant de sérieux. Affaire à suivre !
* Ce projet est à l’image de l’esprit collaboratif du serveur Discord Digital Artichaut. À ce titre, les badges et l’identité visuelle ont été créés par Digital Artichaut. La conception de l’application et des cartes téléchargées est le fruit d’une création personnelle. Le présent contenu a été rédigé par E-criture.
