![Page 1: Comment (re)créer le site de son association - 26 novembre 2015](https://reader034.vdocuments.mx/reader034/viewer/2022052419/587c7b4a1a28abd04e8b7f1d/html5/thumbnails/1.jpg)
ATELIER : COMMENT (RE)CRÉER LE SITE DE SON
ASSOCIATION
![Page 2: Comment (re)créer le site de son association - 26 novembre 2015](https://reader034.vdocuments.mx/reader034/viewer/2022052419/587c7b4a1a28abd04e8b7f1d/html5/thumbnails/2.jpg)
Objectifs de l’atelier
![Page 3: Comment (re)créer le site de son association - 26 novembre 2015](https://reader034.vdocuments.mx/reader034/viewer/2022052419/587c7b4a1a28abd04e8b7f1d/html5/thumbnails/3.jpg)
• Acquérir une méthodologie pour construire son site
• Avoir les clés pour échanger avec les prestataires
• Connaître les bonnes pratiques
• Connaître les bons outils
• S’inspirer d’exemples et de contre-exemples associatifs
3
LES OBJECTIFS
![Page 4: Comment (re)créer le site de son association - 26 novembre 2015](https://reader034.vdocuments.mx/reader034/viewer/2022052419/587c7b4a1a28abd04e8b7f1d/html5/thumbnails/4.jpg)
Etape 1 :Définir ses objectifs et destinataires
![Page 5: Comment (re)créer le site de son association - 26 novembre 2015](https://reader034.vdocuments.mx/reader034/viewer/2022052419/587c7b4a1a28abd04e8b7f1d/html5/thumbnails/5.jpg)
![Page 6: Comment (re)créer le site de son association - 26 novembre 2015](https://reader034.vdocuments.mx/reader034/viewer/2022052419/587c7b4a1a28abd04e8b7f1d/html5/thumbnails/6.jpg)
Les destinataires potentiels
![Page 7: Comment (re)créer le site de son association - 26 novembre 2015](https://reader034.vdocuments.mx/reader034/viewer/2022052419/587c7b4a1a28abd04e8b7f1d/html5/thumbnails/7.jpg)
![Page 8: Comment (re)créer le site de son association - 26 novembre 2015](https://reader034.vdocuments.mx/reader034/viewer/2022052419/587c7b4a1a28abd04e8b7f1d/html5/thumbnails/8.jpg)
Etape 2 :Faire l’état des lieux
![Page 9: Comment (re)créer le site de son association - 26 novembre 2015](https://reader034.vdocuments.mx/reader034/viewer/2022052419/587c7b4a1a28abd04e8b7f1d/html5/thumbnails/9.jpg)
Pourquoi changer ? 1
![Page 10: Comment (re)créer le site de son association - 26 novembre 2015](https://reader034.vdocuments.mx/reader034/viewer/2022052419/587c7b4a1a28abd04e8b7f1d/html5/thumbnails/10.jpg)
Design
Ergonomie
Autonomie
Responsive
Contenu
Ciblage
![Page 11: Comment (re)créer le site de son association - 26 novembre 2015](https://reader034.vdocuments.mx/reader034/viewer/2022052419/587c7b4a1a28abd04e8b7f1d/html5/thumbnails/11.jpg)
![Page 12: Comment (re)créer le site de son association - 26 novembre 2015](https://reader034.vdocuments.mx/reader034/viewer/2022052419/587c7b4a1a28abd04e8b7f1d/html5/thumbnails/12.jpg)
![Page 13: Comment (re)créer le site de son association - 26 novembre 2015](https://reader034.vdocuments.mx/reader034/viewer/2022052419/587c7b4a1a28abd04e8b7f1d/html5/thumbnails/13.jpg)
![Page 14: Comment (re)créer le site de son association - 26 novembre 2015](https://reader034.vdocuments.mx/reader034/viewer/2022052419/587c7b4a1a28abd04e8b7f1d/html5/thumbnails/14.jpg)
Test de comptabilité mobile Google
![Page 15: Comment (re)créer le site de son association - 26 novembre 2015](https://reader034.vdocuments.mx/reader034/viewer/2022052419/587c7b4a1a28abd04e8b7f1d/html5/thumbnails/15.jpg)
![Page 16: Comment (re)créer le site de son association - 26 novembre 2015](https://reader034.vdocuments.mx/reader034/viewer/2022052419/587c7b4a1a28abd04e8b7f1d/html5/thumbnails/16.jpg)
S’inspirer2
![Page 17: Comment (re)créer le site de son association - 26 novembre 2015](https://reader034.vdocuments.mx/reader034/viewer/2022052419/587c7b4a1a28abd04e8b7f1d/html5/thumbnails/17.jpg)
Themeforest
![Page 18: Comment (re)créer le site de son association - 26 novembre 2015](https://reader034.vdocuments.mx/reader034/viewer/2022052419/587c7b4a1a28abd04e8b7f1d/html5/thumbnails/18.jpg)
![Page 19: Comment (re)créer le site de son association - 26 novembre 2015](https://reader034.vdocuments.mx/reader034/viewer/2022052419/587c7b4a1a28abd04e8b7f1d/html5/thumbnails/19.jpg)
Etape 3 :Construire la structure
![Page 20: Comment (re)créer le site de son association - 26 novembre 2015](https://reader034.vdocuments.mx/reader034/viewer/2022052419/587c7b4a1a28abd04e8b7f1d/html5/thumbnails/20.jpg)
![Page 21: Comment (re)créer le site de son association - 26 novembre 2015](https://reader034.vdocuments.mx/reader034/viewer/2022052419/587c7b4a1a28abd04e8b7f1d/html5/thumbnails/21.jpg)
![Page 22: Comment (re)créer le site de son association - 26 novembre 2015](https://reader034.vdocuments.mx/reader034/viewer/2022052419/587c7b4a1a28abd04e8b7f1d/html5/thumbnails/22.jpg)
![Page 23: Comment (re)créer le site de son association - 26 novembre 2015](https://reader034.vdocuments.mx/reader034/viewer/2022052419/587c7b4a1a28abd04e8b7f1d/html5/thumbnails/23.jpg)
![Page 24: Comment (re)créer le site de son association - 26 novembre 2015](https://reader034.vdocuments.mx/reader034/viewer/2022052419/587c7b4a1a28abd04e8b7f1d/html5/thumbnails/24.jpg)
Etape 4 :Construire ses pages
![Page 25: Comment (re)créer le site de son association - 26 novembre 2015](https://reader034.vdocuments.mx/reader034/viewer/2022052419/587c7b4a1a28abd04e8b7f1d/html5/thumbnails/25.jpg)
Organiser l’information1
![Page 26: Comment (re)créer le site de son association - 26 novembre 2015](https://reader034.vdocuments.mx/reader034/viewer/2022052419/587c7b4a1a28abd04e8b7f1d/html5/thumbnails/26.jpg)
VS
![Page 27: Comment (re)créer le site de son association - 26 novembre 2015](https://reader034.vdocuments.mx/reader034/viewer/2022052419/587c7b4a1a28abd04e8b7f1d/html5/thumbnails/27.jpg)
LES OBJECTIFS
Les étapes :
• Déterminer les messages que l’on veut faire passer
• Organiser ces messages
• Les mettre en forme
Fournir à l’internaute un contenu organisé, pour que celui-ci soit sensibilisé, tenu informé et/ou passe à l’action.
![Page 28: Comment (re)créer le site de son association - 26 novembre 2015](https://reader034.vdocuments.mx/reader034/viewer/2022052419/587c7b4a1a28abd04e8b7f1d/html5/thumbnails/28.jpg)
Cas d’usage : Refonte de la page Tarifs d’AssoConnect
Objectif : Faire comprendre aux utilisateurs nos tarifs, et les inviter à tester l’outil.
Messages :
• Faire en sorte que la personne comprenne rapidement notre grille tarifaire • Informer la personne sur nos différentes formules• Répondre aux éventuelles questions / interrogations de la personne sur la
solution• Les inviter à tester l’outil• Les conforter dans leur choix, en leur montrant qu’ils ne sont pas les seuls à
utiliser l’outil.
![Page 29: Comment (re)créer le site de son association - 26 novembre 2015](https://reader034.vdocuments.mx/reader034/viewer/2022052419/587c7b4a1a28abd04e8b7f1d/html5/thumbnails/29.jpg)
Informations principales Informations secondaires Aller plus loin…
Faire comprendre notre grille tarifaire : En une phrase la personne doit saisir que le tarif évolue en fonction de la taille de l’association, et que toutes les fonctionnalités sont disponibles dès la formule la moins chère.
Communiquer les formules proposées : 4 tarifs, avec 2 mois offert si engagement annuel
Les inviter à tester
Communiquer sur les options possibles en plus des formules : Achat de nom de domaine, Formations sur l’outil, création du site, etc.
Inviter les plus grosses associations à nous contacter. Pour leur proposer un RDV téléphonique et cerner leurs besoins
Lui donner des preuves « sociales » de notre action : Logos de quelques assoclientes
Lever les dernières interrogations des personnes dubitatives sur certains points : Une Foire à Question
![Page 30: Comment (re)créer le site de son association - 26 novembre 2015](https://reader034.vdocuments.mx/reader034/viewer/2022052419/587c7b4a1a28abd04e8b7f1d/html5/thumbnails/30.jpg)
![Page 31: Comment (re)créer le site de son association - 26 novembre 2015](https://reader034.vdocuments.mx/reader034/viewer/2022052419/587c7b4a1a28abd04e8b7f1d/html5/thumbnails/31.jpg)
![Page 32: Comment (re)créer le site de son association - 26 novembre 2015](https://reader034.vdocuments.mx/reader034/viewer/2022052419/587c7b4a1a28abd04e8b7f1d/html5/thumbnails/32.jpg)
Des modèles de pages qui fonctionnent
2
![Page 33: Comment (re)créer le site de son association - 26 novembre 2015](https://reader034.vdocuments.mx/reader034/viewer/2022052419/587c7b4a1a28abd04e8b7f1d/html5/thumbnails/33.jpg)
![Page 34: Comment (re)créer le site de son association - 26 novembre 2015](https://reader034.vdocuments.mx/reader034/viewer/2022052419/587c7b4a1a28abd04e8b7f1d/html5/thumbnails/34.jpg)
Les outils pour concevoir vos modèles de pages
Logiciels Mockups Powerpoint Et surtout…
du papier et un crayon
Regardez autour de vous
Les meilleurs sites associatifs Les sites non associatifs
![Page 35: Comment (re)créer le site de son association - 26 novembre 2015](https://reader034.vdocuments.mx/reader034/viewer/2022052419/587c7b4a1a28abd04e8b7f1d/html5/thumbnails/35.jpg)
Le contenu3
![Page 36: Comment (re)créer le site de son association - 26 novembre 2015](https://reader034.vdocuments.mx/reader034/viewer/2022052419/587c7b4a1a28abd04e8b7f1d/html5/thumbnails/36.jpg)
![Page 37: Comment (re)créer le site de son association - 26 novembre 2015](https://reader034.vdocuments.mx/reader034/viewer/2022052419/587c7b4a1a28abd04e8b7f1d/html5/thumbnails/37.jpg)
Un constat
Steve Krug : « Nous ne lisons pas les pages, nous les scannons. »
• Nous sommes souvent pressés ou n’avons tout simplement pas envie de lire• Seulement certaines sections nous intéressent
• Le temps d’attention moyen par page est de 30 à 60 secondes.
Une solution : Variez les types de contenus
![Page 38: Comment (re)créer le site de son association - 26 novembre 2015](https://reader034.vdocuments.mx/reader034/viewer/2022052419/587c7b4a1a28abd04e8b7f1d/html5/thumbnails/38.jpg)
![Page 39: Comment (re)créer le site de son association - 26 novembre 2015](https://reader034.vdocuments.mx/reader034/viewer/2022052419/587c7b4a1a28abd04e8b7f1d/html5/thumbnails/39.jpg)
![Page 40: Comment (re)créer le site de son association - 26 novembre 2015](https://reader034.vdocuments.mx/reader034/viewer/2022052419/587c7b4a1a28abd04e8b7f1d/html5/thumbnails/40.jpg)
Restez simple4
![Page 41: Comment (re)créer le site de son association - 26 novembre 2015](https://reader034.vdocuments.mx/reader034/viewer/2022052419/587c7b4a1a28abd04e8b7f1d/html5/thumbnails/41.jpg)
Eliminez les sources de confusions inutiles
Evident Nécessite de la réflexion
Partenariat Association à AUVM
Je veux voir les programmes de partenariats AUVM en cours !
Je clique
Je veux voir les partenariats AUVM en cours !HmmmSurement dans la section « s’associer »
Je clique
Je veux voir les partenariats AUVM en cours !HmmmPeut être que ici, mais pas certain… Je vais continuer à chercher ailleurs
![Page 42: Comment (re)créer le site de son association - 26 novembre 2015](https://reader034.vdocuments.mx/reader034/viewer/2022052419/587c7b4a1a28abd04e8b7f1d/html5/thumbnails/42.jpg)
L’utilisateur doit trouver intuitivement l’information qu’il cherche
Eliminez les sources de confusion inutiles
Pour cela, il est utile d’éliminer au maximum toutes les sources de confusion
Le design
Partenariat
Partenariat
Partenariat
Le texte
Partenariat
Association à AUVM
![Page 43: Comment (re)créer le site de son association - 26 novembre 2015](https://reader034.vdocuments.mx/reader034/viewer/2022052419/587c7b4a1a28abd04e8b7f1d/html5/thumbnails/43.jpg)
Ne réinventez pas la roue5
![Page 44: Comment (re)créer le site de son association - 26 novembre 2015](https://reader034.vdocuments.mx/reader034/viewer/2022052419/587c7b4a1a28abd04e8b7f1d/html5/thumbnails/44.jpg)
Où afficher les boutons dons ?
Comment gérer le process de dons?
www.croix-rouge.fr/ www.electriciens-sans-frontieres.org/
![Page 45: Comment (re)créer le site de son association - 26 novembre 2015](https://reader034.vdocuments.mx/reader034/viewer/2022052419/587c7b4a1a28abd04e8b7f1d/html5/thumbnails/45.jpg)
Les problèmes de police6
![Page 46: Comment (re)créer le site de son association - 26 novembre 2015](https://reader034.vdocuments.mx/reader034/viewer/2022052419/587c7b4a1a28abd04e8b7f1d/html5/thumbnails/46.jpg)
![Page 47: Comment (re)créer le site de son association - 26 novembre 2015](https://reader034.vdocuments.mx/reader034/viewer/2022052419/587c7b4a1a28abd04e8b7f1d/html5/thumbnails/47.jpg)
Assurez vous que les polices soient faciles à lire.
Taille 14 minimum
2 styles de polices maximum
Gardez une certaine cohérence !
Titre de taille 41
Sous-titre de taille 18
Texte principal de taille 16
Choix des polices
![Page 48: Comment (re)créer le site de son association - 26 novembre 2015](https://reader034.vdocuments.mx/reader034/viewer/2022052419/587c7b4a1a28abd04e8b7f1d/html5/thumbnails/48.jpg)
Titre : 63 px; Gotham SSm A
La police
Corps : 20 px; Gotham SSm A
Sous-titre : 22 px; Gotham SSm A
![Page 49: Comment (re)créer le site de son association - 26 novembre 2015](https://reader034.vdocuments.mx/reader034/viewer/2022052419/587c7b4a1a28abd04e8b7f1d/html5/thumbnails/49.jpg)
Votre boîte à outils
+ GoogleFont, daFont
![Page 50: Comment (re)créer le site de son association - 26 novembre 2015](https://reader034.vdocuments.mx/reader034/viewer/2022052419/587c7b4a1a28abd04e8b7f1d/html5/thumbnails/50.jpg)
Les couleurs7
![Page 51: Comment (re)créer le site de son association - 26 novembre 2015](https://reader034.vdocuments.mx/reader034/viewer/2022052419/587c7b4a1a28abd04e8b7f1d/html5/thumbnails/51.jpg)
![Page 52: Comment (re)créer le site de son association - 26 novembre 2015](https://reader034.vdocuments.mx/reader034/viewer/2022052419/587c7b4a1a28abd04e8b7f1d/html5/thumbnails/52.jpg)
![Page 53: Comment (re)créer le site de son association - 26 novembre 2015](https://reader034.vdocuments.mx/reader034/viewer/2022052419/587c7b4a1a28abd04e8b7f1d/html5/thumbnails/53.jpg)
• Evitez l’excès de couleurs (3 couleurs maximum)
• Pour les polices, optez pour une couleur grise sombre / noire
• Choisissez toujours des couleurs avec un contraste important.
Quelques règles à suivre dans le choix des couleurs
Mon texte Mon texte
S’inscrire à l’expéditionEn savoir plus sur
l’expédition
![Page 54: Comment (re)créer le site de son association - 26 novembre 2015](https://reader034.vdocuments.mx/reader034/viewer/2022052419/587c7b4a1a28abd04e8b7f1d/html5/thumbnails/54.jpg)
![Page 55: Comment (re)créer le site de son association - 26 novembre 2015](https://reader034.vdocuments.mx/reader034/viewer/2022052419/587c7b4a1a28abd04e8b7f1d/html5/thumbnails/55.jpg)
Votre boîte à outils
+ Palleton.com
Flatuicolopicker.com
![Page 56: Comment (re)créer le site de son association - 26 novembre 2015](https://reader034.vdocuments.mx/reader034/viewer/2022052419/587c7b4a1a28abd04e8b7f1d/html5/thumbnails/56.jpg)
Etape 5 :Prestataires et outils
![Page 57: Comment (re)créer le site de son association - 26 novembre 2015](https://reader034.vdocuments.mx/reader034/viewer/2022052419/587c7b4a1a28abd04e8b7f1d/html5/thumbnails/57.jpg)
Les acteurs1
![Page 58: Comment (re)créer le site de son association - 26 novembre 2015](https://reader034.vdocuments.mx/reader034/viewer/2022052419/587c7b4a1a28abd04e8b7f1d/html5/thumbnails/58.jpg)
Je soustraite le développement
Les différentes options pour le développement de son site
Je développe en interne
À une agence de communication
À un free-lanceur
Utilisation d’un CMS
Partir d’une feuille blanche
![Page 59: Comment (re)créer le site de son association - 26 novembre 2015](https://reader034.vdocuments.mx/reader034/viewer/2022052419/587c7b4a1a28abd04e8b7f1d/html5/thumbnails/59.jpg)
Les agences de communication
500 € / j de développement
5000 € miniLa création du site
(10-20 pages assez simple avec formulaire de contact,
newsletter, etc.)
Frais de maintenance
Les chiffres
Les avantages
• La qualité du rendu Demandez les références de l’agence • Le temps passé Sous-traitance de toute la partie développement• Le suivi Un site internet n’est pas une opération « one shot »
![Page 60: Comment (re)créer le site de son association - 26 novembre 2015](https://reader034.vdocuments.mx/reader034/viewer/2022052419/587c7b4a1a28abd04e8b7f1d/html5/thumbnails/60.jpg)
Les Freelancers & connaissances
1500 € miniLa création du site
(pour une prestation très simple)
Les chiffres Les avantages & inconvénients
• La qualité du rendu Variable• Le temps passé Sous-traitance de toute la partie
développement• Le suivi Souvent pas ou peu de suivi• Le risque La personne n’est plus
![Page 61: Comment (re)créer le site de son association - 26 novembre 2015](https://reader034.vdocuments.mx/reader034/viewer/2022052419/587c7b4a1a28abd04e8b7f1d/html5/thumbnails/61.jpg)
Développement en interne
Les avantages & inconvénients
Les avantages :• Le prix – Gratuit ou très peu cher (compétences en interne)• Les améliorations – Tester rapidement les pages telles que vous les avez conçues, et
pourrez les faire évoluer sans voir les coûts de développement s’envoler
Les inconvénients :• La qualité – Moins abouti que si vous sous-traitiez une agence• Risqué si développé sans CMS – Quid si la personne part ?
Les outils à disposition (CMS ou Systèmes de Gestion de Contenu)
![Page 62: Comment (re)créer le site de son association - 26 novembre 2015](https://reader034.vdocuments.mx/reader034/viewer/2022052419/587c7b4a1a28abd04e8b7f1d/html5/thumbnails/62.jpg)
En résumé …
Quoi qu’il en soit, soyez vigilants sur quelques points :
Propriété du codeLe développeur / l’agence
doit être compétent
Le code vous appartientLe développeur / l’agence doit être
compétent
Le contenu facile à mettre à jour
Le code vous appartient
![Page 63: Comment (re)créer le site de son association - 26 novembre 2015](https://reader034.vdocuments.mx/reader034/viewer/2022052419/587c7b4a1a28abd04e8b7f1d/html5/thumbnails/63.jpg)
Les CMS2
![Page 64: Comment (re)créer le site de son association - 26 novembre 2015](https://reader034.vdocuments.mx/reader034/viewer/2022052419/587c7b4a1a28abd04e8b7f1d/html5/thumbnails/64.jpg)
![Page 65: Comment (re)créer le site de son association - 26 novembre 2015](https://reader034.vdocuments.mx/reader034/viewer/2022052419/587c7b4a1a28abd04e8b7f1d/html5/thumbnails/65.jpg)
Synthèse3
![Page 66: Comment (re)créer le site de son association - 26 novembre 2015](https://reader034.vdocuments.mx/reader034/viewer/2022052419/587c7b4a1a28abd04e8b7f1d/html5/thumbnails/66.jpg)
Un site internet ….
…n’est jamais fini
…doit évoluer en fonction des technologiesexemples : Sites internet développés sous Flash, Google intègre
l’aspect Responsive dans son algorithme.
Il faut donc prendre ces facteurs en compte dans votre budget, et votre choix de développement !
![Page 67: Comment (re)créer le site de son association - 26 novembre 2015](https://reader034.vdocuments.mx/reader034/viewer/2022052419/587c7b4a1a28abd04e8b7f1d/html5/thumbnails/67.jpg)
Pour approfondir
![Page 68: Comment (re)créer le site de son association - 26 novembre 2015](https://reader034.vdocuments.mx/reader034/viewer/2022052419/587c7b4a1a28abd04e8b7f1d/html5/thumbnails/68.jpg)