From USOM

USOM

USOM, l’enveloppe avec un visage. Avec le service d’e-mail en réception seule « USOM Mail », il vous guide sur le site et l’appli. Il est né d’une demande : le rendre « mignon comme un voleur de pain ». Les illustrations et le code d’implémentation sont publiés sous CC BY 4.0.

Comment il est fait

Comme c’est une enveloppe personnifiée telle quelle, les éléments sont empruntés au style d’illustration plate existant. La base est fixe ; seuls les bras, les jambes et l’expression changent. Tout le mouvement est en CSS, et il s’arrête avec prefers-reduced-motion.

  • Panneau arrondiLe corps de l’enveloppe. La base qui ne bouge jamais, quelle que soit la pose.
  • RabatUn seul V fin depuis le bord supérieur vers l’intérieur. Le pli.
  • Badge en écussonUn écusson violet avec une coche. La marque « réception confirmée ». Fixée en bas à droite.
  • Double anneauDes cercles concentriques plein et en pointillés en arrière-plan. Une décoration qui ne fait que suggérer une présence.
  • Bras, jambes, expressionLes seuls éléments variables. La pose et l’expression changent selon l’emplacement.

Poses

La pose change selon l’emplacement. Chacune est montrée telle qu’elle est réellement utilisée.

walkEn travers du hero et du pied de pageMarche. Le corps se balance et les chevilles battent.
waveBoîte videFait un signe d’une main sur place. Sur fond blanc, le trait devient foncé.
peekÀ côté d’un titre de sectionSe courbe et jette un œil par-dessus le bord. Placé petit.
lostPage 404Lève les deux mains, paniqué. Le « ? » tremble aussi.

Comment l’utiliser (licence)

Creative Commons Attribution 4.0 International (CC BY 4.0). Créditez, et vous pouvez le modifier et l’utiliser à des fins commerciales.

  • Vous pouvez le copier, le modifier et le redistribuer (y compris à des fins commerciales)
  • Vous pouvez changer la pose ou les couleurs et l’utiliser dans votre propre produit
  • Vous ne pouvez pas omettre la ligne de crédit
  • Vous ne pouvez pas l’utiliser d’une manière qui laisse entendre qu’USOM Mail vous soutient ou vous est affilié

Ligne de crédit

USOM by USOM Mail — CC BY 4.0
https://creativecommons.org/licenses/by/4.0/

SVG

Le SVG de la pose standard (walk). Remplacez --m-* par les couleurs de votre choix.

Télécharger usom.svg