Construction de la charte graphique

Écrit par

dans

Version : 1.0
Création : 23 août 2026
Dernière mise à jour : 23 août 2026

Objectif

La charte graphique de Simple ITec Astuces a pour objectif de construire une identité visuelle simple, moderne et facilement identifiable, utilisable aussi bien sur le site Internet que sur des documents, des applications, des réseaux sociaux ou de futurs projets.

L’identité doit respecter quatre principes :

  • simplicité ;
  • lisibilité;
  • cohérence;
  • évolutivité.

Simple ITec doit pouvoir conserver son identité principale tout en étant décliné facilement pour différentes activités.

La première déclinaison est :

« Simple ITec Astuces » ou « Simple ITec 360« 

Le site est actuellement organisé autour de quatre domaines :

  • Informatique;
  • Maison;
  • Énergie;
  • Vie pratique.

Logo principal Simple ITec

Le logo historique constitue la base de toute l’identité graphique.

Il est composé de deux éléments :

Symbole

Le monogramme Si constitue l’élément graphique principal.

Il est formé :

  • d’un S anthracite / bleu nuit ;
  • d’un i bleu ;
  • d’un petit carré bleu placé devant le S ;
  • d’un second carré bleu formant le point du i.

Ce symbole doit pouvoir être utilisé indépendamment du nom Simple ITec.

Il devient notamment :

  • favicon ;
  • icône d’application ;
  • avatar ;
  • icône de profil ;
  • signature graphique compacte.

Nom

Le nom est écrit :

« Simple ITec« 

La partie Simple reste sombre.

Le I de ITec est utilisé comme élément d’accentuation bleu.

L’ensemble doit conserver une apparence sobre et technologique, sans multiplier les effets graphiques.

Déclinaison Simple ITec Astuces

Pour le site d’astuces, l’identité principale devient :

Simple ITec
ASTUCES

Le terme ASTUCES est placé sous le nom principal et doit rester visuellement secondaire.

La signature complète peut également faire apparaître les quatre domaines :

Informatique • Maison • Énergie • Vie pratique

Cette version est destinée principalement :

  • à la page d’accueil ;
  • aux documents ;
  • aux présentations ;
  • aux communications institutionnelles.

Pour les espaces réduits, elle doit être simplifiée.

Versions officielles du logo

Plusieurs versions doivent être conservées.

Version horizontale

Utilisation principale :

[Si] Simple ITec Astuces

Elle est destinée :

  • au site Internet ;
  • aux en-têtes ;
  • aux documents ;
  • aux présentations ;
  • aux signatures.

Version empilée

Le symbole apparaît au-dessus du nom.

Elle est adaptée :

  • aux formats carrés ;
  • aux couvertures ;
  • aux affiches ;
  • aux présentations ;
  • aux publications sociales.

Version compacte

Elle comprend :

[Si] Simple ITec

ou :

[Si] Simple ITec Astuces

Elle est utilisée lorsque la hauteur disponible est faible.

Symbole seul

Le monogramme Si peut être utilisé sans texte.

Il est destiné :

  • aux favicons ;
  • aux applications ;
  • aux raccourcis ;
  • aux avatars ;
  • aux boutons ;
  • aux petits supports.

Palette principale

La palette doit rester limitée.

Bleu nuit

Couleur principale du texte et du symbole.

Usage :

  • texte ;
  • logo ;
  • navigation ;
  • fonds sombres.

Valeur de travail :

#0B1320

Bleu Simple ITec

Couleur technologique principale.

Usage :

  • i du symbole ;
  • I de ITec ;
  • liens ;
  • boutons ;
  • éléments interactifs.

Valeur de travail :

#2563EB

Blanc

#FFFFFF

Utilisé comme fond principal.

Gris très clair

Valeur de travail :

#F5F6F8

Utilisé pour :

  • cartes ;
  • séparations ;
  • zones secondaires.

Les valeurs définitives devront être relevées directement depuis le logo maître dans Inkscape afin de garantir une parfaite cohérence entre tous les fichiers.

Couleurs des quatre rubriques

L’identité Simple ITec reste dominante.

Les rubriques disposent seulement d’une couleur d’accent.

Informatique

Bleu

Valeur indicative :

#2563EB

Utilisation :

  • pictogramme ordinateur ;
  • petites lignes ;
  • pastilles ;
  • badges.

Maison

Vert

Valeur indicative :

#22C55E

Utilisation :

  • pictogramme maison ;
  • pastilles ;
  • éléments de rubrique.

Énergie

Orange

Valeur indicative :

#F59E0B

Utilisation :

  • solaire ;
  • énergie ;
  • production ;
  • consommation.

Vie pratique

Turquoise

Valeur indicative :

#14B8A6

Utilisation :

  • ampoule ;
  • idées ;
  • conseils ;
  • organisation.

Les couleurs des rubriques ne doivent pas remplacer les couleurs principales Simple ITec.

Elles servent uniquement de repères visuels.

Icônes des rubriques

Chaque domaine possède un pictogramme simple.

Informatique

Ordinateur portable.

Maison

Maison stylisée.

Énergie

Panneau solaire et soleil.

Vie pratique

Ampoule.

Les pictogrammes doivent utiliser :

  • un trait homogène ;
  • peu de détails ;
  • aucune ombre obligatoire ;
  • aucune photographie ;
  • une excellente lisibilité même en petite taille.

Ils devront être disponibles au minimum en :

  • SVG ;
  • PNG transparent.

