Compte-rendu de l'atelier "Comment (re)créer son site" pour une association, par Laure Prest.

1. Transcription des ateliers pratiques du 26/11/2015
Comment (re)créer le site de son association
Merci à La Pépinière pour leur accueil !
Merci à tous de votre implication.
Comment (re)créer le site de son
association
Avec Pierre Grateau et Bertrand Flaujac

2. Transcription des ateliers pratiques du 26/11/2015
Comment (re)créer le site de son association
Merci à La Pépinière pour leur accueil !
Merci à tous de votre implication.
Comment(re)créerle site de son association
Animation AssoConnect,
Pierre Grateau, pierre.grateau@assoconnect.com
Bertrand Flaujac, bertrand.flaujac@assoconnect.com
Restitution Laure de Prest, bénévole Webassoc
Etape 1 : Définir ses objectifs et destinataires
Les grandstypesde destinataires :
- Adhérents(actuelsetpotentiels)
- Bénévoles
- Donateursprivés
- Entreprises mécènes
- Le grand public
- Les pouvoirspublics
- Journalistes
 définirsacible prioritaire permetde construire lastructure dusite.
Quel estl’ADN de monassociation ?
- Résumé en1 phrase ce que faitmon association
- Qu’estce qui me différencie?
- Mon asso. en3 points ?
 De sesvaleursdépendentlachartre graphique dusite.
 Il faut qu’une personne qui arrive surle site comprenne en1phrase ce que vousfaites.

3. Transcription des ateliers pratiques du 26/11/2015
Comment (re)créer le site de son association
Merci à La Pépinière pour leur accueil !
Merci à tous de votre implication.
Etape 2 : Faire l’état des lieux
1. Pourquoi changer ?
Mauvaise architecture,design,Responsive, ergonomie,personnesresponsablesdusite,ciblage
…
Design:
Il y a desmodesdansle design :aujourd’hui lessitessontsimplesetépurés(cf site Apple)
 Demanderà vosenfantsetà desados s’ilsaimentvossites !
Responsive :
Aujourd’hui 30%desgensvontvoirvossitespar le mobile :il fautadapterle site à ce support.Ex/Menu
en« burger»
2. S’inspirer
Cf Themeforestpouravoirdeschartresgraphiques :donne desidéesde ce qu’il se faitence moment –
Thème « charity »
Etape 3 : Construire la structure
Haut de page (avec le call to action)
Menu
Page
Bas de page
Importance duCALL TO ACTION
Ne pas mettre lesstats« nombre de visites » visible
Ne pas mettre tropde menu
Bon exemple:site de laCroix-Rouge
Aéré,épuré,sobre

4. Transcription des ateliers pratiques du 26/11/2015
Comment (re)créer le site de son association
Merci à La Pépinière pour leur accueil !
Merci à tous de votre implication.
3 actionsliésaux cibles :« je m’engage »,« je me forme »,« je donne »
Call to action :
- doitêtre bienvisible,
- couleurqui incite àl’action
- Eviterleseffets :ex/boutonqui clignote
- Ne doitpas être sur un carrousel,maisil doitêtre fixe
- Se voitmême si on scrolle
Attentionàne pas mettre desboutonsde partage partout.
Il faut 4 ou5 sous-menusmaximum
Dans le bas de page : Contact, plandu site,emploi,mentionslégales…
Etape 4 : Construire ses pages
1. Organiser l’information
Obj. : Fournirà l’Internaute uncontenuorganisé pourque celui ci soitsensibilisé,tenuinformé et/ou
passe à l’action
Très importantpourorganisersonsite d’analysersesstats=> Google Analyticsindispensable.
Il faut savoirquel estl’objectif de mapage pourstructurerl’argumentaire.
3 étapes :
- Déterminerle messageque l’onveutfaire passer :brainstormereninterne
- Hiérarchiserlesmessages(infosprincipales,infossecondaires)
- Les mettre enforme
Raconterdeshistoires :dimensionsociale,lesgensaimentqu’onleurraconte deshistoires.

