Accueil > graphisme > ameliorer-son-site

{ Améliorer son site }

Introduction

Ingénieuse invention, les balises " div "  permettent de structurer son contenu à l'intérieur d'une page html. Ajoutez à cela les CSS et vous êtes gagnant sur toute la ligne ! Ces bases du Web 2.0 sont votre arme pour amplifier l'impact de votre contenu. Prenons un exemple pour appuyer mes dires :

Source : www.apple.com/fr/

Pourquoi cette page est-elle bien structuré !?
Car chaques éléments de la page donnent à la fois une dynamique et un équilibre :

Structure

Pour vous aider, j'ai surligné en rouge la structure de la mise en page.

Pour donner une dynamique, la partie du centre oriente l'oeil vers l'angle en haut à droite. C'est ce qu'on appelle une dynamique positive, car orientée vers le haut, et à droite car c'est le sens de lecture (on lit de gauche à droite).
Si, à l'inverse, la dynamique orientait vers le bas, ce serait négatif et donc plutôt déconseillé !
Cette dynamique équilibre donc la page, en s'opposant à celle créé par les menus en haut et à gauche de la page.
Au centre, les textes et les images équilibrent aussi la page :

Une fois à droite, une fois à gauche, leur poids visuel est bien réparti.

Ici, Apple présente un produit. Une mise en page aéré permet de survoler les caractéristiques de celui-ci. La mise en page doit donc s'adapter au type de contenu.

Récapitulatif :

La mise en page dépend du contenu, des pages aérés et équilibrés vous aidera a avoir un site clair et invitera vos internautes à revenir !

Harmonie des couleurs

Le choix des couleurs pour un site est tellement difficile qu'aujourd'hui beaucoup d'entre eux s'habillent de gris et de noir. Pourtant il ne faut pas avoir peur de la couleur. C'est elle qui peut faire la différence entre votre site et des millions d'autres !
Beaucoup de sites ayant déjà un logo, et si c'est votre cas, il est préférable de se baser sur lui pour définir la couleur principale.  Mais couleur principale ne veut pas dire seul et unique couleur !
Par exemple pour donner du punch à un site dont la couleur principale serais le violet , on pourrais utiliser sa couleur complémentaire, le jaune.
Si vous ne connaissez pas les couleurs complémentaires voici un cercle chromatique :

cercle chromatique

P = couleurs primaires, S = secondaires, T = tertiaires.

Les couleurs complémentaires sont celles qui, sur le cercle, s'opposent.

Revenons à notre exemple :

J'ai du violet et l'on souhaite harmoniser mes couleurs et éviter les fautes de goût !
Le violet est un mélange de magenta et de cyan, on peut donc l'appuyer avec du bleu.

Conclusion

Un autre exemple : Astuce-Webmaster.ch est bleu, mais si vous regardez bien il y a du vert et même de l'orange !

Aidez vous du cercle chromatique pour choisir vos couleurs.

Il existe d'autres cercles chromatiques, avec encore plus de couleurs. L'informatique permet d'avoir des millions de couleurs différentes !