Lexique | Mini dictionnaire en ligne du Webdesign

Le Webdesign n’aura bientôt presque plus de secret pour vous…

webdesign KonzeptComme nous vous l’avions promis, après le lexique sur les termes clés utilisés en référencement/SEO (disponible à tout moment via le lien suivant : Lexique | L’essentiel du vocabulaire du référencement expliqué), place aujourd’hui au glossaire sur le vocabulaire employé dans le secteur du webdesign !

Cet argument n’est plus à prouver désormais : avec, entre autres le référencement, le webdesign est l’une des principales clés de réussite de votre site. En effet, les internautes attendent généralement d’un site qu’il produise du contenu pertinent et qualitatif, qu’il soit accessible, qu’il soit ergonomique, et bien sûr que ses pages soient esthétiques (ce dernier point joue beaucoup sur l’affectif du visiteur et sur son ressenti en parcourant les pages d’un site, favorisant donc son passage à l’acte d’achat).

Pour mieux comprendre le jargon des webdesigners ou encore parfaire votre connaissance des définitions clés employées dans le milieu, voici ci-après, pour tous ceux que ça intéresse, un mini lexique sur le webdesign :

 

Concrètement, le Webdesign c’est quoi ?

 

  • Webdesign :
    Le webdesign correspond à l’étape de conception visuelle d’un site Web, cette étape est ainsi nécessaire à la création du site. Il consiste à structurer les éléments graphiques du site : arborescence, création de la charte graphique, structure des contenus, de la navigation, production des éléments pour intégration, etc. L’objectif du webdesign est de traduire et renforcer l’identité visuelle de l’entreprise en valorisant son image par le biais d’éléments graphiques, tout en assurant une navigation fluide et ergonomique au visiteur.
  • Webdesigner :
    Le webdesigner est bien sûr la personne en charge du webdesign. C’est celui qui crée le site Web. A ne pas confondre avec le webmaster, qui, lui, est la personne chargée de mettre à jour le site.

 

Les termes de base utilisés dans le milieu du Webdesign

 

  • Site statique :
    Un site statique est constitué de pages HTML prédéfinies avec du contenu fixe.
  • Site dynamique :
    En opposition au site statique, le contenu des pages d’un site dynamique est stocké dans une base de données et s’affiche dans un template prédéfini. L’on dit qu’il est dynamique car son contenu est appelé dynamiquement par l’internaute, c’est-à-dire que les pages se construisent lors de sa consultation. Les sites créés avec la solution PowerBoutique sont ainsi des sites dynamiques.
  • Charte graphique :
    La charte graphique désigne les exigences graphiques/visuelles devant composer l’identité visuelle d’un site lors de sa création.
  • Template :
    Un template est un modèle graphique créé, permettant de construire visuellement une page Web. On l’appelle aussi gabarit.
  • Arborescence :
    L’arborescence d’un site désigne l’organisation logique de ses différentes pages. En découle les principes de navigation et d’accès à l’information sur le site.
  • Ergonomie :
    Un site ergonomique est un site qui conduit le plus rapidement le visiteur vers l’information qu’il recherche, qui répond efficacement à ses attentes et lui offre un confort de navigation, au travers par exemple de pages aérées, d’un accès clair à l’information, etc.
  • Ligne de flottaison :
    Elle représente la limite sur un site à partir de laquelle le visiteur est obligé de scroller (descendre sur la page avec sa souris) pour voir le reste du contenu.
  • Baseline :
    La baseline est une ligne de texte généralement située en-dessous du logo du site et écrite dans une taille de police plus petite, il s’agit en quelque sorte de la « signature » du logo qui la précède.
  • RVB :
    Il s’agit du format de codage des couleurs Rouge, Vert, Bleu, utilisé pour le Web, contrairement au format CMJN (Cyan, Magenta, Jaune, Noir) utilisé pour l’impression.

 

