20 termes de l'industrie du design Web pour le client Clueless
Dans le secteur de la conception Web, nous utilisons beaucoup termes d'initiés. Cela ne rend pas seulement difficile de démarrer pour les nouveaux arrivants, en particulier les clients qui ne sont pas impliqués dans l'industrie du design, mais communiquer correctement leur signification peut parfois être tout un défi.
Dans ce glossaire, nous avons rassemblé 20 termes de conception de sites Web fréquemment utilisés et a ajouté une brève explication à chacun, afin que tout le monde puisse les consulter rapidement en cas d'incertitude. Si vous avez un client qui a vraiment besoin d'un cours intensif sur le jargon de la conception Web, partagez cet article avec lui..
“Animation”
Une technique de conception web qui ajoute le mouvement aux éléments à l'écran afin de visualiser le changement ou pour attirer l'attention des utilisateurs.
Les animations sont plus puissant que les transitions, car ils peuvent traverser de nombreux états différents entre leurs points de départ et d'arrivée, ils peuvent donc être utilisés pour effets plus compliqués.
“Miette de pain”
UNE type de navigation qui informe les utilisateurs sur leur Localisation actuelle sur un site.
Les miettes de pain contiennent le chemin accessible depuis la page d’accueil, généralement au format suivant: Accueil / Catégorie / Page. Chaque élément du chemin est aussi cliquable afin que les utilisateurs puissent rapidement naviguer dans la hiérarchie du site. Les miettes de pain sont généralement affichées en haut de chaque page.
“Désordre”
Une erreur de conception de site Web, un indicateur de page mal conçue.
On parle d'une page encombrée quand le designer pressé trop d'informations sur la même page sans ajouter suffisamment d’espace et structurer correctement le contenu. Les pages encombrées ont faible lisibilité, et nuire à l'expérience utilisateur.
“Schéma de couleur”
UNE collection de couleurs harmonisantes utilisé pour créer un identité de marque reconnaissable.
Habituellement, le même jeu de couleurs est utilisé régulièrement sur le site Web, l'application mobile, le logo et les supports marketing de la marque. Une palette de couleurs peut être conçue selon différents principes, il y a des combinaisons de couleurs monochromes, analogues, complémentaires, triadiques et autres.
“Contraste”
Une technique de conception pour souligner les différences entre des éléments qui ont un rôle ou une signification différente.
En utilisant des couleurs complémentaires (les opposés sur la roue chromatique) sont le moyen le plus connu d’exprimer le contraste, cependant différences visuelles dans la forme, le style, la typographie ou la disposition des éléments de page que nous souhaitons distinguer peuvent également produire un effet de contraste.
“État vide”
Un état spécifique d'un site Web ou d'une application lorsqu'il y a pas encore de contenu sur une page particulière, mais les éléments de conception sont déjà à leur place.
Les états de première utilisation, tels que les profils vides, sont des exemples typiques de pages d'état vides. Ils nécessitent des techniques de conception spécifiques (telles que la conception d’intégration) qui informer les utilisateurs à propos de ce qui devrait être sur la page, et encourage les effectuer certaines activités.
“Mise en page fixe”
UNE type de disposition dans lequel un site et ses éléments utiliser la même largeur dans toutes les résolutions, défini en valeurs statiques (généralement en pixels).
La manière traditionnelle de construire des sites Web. Rarement choisi pour les sites Web les plus récents, car les sites avec des mises en page fixes sont difficilement utilisables (lisibles) sur les écrans mobiles. Pour rester accessible aux utilisateurs mobiles, de nombreux sites de mise en page fixes utilisent une site mobile secondaire.
“Design plat”
UNE UI langage de conception qui met l'accent sur des styles propres et minimalistes, et supprime les textures complexes, motifs, dégradés et autres effets de fantaisie afin d'aider les utilisateurs mieux se concentrer sur le contenu.
Le design plat a été critiqué pour ses problèmes d’usabilité découlant de la manque de tridimensionnalité. Plus mature Langues de design plates 2.0, tels que la conception matérielle de Google, sont apparus comme une réponse et ont ajouté un peu de profondeur au design plat.
“Mise en page fluide”
UNE type de disposition cette utilise des unités relatives définir la largeur d'un site et de ses éléments.
Les unités relatives les plus fréquemment utilisées pour les dispositions de fluide sont pourcentages, mais ems et rems peut également être utilisé. Une mise en page fluide redimensionne (s'étire et se contracte) lorsque la largeur de la fenêtre change. Contrairement aux mises en page réactives, une mise en page fluide n'utilise pas les requêtes des médias. Aussi appelé disposition liquide.
“Plier”
Le bas de la partie visible de l'écran.
Le terme “au dessus du pli” fait référence à la partie d'une page Web que les visiteurs peuvent voir sans prendre aucune mesure, tandis que “sous le pli” fait référence au reste de la page que les utilisateurs peuvent atteindre uniquement en interagissant avec le site - généralement en faisant défiler ou en balayant (sur le mobile).
Il est recommandé de placer éléments de marque (par exemple le logo), navigation sur le site, et contenu attrayant au-dessus du pli afin de permettre aux utilisateurs de comprendre rapidement le but du site et de s'intéresser au reste du contenu.
“Dégradation progressive”
Une stratégie de conception Web qui comprend toutes les fonctionnalités avancées par défaut sur un site, puis supprime ou simplifie ultérieurement les éléments qui ne fonctionnent pas dans les navigateurs plus anciens, sur des périphériques moins capables ou à des largeurs de bande inférieures.
Se concentre plus sur l'apparence que sur le contenu. À l'ère de la téléphonie mobile, l'amélioration progressive est devenue la stratégie de conception Web prédominante pour les nouveaux sites. La dégradation progressive est principalement utilisée sur sites plus anciens ou hérités.
“Image de héros”
Un surdimensionné bannière d'image mis au dessus du pli.
Les images de héros sont des images de grande qualité, généralement de pleine largeur, pertinentes pour le contenu du site. En plus d’eux, il y a généralement un texte court (une ou deux lignes) qui transmet un message aux utilisateurs, et un bouton d'appel à l'action qui les appelle à prendre certaines mesures, telles que des achats ou l'inscription au site..
“Page d'atterrissage”
À l'origine, toute page où un visiteur en ligne entre dans un site. Récemment, le terme est plutôt utilisé pour une page autonome conçue pour un but commercial spécifique.
Par exemple, si les internautes suivent une bannière publicitaire, ils se retrouvent souvent sur une page de destination qui les appelle pour acheter un produit pertinent. Pages de destination avec un mise au point unique et un clair appel à l'action ont tendance à atteindre des taux de conversion plus élevés.
“Chargement paresseux”
Technique permettant de charger des images et d’autres contenus statiques, tels que des vidéos, peu de temps avant être visible pour l'utilisateur.
Si un site Web utilise un chargement paresseux, seules les images situées au-dessus du pli sont chargées en premier. Le reste n'est chargé que si (si) l'utilisateur fait défiler la page. Fréquemment utilisé dans la conception réactive et mobile économise des ressources. Par exemple, Google AMP accélère les sites mobiles en chargement paresseux des ressources statiques par défaut.
“Requête de média”
Une fonctionnalité CSS qui fait site Web adaptatif possible en permettant aux concepteurs de créer différentes conceptions pour différentes dimensions de l'appareil (largeur et / ou hauteur), orientations (paysage ou portrait) et types de support (impression, écran, etc.).
En règle générale, les sites réactifs avoir des mises en page séparées pour les écrans de bureau, tablettes et mobiles, le points d'arrêt entre eux sont défini par les requêtes des médias ajouté au CSS.
“Amélioration progressive”
Une stratégie de conception Web qui d'abord ajoute uniquement les éléments de base sur un site qui fonctionne sur n’importe quel navigateur, bande passante et périphérique. Des fonctionnalités frontales plus avancées (styles et interactivité) sont chargé en couches ensuite.
Amélioration progressive principalement se concentre sur le contenu, résultats dans les sites qui sont accessible à chaque utilisateur, c'est donc la manière la plus courante de créer des sites Web à l'ère de la téléphonie mobile (par opposition à la dégradation progressive).
“Conception sensible”
Une approche de conception de sites Web pour créer des sites Web qui ajuster aux dimensions types de périphériques (le plus souvent mobiles, tablettes et ordinateurs de bureau) en concevant différentes dispositions et d'autres styles (par exemple, typographie, taille d'image) pour eux.
Responsive design utilise diverses techniques, telles que unités relatives, grilles souples, et questions des médias afin de servir chaque utilisateur avec un contenu utilisable, lisible et accessible. La plupart des sites Web modernes utilisent un design réactif.
“Skeuomorphisme”
Un langage de conception d'interface utilisateur qui exploite les principe de familiarité, et se concentre sur la création d'éléments de conception qui ressemblent à leur équivalent du monde réel.
Par exemple, des boutons qui ressemblent à des boutons réels en utilisant des effets tels que biseau et relief, ombres portées, dégradés et autres. Avant que le design plat ne devienne prédominant, le skeuomorphism était la principale tendance du web design depuis de nombreuses années..
“Transition”
Une technique de conception web pour visualiser des changements simples quand un élément à l'écran modifie en douceur entre un état de début et de fin.
Les transitions - contrairement aux animations - n’ont pas d’états intermédiaires, seulement une point de départ et d'arrivée, par conséquent, ils doivent être utilisés pour changements subtils, comme pour visualiser états de vol stationnaire.
“Espace blanc”
le espace vide entre les éléments de conception adjacents. Aussi appelé espace négatif.
Les espaces blancs aident les utilisateurs parcourir le contenu, et visuellement indique la hiérarchie du contenu. L'espace blanc n'est pas nécessairement blanc mais utilise la couleur d'arrière-plan du site. Le manque d’espace blanc suffisant conduit à une page encombrée.
