Quelles sont les règles de base pour les marges dans la conception web?
Mon concepteur Web me dit que dans une page Web, les marges vides ou le remplissage doivent toujours être des multiples d'une norme. Par exemple 6 px, 12px, 18px. Cela devrait produire des dispositions bien équilibrées. J'aimerais en savoir un peu plus à ce sujet:
Ne faut-il vraiment pas violer cela du tout?
La norme devrait-elle être la même horizontalement et verticalement?
La meilleure ressource d'apprentissage pour cela serait une bonne introduction sur la typographie - probablement le classique séminal de Bringhurst (voir http://webtypography.net pour un bon tour d'horizon appliqué au Web), bien que e. g. Spiekermann's 'Stop Stealing Sheep…' n'est pas mauvais pour les débutants non plus - et sur les grilles de conception (voir ma réponse ici sur UXexchange ).
Lors de la conception de grilles, vous utilisez principalement un module de base (proportions définies idéalement en travaillant à partir du contenu vers l'extérieur ) auquel tout le contenu est adapté (c'est-à-dire des multiples de celui-ci). ).
Les marges verticales et horizontales entre les blocs sont dans la plupart des cas différentes. Les espaces blancs verticaux sont souvent orientés sur la grille de base (voir par exemple Bringhurst, encore une fois). Il est fortement recommandé d'en utiliser un pour atteindre un rythme vertical unificateur.
La quantité minimale d'espace blanc horizontal, i. e. principalement la séparation entre les colonnes du corps du texte (Gutter), est régie par Gestalt psychology avec la taille de la police, l'espacement des lignes et la largeur des lignes comme principaux facteurs d'influence. Vous devez placer les blocs de texte suffisamment loin les uns des autres pour que vos destinataires puissent les voir comme des unités distinctes. Une règle d'or traditionnelle ferait la gouttière au moins 1,5 ems large afin d'apparaître significativement plus large que tout espace blanc possible dans une ligne de texte. À l'écran, cependant, un bon espacement des lignes a tendance à être un peu plus large que dans l'impression traditionnelle. Par conséquent, vous aurez probablement besoin d'un peu plus que cela. Dans la plupart des cas, l'utilisation de la même valeur que votre grille de référence est une bonne estimation.
BTW: les normes de conception - à moins qu'elles ne soient étayées de manière significative par l'ergonomie ou la psychologie cognitive - ne sont jamais des normes au sens plus rigide du mot. Vous pouvez violer n'importe quelle "norme" tant que vous savez pourquoi vous le faites.
Oui et non. Ce à quoi votre concepteur pourrait faire référence, c'est la proximité par le biais du regroupement. Les espaces blancs (dans les marges de votre cas) séparent les différents groupes d'éléments les uns des autres.
En savoir plus sur le sujet: Regroupement d'éléments pour une conception de page Web claire
Il est préférable d'utiliser des valeurs relatives - "em" s ou pourcentages, car la marge ne semble bonne que dans un rapport largeur/hauteur spécifique.
Les tailles relatives sont utiles même dans les mises en page fixes, car lorsque vous en avez besoin pour rétrécir/élargir un peu, vous ne devez le modifier qu'en un seul endroit.
Donc, la réponse est: N'utilisez pas de pixels, utilisez "em" pour les marges ainsi que les tailles de boîte, et cela à mon humble avis devrait être compris entre 0,5em et 2em - selon l'expérience visuelle.
Et le rapport entre la marge verticale et horizontale dépend du rythme global "vertical et horizontal" (google).
La mise en page de ce site est un bon exemple de la façon dont une combinaison d'adhésion à plusieurs modèles donne des proportions équilibrées et une structure cohérente globale. Le logo, par exemple, est espacé d'environ 14 pixels en haut et en bas dans son segment d'en-tête, bien qu'il soit en retrait de 18 pixels à partir du bord de l'en-tête de la question, ce qui rend l'espacement supérieur et inférieur environ 30% plus petit que le côté gauche - d'autres éléments dans le les en-têtes sont espacés de façon similaire. D'autre part, l'espacement du texte dans l'en-tête de la question est d'environ 9 pixels en bas, 13 pixels en haut et 24 pixels sur le côté gauche. Cela définit l'espacement supérieur à environ 50% plus petit que le côté gauche, et l'écart dans le bas est relatif à l'alignement du texte sur le bas de l'en-tête principal en plus d'être du texte d'en-tête (séparé du contenu principal avec un diviseur, bien que plus proche de ce contenu auquel il se rapporte plus étroitement que tout ce qui l'entoure).
Les proportions varient et sont un art en soi. Tout est mathématique, mais rassembler une structure complexe est, en pratique, un processus généralement intuitif.
Je suis sûr qu'il existe plusieurs livres et ressources en ligne qui traitent de cela, et ils sont probablement tous utiles à leur manière, mais mon meilleur conseil est d'être un observateur passionné des proportions dans les choses qui vous entourent - en elles-mêmes et par rapport à leurs environnements et d'autres choses dans cet environnement - en particulier dans la nature. Avec le temps, vous affinerez votre intuition et commencerez à imiter plus naturellement ces proportions et à les appliquer dans leurs paramètres appropriés.
Pensez à utiliser une disposition de grille où vos marges sont également données par cette grille. J'ai tendance à utiliser le 960 Grid System mais il y en a beaucoup plus que les autres ne jurent que par.
Pour moi, l'avantage de cela est en grande partie de choisir quelque chose qui fonctionne une fois et de ne pas avoir à y penser à chaque fois que quelque chose doit être présenté.
Il peut être utile d'avoir un espacement standard dans les sections de contenu. IE les paragraphes, les titres et les listes doivent tous avoir le même espacement en dessous d'eux que cela crée le rythme. La règle générale est cependant de maintenir l'équilibre et la cohérence.
Vous devriez avoir une cohérence oui - mais si la page n'est pas centrée sur l'utilisateur, à quoi bon de multiples marges/rembourrages standard de toute façon. J'essaie personnellement d'utiliser des multiples de 5 car il est plus rapide de les égaliser.