Lexique

Les éléments d’un site internet

Le header

Le header est la zone qui est en haut d’une page web. Il comporte de nombreuses informations comme le nom de l’entreprise, le logo, un menu et des onglets. Il est très important car il permet à l’internaute de naviguer à travers votre site internet et il est le premier élément visible de votre site. Il est donc primordial de le soigner.

Footer

Le footer est la zone en bas d’une page web. Il doit comporter certains éléments indispensables permettant aux visiteurs d’accéder à certaines informations comme les mentions légales, les informations de contact, les conditions générales de vente, l’identification de l’entreprise.

La sidebar

La sidebar ou barre latérale correspond à une colonne située sur un côté de la page web. Elle peut comporter divers éléments en fonction des fonctionnalités définies lors de la création d’un site web comme un menu déroulant, un formulaire d’inscription, un champs de recherche, des boutons vers les réseaux sociaux ou encore des publicités. Cet élément est totalement personnalisable en fonction de vos besoins.

Bannière 

Sur un site Web, une bannière est un espace destiné à transmettre un message publicitaire, le plus souvent cliquable et animé.

Favicon 

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.

La home page ou page d’accueil

La home page est la page principale d’un site internet. Au centre de l’arborescence, elle est accessible depuis n’importe quelle autre page. Cette page contient les principales informations de votre site web, elle est souvent la première à laquelle le visiteur accède. C’est en quelque sorte la vitrine de votre entreprise sur le web. La page d’accueil est très importante lors de la création d’un site web puisque, selon la règle des 3 clics, le visiteur doit pouvoir effectuer une conversion en seulement 3 liens depuis la home page.

Les landing pages ou page d’atterrissage

Les landing pages sont des pages par lesquelles les internautes arrivent sur votre site après avoir cliqué sur une annonce Google Adwords, un lien sponsorisé, un emailing, une bannière publicitaire…etc. Les landing pages sont crées spécialement pour vos actions marketing ponctuelles. Leur but est de mener le visiteur vers l’achat au plus vite.

Le call-to-action ou CTA

Le call-to-action est un élément INDISPENSABLE qui doit être au coeur de la réflexion lors de la création d’un site web. Ce terme désigne des boutons créés pour inciter le visiteur à cliquer et menant à la conversion (Acheter, Demander une devis, Contacter, Prendre rendez-vous, Réserver… par exemple). Les call-to-action sont le déclencheur du processus d’achat. De ce fait, ils doivent être mis en valeur et facilement accessibles.

Le Back Office

Le back office est la partie immergée de l’iceberg, tous les éléments de votre site web qui ne sont pas accessibles aux visiteurs. Il s’agit des coulisses de votre site, l’interface permettant la mise en ligne de contenus et certaines modifications du site. Lors de la création du site web, vous devez vous assurer que vos équipes marketing peuvent accéder au back office afin de modifier les informations présentes sur votre site.

Quelques termes de base

Charte graphique

La charte graphique désigne les exigences graphiques/visuelles devant composer l’identité visuelle d’un site lors de sa création.

Cahier des charges

Le cahier des charges est l’ensemble de tes besoins et contraintes. Il va me permettre de voir ton projet dans sa globalité et de rien omettre d’important. Il comprend le contexte, les objectifs à atteindre, le niveau de qualité, les contraintes et le périmètre du projet.

Template

Un template est un modèle graphique créé, permettant de construire visuellement une page Web. On l’appelle aussi gabarit.

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.

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).

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.

SEO ou référencement naturel

Le SEO englobe différentes techniques permettant à un site web d’être bien référencé sur Google en fonction de mots clés pertinents. Le référencement naturel doit être pris en compte dés la création d’un site web car il détermine les principaux mots clés du site, l’arborescence, le type de contenu. Le SEO fait appel à de nombreuses connaissances et est un élément indispensable à la visibilité de votre entreprise en ligne. C’est pourquoi nous vous conseillons de faire appel à des professionnels du web pur la création d’un site web.

Ui design ( User Interface design)

L’UI design est la représentation graphique et visuelle des éléments fonctionnels. Il sert aussi à facilité la prise de décision de l’utilisateur et donner de l’émotion.

UX design ( User Experience design)

L’UX design sert à rendre l’expérience utilisateur la plus positive possible. Il prend en compte ses besoins, ses attentes mais aussi ses points de blocage.

Langages et technologies

HTML

Le HTML est un langage informatique utilisé sur l’internet. Ce langage est utilisé pour créer des pages web.

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).

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.

Formats d’image

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 permet aussi de gérer les animations.

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.

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

Étapes de la conception web

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.

Partie Ergonomique

Arborescence

L’arborescence est le squelette, la structure de votre site web. Ce terme désigne la manière dont les pages sont reliées entre elles pour faciliter la navigation sur votre site. L’arborescence est essentielle pour l’ergonomie de votre site d’entreprise mais elle définit également votre stratégie de référencement naturel. Il s’agit de l’une des premières étapes dans le processus de création d’un site web.

Prototypes papiers

Les prototype papiers sont la première étape de la conception web, les premières idées brutes pour agencer les zones de contenu du site internet, faites d’esquisses et de dessins.

Zoning

le zoning d’un site web ou d’une application consiste à définir et positionner les différentes zones fonctionnelles (les blocs) dans la page web. On va ainsi pouvoir placer le logo, la zone de menu, le contenu principal, les colonnes et les éventuels widgets. C’est donc la première étape permettant de définir l’organisation générale des pages d’un projet.

Wireframe (ou maquette fonctionnelle)

Sorte de squelette plus poussé d’une page d’un site Web. Ce schéma 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.

Prototype interactif

Le prototype interactif est une maquette fonctionnelle qui est cliquable et interactive. Cette étape est très important pour les tests utilisateurs en UX Design. Elle permet de voir si le parcours utilisateur est clair et logique.

Partie Graphique

Moodboard (planche d’inspiration)

Le moodboard est un épinglage des idées graphiques qui viennent. Il permet de capter une ambiance, un ton et des couleurs pour un site internet ou une identité visuelle. On peut utiliser toute sorte d’images, de textures, de typographies etc.

Style tile (planche de style)

Plusieurs planches de style (ou style tile) sont créer pour choisir un style pour un site internet ou une identité visuelle. C’est une amorce à la charte graphique.

Maquette graphique

La maquette graphique est un aperçu poussé des choix visuels. Elle montre sur une page d’exemple, le choix des typos, des couleurs, de l’ambiance et du ton choisi pour le site. Le caractère concret de la maquette graphique ne doit pas nous faire oublier que les écrans ont des tailles et des rendus variables.

Contenu

Préparation du contenu

La phase de préparation du contenu est primordiale. Le contenu textuel qui doit être préparé avec soin, car c’est grâce à cela que les moteurs de recherche index le site et le font remonter dans les positions des pages. Avoir un contenu travaillé permet d’être mieux référencé, et être mieux référencé permet d’avoir plus de visite, et potentiellement plus de clients. Le contenu visuel est aussi important. Si les images sont de qualité, cela renverra une image professionnel et sérieuse du site. Il va sans dire que les images prises sur Google image ne sont pas libre de droit et donc, non utilisable par le webdesigner.

Vous avez une idée ? Un projet ? Parlons-en !