UA-131830064-1 Webdesign site internet Toulouse
top of page

5 astuces pour créer le parfait arrière-plan pour votre site !

Envie d’accrocher vos visiteurs dès le premier regard ? Si votre réponse est « oui », le conseil qui suit devrait vous intéresser. Pour en mettre (littéralement) plein la vue à vos visiteurs, rien de tel qu’un arrière-plan en mode plein écran. Votre arrière-plan instaure en un coup d’œil l’atmosphère de votre site. Sachant que les internautes ne sont pas réputés pour leur patience sans borne, captiver leur attention avec un fond d’écran créatif et représentatif de votre activité vous sera d’une aide précieuse.

Si vous désirez éblouir vos visiteurs avec ce type d’arrière-plan, trouver une grande image, aussi belle soit-elle, ne sera pas suffisant. Il vous faut avant tout appréhender certaines techniques qui vous assureront de concevoir un fond d’écran dans les règles de l’art :


arriere-plan-site-internet

Utilisez de grandes images de haute qualité seulement !

Quel que soit le visuel que vous utilisez pour l’arrière-plan de votre site, assurez-vous qu’elle soit d’une qualité irréprochable. Avec les arrière-plans de sites Web, l 'intérêt est d’avoir un fichier assez volumineux qui s’affichera bien sur tous les écrans : mobiles, tablettes, différents formats d'ordinateurs, sans alourdir le temps de chargement.. En règle générale, une résolution de 72 ppp («points par pouce») suffit, mais vous pouvez également essayer avec une résolution de 96 ppp. La taille d'image d'arrière-plan recommandée pour la plupart des sites internet est de 1250 × 800 ou plus, mais dans les mêmes proportions.



arriere-plan-site-internet

Comprendre le contraste des couleurs

Même si votre image d’arrière-plan est magnifique, n’oubliez pas que son rôle est de fonctionner comme arrière-plan. Votre site Web contient d’autres éléments auxquels les visiteurs doivent prêter attention. Assurez-vous que le reste de votre contenu est clairement visible et lisible est d’utiliser un contraste de couleur suffisamment net qui accentue le texte et les boutons pour garantir qu’ils ne se perdent pas dans votre arrière-plan.



arriere-plan-site-internet

Si votre arrière-plan plein écran contient plusieurs détails (comme une photo d'un groupe de personnes, un paysage urbain, plusieurs produits regroupés, etc.), vous devez vous assurer que le contenu de l'image et le contenu qui en est externe - menu de navigation, textes, applications, liens de médias sociaux et tout ce que vous avez sur votre site s'équilibrent. Commencez par télécharger l’image d’arrière-plan, puis ajoutez le reste des éléments du site Web pour travailler en harmonie avec le contenu de l’image.


Utilisez des formes

Un excellent moyen d'équilibrer votre contenu avec votre arrière-plan consiste à utiliser des formes et des bannières pour créer un design supplémentaire entre l'arrière-plan et le contenu de votre site. Si vous souhaitez ajouter une bulle de texte par exemple, mais que l'image d'arrière-plan vous semble trop prédominante par rapport à votre bulle de texte, ajoutez une forme, remplissez-la d'une couleur qui crée du contraste. De cette façon, la forme agit comme une zone tampon qui structure votre contenu.


arriere-plan-site-internet

Vérifier l’affichage !


Vos visiteurs accèdent à votre site depuis une variété de navigateurs. Prenez soin d’optimiser l’affichage de votre site sur tous les supports possibles. Sur votre ordinateur, effectuez des tests sur les navigateurs les plus utilisés (Chrome, Firefox et Internet Explorer). Ensuite, vérifiez que votre site apparaît sur mobile parfaitement. Il ne sert à rien d’avoir un arrière-plan remarquable s’il ne s’affiche pas convenablement sur tous les supports et écrans.


Tous les visiteurs de votre site n'utilisent pas les mêmes appareils et les mêmes navigateurs, vous devez vous assurer que votre arrière-plan plein écran a fière allure sur autant d'options d'affichage que possible. Pour les navigateurs Web, testez au moins l'arrière-plan de votre site avec les navigateurs les plus courants - Chrome, Firefox... Testez votre site sur différents supports pour tester l'affichage mobile.

57 vues0 commentaire
bottom of page