Créer un site web peut sembler compliqué quand on ne connaît pas le vocabulaire du web. HTML, CSS, UX, CTA… Tous ces mots paraissent techniques mais chacun a sa place pour que votre site fonctionne et reflète votre identité.
Même sans être un expert, comprendre ces termes vous aide à suivre le projet, exprimer vos envies clairement et visualiser le résultat final.
Voici un guide simple pour vous familiariser avec le vocabulaire webdesign et mieux comprendre votre futur site.
Structure et contenu du site
- HTML : le squelette du site
Le HTML, c’est la structure même du site. Comme les murs d’une maison, il définit où vont vos titres, paragraphes, images et liens. Sans HTML, rien n'existe. - CSS : la décoration et le style
Le CSS apporte couleur, taille et forme à vos éléments, un peu comme la peinture et le mobilier dans une pièce.
Par exemple : la couleur du bouton “Réserver”, la taille d’un titre ou l’espacement entre les paragraphes. - Wireframe : le plan de la page
Avant de décorer, il faut savoir où placer chaque élément. Le wireframe est ce plan, sans couleurs ni images.
Par exemple : on dessine où ira le menu, le texte ou les images pour visualiser la structure globale. - Maquette : le rendu détaillé
La maquette montre le site avec images, textes et couleurs. C’est là que vous commencez à voir à quoi ressemblera le site final. - Hiérarchie : l’ordre des informations
La hiérarchie guide l’œil du visiteur. Les informations les plus importantes apparaissent en premier pour que le message soit clair dès le premier regard. - Arborescence : l’organisation des pages
Comme les branches d’un arbre, l’arborescence organise la façon dont vos pages interagissent entre elles et leur navigation. - Template
Modèle de page prêt à être utilisé et adapté. - Header
Le haut de la page avec logo et menu. - Footer
Le bas de la page avec vos informations de contact et liens utiles.
Images et unités du web
- Pixel : l’unité de base
Le pixel est le plus petit point qui compose l’écran et aussi une unité de mesure pour le web. Il sert à définir la taille des images et des éléments.
Par exemple : un bouton peut mesurer 40 pixels de large. - Em : l’unité relative
L’em mesure la taille d’un texte ou d’un élément par rapport à la police de base.
Par exemple : un titre à 2em sera deux fois plus grand que le texte normal. - DPI et résolution d’image
Le DPI mesure combien de pixels se trouvent par pouce. Plus il est élevé, plus l’image est nette. La résolution définit le niveau de détail d’une image.
Par exemple : une photo nette est agréable sur le site, une image floue perd tout son impact. - Image vectorielle
Une image vectorielle est composée de formes mathématiques et peut être agrandie sans perdre en qualité.
Par exemple : un logo vectoriel reste net sur un site, une carte de visite ou un panneau publicitaire. - Formats d’image : Jpeg et Png
jpeg : léger mais perd un peu de qualité à chaque compression.
png : conserve la qualité et permet un fond transparent.
Couleurs sur le web
- Couleur Hexadécimal
Chaque couleur a son code pour le web, composé par des chiffres et des lettres, comme #FF5733 pour un orange vif. - Couleur RGB
Mélange de rouge, vert et bleu, spécialement utilisée pour les écrans. - Couleur CMJN
Pour l’imprimerie, mélange de cyan, magenta, jaune et noir.
Identité et style
- Charte graphique
La charte graphique rassemble vos couleurs, polices, logo et style pour que votre site garde une identité cohérente. - Logotype
Le logo de votre marque, souvent un symbole et/ou un texte reconnaissable. - Favicon
Petite icône dans l’onglet du navigateur pour identifier rapidement votre site. - Typographie (police)
La police utilisée sur le site pour les textes.
Par exemple : une police ronde et douce donne une impression conviviale, une police fine et élégante un ton raffiné.
Expérience et navigation
- UX : l’expérience utilisateur
C’est ce que ressent votre visiteur et comment il utilise votre site. - UI : l’interface utilisateur
L’apparence et la disposition des éléments visibles et cliquables. - Responsive
Le site s’adapte automatiquement à tous les écrans, ordinateur, tablette ou téléphone. - Ligne de flottaison
Ce que l’on voit sans scroller quand on arrive sur un site.
Autres termes
- CTA : Call to action
Bouton ou lien qui incite vos visiteurs à agir.
Par exemple : “Réserver une séance” ou “Découvrir nos créations”. - Variation de produit
Différentes versions d’un même produit, comme une taille ou une couleur. - Brief ou Cahier des charges
Document qui traduit vos idées et besoins en instructions concrètes pour la création du site.
Les professionnels qui vous accompagnent
- Graphiste
Personne qui crée les visuels, images et logos qui donnent vie au site. - Webdesigner
Personne qui conçoit l’apparence et l’organisation des pages pour que le site soit agréable et harmonieux.
Pourquoi comprendre le vocabulaire webdesign est utile
Connaître ces termes ne fait pas de vous un webdesigner mais cela vous permet de suivre le projet avec confiance, d’exprimer vos envies clairement et de comprendre le soin nécessaire pour créer un site qui vous ressemble.
Chaque détail compte. En comprenant ce vocabulaire, vous apprécierez pleinement la créativité et le travail apportés à votre projet.