Contenu principal
La conception de pages Web
Nous vous avons montré comment créer des pages Web, mais nous ne vous avons pas réellement montré comment créer des pages Web qui fassent bien. Bien sûr, la beauté est subjective, donc ce sera à vous (et à vos utilisateurs) de décider, finalement, si une page Web est bien ou non. Cependant, nous pouvons quand même vous donner quelques conseils et astuces !
Au-delà de faire bien, vous voulez probablement que votre page Web se distingue des autres pages Web, afin qu'elle paraisse unique à vos utilisateurs.
C'est souvent le point le plus difficile : créer une page Web faisant bien et aussi, distincte. Vous pouvez la rendre distincte en couvrant tout de zébrures et en prenant une police de 64 pixels, mais est-ce sage ? Probablement pas.
Choisissez de bonnes polices
Par défaut, les navigateurs affichent les pages Web avec la famille de police générique 'serif', qui tend à rendre les pages plus formelles. Vous pouvez décider de changer ça en mettant la famille de police générique 'sans-serif', ou vous pouvez spécifier une famille de police particulière, qu'on trouve sur la plupart des ordinateurs, comme 'Garamond' ou 'Helvetica'.
Pour donner à votre page Web un look distinct, vous pouvez aussi utiliser une police Web personnalisée. Par exemple, Khan Academy utilise Lato sur toutes ses pages, une belle police 'sans-serif' :
Quand vous utilisez une police Web, vous faites télécharger un fichier contenant les caractères de la police, par le navigateur de l'utilisateur, dans l'ordinateur de l'utilisateur, pour pouvoir référencer ce fichier à partir du CSS. C'est un téléchargement en plus, pour le navigateur. Il ne faut donc pas trop en ajouter, ni inclure sans intention d'utiliser. Une grande ressource de polices Web libres est Google Web Fonts. Jetez un œil sur cette page d'exemple de Khan Academy, utilisant deux polices Web Google.
Où que vous trouviez vos polices, vous devez faire attention à ne pas surcharger. En général, vous ne devez pas utiliser plus de deux ou trois familles de police sur une page, et vos polices doivent s'apparier visuellement. Voici un site Web utile qui donne des exemples de polices Web Google s'adaptant bien ensemble.
Choisir de bonnes couleurs
Quand on conçoit une page Web, on souhaite souvent utiliser une palette de couleurs (un ensemble de couleurs qui fonctionnent bien ensemble et qui peuvent être utilisées dans les différentes parties de votre page Web). Ces couleurs peuvent être déterminées à partir du logo de votre entreprise, elles peuvent relater le thème de la page ou bien juste être jolies ensemble.
Besoin d'aide pour composer une palette ? Si vous avez déjà sélectionné quelques couleurs de base, vous pouvez faire un tour sur Paletton, un outil qui permet de visualiser différents types de palettes : monochromatiques, triades, avec couleurs analogues, et tétrades.
Si vous commencez à partir de rien, vous pouvez parcourir les palettes de COLOURLovers, une communauté d'amoureux des couleurs qui partagent des idées de couleurs, de palettes et de motifs. Voici une palette nommée Giant Goldfish (poisson rouge géant):
Une fois votre palette choisie arrive le passage délicat : déterminer quelles couleurs appliquer sur les différentes parties de votre page Web. De quelle couleur doivent être les titres ? Les liens ? Le texte ? Le fond ? Un grand plus du site Paletton est qu'on y donne des exemples de page Web utilisant les palettes :
Alors que vous déciderez comment votre palette sera transformée en CSS, considérez ces quelques éléments :
- Si vous modifiez le style des liens, trop, par rapport à ceux qui sont par défaut, l'utilisateur pourrait ne plus reconnaître les liens.
- Les couleurs du texte et du fond du texte doivent contraster suffisamment pour que l'utilisateur n'ait pas à loucher. Vérifier vos couleurs dans ce vérifieur de contraste.
- Beaucoup de personnes sont daltoniennes. Certaines combinaisons de couleurs ne seront pas suffisamment contrastées pour elles. Vérifiez vos couleurs dans ce simulateur de couleurs vues par des daltoniens.
Si vous n'êtes pas sûr de la façon d'utiliser votre palette de couleur, envoyez votre travail à quelques amis pour avoir leur opinion. Arrivent-ils à tout lire ? Voient-ils ce qui est cliquable ? Certaines couleurs leur font-elles grincer des dents ? Quelles couleurs aiment-ils ?
Utiliser l'espace
J'ai demandé une fois à un collègue (qui est maintenant designer chez Google) le secret d'une bonne conception Web. Sa réponse ? La gestion de l'espace !
L'espace correspond à l'espacement entre les éléments, ce qui en termes CSS se traduit habituellement avec des propriétés comme 'padding', 'margin' et 'line-height'.
Mon ami a raison : l'espace a un impact important sur l'apparence d'une page Web et sa facilité à la lire. Mes amis designers passent quelquefois des heures à ajuster l'espace, de façon précise, car ils savent à quel point c'est important.
Comme exemple extrême, voici une comparaison entre notre barre latérale de page de cours, avec, et sans espace :
Comment devez-vous prendre cela en compte ? Il est difficile d'établir des règles absolues sur la gestion de l'espace. En ayez juste conscience. À chaque fois que vous avez un élément à côté d'un autre élément, déterminez la marge à mettre entre les deux. Si vous avez un élément avec un fond, ou une bordure, réfléchissez à l'espacement avec le contenu. Quand vous créez des paragraphes ou des listes, réfléchissez à la hauteur de ligne à adopter pour les rendre agréables à lire.
Partez de templates ou de frameworks
Vous êtes peut-être intimidé après avoir lu tous ces conseils, particulièrement si vous ne vous considérez pas comme étant fort en conception. Ne vous inquiétez pas, il n'est pas nécessaire d'être un expert du design pour avoir une page Web classe. En fait, vous pouvez partir d'un template ou d'un framework, pour profiter du travail que d'autres concepteurs ont effectué.
Un template est du HTML et du CSS qui ressemblent pratiquement déjà à une page Web terminée, avec souvent un contenu artificiel. Vous pouvez trouver des templates sur OpenDesigns.org ou en utilisant ces mots clés "templates gratuits page web" dans un moteur de recherche (et en espérant que ceux-ci soient effectivement gratuits !). Dès que vous avez téléchargé un template, vous pouvez remplacer le contenu et modifier le CSS en fonction de vos besoins.
Un framework CSS est un ensemble de règles CSS qui offrent un bon point de départ pour un site Web sophistiqué. Il existe de nombreux frameworks CSS populaires qui facilitent la création de jolis sites Web : Twitter Bootstrap, ZURB Foundation, Pure CSS, Topcoat, et d'autres encore. Vous pouvez voir des exemples avec Twitter Bootstrap et ZURB foundation, ici, à Khan Academy.
Dès que vous avez téléchargé un framework CSS, vous pouvez naviguer dans la documentation pour trouver des exemples (on y trouve aussi souvent des templates !) afin de déterminer les noms de classes nécessaires à l'obtention du look souhaité.
Quand on utilise des templates ou des frameworks, on prend le risque que son site Web ressemble exactement à d'autres sites Web et par conséquent ne se distingue pas tant que cela. Pour éviter cet écueil, ajoutez votre propre logo et modifiez quelques éléments clés comme la famille de police ou la couleur de fond.
Vous souhaitez rejoindre la discussion ?
Après tout le casse tête du codage, y'a finalement Tamplate et framework qui nous facilite plus ou moins la tache.
Merci #KhanAcademy je vous quitterai plus jamais(5 votes)
hahahaha t'as vraiment raison(1 vote)
L'originalité et la gestion d'espace sont les clés d'une grande visibilité(2 votes)- This is a great learning website. Thank you so much!(2 votes)
Merci infiniment pour ces conseils pratiques.(2 votes)- Quels sont les avantages et les désavantages de HTML?(1 vote)