Nous savons tous et comprenons l'importance de la conception de sites Web sur une plateforme réactive, n'est-ce pas? Cela s'applique également aux images et aux galeries de photos.
Il n'y a rien de pire que de naviguer sur un site Web magnifique et de voir des images qui ne se verrouillent pas? en place ou taille correctement. Cela laisse presque à penser que le designer a oublié quelque chose ou a raté une étape.
Aujourd'hui, nous allons examiner sept choses que vous pouvez faire dans le processus de conception pour créer des galeries de photos plus réactives. (Nous ne parlons pas de code ici. Ce sont des processus de conception qui peuvent vous aider, ainsi que le développeur, qu’ils soient identiques ou non.)
1. Considérer les ratios d'aspect
L’expérience de visionnement sur le bureau 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 avec différentes tailles d’écran.
C’est là que la réflexion sur les proportions - la relation entre les plans horizontal et vertical de l’image - entre en jeu.
De retour sur ce site Web de bureau, une photo horizontale super fine peut sembler étonnante au sommet 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 bien la moitié de la photo disparaît-elle?
C'est là qu'intervient le rapport de format. En choisissant une relation similaire entre les formats de photo horizontaux et verticaux, vous perdez moins de contenu d'image lors du changement de périphérique. Cela vous permettra également de travailler plus facilement avec les placements d'image et vous n'aurez plus à vous soucier du téléchargement de plusieurs tailles pour différents points d'arrêt.
2. Taille et échelle constamment
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 téléchargez des photos sur le CMS et espérez que tout ira pour le mieux? 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 auront l'apparence voulue et que vous ne vous retrouverez pas avec des têtes manquantes au sommet des photos ou des éléments laissés de côté (ou des deux).
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 bien établi, la majeure partie des tâches lourdes a été effectuée pour vous assurer que ces éléments fonctionneront comme prévu.
Deux des conseils précédents restent d'une importance capitale même lorsque vous utilisez des éléments de glissière ou de galerie. les ratios d'aspect et les concepts de dimensionnement et de dimensionnement s'appliquent toujours
Vous ne savez pas quelle option utiliser? Optez pour un curseur lorsque vous avez une poignée d'images de qualité qui fonctionneront avec des tailles plus grandes. C'est une option populaire pour le top ou le? Héros? section 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 d'une image, mais peuvent vraiment entraver le fonctionnement du site Web. Évitez-les si vous le pouvez ou proposez une autre solution qui ne se présente pas sous la forme d'une légende traditionnelle.
Les blocs de texte volumineux, tels que les légendes, peuvent afficher un rendu magnifique sur de grands écrans, mais présentent des problèmes majeurs dans des environnements plus petits. L'effet résultant peut être choquant et potentiellement amener les utilisateurs à abandonner votre site. (Et avec autant de trafic en provenance de 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.
Toutefois, ne mélangez pas la vidéo et les images dans les mêmes éléments de la conception, par exemple, en plaçant les éléments vidéo et image dans le même curseur. Parfois, vous aurez de la chance et cela fonctionnera à merveille. D’autres fois, il vous restera des cases vierges sur certains appareils qui ont l’air étrange.
La meilleure option consiste à donner à chaque type d'élément son propre espace dans la conception. Cela s'applique à presque tous les éléments de conception, mais plus particulièrement aux images et aux vidéos.
6. Couper 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 dans le conteneur. Il y a des flèches de navigation, des boutons de navigation, du texte, des appels à l'action et la liste s'allonge.
Généralement, les utilisateurs comprennent comment interagir avec un curseur. À moins que vous ne fassiez quelque chose de totalement bizarre, vous n'avez pas besoin de deux couches de navigation qui montrent aux utilisateurs ce qu'ils doivent faire. Une seule rangée de boutons ou de flèches suffit (si vous en avez besoin).
Incluez uniquement les éléments avec lesquels les utilisateurs devront interagir. Si le but d'une galerie d'images ou d'un curseur est d'inciter l'utilisateur à cliquer / toucher un appel à l'action, cela devrait être la seule option disponible sur la photo. Rester simple. Ne pas fournir trop d'options. Cela peut réellement aider vos taux de conversion.
7. Utilisez uniquement des images de haute qualité
Cela va presque sans dire, mais cela arrive encore trop souvent. Si vous n'avez pas d'image stellaire, n'utilisez pas d'image du tout. Des images haute qualité et haute résolution sont plus importantes que jamais. Les utilisateurs ne vont pas perdre de temps à regarder un site Web avec des images pixelisées ou de mauvaise qualité (et ils ne vous feront probablement pas confiance si la qualité est médiocre).
Un grand nombre d'utilisateurs consultent la conception de votre site Web à l'aide d'appareils dotés d'un écran haute résolution. ils s'attendent à des visuels de premier ordre. Vous devez livrer.
Certains formats d'image changent pour répondre à ces besoins en haute résolution tout en offrant davantage d'images compressées. Faites-le vous-même dans des formats différents - Google Developers est un excellent point de départ. Découvrez les résolutions d'écran les plus utilisées et prenez l'habitude de sauvegarder les fichiers de manière à ce que les utilisateurs puissent le recevoir au mieux.
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 tout aussi important de bien les rendre, quel que soit le périphérique.
Planifiez des espaces images qui fonctionneront sur une variété de tailles de périphériques lorsque vous en êtes aux étapes de la création d'images en fil de fer d'un projet de conception de site Web. Vous constaterez peut-être qu'il y a des compromis, en particulier en ce qui concerne la forme de l'image, mais à long terme, prendre rapidement ces décisions et créer cette cohérence seront bénéfiques pour la conception de votre site à long terme.