Placer les éléments
Les principaux blocs
Logo
Parce que le français est lu de gauche à droite et de haut en bas, les utilisateurs commencent généralement dans le coin supérieur gauche de la page et partent de là. Le logo (ou la marque) est donc placé dans le coin supérieur gauche.
Menu
Placer la navigation, soit horizontalement soit verticalement. La navigation horizontale est idéale lorsqu’il y a peu d’éléments et la navigation verticale est idéale lorsqu’il y a des éléments imbriqués (sous-éléments), mais les deux peuvent être utilisées dans les deux cas.
Exemples:
Sous-menu
Les deux navigations se prêtent très bien au dropdowns et flyouts.
Exemples:
Contenu principal
Le contenu principal occupe la plus grande partie de la page.
Contenu secondaire
Le contenu secondaire doit être plus petit et relégué sur le côté ou sous le contenu principal.
On y trouvera également les publicités ou les configurations de l’application.
Footer
Le footer (pied de page) ancre la page et fournit des accès rapides aux informations dont votre utilisateur peut avoir besoin.
Blog Footer Bringing Down Your Site? Get it Right With These 50 Examples
Grille
-
Une grille est un ensemble de lignes directrices, verticales et horizontales.
Les lignes verticales créent des colonnes, avec des gouttières entre elles.
Les lignes horizontales créent des lignes de pied (baselines).
-
Les colonnes et lignes de pied sont utilisées pour placer et dimensionner les éléments sur la page, de taille égale ou proportionnelle. Il n’y a pas de taille standard de grille.
Fut un temps où le système 960 était le standard: une grille fixe de 960px, des colonnes de taille fixe — si la fenêtre est redimensionnée, le site ne change pas. Avec l’arrivée des smartphones, de plus en plus de sites optent pour un layout responsive — une grille fluide, dont les colonnes grossissent ou rétrécissent selon la taille de la fenêtre, voire sont ajoutées ou supprimées selon l’espace disponible.
-
Il est important de respecter les gouttières — garder une marge entre les éléments qui est constante partout sur le site. Ne pas respecter les gouttières peut créer une sensation de désordre.
En adhérant à une grille, on crée des relations entre les éléments qui rendent le contenu plus facile et plus agréable à utiliser.
Exemple:
Proportions
Nombre d’or
Le nombre d’or (golden ratio) est un ratio “magique” (1,618) qui permet de réaliser des interfaces aux proportions harmonieuses et équilibrées. Par exemple, si la largeur de la page est de 960px, la zone de contenu devra mesurer 593px (960px / 1.618) et la barre latérale 367px (960px - 593px).
Si on le dessine, le nombre d’or ressemble à une coquille escargot:
Exemple:
What Is The Golden Ratio? What You Need to Know and How To Use It
Règle des tiers
La règle des tiers est une théorie qui se base sur la manière dont l’oeil perçoit l’environnement. Si vous divisez une image avec deux lignes verticales et deux lignes horizontales, ces lignes deviennent des lignes de force et leurs points d’intersections des points forts, où l’oeil focalise son attention.
Ces lignes et intersections vont permettre à la fois de délimiter les éléments de l’image et de placer les éléments, pour mettre en avant ce qui est important et modifier le ressenti de l’observateur.
Exemple:
Disposition
Disposition en diagonale
-
Une disposition en diagonale, en forme de S ou de Z peut donner du mouvement au design, aidant ainsi les yeux des spectateurs à travers la page.
-
Il est souvent plus intéressent d’un point de vue visuel qu’une disposition traditionnelle basée sur une grille, qui utilise uniquement une orientation horizontale et verticale.
Symétrique ou asymétrique
L’équilibre est la distribution égale du poids visuel tout au long de la page.
Un bon design est un design équilibré, les pages qui ne sont pas équilibrées nous rendent mal à l’aise.
-
Une des façons d’intégrer de l’équilibre dans un site web est la symétrie.
Il donne un sentiment de stabilité et de confiance.
-
Incorporer de l’asymétrie est efficace pour attirer l’attention et briser la monotonie.
Attention malgré tout à ne pas rompre l’équilibre de la page.
La taille, la couleur, le contraste, l’alignement sur la grille, l’espace négatif ou son absence (c’est à dire la densité) et la symétrie marchent tous ensemble pour créer l’équilibre.
Espace négatif
L’espace négatif est l’espace vide autour des éléments.
- Il peut augmenter la lisibilité et créer un air d’élégance.
- Il attire l’attention de l’utilisateur sur le contenu sans le submerger.
- Il n’est pas nécessairement blanc.
- Il est possible d’utiliser beaucoup d’espace négatif autour des éléments, pourvu qu’il y ait également des espaces négatifs à l’intérieur des différents éléments.
Exemples:
