Présentation 1 : Design WEB CREDO

Présentation du site webwww.cercle-credo.com

Contact : Marion Durantin / Société Deesign it - 06 81 56 70 30 - [email protected]

MENU > Homepage

2 Contact : Marion Durantin / Société Deesign it - 06 81 56 70 30 - [email protected]

Un graphisme hors du commun

Dans un souci d’homogénéisation de la charte graphique CREDO, j’ai décliné la communication installée lors de la création de la plaquette «Obser-vatoire des bonnes pratiques». C’est un ensemble cohérent avec un background qui dévoile un fond de fibre optique tout en restant suggestif.

Le vert monochrome : couleur punchy qui colle avec le noir. Comment ne pas évoquer le vert comme étant la couleur par excellence de l’écologie, la fibre étant un véritable atout pour le développement durable.

Sombre tout en étant classieuxAmbiance sobre pour que la fibre de couleur ressorte bien.

L’écran d’accueil est divisé en 5 parties :

> HEADER : logotype et accroche du CREDO

> MENU : reprise des 5 grands thèmes à aborder tout au long du site. Le moteur de recherche situé en haut à droite du menu est un autre chemin pour accéder directement à l’information souhaitée.

> SLIDER : 5 slides max. consacrés aux sujets d’actualités sur lesquels vous souhaitez communiquer.

> ENTRÉES : 3 entrées principales pour accéder directement aux dossiers les plus importants du site.

> FOOTER : diffusion de manière aléatoire des logos des membres + copyrights.

Une page d’accueil efficace

Premier contact avec le site web, la page d’accueil a une importance particulière. Elle a bénéficié d’un travail sur l’ergonomie et sur la terminologie des menus.

HE

AD

ER

ME

NU

SLI

DE

RE

NTR

ÉE

SFO

OTE

R

http://deesign-it.com/FTP/CREDO/0-accueil-2.jpg

MENU > Homepage

3Contact : Marion Durantin / Société Deesign it - 06 81 56 70 30 - [email protected]

Chaque SLIDE change au clic sur les flèches aux extrémités ou selon une durée déterminée. Ils permettent de mettre en avant un événement, un nouveau document à télécharger, un nouveau membre entrant, une nouvelle étape du BUS, etc...

Composition SLIDE :

Sur chaque slide on retrouve un bouton call-to-action « En savoir + ». Il incite l’internaute à cliquer sur le lien pour voir le contenu complet de l’article.

2/3visuel

1/3texte

http://deesign-it.com/FTP/CREDO/slide-1.jpg





MENU > Homepage


3 ENTRÉES :

> 3 couleurs pour bien dissocier les 3 parties Événements / Documents / Membres. Cela permet de dynamiser la page d’accueil (voir fig. 1)

OU

> 1 couleur unique (voir fig. 2 & 3) pour ne pas créer la confusion avec le code couleur installé dans la rubrique Événements (voir dans la suite du document).

On retrouve le code couleur évoqué plus haut dans les SLIDES défilantes (cf congrès, Jeudis de la Fibre).

1

32




MENU > Présentation


Sous-menu :

> Cercle CREDO > Objectifs > Fonctionnement > Charte > Statut et administration

Contenu gauche : ici on retrouve un texte de pré-sentation en pleine page (déclinable pour chaque sous-menu) agrémenté de photos, images, graphiques en rapport avec la fibre pour compléter et illustrer le texte (contenu beaucoup plus digeste pour le lecteur).

Sidebar droit : l’idée ici est d’intégrer une partie fixe qu’on retrouve sur chaque sous-menu de la partie Présentation où on évoque les chiffres clés de l’association et peut être un mapping pour situer les lieux forts du CREDO.

MENU > Présentation

Une arborescence simplifiéeUn important travail a été mené pour simplifier l’arborescence. L’internaute accède ainsi à l’informa-tion souhaitée en 3 clics maximum.

Tous les menus verticaux existants dans l’ancien site ont été supprimé au profit de sous-menu dans le menu principal horizontal.

SID

EB

AR

DR

OIT

http://deesign-it.com/FTP/CREDO/4-presentation-1.jpg

http://deesign-it.com/FTP/CREDO/4-presentation-2.jpg

MENU > Événements


MENU > Événements :

Sous-menu :

> Actualités / Nos actions > [ Calendrier ] > [ Nos actions ]

Changement menu principal [ Événements ]Proposition de renommer le Menu «Événements» en «Actualités» ou «Nos actions», terme qui cor-respondent plus au contenu réel et plus explicites pour les internautes.

