Ouaib Session - 2nd partie, construire son propre site

Après l'adaptation d'une charte graphique à un blog (voir ouaib session n°1) voici quelques éléments d'explication sur la construction d'une charte graphique et son installation ...

L'idée de base

Inutile de partir dans la construction d'un site si on a pas une base ! Je conseille à tous de prendre un papier et un crayon et de commencer par dessiner ce que sera (dans l'absolu) le rendu du site tel qu'on l'imagine. Cela permet de ne rien oublier et même de pouvoir corriger le tir au fur et à mesure que l'on avance dans son projet.

Pour mon exemple c'est la construction du site du projet Recycl-Educ qui sera le sujet ... Commençons donc par voir à quoi il devrait ressembler (1er jet)

Après avoir dessiné et découpé plus ou moins les différents éléments qui constitueront la page du site je me suis donc attelé à construire la charte graphique à proprement parler.

Une recherche typographique

Pour rester dans le ton du projet (qui concerne des établissements scolaires) le logo (et éventuellement les titres ce n'est pas encore clairement arrêté) utilise une typo de type scolaire : écriture à la main avec les traits de fond comme si on écrivait sur une ardoise d'écolier. Je l'ai trouvé sur Dafont la typo qui me convenait : UlusalOkul.Com Çizgili.

Les couleurs

A la base mon idée était d'utiliser une couleur bleu pour le fond de la page et un grand nombre d'éléments graphiques. Un petit tour sur Best Web Gallery m'a permis de voir que le bleu était d'actualité (pour ne pas dire à la mode) et j'ai regardé quels tons étaient les plus agréables à visualiser ...

Mon choix s'est arrêté sur celui ci avec un ton bleu super sympa et des éléments plus sombre (pas vraiment un noir) qui me convenait bien ...

Avec le bleu on peut mariere du blanc pour découper/trancher que ce soit pour l'écriture ou pour les icônes. Enfin j'ai repris le noir pas complètement noir (code hexadécimal ##303030) pour tout le texte et qui pourra aussi servir pour les effets de soulignage (a hoover) sur les icônes ...

Au final cela pourrait donner quelque chose comme ceci à quelques détails près ... En effet je ne dispose pas encore des images qui seront situées dans les 4 arrondis et j'aimerais en fait pouvoir mettre des silhouettes blanches plutôt que des dessins dans ces espaces.

Mise en ouaib

Pour l'instant nous n'avons que des éléments graphiques (dessins, illustrations ou images informatiques) et il va être temps de passer tout cela dans la moulinette du HTML et du CSS afin de disposer d'un site pleinement fonctionnel ... Alors allons découper tout cela !

A suivre !