Etude et analyse du site web la fondation Hulot

J’ai choisi d’analyser avec vous le site web de la Fondation Nicolas Hulot parce qu’il présente beaucoup d’intérêt : c’est un site bien construit, très ergonomique, une navigation est simple et claire avec une parfaite hiérarchisation des contenus.


Cibles

Toute personne souhaitant soutenir la fondation, ou étant sensible à la protection de l’environnement est visée. Le public est donc très large et peut correspondre à n’importe quelle tranche d’âge (10-90 ans). Les différents moyens de mise à disposition de l’information permettent à chacun de trouver son compte; selon si l’on préfère la vidéo, les articles, l’audio (pour les malvoyants) etc.

Objectifs

La fondation veut avant tout sensibiliser au respect de la nature et informer sur les gestes écocitoyens.
Il s’agit dans un premier temps d’informer, de sensibiliser au respect de la nature et de « faire prendre conscience » de l’importance d’agir dans la protection de l’environnement.
En deuxième temps l’internaute est appelé à « agir » avec la fondation (sous forme d’aide financière, de participation aux actions d’informations, de popularisation de ses campagnes).

Site Informatif : Apporter des informations, conseils et astuces et une richesse de contenus.
Le site clair et aéré, la taille de la police sur fond blanc apporte ue clarté de l’imformation et un grand confort de lecture, accessible au plus grand nombre. Une grande partie du site est consacré aux actualités afinse tenir informé des dernières nouveautés au sujet de la fondation et de l’environnement.

Site incitatif :
C’est un site qui à la volonté de transformer le visiteur en acteur prêt à s’engager ou faire un don. Les choix typographiques eux-même renforcent l’appel à l’action.
L’interface permet une grande interactivité et des échanges entre les internautes (possibilité de publier du contenu, faire partager une nouvelle, poser des questions …).

Design du site

Le parti pris a été de s’orienter vers un retour à l’essentiel et à l’épure. Le site désire véhiculer son message :

le temps des discours est révolu, il faut désormais passer à l’acte et agir concrètement.

Un site épuré, des infos directs, une priorité donc à des contenus porteurs de sens, simples et clairs.
On y trouve très peu d’images, ou seulement des images pour argumenter le discours et des titres et des phrases d’accroches simples et courtes.

Le site web se construit dans une forme plutôt classique en 3 colonnes qui donne un caractère construit et solide de l’ensemble.
Les couleurs et le caractère très graphique des typographies donnent au site un caractère “naïf”.

Identité visuelle

le logo est un traitement presque uniquement typographique : une construction simple autour des 9 mots qui composent le nom de la Fondation. En résulte un bloc unitaire, tel un manifeste : impactant, charismatique et rythmé. L’œil-planète, symbole fort de sens, issu de la précédente l’identité, fait partie intégrante de ce bloc identitaire. Outre la construction, la nouveauté réside dans le dessin de la typographie qui a été créé spécifiquement pour la Fondation. Les formes des lettres sont à la fois rondes, minérales, naturelles, mais dans le même temps solides, affirmées et structurées. L’idée était de développer une personnalité originale pour la Fondation qui devient propriétaire de son langage de marque. La police sert à composer les principaux éléments de contenus des supports de communication et devient véritablement la substance identitaire de la Fondation. « Au-delà du simple «logo», la Fondation possède maintenant une signature typographique », explique Grégori Vincens, associé chez 4uatre.
Couleurs
En ce qui concerne les couleurs, celles-ci sont plutôt « flashy » et créent un contraste assez élevé au niveau de l’interface. La plupart des teintes rappellent la nature telles que le vert, l’orange, le marron … (couleurs également présentes dans la frise du bas).

Technologies

Au niveau technique, le site regorge de petites astuces.

. Prédominance de l’audio

Sur toutes les pages internes, une bande sonore est disposée à chaque début de paragraphe. Cela permet aux personnes malvoyantes de profiter du contenu des articles.

Aussi ces bandes sons attestent de l’importance de l’identité sonore rattachée à la fondation comme un appel à la responsabilité de chacun.

etude conception site web

. Décompte du nombre des engagés en temps réel

On peut également consulter en temps réel sur le site l’évolution du nombre d’engagés pour la fondation, grâce à un cadran, placé en haut à droite et qui reste présent sur toutes les pages.

etude analyse site web

A chaque nouvel inscrit celui-ci se modifie.

. Des vidéos sont mises à la disposition des internautes.

. Pop-up d’ouverture

Un flash info, pop up, dès l’ouverture du site nous invite à visionner la vidéo de Nicolas Hulot : devenez éco-acteur.

.Accès rapide

Une barre de recherche située en haut de l’écran facilite la navigation et la rapidité d’accès à l’information.

La communauté

Le site laisse également une grande place à sa communauté, composée de personnes inscrites en ligne.

Les langages utilisés sont : l’ HTML et Java Script.

Le langage Java Script permet aux internautes de s’inscrire en ligne et de se créer un profil type Facebook. Ils peuvent ensuite intérargir sur la plateforme et partager des idées, des conseils, des commentaires etc. C’est un lieu d’échange et de partage.

