Refonte d'un site internet sur la protection de l'environnement

Endema93.fr

Association d’environnement

Refonte du site internet d'information pour l'association ENDEMA93
Refonte d'un site d'information pour une association de protection de l'environnement ENDEMA93
5/5 pour 32 notes

Notez cette page
Note sur 5
Je sélectionne des étoiles

Votre note a bien été prise en compte, notre équipe vous remercie pour votre collaboration.

Vous avez déjà noté cette page, encore merci pour votre collaboration !

Le projet

Création du site de protection de l'environnement

Avec quelques sites déjà réalisés pour des associations comme www.service-social-breton.org , notre agence web a su aborder le projet de refonte du site de Gagny Environnement consciencieusement, en prenant en compte toutes les demandes des différents membres de l'association.

Ainsi nous avons pris le temps de noter toutes les propositions et remarques au cours de plusieurs rendez-vous. Ceci afin de faire la synthèse des besoins de l'association en vue de définir les orientations et objectifs de la refonte.

Le nouveau site internet de Gagny Environnement qui profite de la refonte pour changer de nom de domaine (ENDEMA93) propose une organisation des articles par thèmes et par villes. Chaque article peut ainsi être ajouté à un thème comme la biodiversité, l'aménagement et l'urbanisme, les nuisances et la pollution... mais aussi dans plusieurs villes, régions, départements et territoires.

Voir le site Endema93

Le haut de page

Menu, recherche, logo

Un menu situé en haut offre un accès rapide aux informations de l'association et aux thèmes. Un moteur de recherche permet de trouver rapidement n'importe quel article du site. Un menu situé au centre, propose un accès facilité aux villes dans le périmètre de l'association. Un module de type carrousel permet de présenter quelques photos panoramiques proposées par les internautes avec le logo de l'association en surimpression.

Partie haute du site internet
Partie haute du site internet

Le bas de page

Partenaires, adhésion, association

Le bas de page reprend le moteur de recherche situé en haut et le complète avec un menu des villes et un menu des thèmes de l'association. Viennent ensuite les informations et liens importants, puis une proposition d'inscription à l'association par un bouton d'adhésion. Enfin des logos de partenaires ainsi que les informations de copyrights et site internet.

Bas de page du site de l'association
Le bas de page du site de l'association dispose d'un moteur de recherche par thèmes et villes, d'un espace partenaires, etc.

La page d'accueil

Agenda, actualité par villes, dossiers thématiques

La page d'accueil regroupe les derniers articles de l'association avec un article à la une, puis une série d'articles par ordre de dates. Des menus situés sur la droite offrent un accès rapide aux thèmes ainsi qu'aux villes, régions et territoires. Un agenda permet de partager des articles importants avec d'autres associations.

Voir la page d'accueil

Les thèmes

Biodiversité, nature, pollution

Les articles sont organisés par rubriques et sous-rubriques comme Biodiversité et nature avec en sous-rubriques : espaces naturels et jardins. La rubrique est composée d'un grand visuel sur le thème de la biodiversité puis de la liste des sous-rubriques avec visuel, nom et résumé. Le clic sur une sous-rubrique, permet de naviguer vers celle-ci et d'afficher les articles par ordre croissant.

Dossiers thématiques

Les articles

Détail d'article, galerie, documents

Chaque article est composé d'un titre, d'un sous-titre, d'un visuel et d'un descriptif libre.

En complément peuvent être ajoutée ou non :

  • Des documents associés
  • Des galeries de photos ou vidéos
  • Un agenda d'événements à venir
  • Des articles associés, les plus lus, les plus vus, du même auteur ou les plus récents

Détail d'un article

Les villes

Gagny, Le Raincy, Montfermeil

L'objectif des pages villes est de permettre de retrouver les articles de l'association correspondant à une ville en particulier. Les pages villes sont constituées des derniers articles classés dans une ville et en complément des articles associés sur la colonne de droite, avec les plus lus, les plus vus, les plus récents ou encore l'agenda.

Les pages villes

Les pages de présentation

L'association, adhésion, contact

Les autres pages utilisent un modèle identique qui offre une présentation personnalisée suivant les options ajoutées par l'utilisateur. Il est ainsi possible d'afficher une ou plusieurs galeries de documents, de photos et de vidéos, d'ajouter un agenda et des articles associés.

