Découvrir assoconnect Essai gratuit

Comment construire les pages de votre site associatif ?

Vous êtes en train de refondre le site internet de votre association.

Vous avez défini la structure de votre site et collecté le contenu que vous souhaitiez y mettre.

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

Au programme :

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

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

Vos pages doivent être claires ... comme de l’eau de roche. Et pour cela, une bonne hiérarchisation de l’information s’impose.

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.

pages site internet d'association

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

3 modèles performants de pages

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

page de type top down

Page très efficace lorsque vous souhaitez raconter une histoire (storytelling), que vous souhaitez que l’utilisateur balaye rapidement la page jusqu’à ce qu’il passe à l’action en cliquant sur votre bouton en bas de page.

Conseil : Si vous partez sur une telle option, épurez votre contenu au maximum.

Modèle 2 : les pages avec plusieurs options

pages avec plusieurs options

Privilégiez ce genre de structure quand vous laissez à l’utilisateur plusieurs options.

Exemple : vous collectez des dons pour plusieurs projets. Laissez l’utilisateur choisir parmi ces différents projets

Modèle 3 : les pages de type Landing Pages

page de type landing page

Page ayant pour but de pousser l’utilisateur à l’action. Elle est efficace dans le cadre d’une campagne d’adhésion par exemple.

Elle doit contenir certains éléments :

- Le message principal avec un call to action

- Une image/vidéo illustrant votre message principal

- Les avantages liés au passage à l’action

- Les preuves sociales de votre action

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, nous vous conseillons de réaliser des maquettes.

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

Elles permettent de se poser les bonnes questions.

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

Exemple de mockup

C'est une étape primordiale : si vous passez directement au design, chaque modification ou oubli d'éléments vous prendra beaucoup plus de temps !

Les outils pour concevoir vos maquettes

Téléchargez gratuitement le guide complet pour créer le site internet de votre association

Nouveau call-to-action