Créations graphiques
Design de cartes sociales motivationnelles
Trois cartes carrées statiques associent de courtes phrases motivationnelles à des scènes en dégradé, des silhouettes abstraites, des repères numérotés et un traitement serif commun.
Cas d'usage des cartes sociales
- Séquences de campagne socialePlanifiez des publications liées, chacune porteuse de sens, avec un rythme visuel partagé.
- Contenu motivationnelAssociez un langage concis tourné vers l'avenir à des dégradés atmosphériques et des silhouettes abstraites.
- Publication sociale en format carréPlanifiez des visuels sociaux carrés pour des publications individuelles ou une séquence en trois parties.
Points forts de la série en trois cartes
- Récit en trois tempsAller de l'avant, passer à la suite et regarder devant soi forment une seule séquence.
- Cartes indépendantesChaque publication porte sa propre phrase, sa scène et son numéro.
- Typographie minimaleDe grandes phrases serif contrastent avec des métadonnées de production compactes.
- Scènes CSS atmosphériquesDes dégradés et des silhouettes abstraites installent trois ambiances visuelles distinctes.
La composition en trois cartes
1 / 1Trois publications, un seul rythme
Cet exemple officiel OpenDesign présente trois cartes sociales coordonnées autour de l'idée d'avancer. Son titre d'origine, « Three posts . One beat . », pose la règle centrale : chaque carte doit fonctionner seule tout en contribuant à une progression plus large.
La séquence se lit « onwards . » → « to the next one. » → « looking ahead. » Les mots passent d'une action immédiate à une transition, puis à une perspective plus large. Cette progression donne aux cartes un ordre narratif sans exiger un paragraphe d'explication sur chaque publication.
La source indique un format de 1080×1080 et mentionne des boucles vidéo cinématographiques, mais le HTML fourni affiche trois cartes statiques avec des dégradés CSS et des silhouettes en polygones. Les cartes sont des carrés adaptatifs, limités à 380 pixels CSS dans la rangée sur ordinateur. Ni cette mention ni la capture fixe n'établissent un export en 1080 pixels ni une boucle vidéo fonctionnelle.
Aller de l'avant
La première carte associe « onwards. » à une silhouette abstraite verticale sur un dégradé bleu-vert, offrant à la phrase d'ouverture un ancrage proche au premier plan.
Passer à la suite
La deuxième carte place une phrase en italique sur deux lignes au-dessus d'une figure polygonale centrale et d'un fond vert-ambre. Ses mots apportent la transition ; la figure elle-même est statique.
Regarder devant soi
La dernière carte place « looking ahead. » sur des pics rosés en couches et une petite silhouette lointaine, déplaçant l'accent d'une figure au premier plan vers un cadre plus large.
Où la série trouve sa place
La source cite Instagram, LinkedIn et X comme destinations prévues, tout en précisant que chaque publication peut exister seule ou former une série en trois parties. Le design convient donc à une campagne qui exige à la fois une publication séquentielle et une réutilisation souple dans un fil.
Les cartes conviennent particulièrement à de courtes annonces motivationnelles, des étapes de progression, des messages orientés carrière ou des ensembles sociaux éditoriaux où la direction émotionnelle compte plus que la densité d'information. Le design met la phrase en avant ; le texte d'appui doit donc rester hors de la carte ou volontairement bref.
Les repères visibles facilitent aussi l'assemblage de la séquence : « 01 · ONWARDS », « 02 · TO THE NEXT ONE » et « 03 · LOOKING AHEAD » indiquent au lecteur la place de chaque publication. Le compromis : ces repères renforcent l'ordre mais ajoutent une couche de texte autour de titres déjà grands.
Publication autonome
Publiez une seule carte lorsque le message doit fonctionner sans contexte préalable ; sa phrase et sa scène forment l'idée complète.
Publication séquentielle
Publiez les trois cartes lorsque le passage progressif de l'action à la perspective compte pour la campagne.
Adaptation multiplateforme
Gardez le format carré et les phrases courtes comme points d'ancrage, puis vérifiez comment chaque plateforme traite le contexte environnant de la publication.
Cadres communs et scènes changeantes
Les trois cartes partagent un format carré 1:1, mais leurs scènes CSS changent la température émotionnelle. La première associe un dégradé du bleu au vert à une grande silhouette polygonale verticale. La deuxième utilise des bords vert foncé autour d'un centre ambre chaud et une figure plus petite. La troisième bascule vers le violet et le rose avec des pics géométriques en couches. La variation des couleurs distingue les publications, tandis que le cadre répété les relie.
La typographie fournit le motif répété le plus fort. « Onwards » est composé en serif droit avec un point en italique ; les deux lignes de « to the next one. » sont en italique ; la dernière carte combine « looking » en droit et « ahead » en italique. De compacts repères à chasse fixe entourent les grandes phrases. Les différents retours à la ligne donnent plus de présence verticale aux cartes centrale et finale, ce qui fait de la longueur du titre une contrainte d'adaptation importante.
En haut, la pastille de nom visible indique « Jerrod Lew », à côté du numéro de la publication et de la phrase. Cette étiquette fait partie du visuel ; elle ne prouve ni la paternité ni une approbation. En bas, « 1× LOOP » est une pastille statique. La source ne contient ni animation CSS, ni script, ni lecteur vidéo ; ces annotations répétées organisent donc l'ensemble sans offrir de commandes de lecture.
Commencer par l'ordre de lecture
Placez la phrase courte, le numéro et la description de scène de sorte que les trois cartes se comprennent comme « onwards », la transition et le regard vers l'avenir.
Laisser les retours à la ligne changer le rythme
Ne conservez les retours à la ligne distincts de « to the next one. » et « looking ahead. » que si l'échelle obtenue reste lisible dans le carré.
Utiliser la couleur pour séparer les moments
Passez du bleu-vert au vert foncé et à l'ambre, puis au violet et au rose, en gardant assez de contraste pour le grand titre clair.
Design visible et limites des capacités
L'artefact fourni est un graphique HTML statique de trois cartes, construit à partir de texte local, de dégradés CSS, de silhouettes en polygones et de repères répétés. Il ne contient ni CSS animé, ni mouvement piloté par script, ni média vidéo, ni commandes de lecture. Le vocabulaire de boucle et de publication relève d'un texte illustratif rédigé, et non d'une preuve de vidéo livrée ou d'intégration à une plateforme. Aucun service de publication connecté, aucune chaîne de stockage de médias ni aucun résultat de performance n'est établi.
La leçon réutilisable la plus forte tient à la relation entre un texte contraint et un cadrage répété : trois courtes phrases créent la progression, tandis que le même crédit, la même numérotation, le même traitement de pied de carte et le même format carré préservent l'identité. Le compromis est une retenue assumée. Toute adaptation ajoutant des légendes plus longues, des métriques supplémentaires ou des appels à l'action plus denses exigerait une nouvelle décision de mise en page, et non un simple remplacement de texte.
Comment créer un design de cartes sociales motivationnelles dans OpenDesign
Définir la structure en trois cartes
Créez trois cartes sociales carrées statiques avec une pastille de nom commune, des repères de séquence numérotés, de grandes phrases placées en bas, des descriptions de scène et une courte mention de boucle non interactive.
Invite suggéréeCréez un design social motivationnel statique en trois cartes sur des canevas 1:1. Placez « onwards. », « to the next one. » et « looking ahead. » sur des scènes distinctes en dégradés CSS bleu-vert, vert-ambre et violet-rose, avec des silhouettes polygonales abstraites et des pics en couches. Utilisez un lettrage serif droit pour la première phrase, de l'italique pour la phrase centrale et un mélange de droit et d'italique pour la dernière. Ajoutez de compacts repères numérotés à chasse fixe, une pastille de nom commune et des annotations statiques en pied de carte. Chaque carte doit fonctionner seule et aussi se lire en séquence. Empilez les cartes sur les écrans étroits. N'ajoutez pas de lecture vidéo et ne suggérez aucune publication connectée, aucun stockage, aucune analyse ni aucun service en direct.
Affiner l'échelle et les retours à la ligne
Vérifiez les retours à la ligne des titres par rapport au format carré. Gardez « onwards. » compact, laissez la phrase centrale occuper deux lignes et assurez-vous que la dernière phrase reste lisible sur sa scène en couches.
Vérifier la série comme un ensemble
Examinez les trois cartes ensemble : progression, contraste, répétition du crédit, placement du pied de carte et moments visuels distincts. Vérifiez que le design fixe exprime la séquence sans dépendre d'un comportement d'exécution non vérifié.
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