Contenu
Cet article a été publié pour la première fois dans le numéro 229 du magazine .net, le magazine le plus vendu au monde pour les concepteurs et les développeurs Web.
L'un des éléments les plus importants sur lesquels vous pouvez vous concentrer lorsqu'il s'agit de mettre en page une page en HTML / CSS est le rythme vertical - le modèle visuel dans lequel se forment les blocs de texte ou les lignes de texte lorsque vous parcourez la page.
D'autres choses peuvent affecter ce rythme comme les titres, les éléments de liste, les images, etc. Avoir un bon rythme vertical est primordial car cela contribue à la lisibilité et à la capacité de numérisation de vos pages.
Il existe de très bons tutoriels (voir ici et ici, par exemple) sur le Web où vous pouvez trouver comment obtenir techniquement un rythme vertical approprié en utilisant des ems pour votre hauteur de ligne et en apprenant ce qui maintient votre type `` en phase ''. moyens.
Hiérarchie
Les éléments de base auxquels il faut prêter une attention particulière sont la hauteur de ligne entre les éléments et la hiérarchie visuelle globale sur la page. Définir des proportions de hauteur de ligne appropriées peut être un exercice de conception complexe, mais il est important de le maîtriser. La hiérarchie est également importante, en ce que les images et les éléments de texte doivent être en harmonie visuellement les uns avec les autres - les éléments les plus importants sont généralement plus grands et viennent en premier sur la page.
Les concepteurs d'imprimés ont traité de l'idée du rythme vertical pendant de nombreuses années et ce n'est que récemment que les concepteurs de sites Web ont dû vraiment se lancer dans ce domaine. Avec le besoin toujours croissant de créer des sites Web en utilisant des mises en page en grille et de prêter attention aux implémentations réactives pour s'adapter à plusieurs largeurs d'écran, il est plus important que jamais du point de vue de la conception visuelle, probablement plus que simplement technique.
Cinq exemples à découvrir
1. Les éléments du style typographique Ce livre de Robert Bringhurst est la norme pour l'étude de la typographie. Lisez-le, consommez-le, versez-le dans votre cerveau de toutes les manières possibles.
2. Frank Chimero En plus d'être absolument incroyable en général, la récente refonte du site Web personnel du designer Frank Chimero présente un superbe rythme vertical. Il utilise un effet de parallaxe pour aider à ramener le rythme à la maison lorsque vous faites défiler la page vers le bas.
3. Dan Cederholm Pour un bon exemple de bon rythme vertical typographique, jetez un œil au blog de Dan Cederholm. La hauteur de ligne de la copie et des titres est parfaitement proportionnée.
4. Focus Lab La société de conception Web et de marque Focus Lab utilise habilement la hiérarchie pour aider à communiquer ce qui est le plus important pour le visiteur.
5. Typofonderie Le site Web du Studio de Typographie Typofonderie a un bon rythme vertical avec ses images et son texte. L'espacement entre les éléments est proportionnel sur tout le site Web et la hiérarchie entre l'image principale et les images / sections secondaires est parfaite.
Découvrez 10 exemples étonnants de conception expérimentale chez Creative Bloq.
