Newsletter AssoConnect
Recevez chaque mercredi matin nos infos et astuces pour gérer votre association
construire pages site internet

Comment construire les pages de votre site associatif ?

Bertrand

Vous êtes en train créer le site internet de votre association, vous avez défini la structure de votre site et collecté le contenu que vous souhaitiez y mettre ? Avant toute chose, félicitations !

Maintenant, nous allons maintenant voir comment structurer vos pages pour que votre contenu soit mis en valeur.

Il existe en effet quelques règles et bonnes pratiques pour créer des pages de site internet efficaces. Le but ? Renvoyer une bonne impression de votre association, permettre aux visiteurs de trouver facilement ce qu’ils cherchent et leur faire passer vos principaux messages.

Pour cela, nous avons découpé cet article en quatre parties :

Prêt ? Allez, suivez-nous !

storage?id=596922&type=picture&secret=kL7n4oHUOHiJy46aFK9TcsT5vDNAbXHGUEheo2QZ&timestamp=1556531441

La règle d'or : hiérarchisez l’information !

Avant toute chose, il faut déterminer la structure de votre site internet. Vos pages doivent être claires... comme de l’eau de roche. Et pour cela, une bonne hiérarchisation de l’information s’impose, en accord, bien sûr avec les objectifs de votre site internet

Respectez une "hiérarchie visuelle" sur l’ensemble de vos pages : sur votre page, vous souhaitez que les utilisateurs voient certaines informations en premier, puis d’autres dans un second temps. 

Il y a encore d’autres informations qui sont moins importantes, mais nécessaires pour les personnes souhaitant aller plus loin. C'est pour cela que lister le contenu du site internet de votre association peut vous être utile.

Etape 1 : Listez les blocs de contenu de la page

Sans aucune hiérarchisation, voici pêle-mêle les blocs de contenus :

    • Bouton permettant d’accéder au paiement,
    • Laïus sur les bénéfices de l’adhésion pour l’adhérent,
    • Formules d’adhésions possibles,
    • Témoignage d’un adhérent,
    • Liste de quelques personnes déjà adhérentes,
    • Information sur la sécurité des transactions,
    • Rubrique "En savoir plus"
    • Phrase d’accroche sur les adhésions.

Etape 2 : Triez les informations listées

Informations principales :

    • Bouton permettant d’accéder au paiement,
    • Formules d’adhésions possibles,
    • Phrase d’accroche sur les adhésions.

Informations secondaires :

    • Liste de quelques personnes déjà adhérentes,
    • Témoignage d’un adhérent,
    • Laïus sur les bénéfices de l’adhésion pour l’adhérent.

Informations "Aller plus loin" :

    • Information sur la sécurité des transactions,
    • Rubrique "En savoir plus" (nous contacter, voir l’actualité des adhérents, etc.)

Etape 3 : Mettez en forme

En arrivant sur la page, la première chose qui doit apparaître est un titre expliquant où le visiteur se trouve, accompagné d’un bouton de call-to-action (CTA). Le CTA renvoie à l’action principale que vous voulez que vos visiteurs fassent.

Dans notre exemple d’une page d’adhésion, le titre peut donc être par exemple "Adhérez à l’association" et le CTA peut indiquer "J’adhère".

En descendant, les informations suivantes peuvent être le "Pourquoi adhérer" avec quelques explications et éventuellement des témoignages.

Enfin, si le visiteur n’a pas eu suffisamment d’éléments pour vous convaincre, un nouveau bouton renvoyant vers "Plus d’informations" peut être ajouté.

En trois étapes simples, vous avez créé une page efficace !

storage?id=596923&type=picture&secret=uhrErMR30tWi4hpPthgKp9BAZE7F6icP26eWPwMc&timestamp=1556531484

3 modèles performants de pages web

Maintenant que vous avez compris le principe, allons encore plus loin ! Dans cette partie, nous vous montrons trois modèles de pages d'organisation de site internet vous permettant de bien trier vos informations et de mieux les hiérarchiser.

Modèle 1 : les pages de type "top-down"

page de type top down

Les pages dites "top-down", littéralement "de haut en bas", s’avèrent redoutables lorsque vous souhaitez raconter une histoire (en communication, on parle souvent de "storytelling").

Pour suivre la suite de l’histoire, vous souhaitez que l’utilisateur balaye rapidement la page vers le bas jusqu’à ce qu’il passe à l’action en cliquant sur votre bouton situé en bas de page.

Conseil : Si vous partez sur une telle option, épurez votre contenu au maximum pour encourager le scroll, c’est-à-dire l’action de glisser vers le bas.

Modèle 2 : les pages avec plusieurs options

pages avec plusieurs options

Ce genre de structure est à privilégier quand vous souhaitez proposer plusieurs options à un utilisateur.

Cela fonctionne par exemple très bien si vous collectez des dons pour plusieurs projets et que vous voulez laisser l’utilisateur choisir parmi ces différents projets.

