portefolio

cdc.indd 1cdc.indd 1 18/02/10 09:1018/02/10 09:10

2

cdc.indd 2cdc.indd 2 18/02/10 09:1018/02/10 09:10

Sommaire1. Présentation Générale p 5

2. Description Éditroriale p 13

3. Description Fonctionnelle p 17

4. Description Graphique p 29

5. Description Technique p 41

6. Promotion et Animation p 47

7. Vie du Projet p 53

cdc.indd 3cdc.indd 3 18/02/10 09:1018/02/10 09:10

4

cdc.indd 4cdc.indd 4 18/02/10 09:1018/02/10 09:10

1. PrésentationGénérale

cdc.indd 5cdc.indd 5 18/02/10 09:1018/02/10 09:10

présentation générale

1. Présentation générale

Synopsis

Yahoo lance son nouveau réseau social I am nobody !

I am nobody ! c’est ce que l’on est, ce que l’on aimerait

être et même ce que l’on n’est pas.

I am nobody ! représente les différentes personnalités

de chacun et la lutte entre nos côtés clairs et obscures.

I am nobody ! est une revendication de l’esprit de

communauté, la communauté est la fi nalité et l’individu

participe activement à son fonctionnement.

Principe :Le concept du site est de pouvoir mettre sa vie à plat

partager ses idées, ses choix, ses doutes avec son

réseau, mais surtout inventer des alternatives à ces

choix et ainsi repousser les limites de son existence.

La mise en commun des expériences des membres

d’un même réseau permettra à l’utilisateur de comparer

ses propres expériences à celles de son réseau et de

trouver conseil et soutien auprès de ses contacts. Enfi n,

l’utilisateur pourra naviguer dans le temps, ce qui lui

permettra de pouvoir revenir sur son passé mais aussi

de pouvoir se projeter dans l’avenir.

Interface :Le site proposera une interface visuelle simple et intuitive

qui permettra de gérer son réseau de contacts, de

raconter sa vie et d’inventer des alternatives. Partager

des médias (textes, photos, vidéos, musiques...) et les

gérer de manière tout aussi intuitive.

Le réseau sera représenté sous forme de toile de

contact. L’espace personnel de l’utilisateur sera comme

un plan de métro : chaque choix, chaque action sera

représenté par une station et chaque alternative illustrée

par un embranchement entre deux voies.

Réseau :

Le réseau de l’utilisateur sera constitué de ses

connaissances directes. Il pourra agrandir son réseau

en autorisant les connaissances indirectes, les amis

des amis, à accéder à son espace et augmenter le rang

de connaissances indirectes pour accroître de manière

exponentielle son réseau (les amis des amis des amis

etc).

6

cdc.indd 6cdc.indd 6 18/02/10 09:1018/02/10 09:10


ContexteAujourd’hui nous assistons au boom des réseaux

sociaux, quotidiennement de nouveaux réseaux voient

le jour sur la toile. L’un d’entre eux, Facebook représente

aujourd’hui 1% du traffi c mondial sur le web.

Après avoir lancé son premier système de communauté

en 2005, Yahoo! 360, Ce dernier se voit forcer de fermer

en 2009, au profi t des profi ls Yahoo.

Aujourd’hui, même s’il propose des partenariats

et affi liation avec différents réseaux (par exemple :

Facebook directement en page d’accueil de Yahoo),

Yahoo est en retard sur l’activité des réseaux sociaux.

Yahoo doit réagir vite sous menace de perdre une

tranche importante d’internaute, les 18/35 ans familiers

des reseaux sociaux.

Pour rattraper son retard Yahoo lance son réseau social

I am nobody ! Celui-ci devra se démarquer parmi

les concurrents qui remportent déjà un franc succès

aujourd’hui. L’objectif est de proposer un nouveau

concept qui constituera une véritable évolution du

réseau social tel que nous le connaissons.

Une agence française a été choisie pour la réalisation et

le test de ce site en France. Cette dernière s’est inspirée

du fi lm Mr Nobody de Jaco van Dormael.

Un enfant sur le quai d’une gare.

Le train va partir. Doit-il monter

avec sa mère ou rester avec son

père ? Une multitude de vies

possibles découlent de ce choix.

Tant qu’il n’a pas choisi, tout reste

possible. Toutes les vies méritent

d’être vécues.Arrivé à la fi n de sa

vie, Nemo, le héros du fi lm, raconte

ses multiples histoires.

Le concept de réalité alternative développé dans ce fi lm

offre de nombreuses possibilités : pouvoir envisager

toutes les alternatives face à un choix existenciel, avoir

l’opportunité de vivre de multiples existences, revenir

dans le temps et emprunter un chemin différent...

Ces principes appliqués à un réseau social innovent

et donne une nouvelle dimension à ce type de réseau.

Des possibilités quasi-infi nies qui peuvent être à la fois

utilisées de manière très sérieuse et concrète sur son

existence mais aussi de façon ludique et complètement

inédite.

7

cdc.indd 7cdc.indd 7 18/02/10 09:1018/02/10 09:10


Points positifs :• Graphisme simple et effi cace

• Interface de plus en plus épurée et simplifi ée au fi l des