Les autres termes techniques clés

 

  • Mock-up :
    Maquette graphique simplifiée d’une page Web qui vise à représenter les fonctionnalités sans commencer à étudier l’aspect visuel.
  • Wireframe :
    Sorte de squelette d’une page d’un site Web. Ce schéma simplifié (aussi appelé « Zoning ») permet d’indiquer le contenu de chaque bloc afin de structurer la page et de faciliter la communication entre les différents intervenants dans la conception d’un site.
  • Layout :
    Le layout d’une page d’un site Web évoque son architecture générale (dans laquelle viennent s’imbriquer les templates), comprenant sa structure et son design.
  • Header :
    Le header désigne l’en-tête d’un site, la partie de code placée en haut de page.
  • Footer :
    Comme l’indique son nom en français, « Pied de page », le footer fait référence à la zone qui se situe en bas de page du site. Le footer d’un site Web contient généralement une barre de navigation secondaire. On appelle « Big footer » un grand pied de page.
  • Bannière :
    Sur un site Web, une bannière est un espace destiné à transmettre un message publicitaire, le plus souvent cliquable et animé.
  • Rollover :
    C’est l’apparition de textes et/ou d’images au survol de la souris sur une zone précise d’une page Web.
  • Bouton call-to-action :
    Un bouton call-to-action est un élément du site mis en avant visuellement et dont le but est d’inciter les visiteurs à faire une action, autrement dit, à cliquer dessus. Exemples de call-to-action : l’inscription à une newsletter, le téléchargement d’une version d’essai, une demande d’informations, etc.
  • Favicon :
    Contraction des mots anglais “favorite” et “icon”, le favicon est un petit logo visible à gauche de la barre de votre navigateur Web. Il permet d’identifier votre site plus facilement et d’y associer une image représentative de votre activité.
  • Widget :
    Un widget est une extension technique d’une ou plusieurs fonctionnalités de votre site, permettant ainsi un enrichissement visuel et fonctionnel. Par principe un widget est “prêt à l’emploi” et intégrable de façon autonome (à l’image des Widgets PowerBoutique, disponibles dans la librairie suivante : http://docs.powerboutique.com/wiki/Librairie_de_Widgets ;-)).

 

Les principaux langages de programmation et technologies du Webdesign

 

  • CMS :
    « Content Management System » en anglais, il s’agit d’un système de gestion de contenu qui permet, entre autres, de concevoir et mettre à jour des sites dynamiques. Les sites PowerBoutique étant des CMS.
  • CSS :
    Acronyme de “Cascading Style Sheets”, le CSS est un langage informatique qui permet de mettre en forme des documents HTML (langage de mise en forme le plus couramment utilisé pour la création de pages Web) et XML (langage informatique qui permet, entre autres, d’enregistrer des données textuelles).
  • Flash :
    Il s’agit d’une technologie permettant de créer des contenus animés, des effets 3D ou encore des objets interactifs.
  • Iframe :
    Elément du HTML permettant d’imbriquer une page Web dans une autre.

 

Les principaux formats de visuels pour le Web

 

  • JPEG :
    Le format JPEG est utilisé pour les photographies, il gère les nuances et les dégradés mais ne supporte pas la transparence. C’est un format de compression très efficace mais avec perte de qualité.
  • GIF :
    Contrairement au JPEG, ce format utilise une compression sans perte de qualité, mais ne peut pas gérer les nuances et dégradés (il supporte la transparence). Il est en général utilisé pour les boutons.
  • PNG :
    Le PNG utilise également une compression sans perte de qualité et supporte les niveaux de gris et la transparence. Mais il ne permet pas de créer des animations.

 

Les mots clés relatifs à la typographie sur le Web

 

  • Fonte :
    Le terme “fonte”, autrefois utilisé pour faire référence aux pièces de métal fondues utilisées en imprimerie, désigne aujourd’hui l’ensemble des caractères appartenant à une même famille de police et respectant principalement le même style, la même taille, la même graisse, la même hauteur de corps, etc.
  • Approche :
    Espace entre chaque lettre d’un texte afin d’éviter le chevauchement des caractères entre eux.
  • Calibrage :
    Nombre de signes (caractères, espaces compris) qui constituent un texte.
  • Unité em :
    Unité de mesure relative, également appelée cadratin, utilisée pour la typographie sur le Web.

 

Les principaux courants et principales tendances du Webdesign

 

  • Flat design :
    Le flat design est un nouveau courant du webdesign qui prône un design graphique minimaliste aux couleurs vives, dans le but d’améliorer la lisibilité. Chaque élément du design a une fonction, les éléments purement décoratifs sont supprimés.
  • Skeuomorphic design :
    Cet autre courant du webdesign désigne le fait de reproduire virtuellement les caractéristiques graphiques d’un objet réel en reprenant son apparence, dans une logique d’intuitivité. Exemple : bouton 3D.
  • Metro design :
    Inspiré des indications que l’on trouve dans les métros, ce courant du webdesign a pour objectif de créer des espaces visuels pratiques pour orienter le visiteur dans sa navigation. Ce concept a été lancé par Microsoft.
  • Responsive design :
    Le responsive design représente le fait de concevoir un site Web afin qu’il s’adapte automatiquement sur tout type de support : PC, tablette, smartphone, etc.
  • Point de rupture :
    En responsive design, le point de rupture symbolise le palier à partir duquel le design du site s’adapte à un nouveau format de largeur/hauteur.
  • Infinite scrolling :
    Il s’agit de pages de sites Web qui se consultent par « défilement infini » (en scrollant).
  • Design d’interaction :
    C’est l’art d’inciter ou de persuader graphiquement le visiteur à intéragir.

 

Vous avez d’autres définitions à rajouter ?

N’hésitez pas à commenter l’article pour nous faire part de vos suggestions !

 

A très vite sur Le Blog :-)

 

 

Source :
– Emweb.fr. Glossaire. Disponible sur <http://www.emweb.fr/glossaire-web.aspx> (consulté le 08.07.2014)

 

Crédits : Trueffelpix ©Fotolia

6 commentaires

Laisser un commentaire

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