Dans ce cas, étant donné qu’un choix est laissé au visiteur de la page, vous pouvez placer un bouton d’appel à l’action sur chaque option.

Modèle 3 : les pages de type Landing Pages

page de type landing page

Les landing pages, ou “pages de destination” en bon français, ont pour but de présenter de l’information, mais surtout de pousser l’utilisateur à l’action.

Pour les associations, ce type de page est par exemple très efficace dans le cadre d’une campagne d’adhésion.

Parmi les éléments que doit contenir une landing page :

    • Le message principal avec un bouton de "call-to-action",
    • Une image ou vidéo illustrant votre message principal,
    • Les avantages liés au passage à l’action,
    • Les preuves sociales de votre action, il s’agit généralement d’exemples concrets ou de témoignages qui permettent de s’identifier à la situation.storage?id=596926&type=picture&secret=DVLVNCeGR2tqgy7xFnT2EqIVq7hgVnvAZAX98Hld&timestamp=1556531541

Les maquettes ("mock-up") : un outil pour hiérarchiser l’information de vos pages

Pour bien concevoir vos pages, il est vivement conseillé de réaliser des maquettes au préalable.

Les maquettes fonctionnelles représentent de façon visuelle les éléments qui sont sur une page (titre, images, vidéos, textes, boutons, etc.), leurs emplacements et leurs tailles.

Elles permettent de mieux visualiser le rendu des informations sur la page et de se poser les bonnes questions.

Les maquettes n'ont pas besoin d'être parfaites ou très soignées, elles sont davantage des bases de discussion avec votre équipe et un moyen très flexible de tester différents agencements de pages.

Exemple de mockup

Il s’agit d’une étape primordiale : si vous passez directement au design de votre site internet, chaque modification ou oubli d'éléments vous prendra par la suite beaucoup plus de temps !

outils-maquettes

La boîte à outils pour concevoir des maquettes

Avec un peu d’imagination, vous pouvez réaliser vos plans de pages avec à peu près tous les outils.

Vous pouvez utiliser PowerPoint, un outil certes basique mais qui peut convenir à de nombreux besoins, sa facilité d’utilisation et le fait que vous soyez sûrement déjà familier avec le logiciel est un réel avantage.

Vous pouvez également utiliser des logiciels de mockups, spécialisés dans la conception de pages internet. Parmi eux, vous avez par exemple :

    • Balsamiq, un outil très performant mais payant (à partir de 9€/mois ou 90€/an) et en anglais,
    • Cacoo, un outil français qui propose une formule complètement gratuite,
    • Mockflow, un outil gratuit mais uniquement disponible en anglais.

Enfin, vous pouvez aussi choisir tout simplement de créer vos maquettes… sur papier ! Un bon vieux crayon et un carnet sont aussi des outils simples permettant d’organiser une page web de manière efficace. Une méthode d’ailleurs souvent utilisée par les designers pour gagner du temps sur leurs premières maquettes.

bases-pages-site-internet-association

Vous avez maintenant toutes les bases pour vous lancer sur vos projets de création ou de refonte de votre site internet.

En retenant les principaux conseils de cet article, et en le complétant avec notre guide téléchargeable ci-dessous, nous sommes convaincus que le résultat ne peut être qu’excellent. Il n’y a plus qu’à vous lancer, à vous de jouer maintenant !

Bertrand
Articles recommandés
ComptabilitéOutils

Choisir son logiciel de comptabilité pour association : 7 critères

7 min
Antoine
GestionVie associative

Association et COVID : 10 ressources utiles pour vous adapter

3 min
Claire
Paiement en ligne

Paiement En Ligne pour Association : 6 Avantages

7 min
Corinne
  • Recherches fréquentes
  • Logiciel club de Football
  • Logiciel club de Basket
  • Logiciel club de Danse
  • Logiciel club de Judo
  • Logiciel club de Tennis
  • Solution associations
  • Solution de paiement en ligne pour association
  • Intranet pour association
  • ERP pour association
  • CRM pour association
  • Logiciel Association Gratuit
  • Logiciel Comptabilité Gratuit
  • Site Internet Gratuit
  • Ressources
  • Blog AssoConnect FR
  • Blog AssoConnect US
  • Formations pour association
  • Guides gratuits pour associations
  • OpenAsso
  • Newsletter d'AssoConnect
  • Entreprise
  • Qui sommes-nous ?
  • Notre engagement
  • L'équipe AssoConnect
  • AssoConnect Recrute
  • Page Presse
  • Contacter AssoConnect
  • Nous aider
  • Partenaires d'AssoConnect
  • Partenariats avec AssoConnect
  • Foire Aux Questions
  • Recherches fréquentes
  • Solution associations
  • Ressources
  • Entreprise

AssoConnect est conçu avec 💙 à ParisMentions légalesCGUVCGVPSPolitique de ConfidentialitéParamétrer les cookies