refontes

• Remontée d’informations : fi l d’actualité en première

page (l’essentiel en un coup d’oeil)

• Outil de recherche performant (multi-critères...)

• Outils pertinents pour la communauté comme le chat,

le vote, le tag des photos...

• Les applications donnent une possibilité de

développement presque illimitée

Points négatifs :• Beaucoup de menus, et de textes sur l’interface

Principales motivations des utilisateurs :

• trouver conseil, opinion, soutien, et comparer ses

expériences à celles de son réseau

• retrouver ses amis, créer son réseau, partager et

échanger en communauté

• partager des passions, des hobbies

• faire des rencontres, trouver de nouveaux amis

• organiser des évènements

L’adhésion à ce type de réseau décroît quand l’âge de

l’utilisateur augmente. Le coeur de cible est donc 15/35

ans. En revanche la catégorie socio-professionnelle est

très peu discriminante en ce qui concerne les réseaux

sociaux.

Notre cible est une personne à l’état d’esprit jeune et

dynamique, habituée au réseau sociaux, leurs principes

et leurs fonctionnements. Il recherche un expérience

inédite dans ce domaine.

Le dernier sondage ifop sur les réseaux sociaux français

rapporte les chiffres suivants :

• Copains d’avant, 1er avec 49 % des internautes

possédant un compte

• Windows Live (logiciel), 2ème avec 46 %

• Facebook, 3ème avec 37 %

• Twitter en 9ème position avec seulement 5 %, qui

voit cependant, en un an, sa notoriété multipliée par 15.

Nous analyserons Copains d’avant, Facebook, Twitter,

et un nouveau réseau américain, Tumblr.

Points positifs :• De nombreuses fonctionnalités

• Personnalisation de l’affi chage (placement des

modules)

Points négatifs :• Aucun graphisme, pas de personnalité visuelle

• Système de recherche très basique

• Un nombre très important de menus, de questionnaires

sur la même page

• Aucun traitement par l’illustration

• Hauteur des pages très importante (7 à 8 scrolls)

Cibles

Analyse de l’existant

8

cdc.indd 8cdc.indd 8 18/02/10 09:1018/02/10 09:10


9

cdc.indd 9cdc.indd 9 18/02/10 09:1018/02/10 09:10


Points positifs :- Interface très simple et intuitive

- Personnalisation de l’affi chage

Points negatifs :- Format des post imposés, laisse très peu de liberté à

l’utilisateur

- Très peu de fonctionnalités

- Très peu de médias (vignettes, liens)

- Classement des fl ux inexistant

Points positifs :- Interface simple, intuitive et complète

- Mise en avant des médias

- Grande palette de médias et outils éditables sur le site

(texte, photo, vidéo, audio, chat, lien, citation)

- Classement des fl ux par catégorie

- Goodies très complets (Iphone, widget, application

facebook ...)

10

cdc.indd 10cdc.indd 10 18/02/10 09:1018/02/10 09:10


Enseignements :

À travers cette analyse de l’existant, il semble essentiel

de développer :

• une interface simple et intuitive

• un outil de recherche pertinent

• un système gestion de médias performant et varié

• un système de schématisation (pictogrammes,

symboles...) afi n d’alléger l’interface

• un système de personnalisation de l’interface

• de nombreuses fonctionnalités et goodies

Le réseau créé par l’utilisateur, sera constitué de

connaissances directes et indirectes et permettra de

passer facilement du virtuel au réel, et pourquoi pas de

réaliser les alternatives inventés sur le site.

L’utilisateur trouvera les conseils, le soutien et l’opinion

de son réseau grâce à des outils comme les chat ou les

votes et pourra comparer ses expériences grâce à un

outil de recherche intelligent.

Le site proposera aussi toutes les fonctionnalités

attendues sur un réseau social : partager, échanger,

rencontrer, organiser...

En Résumé, I am nobody ! c’est :

• Les fonctionnalités classique d’un réseau social

• Une interface visuelle illustrée et intuitive

• Un système de communauté basé sur le récit de sa

vie et ses alternatives possibles

• L’utilisation du réseau pour y trouver conseil et soutien,

et pouvoir comparer ses expériences

• Pouvoir facilement basculer du virtuel au réel grâce à

un réseau de connaissances directes et indirectes.

PositionnementIamnobody aura une dimension concrète et réaliste,

un calque de la réalité sur lequel vient se placer les

différentes alternatives inventées par l’utilisateur.

Les actions, interactions et réactions provoquées sur le

site, pourront tout à fait aboutir dans la réalité, même

si au départ il ne s’agissait que de réalités alternatives.

On peut donc utiliser ce site comme un moyen, une

sorte d’outil de vie, mais on peut aussi en faire une

fi nalité, et l’utiliser de manière plus ludique.

11

cdc.indd 11cdc.indd 11 18/02/10 09:1018/02/10 09:10

12

cdc.indd 12cdc.indd 12 18/02/10 09:1018/02/10 09:10

2. DescriptionÉditoriale

cdc.indd 13cdc.indd 13 18/02/10 09:1018/02/10 09:10

description éditoriale

