Les arrière-plans de site web sont comme la vitrine de votre magasin. C’est la première partie de votre site internet visible par vos visiteurs. En plus d’être tout en haut de votre site, ils participent à la mise en valeur de vos titres et menus, mais également de vos produits sur un site E-Commerce. 

Que sont les arrière-plans de site web ?

L’arrière-plan ou background d’un site web correspond à une image, une illustration ou même une vidéo qui occupe la totalité de l’écran de votre site. L’arrière-plan est en première ligne sur votre site internet, c’est lui qui va laisser la première impression au visiteur, mais aussi associer une image, une identité de marque dans l’esprit du client. Il est donc primordial de bien la choisir et de la travailler. Les arrière-plans permettent également la mise en valeur des sections comme le titre du site ou des produits sur une plateforme d’E-commerce.

Un arrière-plan sur la totalité de la surface du site web réalisé dans le projet : Enzo Cortez

Un arrière-plan pour mettre en valeur un produit, réalisé dans le projet : Nike Air Jordan

L'en-tête ou header pour mettre en valeur vos menus

L’en-tête correspond à la partie tout en haut de votre site, connue également sous le nom de « header ». Elle peut être ou non fixe sur votre site web. C’est un espace idéal pour utiliser des éléments accrocheurs comme le logo de l’entreprise, des dégradés de couleurs ou des icons. On trouve généralement les menus de site web et les réseaux sociaux. 

background fitness

Une en-tête percutante avec une couleur orange, realisée pour un site internet de Fitness. Projet : Club du Parc – Rosheim

8 conseils pour créer des arrière-plans de site web

Choisissez les bonnes couleurs

Il est indispensable de travailler ses couleurs pour réaliser ses arrière-plans. Les couleurs en webdesign sont un très bon moyen d’attirer l’attention de votre client, de susciter des émotions, de transmettre l’image de votre société, mais également d’augmenter son taux de conversion et de fidéliser ses clients. 

Travaillez votre palette de couleurs web, en adéquation avec votre charte graphique.

Palette de couleurs en adéquation avec le logo et la charte graphique. Projet : Enzo Cortez

Clair et lisible avant tout

Votre background se doit d’être lisible. Travaillez la taille de vos images, de vos illustrations pour ne pas voir votre design se pixeliser une fois en ligne sur votre site. Un titre de couleur claire demandera d’ajouter une opacité sur l’arrière-plan avec l’aide d’un logiciel de montage comme Photoshop.

Faire un dégradé sur photoshop

Dégradé et opacité ajouté à une image très claire pour faire ressortir un texte blanc. Projet : Sporttotal

Une seule couleur

Vous trouvez les images trop contraignantes ? Optez pour un fond uni, avec une seule couleur. C’est généralement le meilleur compromis pour s’assurer que son site web est lisible et compréhensible. Attention tout de même à bien choisir la couleur. Très déterminante dans l’impression que vous dégagez et dans l’identité de votre marque ou entreprise. Les couleurs chaudes sont souvent utilisées dans le fitness, les restaurants. Les couleurs plus froides comme le vert et le bleu avec un effet apaisant sont plus utilisées dans le marketing, les start-up. 

Le dégradé fait toujours son effet

Les dégradés de couleurs ont le vent en poupe, notamment en webdesign. Tendance qui refait surface pour le plaisir et le bonheur de nos yeux. Très facilement déclinablent, ils peuvent être utilisés comme arrière-plan simple ou accompagnés à une photo. Beaucoup de site web propose des dégradés à téléchager comme Freepik ou pngtree.

La vidéo un atoût dans le marketing

Souvent délaissée, la vidéo est pourtant un atout non négligeable pour votre arrière-plan. Dynamique et captivante, elle permet de faire passer un message très rapidement au visiteur. Les sites de constructeurs automobiles l’ont bien compris et l’exploitent merveilleusement bien. Attention tout de même au format de la vidéo et au poids du fichier pour ne pas ralentir le chargement de votre site web. 

Jouez sur les tendances

Les tendances dans le webdesign changent très rapidement. Un site web qui s’adapte aux tendances de l’année, mais également aux saisons et un signe d’une marque active, moderne et soucieuse de son image. Les formes géométriques, la parallaxe, les éléments 3D immersifs, font partie des tendances de 2020.

backround sons of anarchy

Un arrière plan noir mat, tendance 2020. Projet : Sons of Anarchy

Rajoutez de l'animation

Qui ne rêve pas devant un site parallaxe ? Animer son image de fond est un excellent moyen de donner vie à son site web. Les animations sont très souvent associées à une palette de couleurs sobres et subtiles. C’est notamment le cas de Apple qui maitrise très bien ces codes. 

Responsive, une obligation

70 % des utilisateurs consultent aujourd’hui un site web depuis un smartphone ou une tablette. Pensez à optimiser l’ensemble de votre contenu pour les petits appareils (responsive design). Cela passe notamment par une optimisation de la taille des titres et des textes, une compression des images et CSS, des formulaires avec une saisie semi-automatique et des zones de texte suffisamment grandes pour les téléphones. 

Il est parfois nécessaire de masquer une grande image sur smartphone et d’en importer une spécifique, plus petite et plus lisible sur un téléphone portable.

Vous souhaitez lancer votre projet ?

Contactez nous et nous reprenons contact avec vous par mail.

1 réflexion sur “8 conseils pour créer les meilleurs arrière-plans de site web”

Laisser un commentaire

Beepower

Ingwiller - Alsace - France
06.99.49.23.57

Copyright ©2021 – Built with 💛 in Strasbourg by Beepower.fr