Personnaliser le modèle et le design Kopage : couleurs, polices, en-tête et pied de page

Le design détermine l'impression visuelle globale de votre site web Kopage. Cela inclut, entre autres, le modèle ou thème utilisé, les couleurs, les polices, l'en-tête, la navigation et d'autres éléments de mise en page.

Dans le constructeur de sites Web classique de Kopage, vous pouvez ajuster bon nombre de ces paramètres via l'interface utilisateur, sans avoir à écrire vous-même de CSS ou de HTML.

Dans ce guide, nous expliquons comment les différentes zones de design sont liées et à quoi vous devez faire attention lorsque vous modifiez l'apparence d'un site Web Kopage existant.

En bref : Les modifications apportées au design peuvent avoir des répercussions sur plusieurs, voire sur toutes les pages de votre site web. En revanche, vous modifiez les textes individuels, les images et les blocs de contenu en tant que contenus.

Que comprend le design d'un site web Copage ? #

Le design ne se résume pas au choix d'une couleur.

Plusieurs éléments de conception contribuent ensemble à la perception de ton site web. Il s'agit notamment :

• Modèle ou thème,
• Couleurs et palette de couleurs,
• Polices de caractères,
• En-tête,
• Navigation et conception des menus,
• Contexte,
• ainsi que d'autres paramètres de mise en page généraux.

Il convient de distinguer ces éléments du contenu proprement dit de votre site web. Les textes, images, formulaires ou blocs de contenu individuels ne constituent pas des paramètres de conception fondamentaux, même si leur mise en page influence bien sûr également l'aspect général du site.

Qu'est-ce qu'un modèle ou un thème ? #

Un modèle, ou thème, constitue la base graphique de votre site web Kopage.

Il définit les propriétés visuelles de base et t'évite d'avoir à développer chaque page et chaque élément de mise en page entièrement à partir de zéro.

Tu peux utiliser un modèle existant comme point de départ, puis l'adapter à ton propre site web.

C'est particulièrement utile pour les débutants : au lieu de devoir commencer par concevoir un site web complet, tu peux te concentrer sur les couleurs, les polices, le contenu et la structure de ton site.

Important : Un modèle sert de base à la mise en page et ne remplace en aucun cas vos propres contenus. Les textes, les images, la structure des pages et la navigation doivent toujours être adaptés à votre entreprise ou à votre projet.

Quel modèle dois-je choisir ? #

Lors de ta sélection, ne te laisse pas trop influencer par les images ou les textes d'exemple, mais concentre-toi davantage sur la structure générale.

Une image d'exemple peut être remplacée ultérieurement. Ce qui importe davantage, c'est de savoir si la mise en page générale correspond au site web que tu envisages de créer.

Vérifie notamment si l'en-tête, la navigation, la largeur du contenu et la mise en page générale correspondent à tes attentes.

Pour un petit site web d'entreprise, par exemple, un design clair et sobre peut s'avérer plus judicieux qu'un modèle complexe doté de nombreux effets visuels.

Modifier le modèle d'un site web existant #

Si votre site web est déjà en ligne, vous ne devez pas aborder le changement de modèle de la même manière que le choix du design pour un nouveau site web.

Un modèle influence les propriétés de mise en page fondamentales. C'est pourquoi, avant d'effectuer une modification importante du design, tu dois vérifier avec soin quelles seront les répercussions de cette modification sur ton site web actuel.

Vérifie ensuite notamment :

• Page d'accueil et sous-pages importantes,
• En-tête et navigation,
• Tailles de police et sauts de ligne,
• Images et blocs de contenu,
• Pied de page,
• ainsi que l'affichage sur smartphone et tablette.

Attention : Dans le cas d'un site web existant, n'utilisez pas l'option permettant de remplacer ou de réécrire le contenu existant sans avoir préalablement vérifié précisément ce que cette fonction modifie. La refonte du design et le remplacement du contenu d'un site web sont deux opérations distinctes.

Ajuster les couleurs dans Kopage #

Les couleurs comptent parmi les éléments essentiels d'une conception web cohérente.

Kopage propose à cet effet différentes options de couleurs ou palettes de couleurs. De plus, tu peux personnaliser l'apparence en fonction de tes propres couleurs.

Si ton entreprise possède déjà une identité visuelle, tu devrais utiliser, si possible, les mêmes couleurs de base sur ton site web.

En général, une palette de couleurs restreinte suffit :