2. Description Éditoriale

Ligne éditoriale Médias utilisés

Mise à jour

Localisation

Voici quelques exemples de styles rédactionnels :

Copains d’avant :

• ‘‘Retrouvez ici toutes les actions de votre réseau

Copains : nouveaux albums, nouveaux commentaires,

nouvelles parties de quizz... Tout votre réseau de

copains en direct.’’

• ‘‘Créez un nouvel album photo et montrez-le à vos

amis !’’

Twitter :

• ‘‘Regardez qui d’autre est là. Abonnez-vous !’’

• ‘‘Compléter votre profi l aidera les autres utilisateurs

à vous trouver sur Twitter. Par exemple, vous aurez

davantage de chance d’être trouvé dans une recherche

Twitter, si vous indiquez votre localisation ou votre vrai

nom.’’

Facebook :

• ‘‘Pour retrouver des amis ou des connaissances qui

sont déjà sur Facebook, essayez l’outil de Recherche

d’amis.’’

• ‘‘Chaque application Facebook a ses propres

paramètres de notifi cation. Cochez la case

correspondante pour modifi er les paramètres d’une

application.»

Le style rédactionnel de rigueur sur un réseau social

est simple, clair et concis. On vouvoie l’utilisateur, on le

motive et on l’incite à participer en utilisant notamment

des exclamations ou l’impératif.

Photos : L’utilisateur pourra poster des photos et

créer des albums sur son espace personnel afi n de

documenter ses événements.

Vidéos : Il pourra aussi poster des vidéos qu’il chargera

lui-même ou qu’il importera de Youtube, Dailymotion et

Vimeo.

Audio : Dans le respect des droits d’auteurs, l’utilisateur

pourra aussi poster sur son espace personnel des

fi chiers audio.

La page d’accueil avec un module de une, ainsi

que le blog seront les deux outils de communication

principaux (excepté les alertes mail) entre le webmaster

et les utilisateurs. Ils renseigneront l’utilisateur sur le

principe et le fonctionnement du site, les nouvelles

fonctionnalités, les astuces...

Les mises à jour seront effectuées par les équipes de

Yahoo responsables de la maintenance du site.

L’agence réalise le site iamnobody.com et le teste en

France, donc seul le Français sera nécessaire dans un

premier temps.

En dehors de la page d’accueil et ses différentes

sous-rubriques (Blog, Aide, Accès Universel, Contact,

Mentions Légales), la majorité du contenu est posté

par l’utilisateur, donc dans sa propre langue. L’évolution

vers d’autres langues pourra donc être assez rapide.

14

cdc.indd 14cdc.indd 14 18/02/10 09:1018/02/10 09:10

description éditoriale

15

cdc.indd 15cdc.indd 15 18/02/10 09:1018/02/10 09:10

16

cdc.indd 16cdc.indd 16 18/02/10 09:1018/02/10 09:10

3. DescriptionFonctionnelle

cdc.indd 17cdc.indd 17 18/02/10 09:1018/02/10 09:10

description fonctionnelle

3. Description FonctionnelleRubriquage

Outils disponibles

Accueil

• Blog : concept, actualités, nouvelles fonctionalités...

• Aide : FAQ, Tutoriaux...

• Accès universel : handicapé, non francophone...

• Contact

• Mentions Légales

Réseau

• Gestion des contacts (créer des groupes, ajouter des

contacts) et plus globalement, gestion du réseau et de

son étendue.

• Accès aux profi ls des contacts (derniers médias et

dernières actions postées).

• Système de messagerie (chat entre contacts).

Espace Personnel

Espace personnel propre :

• Édition de sa ligne de vie : ajouter des actions sur

lesquelles on peut placer tout type d’outils et de médias

(texte, photo, vidéo, audio, citation, lien, chat invitation,

vote).

• Consulter ses «archives», ou organiser des projets

grâce à la timeline.

• Consulter des events similaires aux siens grâce à

l’outil de recherche intelligent.

Espace personnel d’un autre utilisateur :

• Consultation de la ligne de vie de l’utilisateur.

• Participation en commentant des actions, ou en

participant à des outils comme le vote, le chat ou

l’invitation.

Page Réseau • Recherche (de contacts sur le réseau)

• Messagerie (dans la fenêtre utilisateur)

• Un système de notifi cation (affi che une vignette

d’alerte sur les contacts avec de nouveaux médias,

outils ou actions mis en place, ou qui ont laissé un

message sur la messagerie)

• Fenêtre Réseau (permet de régler l’étendue et

l’affi chage du réseau)

• Fenêtre Contact (gestion des contacts, gestion des

groupes, ajout de contacts, réglage de l’affi chage des

contacts)

Espace personnel • Recherche intelligente : en fonction des titres,

descriptions, tags et participants aux actions, l’outil

de recherche intelligente affi che une vignette avec

le nombre de correspondances trouvées parmis les

contacts.

• Ajouter une action : ajouter une action en 4 étapes :

choix du symbole de l’action, information sur l’action,

placement sur la ligne de vie, ajout d’outils et/ou de

médias.

• Affi cher les médias : retire les informations superfl ues

pour affi cher les médias autour des actions.

