Share
Les mathématiques sont belles. Cela vous semble un peu étrange? Je le pensais bien quand j'ai commencé à concevoir. Les mathématiques sont si rigides et souvent ennuyeuses, du moins le pensais-je. Vous seriez surpris de découvrir que les conceptions, œuvres d'art, objets et même les personnes les plus esthétiques et esthétiques ont en commun les mathématiques. Plus précisément, le nombre d'or, également appelé proportion divine, est désigné par la lettre grecque (phi). Ce tutoriel couvrira l'anatomie et la mise en page d'un site Web et le rapport entre le nombre d'or et.
Les éléments d’une page Web ressemblent à des organes; ils sont essentiels au bon fonctionnement et à la qualité esthétique des pages Web.
Ce sont les éléments principaux d’une page Web. Il existe de nombreuses façons de les organiser, mais c’est peut-être la présentation de base la plus courante utilisée en ligne..
Toutes les pages Web utilisent un conteneur et dans le même but; contenir des éléments de page, mais la manière dont cela est accompli varie. Par exemple, la balise body ou un div est le plus couramment utilisé. Dans le passé, même une table a été utilisée (n'utilisez pas une table comme conteneur de page, c'est une méthode dépréciée). Considérez le conteneur comme les murs extérieurs de votre maison dans lesquels sont ensuite placées vos chambres à coucher, votre cuisine, votre salon, etc..
Types de conteneur:
L'en-tête n'est pas vraiment un élément spécifique, bien que certains puissent le considérer comme tel. Il est plus généralement utilisé pour faire référence à la partie supérieure de votre page Web où se trouvent votre logo, votre navigation, votre slogan, etc. De nombreuses personnes préfèrent conserver ces éléments dans une div pour faciliter le style de la page, la séparation et / ou le confinement des éléments. L'en-tête serait considéré comme un conteneur et aurait donc deux types de choix: liquide ou fixe, comme mentionné ci-dessus..
Votre logo est votre identité et votre marque. L'emplacement le plus courant du logo se trouve dans l'en-tête, aligné à gauche. Nous lisons de gauche à droite et de haut en bas, votre logo sera donc le premier élément que vos visiteurs verront..
La navigation dans les pages est l’un des éléments les plus importants; vos visiteurs en ont besoin pour utiliser votre site web. Il devrait être facile à trouver et à utiliser, ce qui explique pourquoi il est presque toujours situé dans l'en-tête ou au moins près du haut de la page. Parfois, les deux types de navigation sont utilisés pour des sites Web à contenu élevé.
Types de navigation:
Comme chacun le sait (ou devrait le faire), le contenu est roi! Lorsque les gens visitent votre site, c'est l'élément qu'ils recherchent principalement. Cela devrait être le point central d'une page Web pour que les visiteurs trouvent rapidement ce qu'ils recherchent.
La barre latérale est l’élément avec votre contenu secondaire tel que publicité, recherche de site, liens d’abonnement (RSS, Twitter, Email, etc.), méthodes de contact, etc. Cet élément n’est pas nécessaire bien que de nombreux sites l’utilisent. Le plus souvent, il est aligné à droite mais peut être aligné à la fois ou les deux (deux barres latérales), à condition de ne pas perturber la visualisation du contenu principal. Pour les sites Web qui utilisent la navigation horizontale ET verticale, la barre latérale est souvent remplacée par l'élément de navigation verticale..
La fin d'une page Web doit toujours utiliser un pied de page pour informer vos visiteurs qu'ils ont atteint la fin de votre page Web. A l'instar de l'en-tête, le pied de page n'est pas vraiment un élément spécifique mais plutôt une section contenant. Dans votre pied de page, vous trouverez principalement les informations de copyright, juridiques et de contact. C'est une bonne idée d'inclure quelques liens vers les sections les plus importantes de votre site, telles que le haut de la page, la page d'accueil, la page de contact, etc. Certains sites Web utilisent cette zone comme une opportunité de mentionner des informations connexes ou d'autres informations importantes..
Il s'agit d'une zone de la page Web non couverte par une typographie ou un autre contenu. Vous pouvez ressentir le besoin urgent de remplir autant d’espace vide que possible mais ne le faites pas! Le bon design d’une page Web est aussi important que le contenu à utiliser. Vous pouvez voir comment le site NetTuts utilise très efficacement l'espace vide pour guider les visiteurs dans le contenu, créer un solde de page et donner une idée précise de la séparation du contenu..
Cela couvre donc l’anatomie d’une page Web. Voyons maintenant comment le nombre d'or est lié à ces éléments.
Tu te souviens plus tôt quand j'ai dit que les maths étaient belles? Nous percevons un attrait visuel basé sur un ratio (c’est-à-dire le nombre d’or). Depuis des milliers d’années, artistes, designers, architectes, etc. utilisent intentionnellement ou non un rapport commun, esthétiquement plaisant. Quel est le nombre magique? 1,62 (en réalité 1,618…) Je ne vais pas entrer dans les origines de ce nombre mais je vais vous dire comment l'utiliser.
Utiliser le nombre d'or est très simple. Disons que vous voulez trouver la largeur de vos colonnes Contenu principal et Barre latérale. Vous prendriez la largeur totale de votre zone de contenu (nous allons utiliser 900px pour cet exemple) et le diviser par 1,62. Comme indiqué dans l'exemple ci-dessus, nous divisons 900px par 1,62 et obtenons 555,55px. Nous n'avons pas besoin d'être précis, nous allons donc l'arrondir à 555 pixels. Vous savez maintenant que votre élément de contenu principal aura une largeur de 555 pixels et votre barre latérale aura une résolution de 345 pixels! Comme c'est facile?!
Mais attendez! Le plaisir ne s'arrête pas là. Vous pouvez également appliquer le nombre d'or à la largeur d'un autre élément par rapport à sa hauteur ou inversement. Cela produit des éléments esthétiques avec les proportions du nombre d'or.
Toutefois, si vous êtes comme la plupart des gens, vous ne voudrez pas utiliser une calculatrice à chaque fois que vous souhaitez utiliser ce rapport. Pour simplifier le processus, nous pouvons utiliser une grille simple. Tout ce que vous faites est de diviser votre largeur et / ou votre hauteur par des tiers.
Chaque division peut encore être réduite de trois tiers, produisant une grille plus détaillée. Si vous lisez l'article précédent "Aperçu du framework CSS Blueprint", vous constaterez que le framework CSS Blueprint utilise un système de grille détaillé. Non seulement la grille facilite la conception et la rend plus rapide, mais elle crée également une mise en page esthétique. Si vous n'utilisez pas déjà une grille lors de la conception, le moment est peut-être bien choisi pour l'essayer. Vous pouvez télécharger un modèle de grille pour Fireworks, Photoshop et plus encore à partir de http://960.gs, un autre cadre CSS fantastique utilisant des grilles..
Comme vous pouvez le constater, Tuts + respecte assez bien le Golden Ratio. Le tiers supérieur de la page est à nouveau divisé en tiers pour montrer comment même la section d'en-tête se décompose en incréments de tiers plus petits, très proches du nombre de pièces d'or. Pas étonnant que le design NetTuts soit si attrayant!
Si vous êtes un nouveau concepteur, je vous encourage vivement à rechercher des sites populaires, à évaluer la disposition de leurs éléments et leur conformité avec le nombre d'or et les grilles. Ensuite, prenez le temps de vous entraîner à utiliser le nombre d'or avec vos éléments et de les placer dans votre mise en page à l'aide d'une grille..
Accentsconagua