Créations graphiques
Conception de carte de citation à partager
Une citation en chinois avec des noms de technologies en caractères latins, des accents dorés et une mention d'auteur visible occupe un canevas éditorial sombre quadrillé.
Cas d'usage de la carte de citation
- Publications sociales centrées sur une citationTransformez une phrase mémorable en visuel composé et facile à partager.
- Visuels éditoriaux en écritures mixtesÉquilibrez typographie latine et chinoise dans un même champ de lecture.
- Publication centrée sur l'auteurGardez bien liés la citation, son crédit, l'identifiant, le rôle et la date.
- Idées et principes internesDonnez une forme visuelle distincte aux concepts concis d'une équipe.
Points forts de la citation éditoriale
- Contraste éditorialLe lettrage à empattements de la citation contraste avec des métadonnées compactes sans empattement.
- Énoncé en écritures mixtesLes noms de technologies en caractères latins et le texte chinois forment une seule citation dominante.
- Pied de carte avec attributionLe nom de l'auteur, son identifiant, son rôle et la date ancrent la citation.
- Atmosphère structurée par la grilleUne grille sombre et un champ de couleurs chaudes encadrent le texte.
La carte de citation complète
1 / 1Une citation sur deux lignes avec crédit visible
Distribué dans la bibliothèque OpenDesign Community avec HTMLAnything déclaré comme source amont, ce visuel est construit autour d'un seul énoncé attribué. La composition s'ouvre sur une petite étiquette « ✦ QUOTE », passe à une grande citation en chinois intégrant des noms de technologies en caractères latins, puis se termine par le bloc d'identité de Tom Pan. Cet ordre fait d'abord lire l'artefact comme une citation, et seulement ensuite comme une publication sociale.
L'énoncé d'exemple oppose Markdown, format pensé pour les auteurs, à HTML, format pensé pour les lecteurs. « Markdown » ouvre la première ligne, tandis que « HTML » ouvre la seconde, ce qui donne aux deux technologies un poids visuel parallèle. L'accent doré marque certains mots chinois : le contraste fonctionne ainsi comme une mise en valeur éditoriale, et non comme un graphique, un badge ou une visualisation de données distincts. Ce sont des écritures mixtes au sein d'une seule citation en chinois, et non des versions anglaise et chinoise parallèles.
Le CSS source définit une carte de 1600px au format 16:9, avec une largeur maximale de 96vw. Cette proportion offre une surface de lecture large, proche d'une présentation : l'énoncé peut occuper l'essentiel du cadre tandis que le bloc d'identité reste lisible comme zone secondaire plus petite. Le compromis est une densité assumée ; remplacer la citation par un passage plus long exigerait de rééquilibrer les retours à la ligne et l'échelle typographique.
L'attribution représentée nomme Tom Pan, utilise l'identifiant @tompan, décrit un ingénieur qui convertit des documents internes en HTML et indique la date 2026.05. Ces éléments fournissent un nom, un rôle et une date de type publication sans concurrencer l'énoncé central. Ils restent un crédit de citation d'exemple, et non un parcours personnel vérifié, un témoignage en faveur d'OpenDesign ou un remplacement de la source amont HTMLAnything déclarée par le modèle.
L'énoncé d'abord
La grande citation sur deux lignes porte l'essentiel de la lecture, tandis que l'étiquette et les détails d'identité apportent le contexte autour d'elle.
Crédit bien placé
Le nom, l'identifiant, le rôle et la date sont réunis en bas à gauche, ce qui rend la source lisible sans ajouter de panneau de profil distinct.
Cas d'usage d'une carte de citation à partager
Cette composition convient à une idée courte et attribuable qui gagne à être mise en valeur visuellement. Elle peut servir à une publication sociale éditoriale, à une série de citations pour une conférence ou une communauté, ou à un principe interne publié sous forme d'image autonome. Dans chaque cas, le texte source doit rester assez bref pour préserver le rythme de lecture sur deux lignes de la carte.
Le bloc d'identité rend aussi ce format utile lorsque l'auteur fait partie du message. Ici, la ligne de rôle décrit un ingénieur qui convertit des documents internes en HTML, ce qui donne à la citation un contexte professionnel. Si un nouvel usage n'a ni auteur, ni identifiant, ni date pertinents, le bloc en bas à gauche devrait remplir une autre fonction d'information plutôt que d'être conservé comme décoration.
Pour une publication en écritures mixtes, l'artefact illustre une relation pratique entre les écritures : les noms de technologies en caractères latins restent faciles à repérer, tandis que le texte chinois fournit la structure de la phrase. Le compromis est que la longueur du texte et les métriques de la police peuvent rapidement modifier l'équilibre. Une recréation doit tester son propre texte plutôt que supposer que les retours à la ligne actuels s'appliqueront.
| Élément observé | Ce que comprend le lecteur | Compromis de conception |
|---|---|---|
| Étiquette ✦ QUOTE | L'artefact est une carte de citation avant même la lecture de l'énoncé. | Elle occupe peu de place mais ajoute un repère de catégorie. |
| Markdown et HTML | L'énoncé oppose deux technologies nommées. | La grande taille de texte rend la comparaison mémorable mais limite la longueur du texte. |
| Tom Pan et @tompan | La citation a un auteur précis et crédité. | L'attribution apporte un contexte de crédibilité mais doit rester visuellement secondaire. |
| 2026.05 | L'exemple inclut une date de type publication. | Une date aide à classer la carte mais peut devoir être mise à jour en cas de réutilisation. |
Composition de l'énoncé en écritures mixtes
La hiérarchie visuelle repose sur l'échelle et le placement plutôt que sur de multiples commandes d'interface. Une petite pastille dorée contourée « ✦ QUOTE » se trouve près du coin supérieur gauche. L'énoncé principal occupe la zone centrale en très grands caractères blancs et dorés, tandis que « H » et « html-anything » apparaissent en haut à droite comme de petites étiquettes de contexte. Cette répartition en diagonale évite que la carte ne devienne un bloc de texte centré.
Les deux lignes de la citation ne sont pas interchangeables. « Markdown » ouvre la première ligne et « HTML » la seconde : le lecteur perçoit donc un appariement visuel direct avant d'avoir fini la phrase chinoise. Le traitement doré met en valeur certains mots chinois sur les deux lignes et crée un accent répété qui relie la comparaison. Sans cette mise en valeur, la carte serait plus calme mais perdrait le repère visuel qui guide le contraste.
L'arrière-plan utilise un champ sombre avec une grille visible, un éclairage brun plus chaud vers la gauche et une zone or olive vers le bas à droite. La grille donne une structure mesurée à l'espace ouvert, tandis que la transition de couleurs évite que les grandes zones noires paraissent vides. Cette atmosphère soutient le sujet technique, mais impose aussi une contrainte de contraste : le texte clair doit rester lisible sur les deux zones chaudes.
En bas à gauche, une initiale « T » accompagne le nom de l'auteur, son identifiant, son rôle et la date. Ce traitement d'identité sans portrait relie le pied de carte à la citation tout en le gardant secondaire par rapport à l'énoncé surdimensionné. Sa compacité a une limite : le lecteur ne reçoit qu'une courte attribution représentée, et non un profil complet ni une preuve de l'authenticité de la citation.
Périmètre et limites des capacités
Cet artefact est un exemple de visuel destiné uniquement à la conception. Les éléments fournis vérifient un aperçu HTML local, une proportion de carte définie en CSS, une typographie visible et le texte représenté ; ils n'établissent ni intégration sociale en direct, ni workflow de publication, ni source de données connectée, ni performance de partage mesurable. Les noms, la description du rôle et la date de la citation doivent donc être traités comme du contenu illustratif, sauf vérification distincte.
Le modèle est distribué via OpenDesign Community et déclare HTMLAnything comme source amont ; la citation représentée crédite séparément Tom Pan. Le manifeste fourni déclare une licence MIT pour le plugin d'exemple, mais cela n'établit pas de licence distincte pour chaque élément représenté. Une adaptation doit conserver le crédit amont et confirmer les droits sur toute citation, identité d'auteur ou police externe utilisée.
Comment créer une carte de citation à partager dans OpenDesign
Définir le cadre éditorial
Partez d'un canevas de citation large en 16:9 et réservez des zones distinctes pour l'étiquette de catégorie en haut à gauche, le contexte en haut à droite, l'énoncé central et l'attribution en bas à gauche. Gardez des proportions proches de la composition fournie avant d'adapter le contenu.
Invite suggéréeCrée une carte de citation 16:9 de 1600px de large, en écritures mixtes, avec une fine grille sombre, un éclairage d'angle brun chaud et or olive, une petite étiquette dorée « ✦ QUOTE » en haut à gauche, ainsi que « H » avec « html-anything » en haut à droite. Compose un court énoncé chinois sur deux lignes intégrant des noms de technologies en caractères latins, en très grande police à empattements, avec certains mots mis en valeur en doré. Place dans la zone d'attribution en bas une initiale, un nom crédité, un identifiant, un court intitulé de rôle et une date. Considère tout le texte comme du contenu d'exemple modifiable ; ne suggère ni publication sociale, ni services connectés, ni citation originale d'OpenDesign.
Affiner la relation typographique
Remplacez l'énoncé d'exemple par une citation tout aussi courte, puis testez ensemble les longueurs réelles des lignes en caractères latins et en chinois. Utilisez la grande police à empattements pour le message, un texte sans empattement compact pour l'identité et le contexte, et une couleur d'accent sobre pour certains mots seulement, plutôt que de tout surligner.
Vérifier l'attribution et les limites
Vérifiez que le nom de l'auteur, son identifiant, la description de son rôle et la date correspondent bien à la citation utilisée. Gardez ces champs regroupés dans le bloc d'identité en bas à gauche et signalez tout contenu inventé ou provisoire comme contenu d'exemple. Confirmez que le design final reste un visuel statique, sauf si un véritable comportement de publication est mis en œuvre et vérifié séparément.
Exporter et obtenir un lien de partage
Exportez votre design finalisé, puis utilisez Partager dans OpenDesign pour obtenir un lien de partage. Ouvrez le lien dans une fenêtre de navigateur distincte et vérifiez que la version souhaitée ainsi que ses ressources sont disponibles avant de l'envoyer.
Conception d’affiche éditoriale sur les workflows IA
Cette affiche éditoriale sur les workflows IA présente six affirmations, organisées en chapitres numérotés, avec des exemples concrets de prompts et des accents typographiques rouille sur un fond crème.
Créations graphiques
Conception d’un carrousel social sur les workflows IA
Sept cartes verticales utilisent des titres chinois surdimensionnés, des habitudes numérotées, des aplats de couleur changeants et une conclusion pour expliquer les workflows d’édition avec l’IA.
Créations graphiques
Conception de shader Aurora Field
Un champ de bruit bleu-vert animé automatiquement donne son atmosphère à un hero WebGL, tandis qu’un titre fixe et un petit indicateur local de fréquence d’images ancrent la scène.
Créations graphiques
Conception du shader Aurora Veil
Aurora Veil est une composition shader interactive qui transforme des lumières superposées, des étoiles et les mouvements du curseur en un hero WebGL atmosphérique.
Créations graphiques