ATELIER :
COMMENT (RE)CRÉER LE SITE DE SON
ASSOCIATION
Objectifs de l’atelier
• Acquérir une méthodologie pour construire son site
• Avoir les clés pour échanger avec les prestataires
• Connaître les ...
Etape 1 :
Définir ses objectifs et destinataires
Les destinataires potentiels
Etape 2 :
Faire l’état des lieux
Pourquoi changer ?1
Design
Ergonomie
Autonomie
Responsive
Contenu
Ciblage
Test de comptabilité mobile Google
S’inspirer2
Themeforest
Etape 3 :
Construire la structure
Etape 4 :
Construire ses pages
Organiser l’information1
VS
LES OBJECTIFS
Les étapes :
• Déterminer les messages que l’on veut faire passer
• Organiser ces messages
• Les mettre en f...
Cas d’usage : Refonte de la page Tarifs d’AssoConnect
Objectif : Faire comprendre aux utilisateurs nos tarifs, et les invi...
Informations principales Informations secondaires Aller plus loin…
Faire comprendre notre
grille tarifaire :
En une phrase...
Des modèles de pages qui
fonctionnent
2
Les outils pour concevoir vos modèles de pages
Logiciels Mockups Powerpoint Et surtout…
du papier et un crayon
Regardez au...
Le contenu3
Un constat
Steve Krug : « Nous ne lisons pas les pages, nous les scannons. »
• Nous sommes souvent pressés ou n’avons tout...
Restez simple4
Eliminez les sources de confusions inutiles
Evident Nécessite de la réflexion
Partenariat Association à AUVM
Je veux voir ...
L’utilisateur doit trouver intuitivement l’information qu’il cherche
Eliminez les sources de confusion inutiles
Pour cela,...
Ne réinventez pas la roue5
Où afficher les boutons dons ?
Comment gérer le process de dons?
www.croix-rouge.fr/ www.electriciens-sans-frontieres.org/
Les problèmes de police6
Assurez vous que les polices soient faciles à lire.
Taille 14 minimum
2 styles de polices maximum
Gardez une certaine cohé...
Titre : 63 px; Gotham SSm A
La police
Corps : 20 px; Gotham SSm A
Sous-titre : 22 px; Gotham SSm A
Votre boîte à outils
+ GoogleFont, daFont
Les couleurs7
• Evitez l’excès de couleurs (3 couleurs maximum)
• Pour les polices, optez pour une couleur grise sombre / noire
• Choisi...
Votre boîte à outils
+ Palleton.com
Flatuicolopicker.com
Etape 5 :
Prestataires et outils
Les acteurs1
Je soustraite le
développement
Les différentes options pour le développement de son site
Je développe en interne
À une age...
Les agences de communication
500 € / j
de développement
5000 € mini
La création du site
(10-20 pages assez simple avec
for...
Les Freelancers & connaissances
1500 € mini
La création du site
(pour une prestation très simple)
Les chiffres Les avantag...
Développement en interne
Les avantages & inconvénients
Les avantages :
• Le prix – Gratuit ou très peu cher (compétences e...
En résumé …
Quoi qu’il en soit, soyez vigilants sur quelques points :
Propriété du code
Le développeur / l’agence
doit êtr...
Les CMS2
Synthèse3
Un site internet ….
…n’est jamais fini
…doit évoluer en fonction des technologies
exemples : Sites internet développés sou...
Pour approfondir
Comment (re)créer le site de son association - 26 novembre 2015
Comment (re)créer le site de son association - 26 novembre 2015
Comment (re)créer le site de son association - 26 novembre 2015
Comment (re)créer le site de son association - 26 novembre 2015
Comment (re)créer le site de son association - 26 novembre 2015
Comment (re)créer le site de son association - 26 novembre 2015
Comment (re)créer le site de son association - 26 novembre 2015
Comment (re)créer le site de son association - 26 novembre 2015
Comment (re)créer le site de son association - 26 novembre 2015
Comment (re)créer le site de son association - 26 novembre 2015
Comment (re)créer le site de son association - 26 novembre 2015
Comment (re)créer le site de son association - 26 novembre 2015
Comment (re)créer le site de son association - 26 novembre 2015
Comment (re)créer le site de son association - 26 novembre 2015
Comment (re)créer le site de son association - 26 novembre 2015
Comment (re)créer le site de son association - 26 novembre 2015
Comment (re)créer le site de son association - 26 novembre 2015
Comment (re)créer le site de son association - 26 novembre 2015
Comment (re)créer le site de son association - 26 novembre 2015
Comment (re)créer le site de son association - 26 novembre 2015
Comment (re)créer le site de son association - 26 novembre 2015
Comment (re)créer le site de son association - 26 novembre 2015
Comment (re)créer le site de son association - 26 novembre 2015
Prochain SlideShare
Chargement dans…5
×

Comment (re)créer le site de son association - 26 novembre 2015

650 vues

Publié le

Présentation de Pierre Grateau et Bertrand Flaujac, de AssoConnect, rédigée pour l'atelier Webassoc

Publié dans : Internet
0 commentaire
2 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
650
Sur SlideShare
0
Issues des intégrations
0
Intégrations
19
Actions
Partages
0
Téléchargements
17
Commentaires
0
J’aime
2
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Comment (re)créer le site de son association - 26 novembre 2015

  1. 1. ATELIER : COMMENT (RE)CRÉER LE SITE DE SON ASSOCIATION
  2. 2. Objectifs de l’atelier
  3. 3. • 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
  4. 4. Etape 1 : Définir ses objectifs et destinataires
  5. 5. Les destinataires potentiels
  6. 6. Etape 2 : Faire l’état des lieux
  7. 7. Pourquoi changer ?1
  8. 8. Design Ergonomie Autonomie Responsive Contenu Ciblage
  9. 9. Test de comptabilité mobile Google
  10. 10. S’inspirer2
  11. 11. Themeforest
  12. 12. Etape 3 : Construire la structure
  13. 13. Etape 4 : Construire ses pages
  14. 14. Organiser l’information1
  15. 15. VS
  16. 16. 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.
  17. 17. 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.
  18. 18. 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 asso clientes Lever les dernières interrogations des personnes dubitatives sur certains points : Une Foire à Question
  19. 19. Des modèles de pages qui fonctionnent 2
  20. 20. 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
  21. 21. Le contenu3
  22. 22. 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
  23. 23. Restez simple4
  24. 24. 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 ! Hmmm Surement dans la section « s’associer » Je clique Je veux voir les partenariats AUVM en cours ! Hmmm Peut être que ici, mais pas certain… Je vais continuer à chercher ailleurs
  25. 25. 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
  26. 26. Ne réinventez pas la roue5
  27. 27. Où afficher les boutons dons ? Comment gérer le process de dons? www.croix-rouge.fr/ www.electriciens-sans-frontieres.org/
  28. 28. Les problèmes de police6
  29. 29. 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
  30. 30. Titre : 63 px; Gotham SSm A La police Corps : 20 px; Gotham SSm A Sous-titre : 22 px; Gotham SSm A
  31. 31. Votre boîte à outils + GoogleFont, daFont
  32. 32. Les couleurs7
  33. 33. • 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édition En savoir plus sur l’expédition
  34. 34. Votre boîte à outils + Palleton.com Flatuicolopicker.com
  35. 35. Etape 5 : Prestataires et outils
  36. 36. Les acteurs1
  37. 37. 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
  38. 38. Les agences de communication 500 € / j de développement 5000 € mini La 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 »
  39. 39. Les Freelancers & connaissances 1500 € mini La 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
  40. 40. 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)
  41. 41. En résumé … Quoi qu’il en soit, soyez vigilants sur quelques points : Propriété du code Le développeur / l’agence doit être compétent Le code vous appartient Le développeur / l’agence doit être compétent Le contenu facile à mettre à jour Le code vous appartient
  42. 42. Les CMS2
  43. 43. Synthèse3
  44. 44. Un site internet …. …n’est jamais fini …doit évoluer en fonction des technologies exemples : 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 !
  45. 45. Pour approfondir

×