Couleur principale
Couleur d'accent
Couleur d'arrière-plan
Couleur du texte
le cas échéant, une couleur neutre supplémentaire

Un trop grand nombre de couleurs différentes peut rapidement donner à un site web un aspect chargé.

Quelle couleur devrais-je utiliser pour les boutons et les liens ? #

Les éléments interactifs doivent être facilement identifiables par les visiteurs.

Si, par exemple, ta couleur principale est utilisée pour les boutons, tu dois veiller à ce que cette utilisation reste aussi cohérente que possible sur le site web.

Un bouton ne devrait pas être bleu sur une page, vert sur la suivante et rouge sur une troisième, s'il n'y a aucune raison esthétique à cela.

Il en va de même pour les liens et les autres éléments avec lesquels les visiteurs peuvent interagir.

Conseil pratique : N'utilisez pas les couleurs uniquement à des fins décoratives. Une couleur d'accentuation récurrente peut aider les visiteurs à identifier plus rapidement les boutons, les liens et les actions importantes.

Veiller à un contraste de couleurs suffisant #

Une combinaison de couleurs peut être visuellement attrayante tout en étant peu lisible.

Un contraste suffisant entre le texte et l'arrière-plan est particulièrement important.

Un texte clair sur un fond presque tout aussi clair ou un texte sombre sur une surface très sombre rendent inutilement la lecture difficile.

Cela concerne non seulement les textes normaux, mais aussi les boutons, la navigation, les formulaires et autres éléments d'interface.

Par conséquent, après un changement de couleur, vérifiez non seulement si la couleur vous plaît, mais aussi si tous les textes et fonctionnalités restent bien visibles.

Modifier les polices dans Kopage #

La police de caractères a également une grande influence sur l'effet d'un site web.

Kopage propose différentes polices de caractères pour la conception. Cela vous permet d'adapter l'aspect typographique à votre site web sans avoir à intégrer manuellement vos propres polices web.

Lors de la sélection, la lisibilité devrait l'emporter sur un aspect trop original.

Une police décorative peut, par exemple, fonctionner pour des éléments de design individuels, mais elle est souvent inadaptée pour des textes courants plus longs.

Ne pas combiner trop de polices #

Pour la plupart des sites Web, une ou tout au plus deux polices de caractères bien assorties suffisent.

Une répartition possible est par exemple :

Titres → Police A
Texte courant → Police B

Mais vous pouvez tout aussi bien utiliser une seule et même famille de polices pour l'ensemble du site web et différencier les titres par la taille et la graisse.

Il est crucial que la mise en page reste cohérente.

Conseil pratique : Une police facile à lire et utilisée de manière cohérente a généralement l'air plus professionnelle que plusieurs polices voyantes sur le même site web.

Faire la distinction entre les titres et le texte courant #

Une bonne typographie aide les visiteurs à saisir rapidement la structure d'une page.

Les grands titres doivent se distinguer nettement du texte courant. Les sous-titres structurent en outre les contenus plus longs.

Pour cela, tu ne dois pas seulement agrandir visuellement les titres, mais utiliser les formats de titres prévus.

Une structure de contenu pertinente est non seulement importante pour la lisibilité, mais elle aide également les moteurs de recherche à mieux comprendre la structure d'une page.

Concevoir l'en-tête du site web #

L'en-tête est la zone supérieure de votre site web et fait partie des éléments que les visiteurs voient le plus souvent.

Selon le design utilisé, le logo, la navigation et d'autres éléments peuvent par exemple y apparaître.

L'en-tête doit rester clair et permettre aux visiteurs de comprendre rapidement sur quel site ils se trouvent et comment accéder aux principales sections.

Un très grand en-tête comportant de nombreux éléments peut occuper un espace inutilement important, en particulier sur les écrans plus petits.

Utiliser le logo dans l'en-tête #

Si tu possèdes ton propre logo d'entreprise ou d'association, tu devrais utiliser un fichier image approprié.

Veillez tout particulièrement à ce que le logo soit suffisamment net et ne présente pas de dimensions de fichier inutilement grandes.

Pour les logos avec un fond transparent, un format d'image qui prend en charge la transparence convient.

Vérifiez également que le logo reste bien visible à la fois sur l'arrière-plan d'en-tête choisi et sur les écrans plus petits.

Considérer la navigation et l'en-tête ensemble #

La navigation fait souvent partie de l'en-tête. C'est pourquoi les deux zones doivent s'harmoniser sur le plan du design.