• Zoom sur les actions : zoom, affi chage des médias

et des informations lors du double-clic sur une action.

• Time Line : permet de naviguer dans le temps sur

votre ligne de vie.

En permanence accessible• Paramètres : confi guration des paramètres généraux

du site (confi dentialité, alertes, affi chage).

• Profi l : édition des informations et de la photo du profi l.

• Déconnexion.

18

cdc.indd 18cdc.indd 18 18/02/10 09:1018/02/10 09:10


Arborescence

Accueil

Blog Aide ContactMention Légales

Accès Universel

Réseau

log in

Espace Personnel

inscription

Affichage Réseau

Gestion des Contact

Utilisateur

Recherche intelligente

Ajouter une action

Ajouter un outil

Profil

Confidentialité Alertes Affichage

Paramètres

Event Médias Messagerie

Action

Commenter Participer

Consulter les médias

Commenter Participer

19

cdc.indd 19cdc.indd 19 18/02/10 09:1018/02/10 09:10


iamnobody

Mentions Légales Accès universelBlog Aide Contact

Login

Mot de Passe

connexioninscrption

Accès aux différents languages

Blog iamnobody.com :Actus, nouveautés, campagnes pub, évènements, innovations techniques, ...Contenu secondaire pour le référencement.

FAQ, support technique, ... Accès handicapé, ...

Bienvenue sur iamnobody.com !

Un nouvelle communauté aux possibilités illimités !Créez votre propre réseau d'amis et de contacts.

Visualisez et parcourez votre toile :

Sur votre espace personnel mettez votre vie à plat et plus encore : chaque choix, doute, projet... et

partagez les avec votre réseau.

Ici vous pouvez être vous même... ou pas et vous réinventer, en imaginant les alternatives les plus

extraordinaires : réécrivez votre histoire !

Démo

Masques Fonctionnels

Accueil

20

cdc.indd 20cdc.indd 20 18/02/10 09:1018/02/10 09:10


inscription 2/2

Informations personnelles Contacts

Importez vos contacts : Liste des contacts :

• Manuellement Entrez l'adresse de votre contact, nous vérifions s'il est présent sur le réseau au défaut de quoi nous lui envoyons une invitation pour rejoindre iamnobody.com

adresse email :

• Automatiquement Entrez vos identifiants et mots de passes des comptes MSN, Yahoo, Google, Skyrock, Facebook, Twitter que vous possédez afin d'ajouter automatiquement vos listes de contact

identifiant : mot de passe : MSN Yahoo Google Skyrock Facebook Twitter

• Jean Dupont• Marine Legal• François Durand• Anne Bernardv

v

continuer

inscription 1/2

Informations personnelles Contacts

Prénom : Nom : Date de Naissance :

Pays : Ville : Code Postal :

Métier/Études :

Entreprise/établissement :

Adresse email :

Mot de passe :

Confirmation mot de passe :

Question secrète :

Réponse sécrète :continuer

Inscription

21

cdc.indd 21cdc.indd 21 18/02/10 09:1018/02/10 09:10


iamnobody

utilisateur

Famille Amis • Jean Dupont • Rémi Gallant • Yves Dujardin Collègues

Nouveau groupe Nouveau contact

Contacts - x

Réseau Espace Perso Profil Paramètres Déconnexion Recherche :

Réseau

• Règler l'étendue du réseau

+5

+4 +3

+2

+1

Vous

• Afficher les liens

- x

!

!

!

Notification : post sur espace perso ou message

En ligne : photo en couleur

Hors-ligne : photo en noir et blanc

Events Médias Messagerie

envoie de fichier :


event

event

event

event

event

event

event

event

event

event


Photo

1 clic :

photo photo

photo

ma

photo

CHAT

accéder à son

espace

accéder à son

espace accéder à son

espace

parcourir

ok

- x - x - x

''citation"

Réseau

Fenêtre utilisateur

Fenêtrutilisate

22

cdc.indd 22cdc.indd 22 18/02/10 09:1018/02/10 09:10


message

iamnobody

Choisissez une icône pour l'event

< page 1 2 3 >

+

en ce moment

+

zoom

-

Créer un icône

parcourir

Ajouter un média :

T P V

ok

< >Jeudi 7 février 2010

15h56

^Mercredi 6... ... Vendredi 8

A

C L

C V I

Texte / Citation / Lien / Photo / Vidéo / Audio / Chat / Vote / Invitation

Apparaît quand on clic sur un event, ou juste après avoir créer et placé un event

6

Décrivez l'event :

Titre :Tag(s) :Description :

Participant(s) :

23

1

+ Ajouter un event 1

3 - placement

2

4

6

Titre Titre Titre

Titre

Titre

Titre Titre

Titre

TitrePrénom Nom

TitrePrénom Nom

TitrePrénom Nom

TitrePrénom Nom

TitrePrénom Nom

TitrePrénom Nom

Prénom Nom

Prénom Nom

Prénom Nom

Recherche intelligente automatique (critères : titre, tag, description, participant, date)

clic

Rollover

Titre Tag(s) DescriptionParticipant(s)

Titre

VOUS

