Logo et site internet de l’association Bâtir Sain

Pendant 2 ans j’ai collaboré avec l’association Bâtir Sain qui promeut la construction écologique. J’ai conçu leur logo ainsi que leur site internet.

Pourquoi autant de temps ? D’abord parce que l’association ne savait pas elle même ce qu’elle voulait communiquer. Les premières recherches ont été l’occasion aux membres de comprendre ce qu’ils souhaitaient. Et puis il s’agit pour l’essentiel de bénévoles, leur implication épisodique ralentit le processus d’aller retour créatif.

Mais nous avons pris le temps et maintenant tout les membres aiment l’image que le logo donne de leur association.

Pour le site internet j’ai mis beaucoup plus de temps que je ne le pensais. Mais comme pour le logo, il a fallu définir avec l’association ce qu’ils voulaient mettre en valeur, structurer le site, faire une maquette qui leur plaise et enfin le plus long : programmer chaque pages et modules du site internet.

Bien malgré moi, c’est surement la programmation qui m’a le plus occupé. Je devais faire un site facilement éditable pour les membres de l’association, c’est pourquoi j’ai choisi le cms Spip. J’ai appris en quelques jours à faire des pages dynamique. Néanmoins, ils y avait beaucoup de type de pages différentes et c’est aussi pour cela que le site n’est pas parfait : Je ne m’attendais pas à autant de travail de ce côté là.

Couleurs du site

Vous l’avez surement compris le principe graphique du site est de suggérer une coupe du paysage. On commence par le ciel bleu, passe par les arbres et l’herbe verte pour arriver à la terre marron.

Pour les rayures l’idée derrière est de faire penser aux marques des panneaux “Attention chantier”. Dans cette optique, les rayures ne doivent pas être trop petites par rapport à la taille du support.

Les bannières

Le but des bannières est de guider l’internaute vers les actions bénéfiques pour l’association. C’était l’occasion pour moi de faire quelques petites illustrations simples.

Constitution du site

Pour vous donner une idée de la taille du site et du travail sur la structure et la navigation qui a été fait, voici une liste exhaustive de toutes les pages et modules.

30 types de pages différentes :

17 types de pages pour les rubriques
9 types de pages d’articles
1 page d’accueil
1 page d’auteur
1 page de recherche
1 page d’inscription

3 éléments qui se retrouvent dans toute les pages :

1 Une tête de page
1 Un pied de page
1 un truc qui met toute les spécificités techniques du site pour les navigateurs et les moteurs de recherches. c’est le < head >< / head >

14 éléments pour la colonne de droite qui sont placés dans les différentes pages si ils sont pertinents :

5 boites avec une bannière
- 1 boite avec adhérer à batir sain
- 1 boite avec la liste de discussion de batir sain
- 1 boite avec le guide raisonné
- 1 boite avec l’abonnement au site
- 1 boite avec écrire un article
1 boite avec un champ pour rechercher
1 boite avec un calendrier des événements à venir
1 boite avec la liste des liens sympas
1 boite avec une inscription par email aux actualités
1 boite avec les nouveaux articles dans la rubrique affichée
1 boite avec les critères de la librairie : acheter, emprunter, français, anglais…
1 boite avec les partenaires de Bâtir Sain
1 boite avec un message pour proposer aux internautes de corriger les erreurs ou de proposer de nouveaux contenu
1 boite avec les 5 rédacteurs les plus lus

6 éléments qui se retrouvent dans quelques pages :

1 Un pied d’article
1 formulaire d’inscription
1 formulaire de connexion
1 formulaire pour ajouter des commentaires aux articles et news.
1 script pour que dans la librairie quand on clique sur “emprunter” ça affiche un petit texte dans la même page en dessous du livre sans recharger la page.
1 Menu pour les rubriques au dessus de la carte de l’annuaire ( ouais c’est bizarre mais comme c’est un peu spécial l’annuaire j’ai du rusé )