Le menu doit être bien lisible et ne doit pas être surchargé d'un nombre inutilement élevé de points principaux.

Si ton site Web possède de nombreuses pages, tu peux structurer le contenu avec des sous-pages ou des sous-menus.

Nous expliquons comment organiser vos pages et vos menus sous Gérer les pages, la navigation et les sous-menus dans Kopage.

Concevoir le pied de page #

Le pied de page se trouve au bas d'un site web et est souvent affiché sur plusieurs ou sur toutes les pages.

On peut y loger, selon la structure, par exemple des informations de contact, des éléments de navigation supplémentaires ou d'autres informations récurrentes.

Ici aussi, moins c'est souvent plus. Le pied de page doit fournir des informations utiles et ne pas devenir une deuxième page d'accueil surchargée.

Si tu modifies le contenu global du pied de page, vérifie ensuite plusieurs pages de ton site web.

Utiliser les arrière-plans correctement #

Les couleurs d'arrière-plan et les images d'arrière-plan peuvent séparer visuellement différentes zones d'un site web les unes des autres.

Cependant, ils doivent soutenir le contenu et non le distraire.

En ce qui concerne les images d'arrière-plan, vous devez prêter une attention particulière à la lisibilité du texte superposé. Une photo chargée derrière un long paragraphe de texte peut considérablement altérer la lisibilité.

La taille du fichier d'une image d'arrière-plan doit également être prise en compte, car des images inutilement grandes peuvent augmenter le temps de chargement d'un site Web.

Personnaliser les blocs de contenu #

En plus des paramètres de design globaux, vous pouvez également influencer l'affichage des différentes zones de contenu.

Cela permet par exemple de mettre en valeur une section spécifique sans modifier l'ensemble du thème du site web.

Cette distinction est importante :

Modification globale du design
→ influence l'apparence générale

Adaptation des blocs de contenu
→ concerne une zone de contenu spécifique

Nous expliquons en détail comment les blocs de contenu sont structurés et modifiés sur Créer du contenu avec Kopage : modifier les blocs de contenu, les textes et les images.

Images faisant partie du design #

Le choix de vos images influence également considérablement l'apparence générale.

Essayez d'utiliser un style d'image si possible uniforme. Des qualités d'image, des formats ou des styles très différents peuvent donner un rendu discordant, même avec un bon modèle.

De plus, vous ne devriez pas télécharger des images inutilement grandes. Pour un site Web normal, il n'est pas nécessaire de fournir une photo dans la taille d'origine d'un appareil photo moderne.

Nous traitons la gestion des images ainsi que les galeries et les diaporamas sous Créer des images, des galeries photo et des diaporamas dans Kopage.

Vérifier le design sur smartphone et tablette #

Kopage fonctionne avec des conceptions de sites Web responsives. Néanmoins, vous devez vérifier votre conception sur différentes tailles d'écran.

Un contrôle sur les petits écrans est particulièrement important, notamment après des modifications apportées à l'en-tête, à la navigation, aux tailles de police, aux images ou à des blocs de contenu volumineux.

Fais attention, par exemple, à :

• Diviser judicieusement les titres,
• le texte reste bien lisible,
• que les images soient affichées correctement,
• les boutons sont faciles à manipuler,
• et que la navigation continue de fonctionner de manière claire.

Vous trouverez un guide détaillé à ce sujet sous Design adaptatif : Optimiser le site web Kopage pour smartphones et tablettes.

Design et référencement naturel #

Le webdesign et le référencement naturel ne sont pas des sujets totalement distincts.

Une structure de page claire, un contenu lisible, des en-têtes correctement utilisés et une navigation compréhensible aident non seulement les visiteurs, mais constituent également une meilleure base pour les moteurs de recherche.

Cependant, de pures décisions de conception ne remplacent pas l'optimisation pour les moteurs de recherche.

Nous traitons donc séparément le titre de la page, les métadonnées et les autres paramètres SEO sous SEO avec Kopage : titres de pages, métadonnées, URL et optimisation pour les moteurs de recherche.

Personnalisations CSS #

Pour la conception normale d'un site web Jimdo, tu n'as pas besoin de connaissances en CSS.

Cependant, si vous souhaitez apporter des modifications très personnalisées et que vous possédez les connaissances nécessaires, Kopage offre des possibilités pour intégrer votre propre code.

Vous ne devriez utiliser de telles adaptations que lorsque le résultat souhaité ne peut pas être obtenu de manière satisfaisante via les fonctions de conception normales.

