Lexique du Web Design en images

Une connaissance a récemment lancé son site e-commerce, et me parlait de son expérience lors de la phase de design de son site internet. Même si ce fut une belle expérience, il me faisait remarquer qu'un nombre incroyable de fois il s’était senti désarmé car il ne comprenait pas le vocabulaire technique propre à la création web et au web design.

Dans la perspective d’éclaircir un peu la jungle de ces mots soi-disant techniques, SubForce vous a concocté un récapitulatif des essentiels à savoir en web design.

 

 

Charte graphique :

Ce sont les bases de l’identité visuelle du site internet, qui comprend par exemple les couleurs, pictogrammes, etc… Cela transmet l’univers de la marque, son atmosphère.

 

Cookies :

C’est un fichier de petite taille, stocké directement sur l’ordinateur de l’utilisateur, et qui permet de conserver des informations sur l’internaute pour l’identifier l’utilisateur, et ainsi lui faciliter la navigation. (Cf Flash session)

 

 

CTA ou bien Call to action :

C’est un bouton qui incite à l’action sur un site internet. Il peut s’agir du bouton “achetez” par exemple, ou bien plus simplement “souscrivez à la newsletter“ etc… C’est un élément clé pour les sites e-commerce, car c’est notamment lui qui permet de transformer un utilisateur normal en acheteur (une transformation appelée la conversion) !

 

 

Favicon :

En général méconnu, et pourtant il est toujours sous notre nez ! C’est le petit icône dans le barre du navigateur, qui en général est le logo simplifié de l’entreprise possédant le site :

 

 

Fixtures :

Newsletter, formulaire de contact, version multilingue, méthode de paiement etc… ce sont les fonctionnalités dont on peut avoir besoin sur un site internet.

 

Flash session :

C’est un message qui s’affiche suite à une action. Il permet d'informer l'utilisateur en cas d'erreur (champs vide ou non conforme dans un formulaire par exemple) ou de reussite (message posté avec succes, commande ou paiement effectué...) ou simplement donner a l'utilisateur des informations générales comme par exemple pour les cookies.

 

Footer :

C’est le pied de page, soit la partie basse du site internet, dans lequel on retrouve en général les informations de contact, les liens vers les mentions légales, les conditions générales de vente, la foire aux question, etc…

 

 

Header :

C’est l’en-tête d’un site internet, c’est la partie qui définit en quelque sorte l’identité. On y trouve en général le logo, l’identité visuelle, et le menu.

 

 

Home page :

C’est la première page du site, la page de présentation ! En un coup d’oeil, un visiteur doit pouvoir comprendre sur quel site il est arrivé.

 

Mockup vs Wireframe :

C’est la maquette du site internet, pour donner une idée de ce à quoi il ressemblera. À noter qu’une Wireframe au contraire est une version simplifiée, et que par conséquent ce n’est pas représentatif de l’identité visuelle ni du contenu définitif du site internet comme le pourrait être un mockup. Un Wireframe permet d’avoir une première réflexion sur l’organisation du site dans son ensemble, un peu comme un architecte qui commence à dessiner les plans d’un maison.

 

 

Modale (fenêtre modale) :

Une fenêtre modale est une fenêtre secondaire qui prend le contrôle total du clavier et de l'écran. Elle est en général associée à une question à laquelle il est impératif que l'utilisateur réponde avant de poursuivre, ou de modifier quoi que ce soit, ou bien sert à afficher des informations complémentaires.

 

 

Parallax :

Permet de disposer les images d’une page sur des plans différents, et de varier la vitesse de défilement de chaque plan, pour donner l’illusion de profondeur. C’est une technique qui vise à s’approcher de la 3D.
Un excellent exemple de site internet utilisant le parallax : http://www.sbs.com.au/theboat/

 

Responsive :

Se dit d’un site qui est optimisé à la navigation sur différents supports tels que tablettes, smartphones, laptop, etc… Exemple d'un site optimisé pour la navigation sur ordinateur et smartphone :

      

 

Rollover :

C’est un effet qui est inséré sur un élément lorsqu'on passe la souri dessus. Par exemple sur un bouton, la couleur change pour donner l’impression d’ombre.

 

 

Site statique ou dynamique :

Un site statique est un site où chacune des pages est codée en HTML. Lorsqu’une personne se connecte à la page, la réponse du serveur sera toujours la même, car la page est stockée toute prête sur le serveur. En revanche un site dynamique est un site internet dont les pages sont générée à la demande, car leur contenu peut varier. Par exemple, un site dynamique voit son contenu modifié en back end (ajout de produits, d’articles de blog, d‘actualités, etc…), et qui change donc de temps en temps.

 

Tabpane :

Un tabpane est un tableau hiérarchisé en différents onglets. Chaque onglet de tableau permet la navigation entre les différentes catégories sans changer de page.

 

 

---

 

Vous avez un doute sur une expression de web design ? N’hésitez pas à nous poser la question en commentaire !