La page de contact avec formulaire

La page de contact propose aux utilisateurs de faire des demandes de renseignements par l'intermédiaire d'un formulaire. Un message de confirmation personnalisé est envoyé à l'utilisateur une fois la demande effectuée et permet l'abonnement à l'association avec un document joint au message.

Exemple de page en ligne

Briefing de projet
Le briefing de projet est un document qui défini les orientations globales du projet avant de lancer la production.

Etablir ensemble les objectifs du projet

Définition de projet

Avant de lancer la production d'un site d'information, le briefing de projet nous permet de comprendre les attentes des membres de l'association et d'analyser les différentes options possibles ainsi que la meilleure approche en terme de communication.

Le briefing permet de fixer les objectifs du client, les orientations graphiques ainsi que de définir les utilisateurs potentiels du site. Il permet de garantir la bonne marche du projet.

Plan du site d'information

S'agissant d'un site d'information sur l'environnement et avec beaucoup d'articles classés par rubriques, nous avons réalisé un plan simplifié avec la liste des modèles des pages à prévoir, ainsi que les différents éléments qui les composent.

En savoir plus

Organigramme de site
Un organigramme de site internet pour une vue d'ensemble des pages web.
Maquette pour site web
Explorer des possibilités de mise en page afin de déterminer la meilleure configuration possible pour un site internet.

Concevoir et imaginer les différentes formes du projet

Structure et prototype

Pour gagner du temps lors de la phase de production graphique, il est indispensable de passer par une étape de mise en page. Ceci est encore plus vrai avec les contraintes du responsive design. Cette étape permet de tester les différentes mises en page possibles pour chacune des pages modèles du site d'information.

Pour le site d'information de l'association, nous avons travaillé à la conception de maquettes facilitant la lecture de l'information dans une approche de type journaliste pour la page d'accueil et les pages villes. L'ensemble de l'organisation des pages du site est par ailleurs simplifié suivant les contraintes du responsive design qui permet d'être visible sur tous les types d'écrans.

En savoir plus

Dessiner et mettre en image le projet

Conception graphique

Pour la conception graphique, il s'agissait de proposer un graphisme sobre pour favoriser la lecture des articles et augmenter la visibilité des visuels. Ainsi utilisant des couleurs propres à l'environnement comme le vert, le blanc, le marron et le jaune, un graphisme discret pour faciliter la lecture, l'interface graphique correspond exactement aux attentes des membres de l'association. Il sera ensuite possible d'ajouter un grand visuel de fond de page pour mettre plus en valeur les pages et donner un effet de perspective.

Après avoir dessiné toutes les pages modèles dans Adobe Photoshop® et décliné le graphisme pour mobile et tablette, la création graphique est terminée et le développement est lancé.

En savoir plus

Interface graphique
La conception d'interface graphique pour une expérience intuitive chez les utilisateurs.

Produire et donner vie au projet

Production et intégration

L'utilisation du HTML5 facilite le développement des pages grâce aux nouvelles balises qui permettent de mieux structurer le code et de gagner en lisibilité. Le CSS3 avec les Média Queries facilite la déclinaison du site en version tablette et smartphone. Pour donner au site un aspect plus dynamique, lors des passages en version responsive, nous avons ajouté quelques codes CSS. Le formulaire de contact et d'adhésion à l'association a été modifié pour une meilleure expérience utilisateur avec l'utilisation d'Ajax.

Le développement dynamique

Après avoir terminé toutes les pages modèles du site, nous avons ajouté le codage PHP pour rendre le site dynamique et faciliter la mise à jour des pages à l'aide du CMS Olloweb.

Adapter la solution de gestion du site

Production CMS

Les fonctions ajouter, modifier ou supprimer des éléments du site se réalise avec une solution de gestion de site dynamique (CMS). Développé en interne depuis de nombreuses années, celle-ci a été adapté au projet afin que les différents modules développés côté client puissent fonctionner convenablement. Nous avons aussi adapté la base de données en conséquence. Une fois le site mis en ligne, nous avons formé les utilisateurs pour la prise en mains de la solution de gestion.

La validation du projet

