Les mathématiques sont belles. Cela semble un peu étrange ? J'en étais sûr lorsque j'ai commencé à concevoir. Les mathématiques sont tellement ennuyeuses. Vous pourriez être surpris de découvrir que les plus beaux designs, œuvres d’art, objets et même les personnes ont tous quelque chose de mathématique en commun. Surtout le nombre d'or, également connu sous le nom de nombre divin, représenté par la lettre grecque Φ (phi). Ce tutoriel décomposera la présentation d'un site Web et comment le diviser en nombres d'or.
Squelette de page Web
Ce sont les principaux éléments des pages Web. Il existe de nombreuses façons différentes de les organiser, mais cette disposition est peut-être la plus couramment utilisée.
Récipient
Toutes les pages Web utilisent un conteneur, principalement dans le même but : contenir certains éléments de la page. Cependant, cette méthode est implémentée différemment. Par exemple, la balise body ou le div le plus couramment utilisé. Même la table qui était couramment utilisée dans le passé (n'utilisez pas la table comme conteneur, c'est une méthode défectueuse). Considérez un conteneur comme le mur extérieur de votre maison, qui contient les chambres, la cuisine, le salon, etc.
Type de conteneur :
Liquide : remplir en fonction de la largeur du navigateur.
Corrigé : la largeur spécifiée ne changera pas en fonction de la largeur du navigateur.
En-tête
L’en-tête n’est pas vraiment un élément spécifique, même si certains diraient que c’est le cas. Il est davantage utilisé au niveau supérieur de la page Web, où vous placez votre logo, votre barre de navigation et votre slogan. De nombreuses personnes préfèrent enfermer ces éléments dans un div pour faciliter la séparation du style et du contenu de la page. Le collecteur sera considéré comme un conteneur, il dispose donc de deux types d'options, à savoir liquide ou fixe mentionnés ci-dessus.
Logo
Votre logo est votre identité et votre marque. La méthode la plus couramment utilisée consiste à placer le logo dans le coin supérieur gauche de votre en-tête. Notre habitude de lecture se fait de gauche à droite et de haut en bas, votre journal doit donc être placé là où les visiteurs peuvent le voir à première vue.
Navigation
La navigation dans les pages est l'un des éléments les plus importants ; vos visiteurs en ont besoin pour utiliser votre site. Il doit être facile à trouver et à utiliser, c'est pourquoi la plupart des gens le placent dans la section d'en-tête, au moins en haut de la page.
type de navigation :
Horizontal : affichage horizontal, appelé « navigation »
Vertical : affichage vertical, appelé « menu »
Contenu principal
Tout le monde (devrait) savoir que le contenu est roi lorsque les gens viennent visiter votre site, c'est l'élément principal qu'ils souhaitent voir. Il doit être le point central de la page Web, afin que les visiteurs puissent trouver rapidement ce qu'ils recherchent.
Barre latérale
La barre latérale est un élément qui place votre contenu secondaire, comme certaines publicités, recherche de sites, liens d'abonnement (RSS, Twitter, Email, etc.), méthodes de contact, etc. Cet élément n'est pas obligatoire, même si de nombreux sites l'utilisent. Il est majoritairement placé à droite, mais vous pouvez également le placer à gauche ou des deux côtés, à condition de ne pas perturber la navigation dans le contenu principal. Les sites Web utilisent une navigation horizontale ou verticale, et les barres latérales utilisent souvent une navigation verticale.
Pied de page
Il y a toujours un pied de page à la fin d'une page Web pour indiquer à votre visiteur qu'il a atteint la fin de votre page Web. Comme l’en-tête, le pied de page n’est pas un élément spécial. Incluez les droits d'auteur, les mentions légales et les coordonnées principales dans votre pied de page. C'est une bonne idée d'inclure certains liens importants, tels que la page d'accueil, la page de contact, etc. Certains sites Web utilisent cette zone pour fournir des documents pertinents ou d'autres informations importantes.
"Espace blanc"
Vous pourriez avoir une forte envie de remplir les espaces vides de ces pages, mais ne le faites pas. "L'espace blanc" est également très important. Vous pouvez voir comment le site Web NetTuts utilise efficacement les espaces blancs pour créer un équilibre entre les pages et donner une bonne impression.
Ce qui précède est le squelette de la page Web. Voyons maintenant comment diviser ces éléments en sections dorées.
Le nombre d'or et l'utilisation des grilles
Vous vous souvenez plus tôt quand j'ai dit que les mathématiques étaient belles ? Nous pensons que l'attrait visuel est basé sur les proportions (par exemple, le nombre d'or). Depuis des milliers d’années, les artistes, designers, architectes, etc. ont utilisé consciemment ou inconsciemment une proportion commune pour accroître la beauté de leur travail. Quel est ce nombre magique ? 1,62 (en fait 1,618...) Je ne vous dirai pas l'origine de ce nombre, mais je vais vous expliquer comment l'utiliser.
Utiliser le nombre d’or est très simple. Par exemple, vous souhaiterez peut-être connaître la largeur de votre contenu principal et de vos listes de barre latérale. Vous prendrez la largeur totale de votre zone de contenu et la diviserez par 1,62. Cela vous donnera 555,55 px. Nous n'avons pas besoin d'être aussi précis, nous utiliserons donc simplement 555 px. Vous savez maintenant que votre élément de contenu principal mesure 555 px de large et que votre barre latérale mesure 345 px. Vous voyez comme c'est facile ?!
Mais attendez, le plaisir ne s’arrête pas là ! Vous pouvez également appliquer le nombre d’or à la largeur et à la hauteur d’autres éléments.
Utiliser des grilles
Si vous êtes comme la plupart des gens, vous ne voulez pas avoir à tenir une calculatrice pour calculer le nombre d’or à chaque fois. Le moyen le plus simple consiste alors à utiliser la grille. Donc, ce que vous devez faire est de diviser votre largeur ou votre hauteur en tiers.
Pour produire une grille plus détaillée, continuez simplement à la diviser en tiers. Si vous lisez l'article précédent « Contact intime avec le framework Blueprint CSS », vous verrez que le framework Blueprint CSS utilise un système de grille détaillé. Non seulement la conception de grilles est plus facile et plus rapide, mais elle crée également une belle mise en page. Si vous n’avez pas encore utilisé la conception en grille, c’est une excellente occasion de l’essayer. Vous pouvez télécharger des modèles de grille pour les feux d'artifice, Photoshop ou d'autres logiciels à partir de http://960.gs.
Comme vous pouvez le constater, NetTuts suit très bien le nombre d'or. Le tiers supérieur de la page est à nouveau divisé en tiers, très proches du nombre d’or. Pas étonnant que le design de NetTuts soit si attrayant !
Si vous envisagez de créer un nouveau design, je vous recommande fortement de trouver des sites populaires et de revoir leurs mises en page et la manière dont ils appliquent le nombre d'or et la grille. Prenez ensuite le temps de vous entraîner à utiliser le nombre d’or et à utiliser la grille dans vos mises en page.