Icône d’application

Deux versions sont prévues.

Fond clair

Fond blanc ou gris très clair.

Monogramme :

  • S bleu nuit ;
  • i bleu ;
  • carrés bleus.

Fond foncé

Fond bleu nuit.

Monogramme :

  • S blanc ;
  • i bleu ;
  • carrés bleus.

Formats principaux :

  • 1024 × 1024 px ;
  • 512 × 512 px ;
  • 256 × 256 px ;
  • 180 × 180 px.

Le symbole doit conserver suffisamment d’espace autour de lui.

Favicon

Le favicon utilise uniquement le monogramme Si.

Le texte Simple ITec et le mot Astuces sont supprimés car ils deviennent illisibles à petite taille.

Tailles prévues :

  • 512 × 512 ;
  • 256 × 256 ;
  • 180 × 180 ;
  • 96 × 96 ;
  • 48 × 48 ;
  • 32 × 32 ;
  • 16 × 16.

Un fichier :

favicon.ico

doit regrouper plusieurs résolutions.

Pour WordPress, l’image source principale sera idéalement une image carrée de 512 × 512 px.


Version sur fond sombre

Une version spécifique du logo est utilisée sur un fond bleu nuit.

Elle comprend :

  • symbole S blanc ;
  • i bleu ;
  • texte principal blanc ;
  • éléments d’accentuation bleus.

Cette version ne doit pas être obtenue en inversant automatiquement les couleurs.

Elle constitue une variante officielle indépendante.


Typographie

L’identité recherche une typographie :

  • moderne ;
  • neutre ;
  • très lisible ;
  • adaptée aux écrans.

Pour le site, Manrope constitue une bonne base si elle est disponible dans WordPress.

Une police système ou une police compatible pourra être utilisée pour les documents.

Les niveaux typographiques doivent être peu nombreux :

Titre principal

Fort et très lisible.

Titres de sections

Hiérarchisation H2 et H3.

Texte courant

Lecture confortable sur smartphone.

Informations secondaires

Taille plus petite, sans sacrifier la lisibilité.


Règles d’utilisation du logo

Le logo ne doit pas être :

  • étiré ;
  • compressé ;
  • incliné ;
  • recoloré arbitrairement ;
  • entouré d’effets ;
  • placé sur une photographie trop chargée.

Une zone de sécurité doit être conservée autour du logo.

Comme référence, cette marge peut correspondre approximativement à la hauteur du carré constituant le point du i.


Formats de fichiers à conserver

Le fichier maître est créé dans Inkscape.

SVG

Format principal.

Utilisations :

  • Web ;
  • impression ;
  • modifications futures ;
  • documents haute résolution.

Les fichiers SVG constituent les fichiers maîtres à conserver.

PNG

Utilisé pour :

  • WordPress ;
  • bureautique ;
  • applications ;
  • logiciels ne gérant pas le SVG.

Les PNG doivent être exportés avec transparence lorsqu’aucun fond particulier n’est requis.

ICO

Utilisé principalement pour :

  • favicon ;
  • raccourcis Windows ;
  • certaines applications.

Arborescence des fichiers graphiques

Organisation recommandée :

Simple-ITec/

01-Logo/

  • Logo-Simple-ITec.svg
  • Logo-Simple-ITec.png
  • Logo-Simple-ITec-Astuces.svg
  • Logo-Simple-ITec-Astuces.png
  • Logo-Simple-ITec-Astuces-Sombre.svg

02-Symbole/

  • Simple-ITec-Si.svg
  • Simple-ITec-Si.png
  • Simple-ITec-Si-Sombre.svg

03-Favicons/

  • favicon-512.png
  • favicon-256.png
  • favicon-180.png
  • favicon-96.png
  • favicon-48.png
  • favicon-32.png
  • favicon-16.png
  • favicon.ico

04-Icones-rubriques/

  • Informatique.svg
  • Maison.svg
  • Energie.svg
  • Vie-Pratique.svg

05-Documents/

  • Entete-document.svg
  • Papier-a-lettre.svg
  • Signature.svg

06-Reseaux-sociaux/

  • Avatar.svg
  • Avatar.png
  • Profil-clair.png
  • Profil-sombre.png
  • Banniere-claire.png
  • Banniere-sombre.png

Principe d’évolution

La charte graphique n’est pas considérée comme figée.

Elle doit évoluer progressivement sans perdre son identité.

Chaque changement important doit être documenté.

Exemple :

Version 1.0 — 23 août 2026

  • création de l’identité Simple ITec Astuces ;
  • conservation du logo Simple ITec original ;
  • création des quatre rubriques ;
  • définition des couleurs ;
  • définition du favicon ;
  • définition des premières déclinaisons.

Évolutions prévues

  • finalisation des fichiers maîtres Inkscape ;
  • validation définitive des codes couleur ;
  • création des modèles de documents ;
  • création des modèles réseaux sociaux ;
  • définition précise des marges et dimensions du logo ;
  • éventuelles nouvelles déclinaisons Simple ITec.

Conclusion

L’objectif de cette identité est volontairement simple :

une marque principale forte, Simple ITec, et des déclinaisons suffisamment souples pour accompagner différents projets sans recréer une nouvelle identité à chaque fois.

La priorité reste la lisibilité, la simplicité et la cohérence entre tous les supports.

Charte graphique résumé – version 1:

Charte graphique résumé – version 2:

Charte graphique – Système de sous-marques:

Commentaires

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *