UI pour vidéo (et pages simples)

Date : 2026-10-22 · Type : guide · Statut : en vigueur

Résumé : l'écran « crédible » est ce qui rend le motion convaincant. Cette skill rassemble des règles universelles d'interface (hiérarchie, espace, typographie, couleur, états) et ce qui change lorsque l'écran est destiné à une vidéo : lisible sur mobile, recréé en calques, chaque pièce animable. Elle sert aussi pour une page simple (landing, lien dans la bio). Les chiffres et exemples se trouvent dans references/regras-detalhadas.md.

Deux modes d'utilisation :

Créer : dessiner un nouvel écran ou recréer celui d'un produit réel pour la vidéo.
Réviser : auditer un écran prêt, signaler ce qui enfreint chaque règle et corriger si la demande l'inclut.

1. Contexte avant de dessiner

Trouvez le système visuel du projet ou de la marque du sujet : tokens (couleurs, polices, espacements, rayons) et composants. Pour une marque tierce, tirez-les du site officiel (méthode dans video-referencias, section 3). Les règles ci-dessous ajustent l'exécution, ne changent pas la marque.
Définissez le type d'écran : landing/site (grande amplitude typographique) ou app/tableau de bord (haute densité, texte jusqu'à 24 px).
Listez ce que chaque bloc doit communiquer et quel est l'élément le plus important de chacun. En vidéo : ce que dit la narration à ce moment-là.

2. Références avant de dessiner

Besoin de	Source
Écran d'app ou de site, section de landing (hero, prix, FAQ, témoignage), tableau de bord, flux (onboarding, checkout)	Mobbin, si la personne y a accès (MCP avec `search_sections`, `search_screens`, `search_flows`)
Pas de Mobbin, ou Mobbin n'a pas	Dribbble et Pinterest (mots-clés courts en anglais) et captures réelles du produit
Motion, effet animé, esthétique, photo, ambiance	Pinterest
Produit réel mentionné dans la vidéo	le produit lui-même : enregistrez l'écran ou capturez les écrans officiels
Transition prête, icône qui change de forme, micro-interaction, écran d'agent IA	bibliothèques de composants : references/motion-e-componentes.md

Comment chercher et conserver : references/referencias.md. Rassemblez de 3 à 6 références par écran et notez le motif exploité de chacune. Utilisez la référence pour la structure, la hiérarchie, l'espacement et le comportement ; ne copiez pas la marque, le texte ou l'image de tiers.

3. Règles (résumé)

