Lorsque nous parlons de design, nous devons considérer le texte du point de vue du designer. Le texte doit être lisible et lisible tout en s’accordant bien avec le style du site. Mais cela doit aussi concerner une hiérarchie de contenu.
Construire des hiérarchies est la "grande image" de la composition d'un site web. Toutefois, lorsque vous passez à la typographie, vous devez également créer des hiérarchies liées à un texte spécifique sur la page. Dans cet article, nous expliquerons comment créer des relations avec vos en-têtes et comment utiliser les espaces pour rendre de longs paragraphes digestibles.
Rubriques & Espacement
Le contenu Web se concentre généralement sur quelques éléments de texte différents. Les titres vont de H1 à H6, mais la plupart des sites Web n'utilisent que H1 à H4 au plus. Indépendamment du nombre de styles de titre utilisés, votre travail en tant que concepteur consiste à les élaborer de manière à ce que la hiérarchie soit clairement établie.
L'espace entre les textes est important car il permet de définir le contenu de la page. Lorsque les utilisateurs trouvent un nouvel en-tête, ils s'attendent à reconnaître si le contenu passe à un nouveau sujet ou s'il se trouve dans un sujet existant. La bonne combinaison de taille, de couleur et de style du texte du titre permet de créer les bonnes attentes pour les utilisateurs.
L'espace négatif entre les textes montre comment le contenu de la page est lié. Les en-têtes avec beaucoup d'espace sont considérés comme dominants, tandis que les en-têtes plus proches des paragraphes sont considérés comme liés via le contexte. Les marges inférieures après les paragraphes indiquent la relation entre les lignes de texte et leur emplacement dans la hiérarchie. Tout est lié à la création d'une hiérarchie de contenu afin de distinguer visuellement le texte de la page.
Titre des relations
Chaque en-tête doit refléter son propre style unique, qui complète également les autres styles de texte de la page. Fabriquer des en-têtes brillants devient plus facile avec la pratique, mais les valeurs d'espace blanc doivent généralement se comporter de la même manière, quel que soit le style de titre.
Square utilise une mise en page de démarrage traditionnelle avec de nombreuses images et blocs de texte. Les titres constituent un segment particulièrement intéressant de la conception car ils vont du surdimensionné à l’infiniment petit. Cependant, la taille importe moins que la relation avec les autres textes de la page.
Remarquez dans la capture d'écran ci-dessus comment les gros titres utilisent un espacement supplémentaire au-dessus et au-dessous du texte. Ces en-têtes de section transmettent visuellement le sentiment d’être «seuls». mais naturellement aussi, regroupez-vous dans de plus grands blocs de sous-positions et de paragraphes.
Chaque bloc interne utilise un texte de sous-en-tête beaucoup plus petit. Ces en-têtes internes ont à peu près la même taille que le texte d'un paragraphe, mais ils se distinguent par un texte en gras et une couleur plus sombre. Visuellement, il est clair que ces lignes de texte en gras sont toujours des titres (juste plus bas sur le totem visuel).
La quantité d'espace entre les en-têtes et les paragraphes définit également les paragraphes qui appartiennent à quels en-têtes. De même, vous devez insérer beaucoup d'espace entre les en-têtes plus petits et les en-têtes plus grands. Encore une fois, l'espace négatif définit la hiérarchie à la fois dans la conception visuelle et dans la typographie.
Comme expliqué dans le guide gratuit Meilleures pratiques de conception d'interface utilisateur Web, tenez compte des points suivants lors de la création des en-têtes de page:
- Une hiérarchie visuelle devrait apparaître à travers l'utilisation de l'espace, de la taille, de la couleur et / ou du style du texte. Cela devrait être visible même lorsque vous vous tenez à 3 à 5 mètres du moniteur. Vous pouvez également utiliser le test de flou gaussien de 5 secondes pour vérifier la hiérarchie.
- Gardez chaque en-tête près de son premier paragraphe enfant.
- Placez les en-têtes à proximité pour transmettre les idées plus rapidement et plus clairement.
Longs paragraphes
En ce qui concerne les espaces blancs contextuels, se pose la question de la conception autour du paragraphe commun. Solide, fiable et trouvé un peu partout, ce paragraphe est la colonne vertébrale de la stratégie de contenu de chaque site Web.
Mais la façon dont le contenu est écrit varie en fonction du style du contenu. Par exemple, un magazine d'actualités en ligne utilisera des styles de paragraphe différents de ceux d'un blog de jardinage plus petit. La quantité de contenu, la longueur du contenu et le niveau de détail entrent en jeu lors de la mise en forme des paragraphes.
Essayez de concevoir avec un texte suffisamment grand pour qu'il soit clairement lisible à un mètre de l'écran. La taille du texte est très similaire à celle des blancs, en ce sens qu'il est généralement préférable de concevoir plus grand que plus petit. Cependant, faites preuve de modération et de retenue.
Si la taille du texte est trop grande, il ne vous faudra que plus d'espace à l'écran et plus de défilement sera nécessaire. Mais s'il est trop petit, cela peut être illisible ou les visiteurs auront des difficultés avec le rythme vertical en bougeant les yeux d'une ligne à l'autre.
Les marges de paragraphe et la hauteur de ligne (l’espace entre chaque ligne) sont deux points importants à garder à l’esprit. La taille du texte de vos paragraphes dicte ces deux valeurs, car l'espace blanc dépend de la taille.
Medium est une plate-forme de blogging en ligne qui facilite la conception de paragraphes. Le texte est net, lisible et parfaitement espacé. Comme le montre leur conception de paragraphe, les valeurs de hauteur de ligne doivent être suffisamment grandes pour pouvoir être reliées à la ligne suivante sans être excessives.
Conformément aux recommandations de l'ebook Web Design Trends 2016, voici quelques règles empiriques à suivre:
- Évitez de faire la hauteur de ligne plus grande qu'une ligne de texte typique.
- L'unité de police em est idéale pour créer des tailles uniformes dans tous les navigateurs.
- La hauteur de ligne doit souvent être un peu plus grande que la taille de la police.
- Essayez une taille de police de 1em combinée avec une hauteur de trait de 1,5em à 1,75em.
L'espacement des paragraphes peut être délicat, mais il s'agit d'un sujet important, en particulier pour les sites Web contenant beaucoup de texte. La marge de paragraphe inférieure doit être beaucoup plus grande qu'une ligne de texte typique. Les marges de paragraphe en bas doivent être suffisamment grandes pour que vous puissiez déterminer visuellement la fin d'un paragraphe.
Une fois que vous avez déterminé la taille du texte d'un site Web, il devient beaucoup plus facile de jouer avec les valeurs de hauteur de ligne et de déterminer les marges d'espacement.Le but ici est la clarté et la structure. Chaque nouveau paragraphe devrait être évident sans aucun doute. La clé est l'espace proportionnel entre chaque bloc de texte.
Comme mentionné précédemment, il est généralement plus sûr d'avoir? Trop? espace blanc plutôt que pas assez. Évitez d’utiliser des quantités d’espace colossales, sinon vous obtiendrez une densité de contenu très faible. Conservez suffisamment de contenu sur la page pour être intéressant, mais pas trop, c’est trop lourd.
Pour en savoir plus sur la conception de contenu dans les interfaces Web, consultez cet article sur la conception du paragraphe parfait.
À emporter
Les espaces négatifs en typographie affectent directement la composition globale et les éléments de page les plus petits en même temps. Lors de la conception de la typographie, le contexte est roi.
Les paragraphes trouvés dans la page peuvent nécessiter des marges plus grandes que les paragraphes trouvés dans la barre latérale. Les liens dans l'en-tête pourraient paraître plus lisses avec un rembourrage supplémentaire, mais les liens dans le pied de page pourraient paraître plus ordonnés avec très peu de remplissage. Il n’existe pas de règles solides, mais uniquement des pratiques recommandées.
Rappelez-vous également que la typographie suit sa propre hiérarchie, tout comme la structure de la page. Beaucoup de pratique sera le moyen optimal d’améliorer vos yeux pour reconnaître rapidement les valeurs spatiales qui s’intègrent le mieux dans un projet Web donné.
Quand il s’agit de concevoir avec de l’espace, rappelez-vous que l’espace en tant que qualité esthétique l’emporte au second plan en tant qu’outil de conception. Space crée des relations, définit des hiérarchies et met l’accent sur le contenu - gardez toujours cela à l’esprit lorsque vous envisagez de réduire le bruit visuel.
Vous pouvez apprendre davantage de techniques de conception exploitables dans l'ebook gratuit Web Design Trends 2016 de UXPin. Le guide de 185 pages explique 10 bonnes pratiques de manière très détaillée. Vous trouverez 165 exemples analysés des plus grandes entreprises d'aujourd'hui.
Design graphique minimaliste
La conception graphique minimaliste est une philosophie qui consiste à créer quelque chose où chaque élément sert un objectif. C'est simple, propre et beau. C'est très utilisable. Notre fonctionnalité explore différentes approches et techniques pour la conception graphique minimaliste (avec de nombreux exemples inspirants!)