5. Transcription des ateliers pratiques du 26/11/2015
Comment (re)créer le site de son association
Merci à La Pépinière pour leur accueil !
Merci à tous de votre implication.
2. Des modèlesde pagesqui fonctionnent
Il faut2 ou 3 clics max.pourtrouverl’info.recherchée.
A noter:
Google Grantestune versiond’AdWords(outilde pubenligne de Google) destinée aux organismesà
but nonlucratif.Google leuroffre uncréditpub.
Unbounce, permetde créerdeslandingspage (page de redirection) dédiéspourune campagne de pub
par exemple.
Ex de bonssites : Intercom,airbnb,…
Outilspourconcevoirdesmodèlesde page :
- LogicielsMockups :balsamiq,cacoo,mockflow
- Powerpoint
- Et surtout dupapieretun crayon

6. Transcription des ateliers pratiques du 26/11/2015
Comment (re)créer le site de son association
Merci à La Pépinière pour leur accueil !
Merci à tous de votre implication.
3. Le contenu
« Nous ne lisonspas lespages,nous lesscannons » : Steve Krug
Les internautessontfainéantsparnature.
 Aidezvousde visuels
 Max. 15 mots par ligne
 Pas de texte troppetit : min.14 pixels.
 Variezlestypesde contenu :
o Image
o Texte
o Contenudynamique
 Ex/ Infographie (CF Piktochart)
o Video(augmentele tempspassé de 80%)
 CF sites Pitchy etReplay : permetde construire vosvidéos
 Conseil :hébergerlesvideossuryoutube (enplusc’estbonpourle
référencement)
CF sitesGraphicBurger,thenounprojet :base d’icones gratuite,il fautjuste citerlesauteurs.
4. Restezsimple
Il ne fautpas laisserle doute danslatête de l’utilisateur.
Pouréviterlesconfusions,travaillerle texte etle design.
5. Ne réinventezpas la roue
- Où afficherle bouton« don» ?
o Souventenhautà droite (cf Croix Rouge,Electricitéssansfrontière)
- Commentgérerle processde don ?
o mettre unfil d’ariane (étapes)
6. lesproblèmesde police
o pas trop petite (min14)
o pas trop « Word »
o éviterplusieurspolices(2max)
o Cohérence entre titresetsous-titres
CF WhatFontsousChrome

7. Transcription des ateliers pratiques du 26/11/2015
Comment (re)créer le site de son association
Merci à La Pépinière pour leur accueil !
Merci à tous de votre implication.
7. Les couleurs
Police bleue fatiguante:il fautune couleurplusterne qui ressorte.Ex/grissombre
Attentionaucontraste avecle fond
CF flatuicolorpickerpourchoisirlescouleurs
CF paletton pourdéfinirlesalliancesde couleur
Etape 5 : Prestataires et outils
1. Les acteurs

8. Transcription des ateliers pratiques du 26/11/2015
Comment (re)créer le site de son association
Merci à La Pépinière pour leur accueil !
Merci à tous de votre implication.
- Agence de communication :
o Les moins:
Environ500 euros/j.de développement
5000 eurosminla création
+ fraisde maintenance
o Les plus :
Qualité
Tempspassé
Le suivi
Attentionbiencaleravecl’agencelapropriété ducode etd’avoirlamain sur deschangements.
- Freelance
o 1500 eurosmi
o qualité variable
o Attentionausuivi :risque si lapersonne n’estpluslà
- CMS (système de gestionde contenu)
o 20% de touslessitesdumonde
o ex/wordpressetJoomla(completmaispluscompliqué),jimdo,assoConnect(moinsde
1000 euros),WIX
o Avantage : prix etamélioration
o Inconvénients :qualité (/àune agence)
Attentionà:
- la propriété ducode
- le développeurdoitêtre compétent
- le contenufacile àmettre à jour
Compositionde l’équipe dédiée ausite idéal:
- un cérébral
- un rationnel
- un créatif
- + undestinataire cibleàqui on montre le site encoursde construction
2. Synthèse
- Un site Internetn’estjamaisfini
- … doitévoluerenfonctiondestechnologies(flash,Googleintègre l’aspectResponsive dansson
algorithme)
=> Facteursà prendre encompte dansle budgetetle choix du développement