Attention : Du code CSS ou JavaScript personnalisé peut modifier l'apparence ou le bon fonctionnement de votre site Web. N'utilisez du code personnalisé que si vous en comprenez les conséquences.

Nous traitons l'utilisation de notre propre code séparément sous Utiliser son propre code HTML, CSS et JavaScript dans Kopage.

Erreurs fréquentes lors de la conception d'un site web #

De nombreux problèmes de design ne naissent pas d'un manque de fonctionnalités, mais d'un trop grand nombre d'idées de conception utilisées en même temps.

Des exemples typiques sont un trop grand nombre de couleurs, plusieurs polices de caractères différentes, des titres très grands, des images d'arrière-plan illisibles ou des boutons aux designs hétérogènes.

De même, des changements fréquents de styles de design au sein d'un même site web nuisent à l'uniformité de l'apparence.

Essayez par conséquent de définir quelques règles de conception fondamentales et de les maintenir sur l'ensemble du site web.

Définir un système de design simple #

Tu n'as pas besoin d'un manuel de design professionnel pour cela.

Déjà quelques décisions fondamentales aident à rendre le site web cohérent :

Couleur principale
Couleur d'accent
Couleur du texte
Couleur d'arrière-plan

Police pour les titres
Police pour le texte courant

Style de bouton
Style d'image
Espaces entre les zones de contenu

Si vous appliquez ces principes de manière cohérente, le site Web paraîtra généralement beaucoup plus sobre et professionnel.

Effectuer des modifications de conception de manière contrôlée #

Pour un site Web existant, il est recommandé de ne pas modifier simultanément le modèle, les couleurs, les polices, l'en-tête et tous les blocs de contenu.

Travaille mieux étape par étape.

Modifie par exemple d'abord les couleurs et contrôle le résultat. Ensuite, tu peux adapter la typographie et vérifier à nouveau.

Cela vous permet d'identifier plus facilement quel changement est responsable d'un résultat inattendu.

Conseil pratique : Après une modification majeure du design, ne vous contentez pas de vérifier la page d'accueil. Ouvrez également les sous-pages typiques, les formulaires de contact, les sections de blog ou d'autres fonctionnalités utilisées.

Quand ne devrais-je pas changer le modèle ? #

Si vous êtes satisfait de la structure fondamentale de votre site web et que vous souhaitez uniquement modifier les couleurs, les polices ou des éléments de design individuels, un changement complet de modèle n'est peut-être pas du tout nécessaire.

Vérifiez donc d'abord si vous pouvez obtenir le résultat souhaité via les paramètres de design existants.

Plus un site Web existant est vaste, plus il est important d'apporter des modifications fondamentales de manière contrôlée.

Que dois-je vérifier après une modification de design ? #

Après des ajustements majeurs, un court contrôle de qualité est recommandé.

Vérifier la page d'accueil
        ↓
Vérifier les sous-pages importantes
        ↓
Tester la navigation
        ↓
Tester les liens et boutons
        ↓
Contrôler les formulaires
        ↓
Vérifier l'affichage sur smartphone
        ↓
Ouvrir le site Web dans le navigateur

Cela te permet de voir rapidement si le nouveau design fonctionne également en dehors de la zone que tu viens de modifier.

Que se passe-t-il après le design ? #

Une fois que la conception de base de votre site web est fixée, vous pouvez vous consacrer au contenu proprement dit de la page.

Les blocs de contenu jouent à cet égard un rôle central. Ils vous permettent de structurer des sections de page individuelles et de combiner textes, images et autres éléments.

C'est pourquoi nous continuons avec Créer du contenu avec Kopage : modifier les blocs de contenu, les textes et les images.

Résumé #

La conception d'un site Web Kopage se compose de plusieurs sections interconnectées. Le modèle ou le thème constitue la base de la conception, tandis que les couleurs, les polices, l'en-tête, la navigation et d'autres paramètres concrétisent l'apparence.

Pour un nouveau site Web, vous pouvez fixer ces bases dès le début. Pour un site Web existant, vous devriez en revanche effectuer les modifications majeures de manière progressive, puis vérifier plusieurs pages.

Distinguez également les paramètres de design globaux de la conception de contenus individuels. Chaque modification visuelle ne nécessite pas un changement de tout le modèle.

Un bon design de page ne résulte pas d'une multitude d'effets, de couleurs et de polices, mais d'une conception claire et cohérente qui fonctionne bien sur ordinateur, tablette et smartphone.