Avant de procéder à l'ouverture du site, Olloweb lance une vérification complète du site internet afin de garantir le codage. Le site d'information une fois validé est garanti pour une durée de deux ans. Cette garantie couvre les bugs éventuels et les mises à jour des navigateurs.

Les statistiques
Suivre une action en image par l'intermédiaire de statistiques aussi riches que possibles.

Mesurer et analyser la réussite du projet

Référencement et statistiques

Pour obtenir des statistiques de fréquentation du site, nous procédons à l'installation de module Google ou Piwik. Un plan de l'ensemble des pages web du site est rendu disponible en ligne et ajouté dynamiquement pour Google et les autres moteurs de recherche. Par ailleurs l'hébergement OVH propose des statistiques fiables avec l'analyse des logs du site.

En savoir plus

Coordonner les différentes phases du projet

Conduire et réaliser

La conduite du projet, le prototypage, la conception graphique, la réalisation technique et le CMS ont été réalisés au sein de l’agence Olloweb.

Galerie de conception

Refonte d'un site internet sur la protection de l'environnement

Diaporama

Conception graphique de la page d'accueil de l'association

Conception graphique de la page d'accueil du site de l'association

Refonte site internet association

Conception graphique de la page des rubriques de l'association

Refonte site internet association

Conception graphique de la page rubrique du site de l'association

Refonte site internet association

Conception graphique des sous-rubriques du site de l'assocation

Refonte site internet association

Conception graphique de la page article du site de l'association

Création graphique des pages villes du site de l'association

Création graphique des pages villes du site de l'association

Refonte site internet association

Conception graphique des pages de présentation

Refonte site internet association

Maquette N1 de la page d'accueil du site de l'association

Refonte site internet association

Maquette N2 de la page d'accueil du site de l'association

Refonte site internet association

Maquette N3 de la page d'accueil du site de l'association

Refonte site internet association

Maquette de la page des rubriques du site de l'association

Refonte site internet association

Maquette de la page rubrique du site de l'association

Refonte site internet association

Maquette des sous-rubriques du site de l'association

Refonte site internet association

Maquette de la page article du site de l'association

Refonte site internet association

Maquette des pages villes du site de l'association

Refonte site internet association

Maquette des pages de présentation du site de l'association

La page d'accueil du site de l'association avant refonte

La page d'accueil du site de l'association avant refonte

Solution et tarif

La refonte de votre site d’information dynamique et sur-mesure pour gagner en visibilité en simplicité et le rendre compatible sur la plupart des nouveaux écrans.

Refonte de site d'information sur-mesure
OFFRE PRO

Refonte de site internet d'information sur-mesure

Lancez la refonte de votre site internet d'information pour une nouvelle présentation des articles, une interface graphique plus simple et compatible avec les nouveaux formats d'écrans. Profitez de la refonte pour réorganiser vos rubriques et augmenter votre visibilité sur le web.

L'offre de refonte de site internet d'information sur-mesure

à partir de 7 550 €HT
TVA : env. 1 510 €

Notre équipe peut vous aider pour votre projet.
Prenez rendez-vous dès maintenant ou appelez le 01 60 08 05 11

Appelez-moi / Nous contacter

Indiquez votre nom
Indiquer votre prénom
Indiquer votre numéro de téléphone
Indiquer votre adresse email (utilisateur@domaine.com)
Indiquer le contenu de votre message
Je souhaite être appelé
J'indique une date de rendez-vous
Je sélectionne une heure de rendez-vous

*Champs obligatoire
Conformément à la loi informatique, aux fichiers et aux libertés n°78-17 du 6 janvier 1978, vous disposez d'un droit d'accès et de rectification relatif à toutes informations vous concernant sur simple demande à notre adresse.

Votre de demande de renseignements a bien été prise en compte,
notre équipe y répondra dans les plus bref délais.

  • Un projet ?
  • Faites-vous rappeler par téléphone
Indiquez votre nom
Indiquez votre prénom
Indiquez votre numéro de téléphone
Indiquez votre adresse email (utilisateur@domaine.com)
Indiquez le contenu de votre message

*Champs obligatoires
» Demande de devis

Votre demande de renseignements a bien été prise en compte,
notre équipe y répondra dans les plus brefs délais.