Suppression [ Calendrier ]Proposition de supprimer ce menu au profit d’un autre fonctionnement qui sera visible dans les pages suivantes (cf page 7).

Actualités / Nos actionsProposition de regrouper nos «Actualités» et «Nos actions» car il y a répétition.

http://deesign-it.com/FTP/CREDO/menu-2.jpg

MENU > Événements



Ici lorsqu’on clique sur Nos actions ou Actualité dans le menu principal horizontal, on accède directement à un récapitulatif de toutes les actions possibles.

Mise en place d’un code couleur pour chaque thé-matique de manière à ce que l’internaute puisse se repérer en quelques secondes et en un clin d’œil.

Sidebar droit : l’idée ici est de conserver en perma-nence cette partie de manière à ce qu’à tout moment l’utilisateur - conquit par le contenu du site - puisse s’inscrire à la Newsletter ou connaître les dernières actualités et ce quel que soit la rubrique ou la page consultée.

Les actualités traitées sont les 3-4 derniers évé-nements du moment ou les plus importants : une info incontournable, une suggestion d’intérêt, un coup de cœur, etc... Ils peuvent être les mêmes que les SLIDES d’accueil.

SID

EB

AR

DR

OIT

http://deesign-it.com/FTP/CREDO/5-actions-1.jpg

MENU > Événements



Lorsqu’on clique sur une bannière blanche, la flèche grise se développe et laisse apparaître le contenu.

On y découvre le descriptif de la rubrique ainsi que les différentes dates d’action.

Lorsqu’on clique sur une date, le contenu se déploie une nouvelle fois pour laisser place à la description de l’événement et ainsi de suite. Possibilité d’insérer un lien qui permet d’accéder directement au formu-laire d’inscription.

2 en 1De cette manière on regroupe l’ancienne rubrique «Nos actions» - qui proposait un texte explicatif des 5 actions possibles - à l’ancienne rubrique «Actualités» renommé en «Nos actions» ou «Actualités».

De cette manière on filtre le type d’actualités qui nous intéresse (ici forums), on nous explique de quoi il s’agit et ensuite on nous propose des dates d’événements du récent au moins récent.

Sidebar droit : toujours présent tout au long de la navigation.


MENU > Événements



Comme évoqué dans le brief, création d’une nouvelle catégorie dans Nos actions pour suivre le Bus en temps réels.

C’est un principe de graphisme, il s’adaptera bien entendu selon le contenu texte et photo que vous aurez fournis.


MENU > À télécharger


Sous-menu :

> Guide CREDO > Les Jeudis de la fibre > Forums > White paper > Plaquette CREDO > Comment adhérer

Espace de téléchargement :

Proposition de renommer le menu existant intitulé « Documents » par « À télécharger » car toutes les pages à consulter sont toutes à télécharger.

Call-to-action ou appel à l’action : Terme « À télécharger » interpelle plus et incite plus à l’action.

ex : ici lorsqu’on clique sur la quatrième barre blanche ou sur le triangle gris, le contenu se développe au clique et se replie au second clique.

Apparaît le contenu composé de la description du document, de dates, de l’auteur, de la taille du document, du bouton de téléchargement, du bouton d’achat, etc...

http://deesign-it.com/FTP/CREDO/6-documents-2.jpg

MENU > Nos membres


Sous-menu :

> Liste des membres > Nous rejoindre

Liste des membres :

Ici on regroupe le texte existant ainsi que la liste des membres filtrable par ordre alphabétique ou par métiers. Il faut cliquer sur la lettre pour que chaque partie s’affiche. Cela évite le scrolling et donc que la page de membre soit trop longue. (voir fig. 1 et 2).

Même système pour le filtre par membre si vous souhaitez le conserver.

Nous rejoindre :

Le texte et le lien se retrouve à la suite des logos des membres.

fig. 1 et 2

http://deesign-it.com/FTP/CREDO/7-membres-1.jpg

http://deesign-it.com/FTP/CREDO/7-membres-2.jpg

MENU > Homepage


Page de connexion pour les membres qui s’affiche en pop up par dessus le site.

MENU > Login


http://deesign-it.com/FTP/CREDO/8-login.jpg

MENU > Homepage


Page d’inscription pour les non membres qui s’affiche en pop up par dessus le site.

MENU > Inscription


http://deesign-it.com/FTP/CREDO/9-sinscrire.jpg

N’hésitez passi vous avez la moindre question ou modification

Contact : Marion Durantin / Société Deesign it

06 81 56 70 30 - [email protected]

Présentation 1 : Design WEB CREDO

Documents

Transcript of Présentation 1 : Design WEB CREDO