Aligner l'animation et l'interaction de l'interface utilisateur sur l'identité de la marque
En créant une identité de marque, les concepteurs proposeront des directives de marque, des couleurs, un style et des tailles de police, des directives d'utilisation, à faire et à ne pas faire pour certaines marques comme Intel, Macdonalds et Intel, même des écouteurs exemples
mais en ce qui concerne l'animation et les interactions des interfaces utilisateur dans les sites Web ou les applications de ces marques, comment ces décisions sont-elles prises? ou sont-ils même couverts? des bons exemples ou des études de cas à ce sujet?
quelle est la meilleure façon d'aborder l'animation et les interactions pour correspondre à l'identité de la marque?
Je ne sais pas s'il existe une directive sur l'animation de marque, mais j'ai le sentiment profond qu'il n'y en a pas, je peux me tromper cependant.
Mon approche personnelle de l'animation consiste à identifier les mots clés de la marque. Je reçois des idées de mes objets environnants et comment j'interagis avec eux, par exemple en retournant des pages, en allumant des lumières, etc. En observant comment ces objets se déplacent ou se comportent, je saurais à peu près quelles sont les propriétés à animer (position, opacité) et comment animer au mieux conformément à l'image de marque.
Prenons un exemple Nike:
Le logo "Swoosh" est l'un des logos de marque les plus reconnus au monde.
À son niveau le plus fondamental, le Swoosh représente le mouvement et la vitesse . La forme représente un arc de mouvement. Le mot "swoosh" est une onomatopée pour le son que vous entendez lorsque Lebron James ou Michael Jordan passe devant vous en route vers un dunk spectaculaire.
Par conséquent, il est courant de voir des images avec de gros mouvements et des flashs si vous visitez une page Nike. Nike utilise ces propriétés d'animation pour renforcer leur image de marque.
Je recherche des mots clés et les mappe à une animation particulière telle que:
- Professionnel - Fade
- Amusant/Coloré - Rebond
- Expérimental - Slide, Flash
Si vous développez pour un produit particulier, vous pouvez vous inspirer de vos objets environnants.
- Librairie - Flip
- Magasin de jouets - Bounce, Elastic, Rotate
Je crois que le choix de la bonne animation a également un effet sur l'humeur d'une personne (l'animation de rebond suppose de générer des sentiments plus heureux). Vous voudrez peut-être en tenir compte lors de la mise en œuvre de votre propre animation.
Clouer les adjectifs de la marque, comme d'autres l'ont dit. Ensuite, pensez à créer des moodboards de mouvement glanés à partir de sources cinématographiques ainsi que des stocks de conception d'interface utilisateur tels que dribbble et tumblr. (Il est important d'inclure des exemples d'animation à côté des matériaux de conception. Un fondu dans un thème sombre peut sembler cinématographique ou même menaçant.)
Regardez des publicités et des crédits de films qui correspondent aux adjectifs de l'entreprise pour vous inspirer. Les crédits-titres de Batman, par exemple, pourraient avoir des composants de conception qui renforcent l'image d'une entreprise puissante, sécurisée et dirigée.
Il est important de se rappeler que, parfois, ce qui "semble bien" pour nous ne "lit pas bien" à un public. Par exemple, nous associons le rebond aux enfants et au jeu, mais trop de rebond peut être déroutant pour les utilisateurs d'ordinateurs débutants. Assurez-vous donc de mettre l'interface devant un enfant et de voir comment il l'utilise. Regardez le visage de l'utilisateur. Écoutez les bruits qu'ils font. Est-ce qu'ils froncent les sourcils ou sourient? Ou rien du tout? Parfois, aucune réaction n'est la bonne réaction!
Ensuite, demandez-leur leurs impressions: "Quel genre de XX pensez-vous que c'est?"
Si vous travaillez avec une équipe de conception: demandez si quelqu'un a une expérience en motion design et peut vous aider à créer une suite de traitements à essayer.
Lorsque l'entreprise décide d'un traitement, assurez-vous qu'il est documenté avec des directives de style et de marque pour encourager la conformité.
Fantastique article sur 24ways: animer votre marque
Cela vaut la peine d'être lu directives d'animation de Google sur leurs pages de conception de matériel, car elles donnent quelques idées sur différents styles d'animation.
Je suis sûr d'avoir vu un autre article sur l'animation et l'image de marque quelque part, mais je ne le trouve pas :( Si je me souviens bien, il disait que l'animation rebondissante était plus informelle et amusante, et que l'animation de type d'accélération douce était plus formelle. l'animation correspond au ton de la voix de votre site Web et de votre marque.
Il y a un excellent guide des techniques d'animation par Dudley Storey aussi (mais il ne couvre pas l'image de marque).
Et il y a quelques idées dans cet article, Donner vie au Web avec l'animation, sur l'animation et la marque - formelle vs informel.
Et il y a cet article sur A List Apart, UI Animation et UX, une amitié pas si secrète , qui donne quelques questions utiles à vous poser sur l'animation que vous avez créée:
- L'animation fournit-elle des informations utiles sur l'interaction?
- Avez-vous l'impression de vous répondre en tant qu'utilisateur?
- Quelle sorte de réponse émotionnelle cela déclenche-t-il pour vous?