10 termes de conception Web que tout le monde doit connaître
Tout comme pour toute industrie qui opère dans un domaine technique, la conception de sites Web ne contient pas de mots et de phrases à la mode, et même si vous êtes un professionnel chevronné, il peut être difficile de garder une trace de ce qui est quoi.
De retour quand création de sites web en était à ses balbutiements, il souffrait déjà du problème de trop d'acronymes et de langage technique pour ce qui, sous toute l'hyperbole, sont des technologies et des idées assez simples. L'environnement d'aujourd'hui est cent fois plus compliqué, car les outils et frameworks, langages et bibliothèques que nous utilisons sur le web se sont développés et ont progressé.
Les concepteurs, même les concepteurs Web professionnels, peuvent avoir du mal à rester au courant de tous les différents mots à la mode et technologies, nous avons donc rassemblé ici 10 des termes de conception Web les plus essentiels que tout le monde devrait au moins comprendre. Consultez notre liste ci-dessous et faites-nous savoir si nous en avons oublié un qui, selon vous, devrait apparaître dans les commentaires ci-dessous.
01. HTML, CSS et JavaScript
Sortons celui-ci dès le début!
HTML
HTML signifie HyperText Markup Language et est le langage du Web.
En termes simples, HTML permet au concepteur Web d'indiquer à votre navigateur Web comment traiter un contenu particulier. HTML contient un certain nombre de balises différentes qui permettent au concepteur de marquer leur contenu avec une signification sémantique afin que les paragraphes soient identifiés comme une copie de texte, tandis que les images sont importées en tant qu'images, etc.
CSS
Cependant, le HTML ne suffit pas à lui seul pour créer de belles pages Web. Les feuilles de style en cascade (CSS) fournissent aux concepteurs une méthode pour créer un ensemble visuel de règles qui déterminent comment les différents éléments d'une page Web seront rendus à l'écran par le navigateur.
CSS permet de définir des éléments tels que la couleur du texte, l'arrière-plan, la taille, la forme et la position de toutes les différentes parties d'une page.
JavaScript
Enfin, JavaScript est (comme l'indique son nom) un langage de script qui permet aux concepteurs de créer des interactions sur une page Web.
Historiquement, JavaScript était principalement utilisé pour la validation des formulaires et fournissait ces boîtes d'alerte ennuyeuses qui apparaissaient lorsque vous oubliez d'entrer votre numéro de téléphone dans le champ de téléphone. De nos jours, il existe de nombreuses utilisations plus viables de JavaScript, y compris des effets visuels spéciaux ou la possibilité de charger du nouveau contenu sans avoir à recharger la page entière.
Une chose importante à noter est que malgré son nom, JavaScript n'a aucun rapport avec le langage de programmation Java.
Lisez aussi:
02. Conception réactive
Vous ne pouvez pas manquer d'avoir entendu parler du concept de design réactif. Au cours des dernières années, cela a été un vrai mot à la mode sur le Web, et il ne montre aucun signe de relâchement. Les clients ont même commencé à exiger des sites Web réactifs de la part de leurs concepteurs, souvent sans comprendre pleinement ce qu'ils demandent!
En termes simples, un design réactif est celui qui s'adapte à l'appareil de l'utilisateur et, dans un monde idéal, au contexte de l'utilisateur afin qu'il affiche le contenu requis de la manière la plus appropriée et accessible, quel que soit le type d'appareil connecté au Web. utilisé pour le visualiser. En pratique, cela signifie qu'une page Web se repaginera d'elle-même à mesure que la taille de l'écran diminue ou augmente, s'affichant dans plusieurs colonnes lorsqu'elle est visualisée sur un ordinateur de bureau, mais seulement une seule colonne lorsqu'elle est visualisée sur un smartphone.
Notez que le concept de design réactif est bien plus que simplement reformater le contenu. Lisez les articles suivants sur la conception réactive pour en savoir plus:
- Démarrez avec la conception Web réactive
- Tutoriels utiles de conception adaptative
- Meilleurs outils de conception réactive
- Meilleurs sites Web réactifs
03. Balisage sémantique
Le balisage sémantique est une approche de codage HTML dans laquelle les balises de balisage utilisées pour décrire le contenu fournissent également des métadonnées pertinentes sur le contenu lui-même. Par exemple, une information pertinente pour le contenu principal d'une page, mais pas directement le sujet de la page, peut être marquée comme étant un.
Bien que cela puisse sembler une méthodologie évidente des meilleures pratiques, et que le Web a certainement été conçu avec la sémantique à l'esprit, utiliser cette approche n'a pas toujours été simple ...
Premiers jours
Au tout début du Web, le nombre de balises HTML disponibles était limité. Bon nombre des balises qui existaient étaient de nature purement sémantique: le
La balise, par exemple, est utilisée pour marquer le contenu d'un paragraphe.
Au fil du temps, les concepteurs ont voulu repousser les limites de ce qui était possible pour créer des mises en page plus sophistiquées que le langage autorisé lorsqu'il était utilisé dans sa forme la plus pure, donc les goûts du
| Les balises, destinées au balisage des données tabulaires, ont été réutilisées pour fournir une solution fiable à la création de mises en page en colonnes. Dans le même temps, les concepteurs ont commencé à s'appuyer sur les caractéristiques visuelles par défaut d'une balise particulière pour définir la balise qu'ils utilisaient pour le contenu, plutôt que de redéfinir la balise sémantiquement appropriée pour l'adapter à la conception. En conséquence, le gros texte en gras était souvent rendu comme un titre ( ,etc), plutôt qu'une balise ou - pour l'emphase - tag.04. SaaS A ne pas confondre avec TOUPET , SaaS est un acronyme pour Software as a Service. En termes simples, cela signifie tout service qui fournit une plate-forme logicielle, fournie depuis ou via le cloud. Les exemples populaires de SaaS en action incluent les dernières versions de Microsoft Office en ligne, Google Docs et Photoshop Express. Chacun de ces services offre à l'utilisateur une expérience semblable à celle d'un ordinateur de bureau, mais est fourni directement à partir du Web sans qu'il soit nécessaire d'installer un logiciel supplémentaire sur l'ordinateur de l'utilisateur. 05. Test A / B Le test A / B est une méthodologie pour essayer différentes manières d'obtenir le même résultat final, dans le but d'établir par l'expérimentation quelle solution est la plus efficace. En règle générale, les tests A / B sont utilisés pour tester différentes mises en page de pages Web, en suivant le nombre d'utilisateurs convertis en clients payants à l'aide des mises en page alternatives. En poursuivant un processus itératif de prototypage, d'évaluation et d'adaptation, les tests A / B peuvent augmenter considérablement le taux de conversion des pages individuelles. C'est un outil utile à utiliser: une meilleure conversion signifie un meilleur bilan! Lisez aussi:
06. AIR ARIA est un acronyme pour Accessible Rich Internet Application, et fait référence à l'idée que les applications Web sont utilisées par un large éventail de personnes, avec des besoins différents en matière de technologie d'assistance et de mise en page. ARIA est généralement utilisé comme un terme pour aider à décrire les technologies utilisées pour aider à combler le fossé entre les besoins de l'utilisateur et un site Web ou une application Web. En conséquence, il peut faire référence à des logiciels de lecture d'écran, à des approches de mise en page structurelle et à des méthodologies de conception telles que la conception d'interfaces centrées sur l'utilisateur, dans le but d'accroître l'accessibilité du contenu et des fonctionnalités. Le W3C parraine une grande partie du travail accompli dans ce domaine, et vous pouvez en savoir plus sur le Site Web ARIA de l'Initiative pour l'accessibilité du Web . Lisez aussi:
07. Architecture de l'information (IA) L'architecture de l'information (IA) est un terme générique utilisé pour décrire la présentation sémantique du contenu et des informations sur un site Web. Il se réfère à l'organisation de l'information, traitant de quelles pages vont où dans la structure d'un site Web, quel contenu est contenu sur chaque page et comment chacune d'elles interagit avec les autres pages du site. En tant que domaine, IA se préoccupe de permettre aux utilisateurs de trouver aussi facilement que possible les informations qu'ils recherchent dans le but d'augmenter la conversion, les revenus et / ou la satisfaction des utilisateurs.
08. Script côté serveur Il existe deux façons différentes de fournir des fonctionnalités d'application sur un site Web: côté client, où toute la logique et la gestion des données sont gérées par le navigateur Web à l'aide de JavaScript, et côté serveur, où la manipulation des données est effectuée sur le serveur. La plupart des applications Web combinent les deux, de sorte que du point de vue de l'utilisateur, tout est géré dans le navigateur, mais en arrière-plan, les données sont renvoyées au serveur pour être stockées, manipulées ou générées. Les scripts côté serveur sont un terme générique pour décrire les langages utilisés pour programmer cette manipulation de données côté serveur. Les langages de script tels que PHP et ASP.NET offrent aux développeurs Web un moyen simple de créer une logique métier sophistiquée qui peut interagir avec une base de données, effectuer des opérations de données complexes et fournir des informations au navigateur. Le traitement étant effectué au niveau du serveur, le navigateur Web de l'utilisateur n'a pas à travailler aussi dur, améliorant les performances apparentes, du moins du point de vue de l'utilisateur. 09. Hiérarchie visuelle Cela ne se limite pas à la conception Web uniquement, mais il est de plus en plus utilisé pour désigner la conception et la mise en page d'une page Web, alors faites-le dans notre liste des principaux termes. En termes simples, la hiérarchie visuelle fait référence à la disposition des éléments de conception sur une page de sorte que les éléments les plus importants semblent avoir plus d'importance. Cette emphase est normalement obtenue grâce à l'utilisation de la taille, de la couleur, de la police et des effets spéciaux tels que les ombres portées. La hiérarchie visuelle est souvent une décision consciente résultant d'un processus d'architecture de l'information. 10. Défilement infini / parallaxe Le défilement infini et la parallaxe sont deux choses distinctes, mais ils sont souvent vus ensemble, nous les avons donc regroupés ici. Le défilement infini est actuellement un moyen à la mode de présenter un site afin qu'au lieu de charger des pages séparées pour afficher le contenu, tout le contenu de la page est chargé dans une seule page qui défile pour afficher différentes zones de contenu. Le principe est que lorsque l'utilisateur fait défiler une page vers la fin du contenu, un nouveau contenu est chargé et ajouté au bas de la page, créant un défilement «infini». Les exemples populaires incluent la vue chronologique de Facebook, Pinterest et Tumblr. La parallaxe est l'effet observé lorsque les éléments plus proches de votre point de vue semblent se déplacer plus rapidement que les éléments plus éloignés. Ceci est mieux vu à partir d'une voiture ou d'un train en mouvement, où les clôtures et les arbres proches du véhicule semblent passer rapidement, tandis que les montagnes au loin semblent se déplacer plus lentement. Sur le Web, ce même effet est utilisé pour créer une impression de profondeur dans les conceptions de sites, fournissant souvent un mouvement en réponse au défilement de l'utilisateur. Lisez aussi:
Mots: Sam Hampton-Smith Intéressant Dans Le Monde Du Design |
