Création d'un site Internet pour une association proposant des activités sur le territoire ardéchois

creation site internet association

Un projet de nouveau site Internet pour l'association

Graphiste et webdesigneuse indépendante, j’aime concevoir des sites Internet pour des associations, SCOP et entreprises oeuvrant dans le domaine de l'éducation. Hélène, la directrice de l'association, m'a signalé son besoin d'un nouveau site Internet. Les motivations principales de cette refonte globale : redonner un nouveau souffle à l'association. Nouveaux supports de communication, logo actualisé, ligne graphique bien définie et un site internet répondant mieux aux attentes. Le site datait de plusieurs années. Il était difficilement administrable par l'équipe et l'organisation de son contenu complexe. La première étape de cette refonte fût donc de redéfinir les objectifs du site. Quel est son public ? Que doit-on pouvoir y trouver en terme de contenus ? Quels messages clés à délivrer ? L'association a pour vocation de proposer des activités aux habitants du territoire ardéchois. Elle a donc plusieurs publics : les enfants, les jeunes mais aussi les adultes.

Une conception de site Internet de A à Z

Je remercie l'équipe et notamment sa directrice, pour m'avoir fait confiance. J'étais leur unique interlocutrice : pas de directeur artistique ni de personne en gestion de projet comme dans une agence de communication ou un studio de création. Tout reposait sur mes épaules et je suis très heureuse d'avoir menée le projet de A à Z, de la définition des contenus à la mise en ligne.

1. Définition du contenu et de l'organisation du site Internet

Ma prestation de graphiste webdesigner inclut l'accompagnement à la définition du contenu et de sa mise à disposition. Ne pouvons décider seule de ces questions, j'ai proposé une séance de tri par carte. J'ai listé l'ensemble des pages du site actuel. Chacune est écrite sur un post-it. Plusieurs personnes ont été conviés à cette réunion : une salarié, une bénévole, la directrice et la secrétaire comptable de l'association. Selon leur perception, elles ont organisé les pages en les rassemblant et en leur donnant ensuite un intitulé. L'exercice a été très riche. Personne n'a organisé le contenu de la même manière. Nous avons donc recherché un consensus pour décider d'une arborescence. Certaines rubriques ont encore bougé un peu de place lorsque j'ai mis au propre l'ensemble de l'arborescence. La page "devenir bénévole" me semblait notamment mériter un accès à plusieurs endroits (pied de page et page de présentation de l'association). Lors de notre première réunion d'échange, Hélène a souligné l'importance des bénévoles administrateurs dans le fonctionnement d'une association.

2. Présentation des zonings des rubriques principales

Une fois l'arborescence validée, j'ai réalisé les zonings des pages principales. Il s'agit d'un découpage du contenu des pages, en grandes zones. Ainsi, nous définissons le contenu, sa hiérarchisation, sa mise en forme, et les principes de navigation. Ces zonings sont une étape importante pour ce projet. Ils permettent de réfléchir à l'ergonomie globale du site. Une fois ces wireframes validés, je peux me concentrer sur le deisgn graphique. Car cela signifie que la structure des pages ne bougera pas.

3. Création de la charte graphique du site Internet

Les zonings validés, j'ai étudié l'univers graphique du site. En commençant par la palette couleur. La couleur orange était mon point de départ. Lumineuse, énergique, elle traduit bien l'idée d'accueil. J'ai ensuite utilisé la roue colorimétrique d'Adobe : https://color.adobe.com/fr/create/color-wheel. J'ai aussi suivi mon intuition en faisant des tests et en optant pour un rendu le plus harmonieux possible. Cette charte graphique repose sur une typographie de caractère que j'apprécie beaucoup : La Google font Work Sans. J'ai proposé un design aéré, laissant la place à des titres écrits en grands caractères. Les espaces blancs tiennent une place importante pour donner à la mise en page une grande clarté. Enfin, nous avons eu recours à la conception d'une infographie pour expliquer le fonctionnement de l'association. Mieux que de longs discours, l'infographie traduit de façon simple et ludique une information. Des petits pictogrammes dessinés à la main agrémentent des zones du site (point d'interrogation, personnages, etc.). Cela lui confère une identité plus forte, en accord avec le logotype.

4. Intégration du site de façon responsive

Pour intégrer le site, j'ai utilisé le CMS ©Wordpress et l'outil ©Elementor. À chaque intégration de page, j'ai testé le rendu sur smartphone, corrigé les espaces, les tailles de typographies, les visuels, afin d'optimiser la navigation sur ces terminaux. Je n'ai pas pu mettre en place une intégration en éco-conception pour ce projet car j'ai eu recours à ©Wordpress. Peu de thèmes sont compatibles avec cette démarche. J'ai fait au mieux pour maximiser la performance du site. Toutes les images ont été réduites au poids minimum avec Imageoptim. D'autre part, ©Elementor permet de désactiver les scripts et css non utilisés. Tout est mis en oeuvre pour offrir la meilleure expérience utilisateur sur tous les types de supports (desktop, tablette, téléphone). J'ai aussi veillé à apporter des petites astuces ergonomiques : le menu de la têtière se fixe en haut de l'écran lorsque l'on descend dans la page, pour pouvoir toujours y accéder. J'ai utilisé des ancres lorsque le contenu des pages s'avérait long. Ces boutons internes permettent de se rendre directement à la rubrique concernée, en glissant rapidement sur le reste du contenu. Des animations CSS font apparaître certaines informations dans un deuxième temps, pour laisser une respiration à l'internaute. Cela produit un rythme dans la navigation, avec des temps de pause.
Visiter le site

Une demande de tarif ?

Vous avez un projet et souhaitez connaître le tarif pour sa création ? Je réponds à vos demandes par mail :
Demander un devis

D'autres projets de webdesign pour des associations et entreprises de l'ESS

webdesigner creation site internet association webdesigner reseau GRAINE charte graphique web association site internet Cevied