Bonjour et bienvenue pour un nouveau chapitre de la formation WebDesign.

Après avoir établi la structure de notre page mercredi dernier (chapitre accessible ICI), nous allons désormais habiller notre page en y ajoutant de la couleur, en changeant la police et en y ajoutant des effets.

Il n’y aura pas de travail à faire réellement jusque l’intégration (l’article sort mercredi prochain), mais il y aura un travail d’imagination à faire pour prévisualiser notre future page avec ses couleurs. Sinon, vous pouvez toujours effectuer cette étape au même moment que l’intégration et visualiser les résultats en direct.

LES COULEURS

Voici un cercle chromatique (il sera primordial pour choisir les couleurs) :

Il existe 3 grandes règles dans le choix des couleurs :

Si vous débutez dans le webdesign et que vous créez votre première page web alors je vous conseille la première méthode :

• Choisir une couleur sur le cercle chromatique, ensuite, pour choisir une seconde couleur, décalez vous vers la droite, ou vers la gauche.

De cette manière, il est difficile d’avoir un site totalement dépareillé. Vous garderez une certaine harmonie même si c’est votre première fois.

• La seconde méthode pour choisir deux couleurs est de choisir la première à votre goût et prendre sa couleur complémentaire en seconde.

Petit cours de physique : Il existe 3 couleurs principale : Rouge, Vert, Bleu. Et 3 couleurs secondaires : Magenta, Cyan et Jaune. Si vous ajoutez les trois couleurs principales ensembles, il se formera du blanc. Si vous ajoutez du rouge et du vert : jaune; rouge et bleu : magenta; jaune et bleu: cyan.

La couleur complémentaire d’une autre est sa couleur diamétralement opposée. C’est à dire que si je choisis du rouge comme couleur principale, je prendrais du cyan en couleur secondaire; si je choisis du jaune en principale, j’aurai du bleu en secondaire, etc …

Cette méthode est particulièrement utilisée pour les logo, car il y a toujours un fort contraste entre les couleurs choisies.

• La dernière méthode consiste à avoir trois couleurs. Pour cela vous aurez toujours une couleur principale mais deux couleurs secondaires.
• Pour cela choisissez votre couleur principale, identifiez sa couleur complémentaire et éloignez vous de manière égale à droite et à gauche de la couleur complémentaire.

De cette manière vous obtiendrez trois couleurs qui naturellement devrait aller bien ensemble. Reste encore à bien savoir les disposer pour obtenir une harmonie.

LA POLICE

La police n’est pas un choix très compliqué, il n’existe qu’une règle majeure : Ne choisissez pas une police excentrique ou originale pour un texte ou un titre. Cela peut rendre bien sur un logo mais en grande quantité cela devient vite brouillon pour l’oeil.

Un exemple des polices dont je parle :

Vous l’aurez compris, ce n’est pas parce que cette police vous plait, qu’elle plaira à tout le monde. Alors la plupart du temps, le mieux est de rester simple et de choisir parmis les polices les plus utilisées sur google font.

Aussi, si votre page comporte de forte zones de texte, il peut être intéressant de choisir une police de type ‘Mono’. ‘Mono’ est l’abréviation de ‘monospace’, cela signifie que tous les caractères du texte comportent la même largeur. Vous le voyez, un ‘m’ est plus large qu’un ‘l’ dans une police non-mono, mais ce type de police peut aider à clarifier votre texte. D’autant plus s’il possède une certaine technicité.

Pour finir, n’utilisez pas trop de polices, par là j’entends plus de 3 (3 exclu). Car en plus d’accélérer le temps de chargement de votre page (la plupart des polices ne sont pas installées nativement sur votre ordinateur), cela pourrait faire apparaître une disparité dans vos pages.

LES EFFETS

Comme pour les polices, il ne faut pas en abuser. Cela attire l’oeil du spectateur (comme au cinéma lors d’une scène d’action), sauf que si il y a trop d’effet, l’oeil ne va pas savoir quoi regarder et donc attendra simplement la fin de ces derniers. Au final, ils auront donc perdu leur intérêt qui était de concentrer la vue sur un élément important.

Bootstrap, le framework que nous allons utiliser dans le chapitre 3 pour transformer notre modèle en page web, possède une galerie d’effet conséquente, qui peuvent être appelés par différents événements (clic, scroll, chargement, …). Pour éviter une surcharge, je vous conseille de ne mettre aucuns effet sur la page sur laquelle on arrive lorsque l’on clique sur le site. Et n’en mettez pas en même temps sur une même zone.

Vous voilà prêt pour l’intégration ! L’article sortira mercredi prochain et ce sera le dernier de cette formation.

J’espère que ce chapitre vous aura plu. Si c’est le cas, n’hésitez pas à partager ce dernier sur les réseaux sociaux pour aider permettre au blog d’avancer et intéresser d’autres personnes.

Merci, à mercredi.