7 conseils pour des galeries de photos plus réactives
Nous connaissons et comprenons tous l'importance de concevoir des sites Web sur une plateforme réactive, non? Cela s'applique également aux images et aux galeries de photos.
Il n'y a rien de pire que de naviguer vers un beau site Web et de voir des images qui ne se «verrouillent» pas correctement ou ne se dimensionnent pas correctement. Cela vous laisse presque penser que le designer a oublié quelque chose ou raté une étape.
Aujourd'hui, nous allons examiner sept choses que vous pouvez faire dans le processus de conception pour créer de meilleures galeries de photos réactives. (Nous ne parlons pas de code ici; ce sont des processus de conception qui peuvent vous aider, vous et le développeur, qu'ils soient identiques ou non.)
Explorez Envato Elements
1. Tenez compte des proportions
L'expérience de visualisation sur ordinateur peut être très différente de celle d'un appareil mobile. Mais pour la plupart des sites Web, les emplacements d'image sont les mêmes. Votre travail consiste à vous assurer que le même message est communiqué dans les deux environnements et que l'image ne se perd pas sur différentes tailles d'écran.
C'est là que la réflexion sur le rapport d'aspect - la relation entre les plans horizontal et vertical de l'image - entre en jeu.
De retour à ce site Web de bureau, une photo horizontale super mince et fraîche pourrait sembler incroyable en haut de la conception de votre site Web. Mais qu'advient-il de cette image sur le petit écran dans un environnement plus carré? La photo rétrécit-elle à une taille difficile à voir? Ou la moitié de la photo disparaît-elle?
C'est là que le rapport d'aspect entre en jeu. En choisissant une relation horizontale-verticale pour des tailles de photo qui est similaire, moins de contenu d'image sera perdu lors du changement de périphérique. Cela vous permettra également de travailler plus facilement avec les emplacements d'image et vous n'aurez pas à vous soucier autant de télécharger plusieurs tailles pour différents points d'arrêt.
2. Taille et échelle cohérentes
Le soin que vous apportez au recadrage, au dimensionnement et au téléchargement de photos peut avoir un impact considérable sur votre flux de travail.
Combien d'entre vous viennent de télécharger des photos dans le CMS et espèrent le meilleur? Oui, c'est la mauvaise réponse.
Chaque photo doit être recadrée et dimensionnée pour être placée dans la conception du site Web. Cela garantit que les photos ressembleront à leur destination et vous ne vous retrouverez pas avec des têtes manquantes dans le haut des photos ou des éléments laissés sur un (ou les deux) côtés.
Cela prend un peu plus de temps à l'arrière du projet mais en vaut la peine. (En particulier si vous travaillez avec des curseurs ou des galeries.)
3. Utilisez un curseur ou une galerie
L'utilisation d'un conteneur pour des images telles qu'un curseur ou une galerie peut vous aider à mieux gérer les images réactives dans la conception de votre site Web. En particulier, si vous utilisez un outil tiers bien connu et établi, la plupart des travaux lourds sont effectués pour vous afin de vous assurer que ces éléments fonctionneront comme prévu.
Deux des conseils précédents restent d'une importance vitale même lorsque vous utilisez des éléments de curseur ou de galerie; les rapports d'aspect et les concepts de dimensionnement et de mise à l'échelle s'appliquent toujours.
Vous ne savez pas quelle option utiliser? Optez pour un curseur lorsque vous avez une poignée de superbes images qui fonctionneront dans des tailles plus grandes. C'est une option populaire pour la section supérieure ou «héros» d'une page Web. Optez pour une galerie lorsque vous avez beaucoup d'images qui peuvent être réduites sans problèmes de lisibilité. Cela fonctionne bien pour les portefeuilles ou les sites Web avec beaucoup d'images à présenter.
4. Éloignez-vous des légendes lorsque cela est possible
Les légendes peuvent être un excellent outil pour ajouter de la valeur aux informations contenues dans une image, mais peuvent vraiment entraver le fonctionnement du site Web. Évitez-les si vous le pouvez ou trouvez une autre solution qui ne se présente pas sous la forme d'une légende traditionnelle.
Les gros blocs de texte, tels que les légendes, peuvent être magnifiquement rendus sur de grands écrans mais présentent des problèmes majeurs dans les environnements plus petits. L'effet qui en résulte peut être discordant et potentiellement amener les utilisateurs à abandonner votre site. (Et avec autant de trafic provenant du mobile pour la plupart des sites Web, cela pourrait être désastreux.)
5. Soyez prudent lorsque vous mélangez des vidéos et des images
Soyons clairs: il est parfaitement acceptable d'avoir des éléments vidéo et image sur votre site Web. C'est probablement quelque chose que vous devriez faire.
Mais ne mélangez pas vidéo et images dans les mêmes éléments de la conception, par exemple en mettant des éléments vidéo et image dans le même curseur. Parfois, vous aurez de la chance et cela fonctionnera comme un charme. D'autres fois, vous vous retrouverez avec des cases vides sur certains appareils qui semblent tout simplement étranges.
La meilleure option est de donner à chaque type différent d'élément son propre espace dans la conception. Cela s'applique à presque tous les éléments de conception, mais en particulier aux images et aux vidéos.
6. Coupez les éléments inutiles
L'un des plus gros problèmes avec les curseurs et les galeries est que trop souvent le concepteur met trop de déchets à l'intérieur du conteneur. Il y a des flèches de navigation, des boutons de navigation, du texte, des appels à l'action et la liste continue.
Généralement, les utilisateurs comprennent comment interagir avec un curseur. À moins que vous ne fassiez quelque chose de totalement hors du mur, vous n'avez pas besoin de deux couches de navigation qui montrent aux utilisateurs quoi faire. Une seule rangée de boutons ou de flèches est suffisante (si vous en avez besoin).
N'incluez que les éléments avec lesquels les utilisateurs devront interagir. Si le but d'une galerie d'images ou d'un curseur est d'amener l'utilisateur à cliquer / appuyer sur un appel à l'action, cela devrait être la seule option sur la photo. Rester simple. Ne fournissez pas trop d'options. Cela peut réellement aider vos taux de conversion.
7. Utilisez uniquement des images de haute qualité
Cela va presque de soi, mais cela arrive encore trop souvent. Si vous n'avez pas d'image stellaire, n'utilisez pas du tout d'image. Les images de haute qualité et haute résolution sont plus importantes que jamais. Les utilisateurs ne perdront pas de temps à regarder un site Web avec des images pixellisées ou pauvres (et ils ne vous feront probablement pas confiance si la qualité est inférieure).
Un grand nombre d'utilisateurs regardent la conception de votre site Web à l'aide d'appareils dotés d'écrans haute résolution; ils attendent des visuels de premier ordre. Vous devez livrer.
Certains formats d'image changent pour répondre à ces besoins de haute résolution tout en offrant davantage d'images compressées. Parcourez les formats - Google Developers est un excellent point de départ - sachez quelles résolutions d'écran sont les plus généralement utilisées et prenez l'habitude d'enregistrer les fichiers de la manière la plus adaptée aux utilisateurs.
Conclusion
Nous voulons tous créer des sites Web avec lesquels les utilisateurs ressentent le besoin d'interagir. Les images fortes sont un élément clé de cette équation. Il est également important de les rendre bien indépendamment de l'appareil.
Planifiez des espaces d'images qui fonctionneront sur une variété de tailles d'appareils lorsque vous êtes dans les étapes de filaire d'un projet de conception de site Web. Vous trouverez peut-être qu'il y a des concessions mutuelles, en particulier en termes de forme d'image, mais à long terme, prendre ces décisions tôt et créer cette cohérence bénéficiera à la conception de votre site à long terme.