Fenêtreutilisateur

Afficher les médias

calRéseau Espace Perso Profil Paramètres Déconnexion Recherche :

- x

- x

- x

- x + Ajouter un média

Espace utilisateur

23

cdc.indd 23cdc.indd 23 18/02/10 09:1018/02/10 09:10


iamnobody

en ce moment

+

zoom

-

< >Jeudi 7 février 2010

15h56

^Mercredi 6... ... Vendredi 8

+ Ajouter une action

Titre Titre Titre

Titre

Titre

Titre Titre

Titre

VOUS

Fenêtreutilisateur

Afficher les médias

''citation"


+ Ajouter un média

iamnobody

Titre

Tag(s)

Description

Participant(s)


Espace utilisateur médias affi chés

Zoom sur une action

24

cdc.indd 24cdc.indd 24 18/02/10 09:1018/02/10 09:10


paramètres


Qui autorisez-vous à accéder à votre espace ? Uniquement certains contacts Tout mes contacts

Qui autorisez-vous à accéder à vos médias ? (photos, vidéos) Uniquement certains contacts Tout mes contacts

Étendre votre réseau :Autorisez vous les amis de vos amis à accéder à votre espace et vos médias ?

Accès à votre espace :

contacts vos de vos vous contacts contacts ... ...

Accès à vos médias :

contacts vos de vos vous contacts contacts ... ...

• Jean Dupont• Marine Legal• François Durand• Anne Bernard

terminer

- x

paramètres


• RSS :

Flux RSS de votre espace personnel :

Flux RSS de : ->

• Alertes Mail :

Périodicité : à chaque nouveau post Contenu : mon espace uniquement

toute(s) les heures l'espace de mes contacts Niveau : tout(s) les jour(s) +1 +2 +3 +4

terminer

http://feed.iamnobody.com/jean-dupont

entrez le nom d'un de vos contact

http://feed.iamnobody.com/...

- x

paramètres


• Police : taille :

• Couleur de fond (réseau et espace perso) :

• Image de fond (espace personnel) :

Aperçu :

Réseau Espace perso

Helvetica Neue

terminer

12

#EEF23C

parcourir

- x

profil charger votre photo de profil

Prénom : Nom : Date de Naissance :Adresse email :

Pays : Ville : Code Postal :

Métier/Études : Entreprise/établissement : redéfinir mot de passe

terminer

parcourir

- x

Paramètres Profi l

25

cdc.indd 25cdc.indd 25 18/02/10 09:1018/02/10 09:10


Après l’inscription, le nouvel utilisateur est dirigé

vers la page Réseau. Ayant déjà ajouter ses

contacts, l’utilisateur peux parcourir son réseau et

accéder aux fenêtres utilisateurs (information sur le

contact, dernières actions, derniers outils, système

de messagerie).

Intéressé par les activités d’un de ses amis, le

nouvel utilisateur double clique sur son image

et arrive sur l’espace personnel de ce contact. Il

découvre le système de ligne de vie et peut laisser

quelques commentaires sur les actions de son ami.

Il peut aussi participer aux votes et aux chat.

Le nouvel utilisateur décide alors de compléter son

propre espace personnel, et clique dans la barre de

navigation pour revenir à son espace personnel et

éditer sa ligne de vie.

Utilisation quotidienne

L’utilisateur quotidien reçoit un mail à intervalle

régulier (intervalle défi ni sur le site) lui résumant

l’activité sur son réseau et son espace personnel.

En suivant un lien du mail, il arrive sur la page

d’accueil, se log et est dirigé vers son réseau.

Scenario intéractif

La navigation dans le site s’effectue avec la barre de

navigation principale en haut de l’écran, qui permet

d’accéder aux rubriques et fonctionnalités élémentaires,

et de manière intuitive pour le reste du site :

• le double clic permet de passer à la page suivante

• le clique simple fournit plus d’informations sur

l’élément cliqué, ou ouvre une fenêtre.

Par exemple : pour accéder à l’espace personnel d’un

contact dans la fenêtre Réseau, il suffi t de double-

cliquer sur la photo du contact concerné.

Les Informations, les différents réglages et l’édition (tout

dialogues entre le site et l’utilisateur) sont affi chés via

un système de fenêtre amovibles que l’on peut ouvrir,

fermer ou déplacer à son gré.

Ainsi l’interface peut rester très simple, et l’utilisateur

gère la disposition et l’affi chage ou non des fenêtres.

Parcours types de l’utilisateur

Première utilisation

En arrivant sur la page d’accueil l’utilisateur regarde

défi ler le principe du site et la vidéo de démonstration.

Il décide de s’inscrire. Après deux fenêtres d’inscription

(informations personnelles et ajout de contacts), le

nouvel utilisateur peut profi ter pleinement du site.

26

cdc.indd 26cdc.indd 26 18/02/10 09:1018/02/10 09:10


27

cdc.indd 27cdc.indd 27 18/02/10 09:1018/02/10 09:10

28

cdc.indd 28cdc.indd 28 18/02/10 09:1018/02/10 09:10

4. DescriptionGraphique

cdc.indd 29cdc.indd 29 18/02/10 09:1018/02/10 09:10

