Le jargon du design est partout. Et vous devez être capable de parler la langue. Travailler sur des projets numériques a sa propre terminologie. Du tramage aux valeurs de couleur en passant par les dispositions fluides ou fixes, il existe quelques termes que chaque concepteur doit maîtriser.
Nous vous avons donc simplifié la tâche en vous proposant une liste de termes de conception numérique que vous devez connaître. Cette liste a commencé comme un top 10, mais nous avons ajouté un peu de jargon bonus à des fins de comparaison. Combien de ces termes connaissez-vous déjà?
1. RVB et HEX
RGB et HEX font tous deux référence à des valeurs de couleur numériques. Chaque couleur du spectre de la lumière, la couleur de l’écran est créée avec la lumière, peut être obtenue en combinant trois teintes principales.
- R = rouge
- G = vert
- B = bleu
Les valeurs RVB sont exprimées à l'aide d'un ensemble de trois chiffres, chaque nombre allant de 0 (aucune utilisation de couleur) à 255 (valeur de couleur complète). À l'écran, même le noir et le blanc sont obtenus en combinant ces valeurs. Le noir n'utilise aucune valeur de couleur pour le rouge, le vert et le bleu, tandis que le blanc utilise des valeurs de 100% pour chacun.
Les valeurs HEX utilisent une formule légèrement plus complexe de lettres et de chiffres. Chaque valeur HEX a une valeur RVB correspondante. Les codes HEX sont utilisés en HTML pour coder les couleurs dans les sites Web. Ces valeurs sont représentées par trois jeux de paires de caractères comprenant des lettres et des chiffres.
Les valeurs HEX commencent toujours par un signe #. La valeur la plus basse est 00 et la valeur la plus haute est FF.
2. passer la souris
Un survol est un élément JavaScript qui entraîne la modification d'un élément à l'écran une fois que le pointeur de la souris l'a atteint.
Ces modifications concernent souvent des éléments graphiques tels que des photos. Vous voyez souvent quelque chose de simple, comme un lien hypertexte, mais les états de survol peuvent également être complexes. Certains effets de survol plus complexes incluent des menus de navigation cachés ou des modifications des états des photos ou des listes défilantes.
3. Dither
Un processus utilisé dans l'édition audio et d'images numériques, le dither permet d'éviter les bandes de couleurs ou le bruit aléatoire. Le processus inclut en fait une formule mathématique complexe qui ajoute du bruit intentionnel (visuel ou audio).
Cet ajout de bruit peut notamment affecter l'apparence des images par rapport à celles d'une palette de couleurs limitée. En tramant, le concepteur peut créer une illusion de couleur qui n’existe peut-être pas car, avec le bruit ajouté, les pixels commenceront à prendre certaines des propriétés de couleur des pixels proches.
4. CSS
Les feuilles de style en cascade sont un ensemble de règles qui définissent l'apparence d'un site Web, en utilisant un ensemble de styles défiés pour les éléments HTML.
Généralement appelées CSS, ces définitions peuvent faire gagner beaucoup de temps aux concepteurs, aider les moteurs de recherche à lire votre site et faciliter la création d'un site aux visuels cohérents. Avec un seul changement à la CSS, tous les attributs de texte ou de couleur peuvent être modifiés en une seule étape.
Cela fonctionne en définissant des spécifications pour des éléments tels que la copie de corps ou les en-têtes, où une police, une taille, une couleur, un alignement et d'autres valeurs sont appliquées chaque fois que la balise HTML correspondante est utilisée.
5. Métadonnées et balises méta
Les métadonnées et les balises méta sont des termes interdépendants. Les balises méta relayent les métadonnées. Les métadonnées sont des informations sur les données - aussi déroutant que cela puisse paraître - fournissant en particulier des informations sur le contenu d'un élément dans un fichier numérique. Les métadonnées les plus communément reconnues incluent les informations de l'appareil photo que vous voyez sur des fichiers photo numériques.
Les métadonnées sont également utilisées pour décrire le contenu d'un site Web pour les moteurs de recherche. Ces informations sont ajoutées à l'arrière-plan d'un site à l'aide de balises méta. Les balises courantes incluent la description du contenu d'une page, les mots-clés, les informations sur l'auteur, les informations sur les photos et les cachets de jour, d'heure et de lieu.
Vous voulez voir les balises méta en action? Google presque n'importe quoi. Cette brève description qui apparaît après le nom de la page et le lien provient généralement de la? Description? balise méta, ce qui en fait un élément très visible et important dans votre boîte à outils de conception numérique. (Remarque: si vous laissez cette balise vide, les moteurs de recherche la "rempliront" pour vous avec le premier élément de contenu de votre page.)
6. Favicon
Cette minuscule icône - généralement de 16 sur 16 pixels - correspond à l'image située en haut de chaque onglet ou fenêtre du navigateur. Chaque site Web peut avoir son propre favicon, qui est l'abréviation de l'icône favorite. La petite icône apparaîtra également dans les historiques de recherche, à côté des signets, des onglets du navigateur et des icônes du bureau.
Les favicons doivent être enregistrés et stockés correctement pour fonctionner sur un site Web. Alors que de nombreux navigateurs prennent en charge les formats GIF et PNG, Internet Explorer préfère un fichier ICO.
Vous pouvez créer votre propre favicon à l'aide d'un logiciel tel qu'Adobe Photoshop ou utiliser un outil en ligne tel que Favicon Generator.
7. Disposition de largeur fixe ou fluide ou réactive
Ces jours-ci, de nombreux termes décrivent le fonctionnement de votre site Web dans un navigateur ou une interface mobile. Avant de choisir un type de conception ou une grille, envisagez des options de disposition fixes, fluides et réactives.
Disposition à largeur fixe: Une disposition à largeur fixe fonctionne exactement comme son nom l’indique. Un site est construit sur la base d'un ensemble de spécifications de taille et conserve ces spécifications, quelle que soit la taille du périphérique ou du navigateur. Bien que ces sites puissent être conçus rapidement, ils peuvent être encombrants à visualiser sur des appareils plus petits.
Mise en page fluide: Les dispositions fluides sont construites en utilisant un système de proportions par rapport à la conception et à la taille de l'écran pour restituer un site. Chaque élément de la conception se voit attribuer un pourcentage de largeur en rapport avec la taille de l'écran. Par exemple, la colonne de texte principale peut englober 60% de l'écran, tandis que la barre latérale remplit les 40% restants. L'utilisation d'une disposition fluide a permis de résoudre certains des problèmes liés à la conception à largeur fixe, mais il peut parfois être difficile de déterminer le résultat final en aval. Les dispositions fluides peuvent bien fonctionner avec différents environnements de navigateur de bureau, mais ont tendance à être un peu maladroites sur de petits appareils de taille mobile.
Mise en page réactive: Responsive est la grande tendance de 2013 et prend le dessus sur notre façon de concevoir le web. Dans la mesure où responsive design s'adapte à l'appareil sur lequel il est visualisé, responsive design fonctionne presque universellement. Chaque élément est dimensionné en fonction de pourcentages, y compris les images et le texte, et les requêtes multimédia permettent de créer des sites réactifs à l'aide de différents styles CSS. Responsive design n'est pas simplement une vue réduite d'un site, il peut en fait inclure sa propre version personnalisée du site pour bureau complet, car les éléments peuvent être empilés différemment ou inclure des fonctionnalités réservées aux mobiles, telles que la saisie d'un numéro de téléphone à l'écran pour la composer. il. D'un autre côté, le développement et la conception peuvent prendre plus de temps.
8. Résolution
En ce qui concerne les images, la résolution est un terme que vous entendrez souvent. La résolution de l'écran est particulièrement importante pour optimiser les images en vue d'un affichage rapide sur le Web. La résolution d'un écran est la taille visualisable de l'affichage, telle qu'un navigateur affichant un? Écran? ou faire défiler un site Web de 1 366 pixels de large sur 768 pixels de haut.
La résolution d'une image est mesurée de la même manière. Mais vous devez également tenir compte des pixels par pouce lorsque vous enregistrez des images. Pour de meilleurs résultats en ligne, enregistrez à 72 ppp, sauf indication contraire. La largeur et la hauteur des images doivent être redimensionnées à la plus grande taille pour laquelle elles seront utilisées en ligne, même si de nombreux concepteurs optent pour une largeur minimale de 600 pixels - la taille optimale pour une épinglette sur Pinterest.
9. UI vs.UX
UI et UX font référence à l'arrière et à l'avant du design numérique. Vous ne pouvez pas avoir l'un sans l'autre.
- UI (interface utilisateur) - sont tous les composants et le travail qui entrent dans la création d'un site Web. L'interface utilisateur fait en sorte que tout fonctionne, à partir de tous les composants utilisés pour construire la conception d'un site, en passant par le fonctionnement de chaque partie.
- UX (expérience utilisateur) - est la façon dont la conception fonctionne pour les utilisateurs réels. Quelle expérience ou émotion ou réaction le produit final crée-t-il? Ce qui peut être délicat, c'est qu'une bonne interface utilisateur est ce qui crée généralement une excellente expérience utilisateur.
Obtenez une leçon approfondie sur ces termes dans un article précédent de Design Shack.
10. Skeuomorphism vs. Flat
Presque tout le monde a eu une certaine expérience du skeuomorphism ou de la conception à plat au cours des derniers mois, grâce à une profusion de concepteurs de sites qui se sont rendus «plats».
La conception skeuomorphic comprend des éléments et des astuces de conception permettant de donner à une interface utilisateur un aspect ou un fonctionnement réaliste. Des ombres portées aux biseaux ou aux boutons qui tournent? avec un clic de souris ou défilement, skeuomorphism incarne un sentiment de? faux réalisme.? L'exemple le plus connu de design skeuomorphic est l'interface iOS d'Apple, qui propose des dégradés, des textures et des ombres.
Le design plat, en revanche, est sans embellissement ni "réalisme". Le style est super simple et ne comprend aucun élément qui lui donnerait une sensation en trois dimensions. L’exemple le plus connu de design plat est l’interface Windows, y compris celle du Windows Phone, qui présente un style de bloc.
Conclusion
Maintenant que vous connaissez le jargon, sortez et commencez à créer. N'oubliez pas de consulter le guide Design Shack contenant les 10 conditions de conception d'impression à connaître également, afin de bien comprendre les deux domaines!
Source de l'image: Robert Scoble.