Signifiers : l'écran se suffit à lui-même. Regroupez avec un conteneur, mettez en évidence l'élément sélectionné, grisez l'inactif. Un élément cliquable montre le survol, l'enfoncement et l'élément actif ; une icône sans texte reçoit une infobulle.
Hiérarchie : taille, position et couleur. Le plus important en haut, plus grand et en gras ; le secondaire plus petit et gris. Un seul accent de couleur par bloc. Image, logo et icône à la place des étiquettes (« De : », « Restaurant : »). Une liste « étiquette: valeur » toute identique est un tableau, pas un design.
Espace : espace blanc avant la grille. Multiples de 4 (4 à 40 px). Un espacement de base entre les blocs (ex. : 32 px) et la moitié (16 px) entre les éléments qui vont ensemble.
Typographie : une famille sans-serif. Texte grand avec un espacement de lettres de −2 % à −3 % et une hauteur de ligne de 110 à 120 %. Landing : jusqu'à 6 tailles. Tableau de bord : jusqu'à 24 px.
Couleur : une primaire, avec des versions claires pour le fond et foncées pour le texte (rampe 50–950). Les autres couleurs uniquement avec une fonction : bleu focus, rouge erreur, jaune avertissement, vert succès.
Mode sombre : bord clair presque invisible ; profondeur par une surface plus claire que le fond ; chip avec fond sombre désaturé et texte clair de la même couleur.
Ombre : faible opacité, flou élevé. Si l'ombre est la première chose que l'on remarque, elle est erronée.
Icônes et boutons : icône de la taille de la hauteur de ligne du texte, près de lui. Padding horizontal = 2× le vertical. Paire de CTA : primaire rempli + secondaire fantôme.
Feedback : bouton avec état normal, survol, enfoncé, désactivé et chargement. Champ avec focus, erreur avec message et avertissement. Chaque action répond.
Image avec texte : dégradé localisé derrière le texte, pas de couche sombre sur toute la photo.
Animations subtiles sur toute l'interface : la carte monte d'environ 2 px avec une ombre large et faible au survol, ripple léger au clic, les blocs entrent en montant avec un fondu, squelette avec brillance au chargement. Court et discret : rien ne bouge tout seul en dehors du chargement.
Un design coûteux, c'est décider facilement, pas seulement paraître propre : l'image qui vend est l'élément le plus grand de la carte ; 3 niveaux de texte, avec la donnée de décision en poids ou couleur ; bouton qui dit la conséquence (« Voir 41 biens », « Payer 239,90 € ») ; un seul badge par écran ; navigation plus discrète que le contenu ; une échelle de rayon. Tableaux dans references/design-caro.md.
Écran scannable : personne ne lit l'écran, on cherche la réponse. Chaque élément touche 2 arêtes ou plus (texte à gauche, valeur et heure à droite ; centré uniquement ce qui n'est pas destiné à être lu). La densité se résout en différenciant (avatar, groupe avec en-tête, chip avec icône), pas en espaçant. L'emphase est la différence avec les voisins : pour mettre en évidence, neutralisez l'environnement. Pas de boîte dans une boîte.

4. Écran dans la vidéo

Lisible sur mobile : corps d'interface d'au moins environ 22 px dans un cadre de 1080 de largeur ; titres à fort impact bien plus grands. Test : arrêtez l'image 1 s à la taille du mobile. Ce que l'on voit en premier est-ce que la narration dit ?
Recréé en calques, jamais de capture collée : chaque bouton, texte, icône et bulle est un calque propre, pour être animé seul (entrer avec un ressort, s'allumer, être cliqué). La capture entre uniquement comme preuve (actualité, publication réelle).
Fidèle au produit réel : mêmes couleurs, police, rayons, icônes et composants de l'application que le public connaît (WhatsApp, Gmail, banque). Icônes officielles (SF Symbols, Material Symbols ou le SVG de la marque).
États réels en mouvement : saisie avec le vrai clavier du système qui monte et touches qui s'allument, jamais de texte « s'étirant » par un masque ; bouton qui s'enfonce au clic ; chargement qui charge ; notification au format réel de la plateforme.
Données d'exemple plausibles : noms, valeurs et horaires qui ont du sens dans le créneau ; rien de « Lorem ipsum », et aucune donnée personnelle réelle, e-mail ou identifiant sur l'écran.
Une idée par écran dans le cadre : si l'écran contient 10 informations et que le discours en cite une, les autres restent neutres et la caméra zoome sur celle qui compte.

5. Mode Révision

Rendez l'écran (navigateur, aperçu du moteur ou image de la vidéo) et capturez le bureau et le mobile, ou l'image à la taille du mobile.
Parcourez la checklist et enregistrez chaque problème avec : où, règle enfreinte, valeur actuelle et correction proposée.
Ordonnez par impact : hiérarchie et lisibilité, puis espace et typographie, puis polissage (ombre, états, micro-interaction).
Corrigez par des modifications petites et vérifiables, en préservant la marque et le texte.

Checklist (chaque item est aussi un « signe d'IA »)

6. Vérification

Rendez et regardez : bureau (1440 px) et mobile (390 px), clair et sombre si existant ; en vidéo, l'image à la taille du mobile.
Vérifiez dans le code les nombres des règles (tailles, hauteurs de ligne, espacements, ombres).
Interagissez : survol, clic, focus et envoi montrent une réponse.
Comparez avant et après et listez ce qui a changé et pourquoi.

iamjeffia/estudio-ia

Qu'est-ce que estudio-ia ?

Demander à votre IA préférée

Documentation