description graphique

Objectifs graphiques

Logo

Couleur :

Pour l’identité visuelle de I am nobody ! nous avons choisi une palette de bleu assez vif, afi n de donner une

sensation de dynamisme, contrasté avec des bleus pastels, calmes et apaisants. Traité avec de grands aplats, ce

contraste donne la neutralité nécessaire à l’interface du site, que l’on fait ressortir avec des touches de couleurs

vives (orange, vert, rouge...).

Thème :

Le thème visuel est la foule, une foule très dynamique et joyeuse. Ainsi nous revendiquons l’esprit de communauté,

l’idée que nous ne sommes qu’un parmis tous, mais surtout le potentiel et la force de cette union. Ces images de

foules positivement ‘‘déchaînées’’, galvanisent l’utilisateur et lui transmettent un peu de cette énergie en lui faisant

ressentir la fi erté d’apartenir à un tout.

30

cdc.indd 30cdc.indd 30 18/02/10 09:1018/02/10 09:10


Planche tendance

31

cdc.indd 31cdc.indd 31 18/02/10 09:1018/02/10 09:10


Charte graphique

32

cdc.indd 32cdc.indd 32 18/02/10 09:1018/02/10 09:10


Écrans

Page d’accueil

33

cdc.indd 33cdc.indd 33 18/02/10 09:1018/02/10 09:10


Réseau

34

cdc.indd 34cdc.indd 34 18/02/10 09:1018/02/10 09:10


Fenêtre utilisateur - Médias

35

cdc.indd 35cdc.indd 35 18/02/10 09:1018/02/10 09:10


Fenêtre utilisateur - Events

Fenêtre utilisateur - Messagerie

36

cdc.indd 36cdc.indd 36 18/02/10 09:1018/02/10 09:10


Espace personnel

37

cdc.indd 37cdc.indd 37 18/02/10 09:1018/02/10 09:10


Espace personnel - Recherche intelligente

38

cdc.indd 38cdc.indd 38 18/02/10 09:1018/02/10 09:10


Espace personnel - Ajouter un event

39

cdc.indd 39cdc.indd 39 18/02/10 09:1018/02/10 09:10

40

cdc.indd 40cdc.indd 40 18/02/10 09:1018/02/10 09:10

5. DescriptionTechnique

cdc.indd 41cdc.indd 41 18/02/10 09:1018/02/10 09:10

description technique

5. Description Technique

Le site peut être scindé en 2 parties : la partie accueil

(avant log in) et la partie utilisateur (après log in).

Partie accueilLa page d’accueil et ses sous-rubriques constituent

l’essentiel du contenu référençable du site. La page

d’accueil possède un module de une, un module de

login et redirige les nouveaux utilisateurs vers un module

d’inscription.

Les sous-rubriques Mentions Légales, Aide, Accès

universel, Contact sont des pages statiques.

La page Blog nécessite une administration pour la mise

à jour.

Partie utilisateur Après le log in, le contenu est propre à l’utilisateur et

à son réseau. Cette partie n’est volontairement pas

référencée. Le site devient full-fl ash (animations, drag

and drop... sur la totalité de l’écran).

La partie accueil sera entièrement réalisée en PHP et

Javascript, liée à la Base de Donnée du site (vérifi cation

log in et enregistrement des inscriptions).

La partie utilisateur sera entièrement dynamique et full

fl ash, grâce à une combinaison entre Flash (ActionScript

I & II), des fi chiers XML et la base de donnée MySQL du

site.

L’objectif est de référencer iamnobody.com uniquement

avec la partie accueil (notamment la page d’accueil

et le blog) tout en assurant l’intégrité des données

confi dentielles échangées sur cette partie. Les

languages PHP et Javascript utilisés ici, permettent un

référencement optimal et une sécurisation des données

de connexion et d’inscription.

Le contenu et la forme du site impose l’utilisation de

Flash (Actionscript I & II) et d’une base de données.

Pour cela, nous utiliserons une combinaison entre Flash

et XML d’un côté, PHP et une base de données MySQL

de l’autre.

Le fi chier PHP génère un fi chier XML en fonction de la

base de données MySQL (contenant les informations

de l’utilisateur), puis Flash interprète facilement et de

manière sécurisé le fi chier xml généré pour affi cher

les informations contenues au départ dans la base de

données.

Contraintes initiales Technologies

Solutions sur mesure

42

cdc.indd 42cdc.indd 42 18/02/10 09:1018/02/10 09:10


Bases de donnéesSchéma simplifi é des bases de données du site

43

cdc.indd 43cdc.indd 43 18/02/10 09:1018/02/10 09:10


Confi guration requiseHébergementLe site sera compatible avec les navigateurs les plus

utilisés :

• Internet Explorer (version 6 et supérieures)

• Mozilla Firefox

• Google Chrome

• Apple Safari

• Opera

Confi guration matérielle nécessaire pour l’utilisateur :

• Disposer au minimum du Plugin Flash Player 7

compte-tenu de l’utilisation d’ActionScript 1 et 2 sous

Flash (le Plugin sera proposé automatiquement s’il n’est

pas détecté).

