Tendance du design: des photos vivantes
Une photo en direct. Cinemagraph. Images animées. Toujours en mouvement. Il y a tellement de noms pour cette tendance dans la conception de sites Web, identifiés par une image de héros qui semble prendre vie 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 seule action dans l'image pour aider à attirer l'attention des utilisateurs et à les attirer dans l'image. Peu importe comment vous l'appelez, cette tendance a un impact et apparaît partout dans la conception Web, sous forme de gifs partageables et sur les réseaux sociaux.
Evolution de la tendance
Il est difficile de dire où l'idée des photos «en direct» a commencé, mais vous pourriez affirmer qu'Apple a contribué à la rendre plus populaire. La société a introduit la photographie qui comprenait des touches de mouvement avec l'iPhone 6S. Ce petit moment supplémentaire de plaisir est le même concept pour les photos vivantes sur les sites Web. Il y a quelque chose de plus dans une image stellaire qui vous permet de la regarder un peu plus longtemps.
Ce même concept d'imagerie en mouvement a commencé à apparaître dans plus d'endroits. Les publicités apparemment fixes sur les panneaux d'affichage numériques incluent quelqu'un qui vous clignote ou vous fait un clin d'œil. Même les files d'attente pour Sunday Night Football incluent des tirs à la tête des joueurs qui clignotent après une seconde, vous montrant qu'il s'agit en fait d'une action en direct.
Pourquoi utiliser cette technique? Il retient l'attention de l'utilisateur plus longtemps et fournit un point de référence visuel plus intéressant. Flixel, une entreprise qui fabrique des images cinématographiques pour les clients, affirme que la photo animée moyenne retient l'attention des utilisateurs 9 secondes, contre 1 seconde pour l'image fixe moyenne.
Photos ou illustrations
Les images vivantes ou les cinémagraphes peuvent fonctionner avec des photographies ou des illustrations. Il n'y a pas de règle qui stipule 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 assez efficace.
Une autre considération est que le mouvement n'a pas à se produire en boucle. Hillmann Living, ci-dessus, met en lumière les produits sur la page d'accueil lors du chargement. C'est le seul mouvement et puis la photo est juste ça, une photo fixe. Ce qui est bien ici, c'est que cela vous fait regarder directement les chaises que l'entreprise vend tout de suite. La technique montre aux utilisateurs ce qui compte 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 plutôt simple au début, mais un petit avion vole à travers le centre supérieur de l'écran en boucle. La motion aide l'utilisateur à regarder les mots importants à l'écran: "Nos vins ne sont pas filtrés." L'utilisateur sait immédiatement quelque chose sur la messagerie de ce site Web car ils sont attirés par la langue la plus importante grâce au mouvement sur l'écran.
Conseils pour réussir
Cette technique peut fonctionner de plusieurs façons et pour une variété d'applications de conception. Certains des meilleurs exemples proviennent de scènes ou de paysages simples 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 et prise de vue surdimensionnée. Un produit peut basculer ou tourner ou terminer l'action pour laquelle il est conçu.
La chose la plus importante lorsque l'on pense à 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 attendent une image fixe, mais elle prend vie.
- Respectez une chose et une utilisation par site Web.
- Il doit être réaliste.
- Le mouvement doit suivre les lois de la physique.
- Le mouvement doit être subtil mais perceptible.
- N'en faites pas trop en ajoutant du son ou de nombreuses actions de clic.
- Envisagez un contrôle utilisateur subtil, tel qu'un mouvement qui se produit avec les mouvements de la souris.
- Développez une image animée qui peut ê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 créations. La méthode détermine vraiment votre niveau de compétence, la façon dont vous prévoyez d'utiliser les images vivantes et le budget.
Certaines des options pour créer un mouvement subtil incluent:
- Créez un gif.
- Utilisez un outil en ligne (il en existe plusieurs disponibles à des coûts variables.
- Créez l'image sous forme de vidéo avec un mouvement limité.
- Utilisez une application ou même votre iPhone.
- Assemblez des images fixes au format vidéo.
Essayez ce didacticiel YouTube pour vous aider à planifier et à créer une image vivante.
Un exemple parfait
Le site Internet 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 prend le mouvement du tissu se déplaçant dans le vent. L'effet est attrayant, accrocheur et attire les utilisateurs dans la conception.
L'effet aide à créer de l'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 saluent l'utilisateur, y compris une vue normale de la rotation de l'enregistrement.
Ce site Web est une excellente étude de cas de manière efficace pour utiliser cette tendance. Rendez-vous et cliquez pour vous aider à vous inspirer.
Conclusion
Indépendamment de ce que vous appelez, l'imagerie vivante est l'une de ces tendances qui persistera probablement. C'est une autre façon d'ajouter de l'animation à un design sans nécessairement avoir à produire une vidéo réelle. C'est efficace et peut coûter beaucoup moins cher que la production vidéo.
L'astuce pour cette tendance est de s'assurer qu'elle semble intentionnelle et réelle. Incorporer un peu de mouvement stupide ne vous donnera pas nécessairement l'effet souhaité. Revenez en arrière et regardez vraiment les exemples ci-dessus, allez sur les sites Web et cliquez autour. Voyez à 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 certaine action. Cette utilisation intentionnelle et dirigée du mouvement est la clé d'une conception cinématographique efficace.
