A
Affordance
Terme désignant la capacité d’un objet ou d’un système à évoquer son utilisation, sa fonction. En ergonomie, l’affordance permet de rendre une interface intuitive et de provoquer une interaction spontanée entre cette dernière et l’utilisateur.
Pour en savoir plus, lire Qu’est-ce que l’affordance ? sur Usabilis.
Ancre
Une ancre est un lien permettant de se rendre directement sur une position précise d’une page web.
Exemple dans le code HTML ci-dessous : Le lien est une ancre qui permet de remonter en haut de la première section grâce à l’identifiant top ajouté sur cette dernière.
<section id="top">
<h1>Titre</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</section>
<section>
<h2>Sous-titre</h2>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
<section>
<a href="#top">Haut de page</a>
</section>Art génératif
L’art génératif est un art dépendant totalement ou partiellement d’un système autonome. Un système autonome dans ce cas c’est quelque chose qui fonctionne sans intervention humaine et qui produit tout seul une œuvre. L’artiste doit définir les règles qui composeront son système.
Pour aller plus loin, lire la définition d’art génératif sur Wikipédia.
Artboard
Plan de travail en français. Dans une maquette de site web, chaque artboard représente une vue du site et porte le nom de la vue (afin de s’y retrouver).
B
Breakpoint
« Point de rupture » en français. C’est une taille particulière à partir de laquelle on bascule sur un autre style d’affichage (CSS). Le contenu d’une page web responsive sera donc ré-agencé d’un breakpoint à l’autre, afin d’être présenté de la façon la plus lisible et agréable pour l’utilisateur, dans tous les contextes (du plus petit écran au plus grand).
Les breakpoints le plus communément rencontrés sont :
- Mobile (smartphones)
- Tablet (tablettes)
- Desktop (ordinateurs de bureau)
C
Canvas
Canvas est une technologie web qui fonctionne avec l’élément <canvas>. Cette technologie permet de dessiner dans un repère orthonormé.
Carousel
Terme anglais désignant un ensemble d’images défilant au sein du même container.
Exemple de carousel : Carousel - Bulma-Extensions.
Coloration syntaxique
La coloration syntaxique est une fonctionnalité informatique proposée par certains éditeurs de texte, qui consiste à formater automatiquement chacun des éléments du texte affiché en utilisant une couleur et une fonte caractéristique de son type. Le but est d’améliorer la lisibilité d’un code source.
Container
Élément conteneur, cela veut dire qu’il contient d’autres éléments. C’est le terme anglais qui est le plus souvent utilisé.
Content
Contenu d’un élément.
CSS
Acronyme anglais de Cascading Style Sheets (feuilles de style en cascade en français). Il s’agit d’un langage informatique permettant de mettre en forme les fichiers HTML et donc de gérer le design d’une page web.
Un peu de lecture sur ce thème :
- Les bases CSS sur MDN
- Référence CSS sur MDN
Pour aller plus loin :
- Toutes les ressources CSS sur MDN
CSS Grid
Le module CSS Grid est un ensemble d’outils en CSS permettant de positionner les éléments d’une page web sur une grille.
Pour aller plus loin, lire CSS Grid for Designers par Johna Paolino sur Times Open (en anglais).
D
Développement front-end
Le front-end désigne la partie d’un site Internet qui est visible par l’utilisateur (en opposition au back-end). Le développeur front-end est le professionnel qui code les éléments que l’on voit à l’écran et avec lesquels on peut interagir. Ces éléments sont composés de HTML, CSS et JavaScript contrôlés par le navigateur web de l’utilisateur.
Dynamique
À l’inverse de statique, une page web dynamique est générée à la demande et son contenu varie en fonction des caractéristiques de la demande (utilisateur connecté à son compte, articles ajoutés dans un panier etc.).
Par exemple, votre timeline sur Facebook (ou autre réseau social) est une page web dynamique.
E
Échelle typographique
Échelle de tailles (corps) de police utilisée en design graphique dans le but d’obtenir une mise en page des textes harmonieuse et lisible.
Pour aller plus loin, lire Les échelles typographiques sur le blog de Clever Age.
F
Flexbox
Le module flexbox (module des boîtes flexibles en français) est un ensemble d’outils en CSS permettant de disposer les éléments d’une interface.
Voir :
- Les concepts de base pour flexbox sur MDN
- A Complete Guide to Flexbox sur CSS-Tricks (en anglais)
Embed
Intégrer en français. L’intégration d’une vidéo YouTube dans une page web consiste à y insérer un morceau de code HTML (fourni par YouTube) qui dit à cette dernière d’y « ajouter » cet objet. La vidéo s’affichera donc dans la page web tout en restant disponible sur la plateforme d’origine. C’est comme si elle y était « copiée ».
Voici comment faire : Intégrer des vidéos et des playlists dans l’Aide YouTube.
F
Footer
Pied de page, contient usuellement une navigation. Dans le footer peuvent également figurer des informations de contact ou des liens vers les réseaux sociaux du propriétaire du site.
Formulaire
Élément d’interface demandant à l’utilisateur de renseigner certaines informations qui seront ensuite envoyées à l’administrateur du site web / de l’application. Il existe plusieurs types de formulaires : inscription (création de compte utilisateur), connexion (à son compte utilisateur), contact etc.
Framework
Un framework est un ensemble d’outils permettant de simplifier la réalisation d’un projet (web, logiciel etc.), afin de ne pas avoir à réécrire les mêmes choses à chaque fois. Par exemple, un framework CSS comme Bulma fournira tout le nécessaire pour construire un site web responsive.
Pour aller plus loin, lire la définition de framework sur Wikipédia.
G
Grille
La grille est l’outil majeur du designer graphique. Aligner chaque élément de sa composition sur une grille permet de s’assurer une mise en page à la fois cohérente et esthétique. Le sujet est très vaste, mais s’il n’y avait qu’un ouvrage à recommander, ce serait Grid systems in graphic design de Josef Müller-Brockmann (en anglais - allemand).
H
Header
En-tête de page, contient usuellement un logo et une navigation.
Hero
En webdesign, une section « hero » constitue un aperçu du contenu le plus important du site. Ce type de section présente le plus souvent du texte sur fond image. Le contenu mis en avant varie en fonction de l’objectif du site :
- Actualités
- Projets de portfolio
- Produits ou services (promos du moment, nouvelle collection)
- Etc.
Hover
Qualifie l’état d’un élément HTML (lien, bouton, image etc.) lorsque le curseur de la souris survole celui-ci.
HTML
HTML (HyperText Markup Language) est le langage de balisage conçu pour structurer une page web et son contenu.
Un peu de lecture sur ce thème :
- Les bases HTML sur MDN
- Référence des éléments HTML sur MDN
Hypertexte
Un hypertexte est un document ou un ensemble de documents contenant des unités d’information liées entre elles par des hyperliens. Ce système permet à l’utilisateur d’aller directement à l’unité qui l’intéresse, d’une façon non linéaire. C’est cette technologie que retiendra Tim Berners-Lee pour relier entre elles les ressources de l’Internet dans le World Wide Web.
I
Imbrication des balises
Un code HTML bien imbriqué est un code juste du point de vue des règles qui régissent le langage.
Par exemple, ci-dessous :
<!-- Imbrication non correcte -->
<a href="http://google.com">
<p>Google</p>
</a><!-- Imbrication correcte -->
<p>
<a href="http://google.com">Google</a>
</p>Il est recommandé d’utiliser le validateur W3C pour vérifier la validité d’un markup HTML.
Indentation du code
En informatique, l’indentation consiste en l’ajout de tabulations ou d’espaces dans un fichier texte. L’indentation se définit par la manière d’arranger les blocs de code, mais surtout par le nombre d’espaces utilisés à chaque niveau.
En HTML, l’indentation permet de visualiser aisément l’imbrication des balises. Voici un exemple de code bien indenté :
<section>
<h2>Cherchez l’intrus :</h2>
<ol>
<li>Carbone</li>
<li>Megatron</li>
<li>Neo</li>
<li>Wolfie</li>
</ol>
</section>Interface graphique
En informatique, une interface graphique est un dispositif de dialogue humain-machine. Pour faire simple, l’interface graphique se résume à l’affichage des commandes permettant d’effectuer des actions dans un logiciel, comme des menus, des boutons, des fonctionnalités, sans avoir à saisir des lignes de commandes.
Apparues dans les années 1970 et développées dans les années 1990, les interfaces graphiques ont en effet progressivement remplacé les interfaces en lignes de commandes que l’on retrouvait par exemple sur le Macintosh d’Apple dans les années 1980.
Pour aller plus loin, regarder la vidéo L’interface : simple outil ou clé de l’expérience ? par Game Next Door sur YouTube.
Interpolation linéaire
L’interpolation linéaire est la méthode la plus simple pour estimer la valeur prise par une fonction continue entre deux points déterminés. En animation on utilise cette méthode pour faire progresser une valeur en fonction de la progression de l’animation.
Itération
En informatique, procédé de calcul répétitif qui boucle jusqu’à ce qu’une condition particulière soit remplie. Le terme qualifie par extension une méthode de design consistant à lister et appliquer des petites modifications ayant pour but d’améliorer un concept, une expérience ou un processus.
J
JavaScript
JavaScript est un langage de programmation de scripts principalement employé dans les pages web interactives. Il est par exemple utilisé par Facebook pour afficher du contenu supplémentaire dans le fil d’actualité d’un utilisateur lorsque ce dernier scrolle.
L
Layout
Terme désignant la mise en page dans le secteur de l’édition. Dans le domaine du webdesign, c’est le terme anglais qui est le plus couramment usité.
M
Margin
En CSS, espacement à l’extérieur (tout autour) d’un élément. Se référer à la propriété margin sur MDN.
Markdown
Markdown est un langage permettant de mettre en forme du texte pour le web, via l’usage de balises. Sa syntaxe a été conçue pour être aussi facile à lire qu’à écrire. C’est pour cette raison qu’il est largement utilisé pour de la prise de notes.
Se référer à la documentation de Markdown (en anglais).
Mème
Un mème est une idée ou un concept simple, propagé massivement à travers le web. Cette idée peut prendre la forme d’un hyperlien, d’une vidéo, d’une image, d’un hashtag, d’un personnage récurrent, ou simplement d’une phrase.
Pour aller plus loin, lire la définition de Mème Internet sur Wikipédia.
Mobile-first
Qualifie la conception d’une interface que le designer commence dans le plus petit breakpoint (mobile) pour aller vers le plus grand, dans une logique d’amélioration progressive. Cette méthode de design permet de penser une interface en premier lieu avec le minimum de contenu et de fonctionnalités visibles à la fois sur un petit écran, afin de se concentrer uniquement sur le nécessaire.
Un peu de lecture sur ce thème : « Mobile first » : le mobile d’abord ! dans Projet responsive web design : Du recueil des besoins à la mise en ligne, par Jérémie Patonnier et Rudy Rigot sur Google Books.
N
Navigation
Liste de liens permettant d’accéder aux différentes pages d’un site web. Peut également contenir des ancres.
P
Padding
En CSS, espacement à l’intérieur d’un élément. Se référer à la propriété padding sur MDN.
Pagination
La pagination est un élément d’interface indiquant la page active dans une liste de pages, et permettant de naviguer d’une page à l’autre. Dans un ecommerce on la trouve souvent dans la liste des produits, sous la forme d’une numérotation, voir exemples ci-dessous.
Placeholder
On parle d’images placeholder pour désigner des images ne reflétant pas le contenu final d’une page web ou d’une application, mais utilisées par le designer d’interface pour concevoir et présenter sa maquette. Le terme qualifie plus généralement tout contenu ou toute donnée inclus(e) temporairement ou par défaut, par exemple dans un champ de formulaire.
Pli
Le pli (fold en anglais) désigne une ligne horizontale imaginaire tracée en bas de la partie visible d’une page web, avant d’avoir scrollé. Ce terme est couramment employé en webdesign pour différencier les éléments qui seraient visibles au-dessus du pli, de ceux visibles en-dessous du pli. Néanmoins, ce concept tend à disparaître avec la démocratisation du responsive design et la multiplication des terminaux mis sur le marché, créant une infinité de dimensions d’écrans.
Pré-production
La phase de pré-production (staging en anglais) désigne le moment où on teste un site web avant qu’il soit mis en ligne. Il s’agira donc de créer une adresse (par exemple : staging.nomdusite.com) à laquelle le client pourra accéder en privé pour s’assurer de la conformité du site avec le cahier des charges.
Privé
On qualifie de privée une ressource rendue disponible uniquement pour les personnes disposant d’un accès, généralement un identifiant et un mot de passe.
Product designer
Le product designer intervient de façon globale, sans être nécessairement spécialiste de toutes les activités de design mobilisées dans le cycle de vie du produit. Le design produit correspond à un périmètre d’intervention élargi qui s’étend de la génération des idées à leur implémentation finale. Il s’attache autant à la dimension matérielle que logicielle des produits ; il est fondamentalement multi-plateforme (mobile, web, desktop). Il ne se contente pas de mettre en scène des fonctionnalités, il s’assure qu’elles soient porteuses de sens pour les utilisateurs. Le product designer déploie un savoir-faire qui aboutit à des propositions d’interactions et de formes convaincantes et élégantes. Son travail est rythmé par les cycles de lancements produits propres à l’industrie du logiciel.–Définition extraite de l’article Design numérique : un référentiel évolutif des métiers par Benoît Drouillat
Production
La phase de production caractérise le moment où un site web est mis en ligne, pleinement fonctionnel et donc accessible au public.
Prototype
Le prototype est une version interactive du wireframe ou des maquettes. Il permet généralement de naviguer entre les vues, afin de s’assurer de la cohérence de l’ensemble. On parle par extension de prototyper quand il s’agit de concevoir rapidement la toute première version d’une interface ou d’une fonctionnalité, afin de tester sa viabilité.
R
Responsive
Terme qualifiant un site web capable d’adapter son affichage en fonction du terminal de lecture (mobile, ordinateur de bureau etc.).
Rythme vertical
Penser le rythme vertical de son layout est l’étape obligée en design d’interface. C’est très simple, il suffit pour cela d’aligner chaque élément de sa composition sur une grille de repères dessinés à intervalle régulier. On appelle cet intervalle ligne de base. Cette méthode permet d’obtenir un texte régulier, esthétique et agréable à lire.
Pour aller plus loin, lire The 8pt Grid: Consistent Spacing in UI Design with Sketch par Chris Godby (en anglais).
S
Section
Division ou subdivision du contenu d’une page web. Les sections sont généralement délimitées visuellement.
Spécifications
Le terme désigne un ensemble explicite d’exigences à satisfaire par un produit ou un service. Dans le domaine du développement, la spécification fonctionnelle explique le but à atteindre et la spécification d’architecture détaille les moyens techniques à mettre en œuvre pour y parvenir.
Statique
Terme qualifiant une page web non dynamique. Le contenu d’une page web statique ne varie pas en fonction des caractéristiques de la demande. Cela veut dire que tous les internautes demandant la page web à un moment donné reçevront le même contenu.
Par exemple, le portfolio de MD est une page web statique.
Système d’exploitation
Operating System en anglais, souvent abbrégé en OS. En informatique, désigne le système permettant d’exploiter le matériel d’un ordinateur. En d’autres termes, c’est le logiciel qui permet aux autres logiciels d’utiliser le processeur, la mémoire vive, le disque dur de la machine. Il existe de nombreux OS : Windows, macOS, GNU/Linux etc.
T
Titraille
En typographie, la titraille est l’ensemble de tous les titres : titre, sous-titre, surtitre, intertitre, éventuellement chapeau et légende.
Transition
Une transition se produit lorsqu’un élément passe progressivement d’un état à un autre (par exemple : un changement de couleur, d’opacité, de taille etc.).
U
User-friendly
User-friendly (littéralement « amical avec l’utilisateur ») est une qualité attribuée aux interfaces humain-machine. En ergonomie, cette qualité signifie que le dialogue entre la machine et l’humain se fait de la même manière qu’entre deux humains. La communication est ainsi rendue facile et naturelle, les erreurs sont mutuellement acceptées et corrigées, et de l’aide est apportée en cas de problème.
Utilisabilité
L’utilisabilité est le degré selon lequel un produit peut être utilisé par une cible précise pour atteindre des buts définis dans un contexte spécifié.
Pour creuser cette notion, regarder la vidéo Tout le monde peut-il jouer au jeu vidéo ? par Game Spectrum sur YouTube.
V
Viewport
Le viewport est la zone visible délimitée par la fenêtre du navigateur de l’utilisateur. La taille de cette zone varie en fonction du terminal utilisé (petite sur un smartphone, grande sur un ordinateur de bureau).
Vue
Dans le domaine web et applicatif, une vue désigne un modèle de page. Il peut donc y avoir plusieurs pages au contenu différent basées sur la même vue.
W
Web app
Application web en français. Une web app est une application manipulable grâce à un navigateur web. Quelques exemples de web apps : moteur de recherche, messagerie, forum, système de gestion de contenu, jeu en ligne etc.
Web safe
Les polices web safe sont considérées comme des polices standards en webdesign. Étant installées sur la plupart des systèmes d’exploitation, il suffit de les appeler dans la feuille de style et elles s’afficheront a priori partout.
Voir la liste des polices web safe sur W3Schools (en anglais).
Webfonts
Les webfonts sont des polices de caractères dans des formats spécifiques pour l’affichage web. Se référer à la règle @font-face sur MDN.
Wireframe
Le wireframe (maquette fonctionnelle en français) est un schéma définissant les zones et composants d’une interface, généralement en noir et blanc. Il s’agit d’un travail préparatoire, permettant au designer de s’assurer de la cohérence et faisabilité de sa proposition avant de passer à sa réalisation graphique.
World Wide Web
Le World Wide Web (WWW), littéralement la « toile d’araignée à l’échelle mondiale », est un système hypertexte public fonctionnant sur Internet. Il permet de consulter, avec un navigateur, des pages accessibles sur des sites.
Le Web ne doit pas être confondu avec l’Internet. En effet, il n’est qu’une des applications d’Internet, distincte d’autres applications comme le courrier électronique, la messagerie instantanée et le partage de fichiers en pair à pair. Le Web a été inventé au CERN à Genève par Tim Berners-Lee.
Pour aller plus loin, lire Trente ans d’innovations, de scandales et de mèmes : une chronologie du Web sur Le Monde.