• S’assurer que l’exécution des scripts comme le

Javascript ne soit pas bloquée.

Selon la dernière publication offi cielle d’Adobe de juin

2009, 98,6 % des postes sont équipés de Flash Player

7. Nous avons donc estimé que l’utilisation de cette

technologie ne constituerait pas un obstacle majeur

pour notre audience.

En ce qui concerne les éventuels blocages de cookies

ou de scripts, un guide d’utilisation sera mis en place

dans la rubrique Aide en page d’accueil.

iamnobody.com doit disposer d’un serveur dédié offrant

de hautes performances et disposant de fonctions

précises.

Tout d’abord, il doit pouvoir faire face à une forte

affl uence du trafi c et disposer d’une bande passante

suffi samment élevée pour permettre le transfert de

fi chiers ou la lecture de vidéo. Nous ciblerons un

hébergement ayant une bande passante minimale de

200 Mps depuis le serveur vers internet, ainsi qu’un

trafi c illimité.

Le site doit également supporter un grand nombre de

requêtes simultanées liées à l’activité des internautes

sur les modules participatifs et donc bénéfi cier d’un

processeur puissant. Aussi, compte tenu de la quantité

et du poids des médias qui y seront stockés (notamment

les vidéos), il doit disposer d’un espace d’au moins un

Teraoctet.

Il devra également prendre en charge les langages et

technologies choisies précédemment et notamment

PHP 5.

Nous choisirons donc de préférence un prestataire

fi able, offrant des options de garantie sur la sécurité

et l’assistance technique. Nous opterons donc

pour le serveur Quad-Core XL avec une option de

pré-administration de chez 1&1 qui inclut toutes

caractéristiques nécessaires pour un budget de 199 €

par mois, noms de domaines inclus.

44

cdc.indd 44cdc.indd 44 18/02/10 09:1018/02/10 09:10


45

cdc.indd 45cdc.indd 45 18/02/10 09:1018/02/10 09:10

46

cdc.indd 46cdc.indd 46 18/02/10 09:1018/02/10 09:10

6. Promotion etAnimation

cdc.indd 47cdc.indd 47 18/02/10 09:1018/02/10 09:10

promotion et animation

Moteurs de recherche

Le référencement naturel du site s’appuiera notamment

sur le contenu de la page d’accueil et du blog. Ces pages

seront développés en PHP et Javascript qui permettent

un bon référencement tout en offrant une indexation

optimale dans tous les moteurs de recherche.

Le contenu des balises d’identifi cation sera donc étudié

et affi né afi n d’obtenir une performance de visibilité

accrue de notre index.

Le site sera essentiellement référencé à partir de mots

clés issus du champ lexical des réseaux sociaux :

• Réseau social

• Réseaux sociaux

• Site réseau social

• Site réseaux sociaux

• Réseau social gratuit

• Réseau social sur Internet

• Créer réseau social

• Nouveau réseau social

• Nouveaux réseaux sociaux

Une liste de mots-clés complémentaires provenant

de l’outils de suggestion de mots-clés de Google

permettra d’élargir ce champ afi n d’atteindre davantage

de requêtes.

Référencement - Méthodologie

Structure du site

Notre Site s’appuie sur la technologie Flash mais

dispose d’une url propre pour chaque contenu (une url

par animation fl ash).

Il sera donc intégré à une structure HTML permettant

d’affi cher un contenu alternatif pour l’accessibilité et les

internautes ne disposant pas de lecteur fl ash.

La structure du site sera développée en HTML

incrémentée d’éléments « fl ash » faisant appel à des

balises PHP pour l’affi chage dynamique des contenus.

Les bases de données utilisées permettront d’organiser

la grande quantité de contenus propres aux utilisateurs

et de récupérer les données stockées dans des champs

à divers endroits du site ; permettant ainsi d’organiser

les contenus et de faciliter l’importante transversalité

que demande un réseau social. Elles seront du type

MySQL, Oracle...

Les technologies citées ci-dessus sont utilisées afi n de

garantir la fl uidité et le dynamisme du site.

Qu’il s’agisse du moteur de recherche ou de la Timeline,

les éléments intégrés sont pensés pour naviguer

aisément dans l’espace personnel.

Le moteur de recherche permettra de faire appel

aux éléments de la base de données et de proposer

l’affi chage d’un choix précis ou large en fonction de la

demande, offrant de nouveaux horizons à l’utilisateur.

6. Promotion et Animation

48

cdc.indd 48cdc.indd 48 18/02/10 09:1018/02/10 09:10


Partenariats

Publicité

Parrainage

Suivi de positionnement et analyse de la fréquentation

Le suivi du site s’appuiera sur deux outils fi ables,

simples, gratuits et précis :

- Google Analytics sera principalement utilisé pour

l’analyse de fréquentation et comportementale

- Goldorank nous permettra de suivre le positionnement

du site sur les principaux moteurs de recherche

Aujourd’hui, Yahoo est en partenariat avec de

nombreuses organisations, associations et entreprises.

Nous appuierons notre politique de visibilité sur

l’ensemble de son réseau de partenaires afi n de

