28 Août Les notions à connaître en webdesign
Vous souhaitez démarrer un projet de site ou de blog et vous n’avez aucune notion de bases. Voici les principales notions à connaître en webdesign et notamment un petit lexique sur le jargon technique pour démarrer votre projet.
Notions de bases
Le Pixel
Le pixel, souvent abrégé px ou p, est l’unité de base dans le web. Une image est constituée d’un ensemble de pixels.
Le mode RVB
Le RVB est un format de codage des couleurs.
Un pixel est composé de 3 points de couleurs différentes : Rouge, Vert, Bleu, et c’est en jouant sur l’intensité du rouge, du vert, ou du bleu qu’un pixel est capable de composer des millions de couleurs différentes. L’association de ces petits pixels permet d’afficher tout ce que l’on voit sur un écran.
La résolution : 72 DPI
Cette résolution de 72 DPI, est une sorte de valeur standard pour le web. Pour un document destiné à l’impression, cette résolution devra être de 300 DPI.
DPI kezako ?
L’abréviation DPI, et PPP signifient la même chose : Points Par Pouce, ou Dots Per Inch. La résolution d’une image, c’est donc le nombre de pixels qu’elle contient. Plus ce nombre est élevé, plus il y a de pixels, et plus l’image est de meilleure qualité une fois imprimée.
Pour le web, on se satisfait de 72 DPI, à savoir que cette norme est en train d’évoluer, on parlera bientôt d’une résolution non plus en 72 DPI, mais en 96 voir 100 DPI, parce que les technologies évoluent. Nos anciens écrans cathodiques étaient en 72 DPI, mais nos écrans actuels ont une résolution plus élevée.
Le choix des polices
L’évolution des technologies, permet depuis peu d’utiliser tout un répertoire de nouvelles polices mais il faut toutefois savoir quelques règles :
- En web, on utilise des polices … web ! Cela veut donc dire que les polices conçues pour l’édition telles que la DIN, l’Interface, la Garamond … ne sont pas du tout recommandées pour une utilisation web.
Elles ont été conçues pour le print, et non sur écran. - Attention aux rendus des polices sur les différents navigateurs, certaines polices changent totalement de graisse suivant les navigateurs.
Inutile d’utiliser des dizaines de polices sur un même site ! Non seulement la lisibilité en sera altérée, mais en plus le chargement de celles-ci fera ralentir votre site (avant d’afficher la page, un site charge toutes les polices utilisées, donc plus il y en a, plus le chargement sera long). Il est préconisé de n’utiliser que 2 ou 3 polices différentes, c’est beaucoup plus agréable pour la lecture et pour l’œil.
Où télécharger des polices web libres et gratuites :
Pour tester vos polices installées, et voir leur rendu sur le net :
La construction
Une page web se décompose généralement en 3 grandes parties :
Le header
Dans un site, le header (en-tête en français) désigne la partie du site généralement située tout en haut, qui contient le titre, et souvent la navigation et le logo. Il est important de soigner sa présentation et son organisation car c’est ce que les internautes regardent en premier.
Le footer c’est le bas de page, on peut y retrouver des rappels de liens de menu, copyright, mentions légales, plan du site, etc.
Le container
Le container (conteneur) c’est l’intérieur des pages, le contenu avec les textes, les images … tout ce qui se trouve entre le header et le footer.
Le contenu
Le contenu est extrêmement important et définit toute la mise en page et organisation du site. C’est pour cela qu’il est préférable d’avoir une idée du contenu avant de se lancer dans une créa. Un site avec peu de texte ne sera pas du tout travaillé de la même façon qu’un site avec beaucoup d’informations.
A savoir que le contenu est également important pour le référencement naturel, il s’agit d’un élément clé dans l’optimisation d’un site internet.
Les éléments d’informations doivent être hiérarchisés par niveaux d’importances, les informations les plus importantes doivent figurer en haut de page.
Il est essentiel de faire un site clair et aéré. Pour cela, voici quelques pistes :
- un interlignage correct est toujours plus agréable pour la lecture qu’un bloc de texte condensé
- des paragraphes et niveaux de titres pour analyser le contenu d’un coup d’œil
- quelques visuels pour dynamiser un peu le tout
- un peu de couleurs
Bref, pas de secret, il faut une mise en page travaillée.
En fonction du contenu, il faut réfléchir à :
L’arborescence
L’arborescence c’est la liste des différentes pages et menu(s) du site, organisée de manière logique et hiérarchisée. On doit y retrouver l’intégralité des contenus.
Exemple : L’arborescence permet aussi de ne pas oublier certaines pages telles que les mentions légales, le plan du site, la page contact, les pages résultats de recherches (avec ou sans résultats) …
La navigation sur un site web est constituée d’un ensemble de liens permettant de naviguer/d’accéder aux différents contenus du site, c’est ce que l’on appelle un menu, avec parfois des sous-menus.
Un site web est qualifié d’ergonomique quand il propose un mode de navigation facile et intuitif permettant à ses visiteurs une prise en main rapide de ses fonctionnalités.
L’ergonomie vise ainsi à la fois une meilleure efficacité et un plus grand confort d’utilisation.
Si vous souhaitez réaliser votre site au sein de notre formation Web Design, contactez- nous au 76 41 11 ou sur upformations@nautile.nc pour plus d’informations.
Bonne création !!!
pas de commentaires