Une photo en direct. Cinemagraph. Des images en mouvement. Toujours en mouvement. Il y a tellement de noms pour cette tendance dans la conception web, identifiés par une image de héros qui semble s'animer de manière subtile.
Ce n'est pas tout à fait une photo, mais pas tout à fait une vidéo non plus. Le mouvement est souvent limité à une action de l'image pour attirer l'attention de l'utilisateur et l'attirer dans l'image. Indépendamment de ce que vous appelez cela, cette tendance a un impact et surgit partout dans la conception Web, en tant que gifs partageables et sur les médias sociaux.
Evolution de la tendance
Il est difficile de dire où l'idée? Vivre? les photos ont commencé, mais vous pourriez soutenir qu'Apple a contribué à sa popularité. La société a introduit la photographie comprenant des touches de mouvement avec l'iPhone 6S. Ce petit moment de bonheur supplémentaire est le même concept pour des photos vivantes sur des sites Web. Une image stellaire a quelque chose de plus qui vous empêche de la regarder un peu plus longtemps.
Ce même concept d'imagerie en mouvement a commencé à apparaître dans plus d'endroits. Des publicités apparemment immobiles sur des panneaux d'affichage numériques incluent quelqu'un qui cligne alors des yeux ou vous fait un clin d'œil. Même les alignements pour Sunday Night Football incluent des tirs à la tête des joueurs qui clignotent après une seconde, vous montrant que c'est en fait une action réelle.
Pourquoi utiliser cette technique? Il retient plus longtemps l'attention de l'utilisateur et fournit un point de référence visuel plus intéressant. Flixel, une société qui fabrique des images cinématographiques pour les clients, indique que la photo en mouvement moyenne retient l'attention des utilisateurs pendant 9 secondes, contre 1 seconde pour l'image fixe moyenne.
Photos ou illustrations
Les images vivantes ou cinématographiques peuvent fonctionner avec des photographies ou des illustrations. Aucune règle ne dit que vous devez utiliser un type d'imagerie ou un autre. En regardant les deux images ci-dessus, vous pouvez voir que l'un ou l'autre style peut être très efficace.
Une autre considération est que la motion ne doit pas nécessairement continuer à tourner en boucle. Hillmann Living, ci-dessus, éclaire les produits sur la page d'accueil au fur et à mesure de son chargement. C'est la seule motion et ensuite la photo n'est que cela, une photo fixe. Ce qui est bien avec l’effet ici, c’est que vous regardez directement les chaises que la société vend tout de suite. La technique montre aux utilisateurs ce qui est important sur la page et ce sur quoi ils sont censés se concentrer de manière subtile et intéressante.
Bar Z Wines adopte une autre approche. La page d’accueil illustrée semble assez simple au début, mais un petit avion survole en boucle le centre supérieur de l’écran. Le mouvement aide l’utilisateur à regarder les mots importants à l’écran: «Nos vins ne sont pas filtrés». L'utilisateur sait immédiatement quelque chose à propos de la messagerie sur ce site Web, car ils sont attirés par la langue la plus importante grâce au mouvement affiché à l'écran.
Conseils pour réussir
Cette technique peut fonctionner de différentes manières et pour diverses applications de conception. Certains des meilleurs exemples proviennent de scènes simples ou de paysages où une belle photographie est le point de départ.
L'herbe peut se déplacer dans le vent ou dans un paysage. Une personne peut cligner des yeux lorsqu'elle est présentée dans une photo à la tête surdimensionnée. Un produit peut basculer, tourner ou compléter l'action pour laquelle il est conçu.
La chose la plus importante lorsque l’on réfléchit à cette tendance est la simplicité. S'il y a trop de mouvement, vous devriez probablement opter pour une vidéo. L'élément de surprise est ce qui le fait fonctionner; Les utilisateurs s'attendent à une image fixe, mais elle reprend vie.
- Tenez-vous en à une chose et à une utilisation par site Web.
- Cela doit avoir l'air réaliste.
- Le mouvement doit suivre les lois de la physique.
- Le mouvement doit être subtile mais perceptible.
- N'en faites pas trop en ajoutant du son ou de nombreuses actions au clic.
- Pensez à un contrôle utilisateur subtil, tel que le mouvement provoqué par les mouvements de la souris.
- Développez une image en mouvement pouvant être utilisée dans plusieurs campagnes, pas seulement sur votre site Web.
Comment faites-vous?
Il existe de nombreuses façons de créer cet effet dans vos conceptions. La méthode détermine réellement votre niveau de compétence, la manière dont vous prévoyez d’utiliser les images vivantes et votre budget.
Certaines des options pour créer un mouvement subtil incluent:
- Créer un gif.
- Utilisez un outil en ligne (un certain nombre est disponible avec des coûts variables.
- Créez l'image en vidéo avec un mouvement limité.
- Utilisez une application ou même votre iPhone.
- Enchaînez des images fixes au format vidéo.
Essayez ce tutoriel YouTube pour vous aider à planifier et à créer une image vivante.
Un exemple parfait
Le site Web de Monochrome Paris est un parfait exemple de cette tendance en action. La page d'accueil est une image apparemment simple d'un enregistrement, mais l'élément rigide semble presque fondu et s'attaque au mouvement du tissu qui se déplace dans le vent. L'effet est engageant, accrocheur et attire les utilisateurs dans la conception.
L'effet aide à créer un intérêt de manière subtile. Le visuel imaginé semble un peu plus réel à cause du mouvement. Faites défiler la page et d'autres éléments en mouvement accueillent l'utilisateur, y compris une vue normale de la rotation de l'enregistrement.
Ce site Web est une excellente étude de cas pour utiliser efficacement cette tendance. Rendez-vous et cliquez pour vous aider à trouver votre inspiration.
Conclusion
Indépendamment de ce que vous appelez cela, l'imagerie vivante est l'une de ces tendances qui va probablement rester. C'est une autre façon d'ajouter une animation à un dessin sans avoir à produire une vidéo réelle. C'est efficace et peut coûter beaucoup moins cher que la production vidéo.
Le truc à cette tendance est de s’assurer que cela a l’air intentionnel et réel. Incorporer un mouvement stupide ne vous donnera pas nécessairement l'effet désiré. Revenez en arrière et regardez vraiment les exemples ci-dessus, allez sur les sites Web et cliquez dessus. Voyez en quoi cette animation vous mène dans la conception. Dans chacun des exemples, le mouvement aide l'utilisateur à accéder à un élément spécifique ou à effectuer une action donnée. Cette utilisation intentionnelle et dirigée du mouvement est la clé d'une conception cinématographique efficace.