consolider les liens menant à la page d’accueil, mais

également afi n de diffuser des communiqués sur une

grande diversité de supports.

Type de partenariats :

• création d’icônes (event) brandés (marques de

vêtement, chaîne de magasins).

• création de médias personalisés pour des évènement

sportifs et cculturels (avec développement de

fonctionnalités propre à l’évènement).

• création d’un espace propre à une marque ou à un

évènement (espace libre d’accès).

Une opération de publipostage (mail) sera effectuée

dans un premier temps. Celle-ci devra assurer le

lancement du site pour informer les comptes clients

Yahoo et partenaires que ce nouveau service est

disponible. L’objectif étant de pousser un maximum

d’utilisateurs de compte Yahoo et partenaires à venir

sur notre site.

I am nobody ! possédera une publicité interactive sous

forme de bannière statique (Gif animé et Flash), mais

possédera également une vidéo de présentation sur

la page d’accueil du site de Yahoo ainsi que chez les

autres sites partenaires. Les formats seront libres pour

pouvoir être adaptés sur tous les sites.

L’objectif de la charte graphique et des bannières est

de mettre en évidence les atouts I am nobody ! et de

faciliter leur incorporation sur tous types de supports,

incitant chacun à propager l’information.

Nos outils de parrainage sont intégrés au module

d’inscription au site. Ces outils appuieront

l’élargissement du réseau et la propagation de sa

visibilité au travers de la toile. La mise en contact est

donc intuitive et complémentaire avec les actions de

visibilité.

49

cdc.indd 49cdc.indd 49 18/02/10 09:1018/02/10 09:10


Espaces de participationÉvenementiel

Newsletter - mailing

Notamment chat, commentaires et vote sur les espaces

personnels qui sont relayés sur la page réseau dans la

fenêtre utilisateur.

Les nombreux espaces de participation constitueront

le socle social du site. C’est à travers leur conception

originale et pratique que les utilisateurs pourront entrer

en contact et apporter des réponses rapides et inédites.

Les membres seront incités à communiquer entre eux

par l’utilisation de ces zones sociales, développant ainsi

une toile tissée de noyaux durs et d’électrons libres

sans limite.

I am nobody ! propose un concept inédit, et doit donc

surprendre et marquer pour mieux convaincre sa cible.

Il s’agira d’organiser des happening sur le thème de la

foule dans les 10 villes les plus importante de France.

Déroulement :Organiser des rendez-vous rassemblant entre 50 et

100 personnes, dans des lieux de fort passage, habillés

de t-shirt ‘‘iamnobody.com’’, et qui à une heure précise

crieraient tous ensemble ‘‘I am nobody !’’.

En parrallèle 3 hôtes/hôtesses distribueraient des fl yers

avec l’adresse du site. Les participants recevront des

goodies I am Nobody !

L’utilisateur reçoit un mail à intervalle régulier, qu’il

défi nira lui-même sur le site, lui résumant l’activité de

son réseau et de son espace personnel.

50

cdc.indd 50cdc.indd 50 18/02/10 09:1018/02/10 09:10


51

cdc.indd 51cdc.indd 51 18/02/10 09:1018/02/10 09:10

52

cdc.indd 52cdc.indd 52 18/02/10 09:1018/02/10 09:10

7. Vie du Projet

cdc.indd 53cdc.indd 53 18/02/10 09:1018/02/10 09:10

vie du projet

Équipes

Planning prévisionnel

Équipe de pré-production : • 1 Chef de Projet, responsable de la conception du projet

• 1 Directeur artistique, qui met en forme le projet et propose les premières maquettes

• 1 Directeur technique, qui juge de la faisabilité du projet et adapte le projet aux contraintes imposées par les

technologies.

Équipe de production : • 1 Chef de Projet, qui va gérer le projet dans son ensemble et coordonner les équipes

• 1 Directeur Artistique et 1 Graphiste, qui vont créer les maquettes défi nitives

• 1 Directeur technique, responsable de la cohésion entre les différents intervenants techniques

• 1 Intégrateur, qui va préparer les différents éléments nécessaires aux Flasheurs et les intégrer dans Flash

• 1 Flasheur (animation), qui va créer les éléments animés du site

• 1 Développeur Flash, qui va coder le site précédemment intégré, et créer la communication entre le fi chier fl ash

et les bases de données via XML.

• 1 Développeur (bases de données), qui va concevoir les bases de données avec lesquelles le fi chier Flash

communique.

• 1 Webmarketeur, responsable de la promotion et l’animation du site.

Équipe de post-production : Équipe de webmasteurs Yahoo, responsable de l’administration, la modération et la veille sur le site, dès son

lancement.

54

7. Vie du Projet

cdc.indd 54cdc.indd 54 18/02/10 09:1118/02/10 09:11

vie du projet

Budget prévisionnel

55

cdc.indd 55cdc.indd 55 18/02/10 09:1118/02/10 09:11

cdc.indd 58cdc.indd 58 18/02/10 09:1118/02/10 09:11

portefolio

Documents

amis des amis

membres dun mme rseau

animation p

prsentation gnrale p

description ditroriale

description fonctionnelle

description graphique

description technique