L’internaute a la possibilité de poster des informations ou des vidéos via son mur.

Pour se tenir informé des dernières nouvelles, il existe :

- un blog,constitué d’interviews d’auteurs, de posts publiés part les membres de la communauté etc.

- une newsletter

- des flux RSS

Zoning :Structures des pages

Structure de la home page

etude analyse site web

1er élément : la navigation principale

Le premier élément en partant du haut est la navigation principale du site, à l’horizontal composé de trois rubriques uniquement et un bouton mis particulièrement en avant « je fais un don ». Dans le même alignement à droite reste présent le champ de recherche rapide. La typographie choisie pour les rubriques principales reprend celle du logo et ont une chacune couleur différente. On peut aussi s’apercevoir que la navigation contient des sous-rubriques, accessibles au roll et qui reprennent le code coloriel de la rubrique à laquelle elles appartiennent. C’est une navigation très simple, ne comprend que 2 niveaux de profondeur (rubrique principale – sous-rubriques)

La page d’accueil ( home page du site) est structurée ensuite en trois colonnes :

Colonne de gauche

LA FONDATION

Espace  » Insititutionnel  » dédié au informations strictement relatives à la fondation

Il rassemble tout ce qui (re)présente la fondation : son logo, qui ils sont, ce qu’ils font et où les (re)trouver.

- le logo

-2 entrées mises en avant qui sommes-nous ? et que faisons-nous ? qui sont les premières sous-rubriques de « la fondation » et « nos actions ». Elles reprennent toutes deux la couleur de la catégorie auxquelles elles appartiennent.

3- un bloc sur « nos thématiques »

4- un bloc « nous retrouver »

Colonne centrale

NOS ACTIONS

Espace actualités dédié aux mises en avant, actions et évenemnts :


1er bloc de mises en avant en premier et le plus visible, centrée sur les actions et l’actu de la fondation, rencontres, etc

2e bloc actualités plus générales, pas forcement directement liées à la fondation mais sur des sujets la concernant.

3e projet à l’honneur. Mise en exergue de projet, d’initiatives, réalisations, sous la forme d’une Web TV.

Colonne de droite

JE M’ENGAGE

Espace « relationnel », dédié au visiteur du site, lui permettant de se l’approprier.

Il regroupe tout ce qui concerne la communauté : la rejoindre, y agir, la soutenir, s’abonner à sa newsletter, d’accéder au blog, de lire les actus à leur sujet, les evenement de la communauté…

A noter : l’accès à l’espace personnel aurait naturellement dû être placé de ce coté afin de respecter la logique général due l’architecture du site.

On remarquera la couleur reprise de la catégorie « je m’engage » pour je m’informe, j’agis, je relaie, je soutiens la fnh.

Structure des pages internes du site

Lorsqu’on entre à l’intérieur du site, voici la structure des pages web internes. On retrouve la colonne de gauche, la colonne centrale.

la colonne droite n’est plus là pour laisser plus de place au contenu mais elle n’a pas disparu comme par magie !

On retrouve toutes les rubriques de la colonne de droite dans le menu du haut  » je m’engage ».



La colonne de gauche

- le logo

-navigation secondaire

On retrouve le titre de la principale rubrique où l’on a cliqué. (non cliquable)

En-dessous les sous-rubriques avec activée celle sur laquelle nous avons cliquée.

> Je peux facilement visiter toutes mes sous-rubriques à l’aide de cette colonne de gauche.

La colonne centrale

Dans la colonne centrale se trouve le contenu de ma page avec la dominante couleur de ma catégorie. Ici « Qui sommes-nous ? » qui est la sous-rubriques de « la Fondation »

couleur dominante : orange.

Pour conclure je dirais que ce site est très interactif, ludique et ergonomique et d’une grande richesse d’informations.
Le site rempli ses objectifs en plaçant l’humain (l’internaute) comme acteur et non comme spectateur. Le design très réussi très colorés se veut plutôt geai, encourageant et optimiste à l’image du discours qu’il véhicule.
Le site s’inscrit tout à fait dans la logique du web 2.0, c’est-à-dire le web social, grâce à ses multiples moyens d’interaction.

Le site web en quelques chiffres :

Conception, réalisation du site internet de la fondation par l’agence PUBLICIS MODEM FRANCE de Paris, spécialisée dans le marketing digital. Site web : http://www.publicis-modem.fr
Création du logo de la fondation par l’agence 4uatre à Paris, site web : http://www.4uatre.fr/
> A voir aussi le site http://www.pfg.fr, site web bien aéré, bien construit où l’on retrouve cette même idée de codes coloriels, sous-navigation très intuitive et un design de qualité.

arborescence internet

Cet article vous a plu ?

N’hésitez pas à partager notre page facebook pour suivre nos nouveaux posts et astuces…

« retour aux articles web design

Comments (1)

Comments are closed.

Billets

Pages

Plugin par dagondesign.com