3 modifications graphiques

3 modifications rapides à faire sur votre site web

Quelques petites modifications peuvent parfois être très importantes pour votre site web et lui apporter en un rien de temps un design beaucoup plus professionnel. Aujourd'hui nous vous proposons 3 améliorations à réaliser sans attendre si ce n'est pas encore fait sur votre site !

Ajouter un favicon

Cette petite icône va participer à renforcer l'identité de votre site web et lui donner un aspect professionnel : jetez un coup d'oeil aux sites que vous visitez régulièrement, tous ont leur favicon ! Une favicon va rendre visible votre site dans différentes situations : sur l'onglet de votre navigateur, dans les favoris, dans certains agrégateurs de flux...

Favicons onglets

Il n'y a donc que des avantages à intégrer une favicon alors n'attendez pas pour en créer une depuis votre logiciel de retouche favori ! Il suffit de créer votre image au format gif, jpg ou png dans une dimension de 16 x 16 ou 32 x 32 pixels.

Pour qu'elle soit représentative de votre site web, reprenez le nom de votre site ou de votre marque, voire juste une lettre ou une icône si celui-ci est trop long. Choisissez des couleurs contrastées pour une bonne lisibilité, tout en respectant bien sûr l'identité visuelle de votre activité : le but étant que votre site se démarque parmi plusieurs onglets ouverts par exemple.

Pour l'insérer sur votre site, c'est très simple : rendez dans Configuration > Réglages > Infos sur le site.

Uniformiser les couleurs de votre site avec votre logo

Ajouter un logo est fortement conseillé pour créer une véritable identité visuelle. Toutefois, il faut qu'il s'intègre parfaitement aux couleurs de votre site, et plus particulièrement de votre entête, pour obtenir un rendu professionnel. Comment faire en pratique ?

L'utilisation d'un outil pipette via votre logiciel de retouche photo préféré vous permettra de récupérer les codes couleurs de votre logo et d'établir une palette de couleurs à utiliser sur votre site web.

Selecteur couleur photoshop

Selon le logiciel utilisé, les codes peuvent être obtenus dans une valeur différente (en hexa par exemple avec un code commençant par le signe #) de celle à intégrer sur le manager dans Configuration > Apparence  (codes en rgba avec 4 valeurs séparés par des virgules): dans ce cas vous pouvez convertir le code grâce à un outil comme Color Hexa.

Vous pourrez ensuite changer facilement une couleur de police ou une couleur de fond pour que votre logo s'adapte complétement à votre menu par exemple.

Vous n'êtes pas très doué pour associer les couleurs ? Pensez à utiliser des outils comme Color Hunt proposant des palettes de couleurs qui se marient bien entre-elles. Dans tous les cas, limitez le nombre de couleurs sur votre site à 2 ou 3 tons différents et évitez l'effet arc en ciel.

Ajouter des séparations sur sa page d'accueil

Organiser ses contenus et faire apparaitre clairement différents blocs va contribuer à rendre la lecture plus simple et agréable sur votre site web. Grâce au système de lignes et de colonnes, délimiter les contenus devient véritablement un jeu d'enfant !

Plusieurs options s'offrent à vous, notamment la possibilité d'ajouter des séparations de lignes ou de colonnes pour un aspect à la fois moderne et professionnel (c'est le cas par exemple sur cet article avec des séparations de lignes entre chaque suggestion de modification). Pour utiliser cette option, cliquez simplement sur le bouton apparence disponible en bas à droite de chaque ligne puis sélectionnez le style souhaité avec le menu déroulant.

Si vous souhaitez aller plus loin dans la personnalisation de vos lignes ou colonnes, il est également possible de jouer sur la surbrillance, d'intégrer un effet au survol. Pour choisir le style qui convient le mieux à votre site, consultez le tutoriel dédié à la présentation des différentes apparences applicables via l'éditeur de pages.

Bien entendu, cette fonctionnalité ne se limite pas à la page d'accueil de votre site mais il est important de la travailler en priorité : c'est souvent cette page qui va donner envie ou non de pousuivre la visite sur votre site !

Création graphique Optimisation Joli site