Pour produire des contenus web, il est important de disposer de modèles et de gabarits de qualité, détaillés, clairs, aisément modifiables. Sans gabarits, lancer une production éditoriale ou élaborer une stratégie de contenu est un enfer ! Voilà pourquoi nous partageons avec vous un ensemble de modèles dans tous les domaines (rédaction web, conseil éditorial, stratégie de contenu, audit, référencement, ergonomie, etc.). Des modèles gratuits, utiles et efficaces à utiliser sans modération.

1. Kit du producteur
de contenus web
VERSION :
DATE DE PUBLICATION :
AUTEUR :
WEB :
0.7
22/10/2013
META CONTENTS (hello@metacontents.fr)
WWW.METACONTENTS.FR

2. GABARITS
Arborescence de site internet
> Slide 3 à 10
Storyboard d’animation web,
de bannière publicitaire
> Slide 11 à 18
Benchmark de site internet
> Slide 19 à 33
Personas
> Slide 34 à 39
Calendrier éditorial
> Slide 40 à 43
Brief
> Slide 44 à 47
Zoning
> Slide 48 à 52

3. Arborescence de
site internet
5 modèles

4. Date : 10/27/13
Document : Arborescence | Modèle : 1 | Version : 1.0 | Auteur : Agence ABC | Statut : validé | Date de validation : 05/01/2013
Home page [NOM_SITE]
Information complémentaire
TITRE
RUBRIQUE 1
TITRE
RUBRIQUE 2
TITRE
RUBRIQUE 3
TITRE
RUBRIQUE 4
TITRE
RUBRIQUE 5
Page 1
Page 1
Page 1
Page 1
Page 1
Page 2
Page 2
Page 2
Page 2
Page 2
Page 3
Page 3
Page 3
Page 3
Page 3
Page 4
Page 4
Page 4
Page 4
Page 4
Page 5
Page 5
Page 5
Page 5
Page 5
Page 6
Page 6
Page 6
Page 6
Page 6
Page …
Page …
Page …
Page …
Page …

5. Date : 27/10/13
Document : Arborescence | Modèle : 2 | Version : 1.0 | Auteur : Agence ABC | Statut : validé | Date de validation : 05/01/2013
HEADER
Home page [NOM_SITE]
Entrée par profil
Espace client
Fonctionnalité
Recherche
Page
Page
Information complémentaire
TITRE
RUBRIQUE 1
Sous-rubrique 1





Page 1
Page 2
Page 3
Page 4
…
Page 1
Page 2
Page 3
Page 4
…
Page 1
Page 2
Page 3
Page 4
…
Page 1
Page 2
Page 3
Page 4
…
Page 1
Page 2
Page 3
Page 4
…
Sous-rubrique 1
Page 1
Page 2
Page 3
Page 4
…
Page 1
Page 2
Page 3
Page 4
…
Page 1
Page 2
Page 3
Page 4
…
Sous-rubrique 1
Page 1
Page 2
Page 3
Page 4
…
Page 1
Page 2
Page 3
Page 4
…
Sous-rubrique 2





Sous-rubrique 3





TITRE
RUBRIQUE 4





Sous-rubrique 2





Sous-rubrique 3





TITRE
RUBRIQUE 3





Sous-rubrique 2





Sous-rubrique 3





Sous-rubrique 1





Sous-rubrique 2





TITRE
RUBRIQUE 2
Page 1
Page 2
Page 3
Page 4
…
Sous-rubrique 3





Page 1
Page 2
Page 3
Page 4
…
TITRE
RUBRIQUE 5
Sous-rubrique 1





Page 1
Page 2
Page 3
Page 4
…
Sous-rubrique 2





Page 1
Page 2
Page 3
Page 4
…
Sous-rubrique 3





Page 1
Page 2
Page 3
Page 4
…
FOOTER
Copyright
Recrutement
Mentions légales
Contact
Haut de page
Page
Page
Page
Page
Page

6. Date : 27/10/13
Document : Arborescence | Modèle : 3 | Version : 1.0 | Auteur : Agence ABC | Statut : validé | Date de validation : 05/01/2013
Page 2
Page 3
Page 1
Page 2
RUBRIQUE 5
RUBRIQUE 1
Page 4
Page 3
Page 1
HOME
PAGE
Page 4
Page 5
Page 4
Page 1
Page 4
Page 5
Page 4
Page 3
RUBRIQUE 3
RUBRIQUE 2
Page 5
Page 5
RUBRIQUE 3
RUBRIQUE 3
Page 3
Page 2
Page 1
Page 2
Page 2
Page 4
Page 1
Page 3

7. Date : 27/10/13
Document : Arborescence | Modèle : 4 | Version : 1.0 | Auteur : Agence ABC | Statut : validé | Date de validation : 05/01/2013
Home page
Rubrique 1
Rubrique 2
Rubrique 3
Rubrique 4
Rubrique 5
Sous-rubrique 1
Sous-rubrique 1
Sous-rubrique 1
Sous-rubrique 1
Sous-rubrique 1
Page 1
Page 1
Page 1
Page 1
Page 1
Page 2
Page 2
Page 2
Page 2
Page 2
Page 3
Page 3
Page 3
Page 3
Page 3
Page 4
Page 4
Page 4
Page 4
Page 4
Page 5
Page 5
Page 5
Page 5
Page 5
Sous-rubrique 2
Sous-rubrique 2
Sous-rubrique 2
Sous-rubrique 2
Sous-rubrique 2
Page 1
Page 1
Page 1
Page 1
Page 1
Page 2
Page 2
Page 2
Page 2
Page 2
Page 3
Page 3
Page 3
Page 3
Page 3
Page 4
Page 4
Page 4
Page 4
Page 4
Page 5
Page 5
Page 5
Page 5
Page 5
Sous-rubrique 3
Sous-rubrique 3
Sous-rubrique 3
Sous-rubrique 3
Sous-rubrique 3
Page 1
Page 1
Page 1
Page 1
Page 1
Page 2
Page 2
Page 2
Page 2
Page 2
Page 3
Page 3
Page 3
Page 3
Page 3
Page 4
Page 4
Page 4
Page 4
Page 4
Page 5
Page 5
Page 5
Page 5
Page 5
Sous-rubrique 4
Sous-rubrique 4
Sous-rubrique 4
Sous-rubrique 4
Sous-rubrique 4
Page 1
Page 1
Page 1
Page 1
Page 1
Page 2
Page 2
Page 2
Page 2
Page 2
Page 3
Page 3
Page 3
Page 3
Page 3
Page 4
Page 4
Page 4
Page 4
Page 4
Page 5
Page 5
Page 5
Page 5
Page 5

8. Date : 27/10/13
Document : Arborescence | Modèle : 5 | Version : 1.0 | Auteur : Agence ABC | Statut : validé | Date de validation : 05/01/2013
PAGE
PAGE
PAGE
PAGE
PAGE
PAGE
PAGE
PAGE
PAGE
PAGE
PAGE
PAGE
PAGE
PAGE
PAGE
PAGE
PAGE
PAGE
PAGE
PAGE
RUBRIQUE
RUBRIQUE
PAGE
PAGE
PAGE
PAGE
HOME PAGE
RUBRIQUE
PAGE
PAGE
RUBRIQUE
PAGE
RUBRIQUE
PAGE
PAGE
PAGE
PAGE
PAGE
PAGE
PAGE
PAGE
PAGE
PAGE
PAGE
PAGE
PAGE
PAGE
PAGE
PAGE
PAGE
PAGE
PAGE
PAGE
PAGE

9. Date : 27/10/13
Document : Arborescence | Modèle : 6 | Version : 1.0 | Auteur : Agence ABC | Statut : validé | Date de validation : 05/01/2013
FONCTIONNALITÉS
FONCTIONNALITÉS





HOME PAGE
HOME PAGE
MOTEUR DE RECHERCHE
FORMULAIRE DE CONTACT
MODULE DE GÉOLOCALISATION
WEB CALL BACK
PLAYER VIDÉO / CHAT / FORUM /
SONDAGE / QUIZ / ETC.
RUBRIQUE 11
RUBRIQUE
RUBRIQUE 22
RUBRIQUE
RUBRIQUE 33
RUBRIQUE
RUBRIQUE 44
RUBRIQUE
RUBRIQUE 55
RUBRIQUE
PAGE 11
PAGE
PAGE 11
PAGE
PAGE 11
PAGE
PAGE 11
PAGE
PAGE 11
PAGE
PAGE 22
PAGE
PAGE 22
PAGE
PAGE 22
PAGE
PAGE 22
PAGE
PAGE 22
PAGE
PAGE 33
PAGE
PAGE 33
PAGE
PAGE 33
PAGE
PAGE 33
PAGE
PAGE 33
PAGE
PAGE 44
PAGE
PAGE 44
PAGE
PAGE 44
PAGE
PAGE 44
PAGE
PAGE 44
PAGE
PAGE 55
PAGE
PAGE 55
PAGE
PAGE 55
PAGE
PAGE 55
PAGE
PAGE 55
PAGE
FOOTER
FOOTER
LIEN 1 | LIEN 2 | LIEN 3 | LIEN 4 | LIEN …

10. Date : 27/10/13
Eléments complémentaires pour
personnaliser une arborescence de
site internet
TYPE DE CONTENUS
Texte
Images
vidéo
FONCTIONNALITÉS
Animation
Formulaire
de contact
(flash /html5)
Espace
privé
ponctuelle
régulière
29
Sondage /
quiz
Newsletter
limitée
Blog
O/N
ACTUALISATION DES CONTENUS
jamais
Flux RSS
fréquente
Chat
Agenda
Moteur de
recherche
Forum
CALL
Géolocalisation
Web call
back
ITEMS A INTÉGRER DANS LES DIFFÉRENTS MODÈLES D’ARBORESCENCE (A ADAPTER)
29
O/N
CALL
LÉGENDE ASSOCIÉE (A ADAPTER)
TYPE DE
CONTENUS
Texte Images
FONCTIONNALITÉS
vidéo Animation
(flash /html5)
ACTUALISATION
DES CONTENUS
jamais limitée ponctuelle régulière fréquente
29
O/N
Formulaire
de contact
Espace
privé
Flux RSS
Blog
Sondage /
Newsletter
quiz
Chat
CALL
Agenda Géolocalisation Web call back
Moteur de
recherche
Forum

11. Storyboard d’animation web /
de bannière publicitaire
4 modèles

12. Date : 27/10/13
Document : Storyboard | Modèle : 1 | Version : 1.0 | Auteur : Agence ABC | Statut : validé | Date de validation : 05/01/2013
120 px
50 px
100 px
160 px
150 px
468 px
200 px
250 px
300 px
350 px
400 px
450 px
728 px
500 px
550 px
600 px
650 px
700 px
750 px
TITRE ANIMATION
Description de l’animation
50 px
60 px
90 px
100 px
Taille :
160 x 600 pixels
Format :
Vidéo / Flash / Html 5
150 px
SÉQUENCE
N° de séquence : 1
200 px
Durée de la séquence : 8’
Début / Fin : 0’00 / 0’15’’
250 px
DÉROULÉ /
INTERACTIONS
300 px
1
350 px
2
400 px
450 px
500 px
550 px
3
4
5
TRANSITION
Type de transition
600 px

13. Date : 27/10/13
Document : Storyboard
120 x 600 px
Principaux formats publicitaires
468 x 60 px
300 x 250 px
728 x 90 px
160 x 600 px

14. Date : 27/10/13
Document : Storyboard
300 x 600 px
Autres formats publicitaires
liste non exhaustive
120 x 90 px
250 x 250 px
120 x 60 px
120 x 240 px
180 x 150 px
125 x 125 px

15. Date : 27/10/13
Document : Storyboard
Utilisation des gabarits
dans le modèle 1 de storyboard
1
Copiez-collez le format à utiliser en le
calant précisément dans le coin supérieur
gauche de la grille du storyboard.
2
Il ne vous reste plus qu’à travailler votre
storyboard (un slide par séquence) !

16. Date : 27/10/13
Document : Storyboard | Modèle : 2 | Version : 1.0 | Auteur : Agence ABC | Statut : validé | Date de validation : 05/01/2013
TITRE ANIMATION
Séquence 1
Séquence 2
Séquence 3
Séquence 4
Description de l’animation
Taille : 300 x 250 pixels
Format : Animation flash
DÉROULÉ / INTERACTIONS
1
Le déroulé de l’animation et/ou la
description des différentes
interactions
2
Le déroulé de l’animation et/ou la
description des différentes
interactions
3
Le déroulé de l’animation et/ou la
description des différentes
interactions
4
Le déroulé de l’animation et/ou la
description des différentes
interactions

17. Date : 27/10/13
Document : Storyboard | Modèle : 3 | Version : 1.0 | Auteur : Agence ABC | Statut : validé | Date de validation : 05/01/2013
TITRE ANIMATION
Description de l’animation
1
Le déroulé de l’animation et/ou la description des
différentes interactions de la séquence numéro 1.
4
Le déroulé de l’animation et/ou la description des
différentes interactions de la séquence numéro 4.
2
5
Le déroulé de l’animation et/ou la description des
différentes interactions de la séquence numéro 2.
Le déroulé de l’animation et/ou la description des
différentes interactions de la séquence numéro 5.
3
6
Le déroulé de l’animation et/ou la description des
différentes interactions de la séquence numéro 3.
Le déroulé de l’animation et/ou la description des
différentes interactions de la séquence numéro 6.

18. Date : 27/10/13
Document : Storyboard | Modèle : 4 | Version : 1.0 | Auteur : Agence ABC | Statut : validé | Date de validation : 05/01/2013
TITRE ANIMATION
Description de l’animation
50 px
INTERACTIONS
Détail interaction 3
4
Détail interaction 4
5
Détail interaction 5
6
Déroulé de l’animation
Détail interaction 2
3
DÉROULÉ DE L’ANIMATION
Détail interaction 1
2
50 px
1
Détail interaction 6
N° DE SÉQUENCE :
1
DURÉE DE LA SÉQUENCE :
DÉBUT / FIN :
0’04’’
0’00’’ / 0’04’’

19. Benchmark de site internet
2 modèles

20. Date : 27/10/13
Document : Benchmark | Modèle : 1 | Version : 1.0 | Auteur : Agence ABC | Statut : validé | Date de validation : 05/01/2013
TITRE DU BENCHMARK
SECTEUR
Voyages
IMAGE SECTEUR
SITES A ANALYSER
Titre site
Titre site
1
url du site
IMAGE SITE
Titre site
IMAGE SITE
Titre site
url du site
IMAGE SITE
Titre site
url du site
10
IMAGE SITE
url du site
IMAGE SITE
Titre site
8
url du site
IMAGE SITE
Titre site
11
url du site
IMAGE SITE
Titre site
14
IMAGE SITE
IMAGE SITE
IMAGE SITE
url du site
7
Titre site
Titre site
13
url du site
IMAGE SITE
Titre site
9
url du site
4
url du site
IMAGE SITE
Titre site
6
url du site
Titre site
3
url du site
IMAGE SITE
Titre site
5
url du site
Titre site
2
url du site
url du site
12
IMAGE SITE
Titre site
15
IMAGE SITE
url du site
16
IMAGE SITE

21. Date : 27/10/13
Document : Benchmark | Modèle : 1 | Version : 1.0 | Auteur : Agence ABC | Statut : validé | Date de validation : 05/01/2013
TITRE DU BENCHMARK
SECTEUR
Voyages
IMAGE SECTEUR
SITES A ANALYSER
CONTENUS
FONCTIONNALITÉS
DESIGN
…
…
…
FRÉQUENCE
D’ACTUALISATION
DES CONTENUS
1
GABARITS
ÉDITORIAUX
4
1
7
1
OUTILS DE
RECHERCHE
2
1
OUTILS DE MISE EN
RELATION
5
1
8
1
3
1
6
1
9
1
GÉNÉRAL
DÉTAIL
LIGNE
ÉDITORIALE
…
…
…
…

22. Date : 27/10/13
Document : Benchmark | Modèle : 1 | Version : 1.0 | Auteur : Agence ABC | Statut : validé | Date de validation : 05/01/2013
TITRE DU BENCHMARK
SECTEUR
Voyages
IMAGE SECTEUR
NOM DU SITE
PREMIÈRES IMPRESSIONS
En une phrase, donner ici une description générale du site étudié (l’essentiel à
connaître et rien d’autre) puis préciser les premières impressions générales en
quelques lignes
DESIGN
IMAGE SITE
FONCTIONNALITÉS
Ce qu’il faut retenir du design, en quoi
celui-ci est intéressant, original, pertinent,
efficace ? L’expliquer clairement en
quelques lignes.
CONTENUS
Ce qu’il faut retenir des fonctionnalités, en
quoi celles-ci sont pertinentes, efficaces ?
L’expliquer clairement en quelques lignes.
1
Point-clé 1
1
Point-clé 1
2
Point-clé 2
2
Point-clé 2
3
Point-clé 3
3
Point-clé 3

EVALUATION
0
1
2
3
4
1
5
6
7
Point-clé 2
3

Point-clé 1
2
EVALUATION
7
1
Ce qu’il faut retenir des contenus, en quoi
ceux-ci sont intéressants, pertinents,
efficaces ? L’expliquer clairement en
quelques lignes.
Point-clé 3
EVALUATION
1
8
9
10
0
1
10
2
3
4
5
6
7
8
9
10
0
1
2
3
4
5
6
7
8
9
10

23. Date : 27/10/13
Document : Benchmark | Modèle : 1 | Version : 1.0 | Auteur : Agence ABC | Statut : validé | Date de validation : 05/01/2013
TITRE DU BENCHMARK
SECTEUR
Voyages
IMAGE SECTEUR
NOM DU SITE
PREMIÈRES IMPRESSIONS
En une phrase, donner ici une description générale du site étudié (l’essentiel à
connaître et rien d’autre) puis préciser les premières impressions générales en
quelques lignes
AUTRE SUJET A ANALYSER
IMAGE SITE
AUTRE SUJET A ANALYSER
Ce qu’il faut en retenir.
Ce qu’il faut en retenir.
1
Point-clé 1
1
Point-clé 2
2
Point-clé 2
3
Point-clé 3
3
Point-clé 3

EVALUATION
1
2
3
4
1
5
6
7
Point-clé 1
2
Point-clé 2
3
EVALUATION
x
0
1
Ce qu’il faut en retenir.
Point-clé 1
2
AUTRE SUJET A ANALYSER
Point-clé 3
EVALUATION
x
8
9
10
0
1
x
2
3
4
5
6
7
8
9
10
0
1
2
3
4
5
6
7
8
9
10

24. Date : 27/10/13
Document : Benchmark | Modèle : 1 | Version : 1.0 | Auteur : Agence ABC | Statut : validé | Date de validation : 05/01/2013
TITRE DU BENCHMARK
SECTEUR
Voyages
IMAGE SECTEUR
NOM DU SITE
IMAGE 1
IMAGE 3
DESCRIPTION IMAGE
DESCRIPTION IMAGE
IMAGE 2
1
IMAGE 4
DESCRIPTION IMAGE
DESCRIPTION IMAGE

25. Date : 27/10/13
Document : Benchmark | Modèle : 1 | Version : 1.0 | Auteur : Agence ABC | Statut : validé | Date de validation : 05/01/2013
TITRE DU BENCHMARK
SECTEUR
Voyages
IMAGE SECTEUR
NOM DU SITE : L’ESSENTIEL À RETENIR
PREMIÈRES IMPRESSIONS
En une phrase, donner ici une description générale
du site étudié (l’essentiel à connaître et rien
d’autre) puis préciser les premières impressions
générales en quelques lignes
INFO CLÉ A RETENIR 1
En une phrase, résumer l’information clé à retenir.
INFO CLÉ A RETENIR 2
En une phrase, résumer l’information clé à retenir.
IMAGE POINT
FORT SITE
1
TITRE POINT FORT 1
IMAGE POINT
FORT SITE
INFO CLÉ A RETENIR 3
En une phrase, résumer l’information clé à retenir.
TITRE POINT FORT 2
IMG POINT
FORT SITE
TITRE POINT FORT 3
IMG POINT
FORT SITE
TITRE POINT FORT 4
IMG POINT
FORT SITE
TITRE POINT FORT 5

26. Date : 27/10/13
Document : Benchmark | Modèle : 1 | Version : 1.0 | Auteur : Agence ABC | Statut : validé | Date de validation : 05/01/2013
TITRE DU BENCHMARK
SECTEUR
Voyages
IMAGE SECTEUR
SYNTHÈSE GLOBALE DU BENCHMARK
CONTENUS
FOCUS POINTS FORTS
BEST PRACTICES
Décrire les best practices identifiés en matière de
contenus parmi les différents sites étudiés.
IMAGE POINT
FORT SITE
NOM SITE + TITRE POINT FORT
NOM SITE + TITRE POINT FORT
IMAGE POINT
FORT SITE
IMAGE POINT
FORT SITE
NOM SITE + TITRE POINT FORT
FONCTIONNALITÉS
IMAGE POINT
FORT SITE
NOM SITE + TITRE POINT FORT
IMAGE POINT
FORT SITE
IMAGE POINT
FORT SITE
NOM SITE + TITRE POINT FORT
NOM SITE + TITRE POINT FORT
BEST PRACTICES
Décrire les best practices identifiés en matière de
contenus parmi les différents sites étudiés.
DESIGN
BEST PRACTICES
Décrire les best practices identifiés en matière de
design parmi les différents sites étudiés.

27. Date : 27/10/13
Document : Benchmark | Modèle : 2 | Version : 1.0 | Auteur : Agence ABC | Statut : validé | Date de validation : 05/01/2013
BENCHMARK [NOM DU SITE DE RÉFÉRENCE]
SITES ANALYSÉS
LOGO SITE
LOGO SITE
LOGO SITE
LOGO SITE
LOGO SITE
LOGO SITE
LOGO SITE
LOGO SITE
LOGO SITE
LOGO SITE
LOGO SITE
LOGO SITE

28. Date : 27/10/13
Document : Benchmark | Modèle : 2 | Version : 1.0 | Auteur : Agence ABC | Statut : validé | Date de validation : 05/01/2013
BENCHMARK [NOM DU SITE DE RÉFÉRENCE]
ASPECTS ANALYSÉS
WEB DESIGN
CONTENUS
ERGONOMIE
FONCTIONNALITÉS
Graphisme
Editorial
Navigation
Performance web
Graphisme
Formats
Parcours
utilisateur
…
…
…
…
…
…
…
…
…
…
…
…
…

29. Date : 27/10/13
Document : Benchmark | Modèle : 2 | Version : 1.0 | Auteur : Agence ABC | Statut : validé | Date de validation : 05/01/2013
BENCHMARK [NOM DU SITE DE RÉFÉRENCE]
NOM DU SITE
Best practice 3
IMG
Best Practice 1
RÉSUMÉ
ATOUT/CARACTÉRISTIQUE 1
ATOUT/CARACTÉRISTIQUE 3
ATOUT/CARACTÉRISTIQUE 2
ATOUT/CARACTÉRISTIQUE 4
Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Pellentesque sed elit massa. Praesent
venenatis nibh vel urna molestie
aliquet. Morbi quis Lorem ipsum dolor
sit amet, consectetur adipiscing elit.
Pellentesque sed elit massa. Praesent
venenatis nibh vel urna molestie ipsum
dolor
Best practice 1
Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Pellentesque sed elit massa. Praesent venenatis
nibh vel urna molestie aliquet. Morbi quis metus
ligula. Maecenas vehicula Lorem ipsum dolor
Alternative 1
IMG
Best Practice 2
Best Practice 3
PREMIÈRES
IMPRESSIONS
DESIGN
(Qualité/Originalité/…)
CONTENUS FONCTIONNALITÉS
(Qualité/Pertinence/
Fréquence de mise
à jour/…)
(Qualité/Originalité/…)
Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Pellentesque sed elit massa. Praesent venenatis
nibh vel urna molestie aliquet. Morbi quis metus ligula.
Maecenas vehicula Lorem ipsum dolor
IMG
Best
Practice 3

30. Date : 27/10/13
Document : Benchmark | Modèle : 2 | Version : 1.0 | Auteur : Agence ABC | Statut : validé | Date de validation : 05/01/2013
BENCHMARK [NOM DU SITE DE RÉFÉRENCE]
NOM DU SITE
Best practice 3
IMG
Best Practice 1
RÉSUMÉ
ATOUT/CARACTÉRISTIQUE 1
ATOUT/CARACTÉRISTIQUE 3
ATOUT/CARACTÉRISTIQUE 2
ATOUT/CARACTÉRISTIQUE 4
PREMIÈRES IMPRESSIONS
Best practice 1
Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Pellentesque sed elit massa. Praesent venenatis
nibh vel urna molestie aliquet. Morbi quis metus
ligula. Maecenas vehicula Lorem ipsum dolor
Alternative 2
NAVIGATION
DESIGN
ERGONOMIE
CONTENUS
FONCTIONNALITÉS
Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Pellentesque sed elit massa. Praesent
venenatis nibh vel urna molestie
aliquet. Morbi quis Lorem ipsum dolor
sit amet, consectetur adipiscing elit.
Pellentesque sed elit massa. Praesent
venenatis nibh vel urna molestie ipsum
dolor
IMG
Best Practice 2
Best Practice 2
Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Pellentesque sed elit massa. Praesent venenatis
nibh vel urna molestie aliquet. Morbi quis metus ligula.
Maecenas vehicula Lorem ipsum dolor
IMG
Best
Practice 3

31. Date : 27/10/13
Document : Benchmark | Modèle : 2 | Version : 1.0 | Auteur : Agence ABC | Statut : validé | Date de validation : 05/01/2013
BENCHMARK [NOM DU SITE DE RÉFÉRENCE]
Alternative 1
SYNTHÈSE MEILLEURES PRATIQUES
WEB DESIGN
CONTENUS
ERGONOMIE
FONCTIONNALITÉS
1
BEST PRACTICE 1
BEST PRACTICE 1
BEST PRACTICE 1
BEST PRACTICE 1
2
BEST PRACTICE 2
BEST PRACTICE 2
BEST PRACTICE 2
BEST PRACTICE 2
Nom site
Nom site
Nom site
Nom site
BEST PRACTICE 3
BEST PRACTICE 3
BEST PRACTICE 3
BEST PRACTICE 3
Nom site
Nom site
Nom site
Nom site
BEST PRACTICE 4
BEST PRACTICE 4
BEST PRACTICE 4
BEST PRACTICE 4
Nom site
Nom site
Nom site
Nom site
BEST PRACTICE 5
BEST PRACTICE 5
BEST PRACTICE 5
BEST PRACTICE 5
Nom site
Nom site
Nom site
Nom site
3
4
5
Nom site
Nom site
Nom site
Nom site

32. Date : 27/10/13
Document : Benchmark | Modèle : 2 | Version : 1.0 | Auteur : Agence ABC | Statut : validé | Date de validation : 05/01/2013
BENCHMARK CETELEM
BENCHMARK [NOM DU SITE DE RÉFÉRENCE]
Alternative 2
SYNTHÈSE MEILLEURES PRATIQUES
Best practice 4
IMG
Meilleure pratique 1
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Pellentesque sed elit massa.
Praesent venenatis nibh vel urna molestie aliquet.
Best practice 3
IMG
Meilleure
pratique 2
Best practice 2
Lorem ipsum dolor sit amet,
consectetur adipiscing.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Pellentesque sed elit massa..
IMG
Meilleure pratique 3
IMG
Meilleure
pratique 6
IMG
Meilleure
pratique 5
IMG
Meilleure
pratique 5
IMG
Meilleure
pratique 5
IMG
Meilleure pratique
4
Best practice 1
Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Pellentesque
sed elit massa. Praesent consectetur
adipiscing elit. Pellentesque sed elit
massa. Praesent venenatis nibh rna
molestie aliquet.
Best practice 5
IMG
Meilleure
pratique 5
Best practice 6
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Pellentesque sed elit massa..
IMG
Meilleure pratique 7
Best practice 7
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Pellentesque sed elit massa..

33. IDENTIFIER LES SITES À OBSERVER
ET LES SUJETS À TRAITER
QUELS SITES OBSERVER ?
1
Sites web des concurrents directs
Prenez le temps de les parcourir puis sélectionnez les plus
intéressants à étudier.
2
Sites de référence dans votre secteur
3
Sites similaires
En fonction des objectifs de votre site internet (vendre,
communiquer, recruter, informer…), recherchez les sites de
référence qui ont les mêmes problématiques, quels que
soient leurs secteurs d’activité.
4
QUOI OBSERVER ?
Sites étrangers
Pensez international afin de voir ce qui se fait de meilleur
dans votre domaine à l’étranger.
CONCLUSION
La sélection des sujets à observer dépend avant tout des raisons qui vous
amènent à réaliser un benchmark : ainsi, dans le cadre de la réponse à
un appel d’offres pour la refonte d’un site internet, le benchmark sera
certainement assez large et s’intéressera à des aspects relevant aussi
bien des fonctionnalités d’un site internet, des technologies employées
que de sa direction artistique ou de ses contenus.
A l’opposé, si vous êtes amené à penser l’animation éditoriale d’un site
internet, vous vous focaliserez sur des sujets ayant trait aux contenus, à
la ligne éditoriale, aux gabarits utilisés, à la fréquence de publication, aux
sujets traités, aux formats utilisés, aux relais (médias sociaux,
newsletter…) pour promouvoir les contenus, etc.
A vous de définir ce que vous souhaitez analyser !
Plus vous serez précis et plus le benchmark vous permettra d’identifier les points forts des sites étudiés. Veillez toutefois à ne
pas sélectionner trop de sites et de sujets d’analyse. 3 à 4 sujets généraux et 5 à 8 sujets détaillés liés devraient suffire à
réaliser un benchmark de qualité.

34. Personas
3 modèles

35. Date : 27/10/13
Document : Personas | Modèle : 1 | Version : 1.0 | Auteur : Agence ABC | Statut : validé | Date de validation : 05/01/2013
PERSONAS
NOM DU SITE
« Citation »
« Citation »
PHOTO
SURNOM /
QUALIFICATIF
PHOTO
PERSONA
PRIMAIRE
18 %
des utilisateurs
SURNOM /
QUALIFICATIF
« Citation »
11 %
des utilisateurs
« Citation »
PHOTO
SURNOM /
QUALIFICATIF
PERSONA
PRIMAIRE
PHOTO
PERSONA
PRIMAIRE
13 %
des utilisateurs
SURNOM /
QUALIFICATIF
PERSONA
SECONDAIRE
04 %
des utilisateurs

36. Date : 27/10/13
Document : Personas | Modèle : 1 | Version : 1.0 | Auteur : Agence ABC | Statut : validé | Date de validation : 05/01/2013
PERSONAS
NOM DU SITE
PROFIL UTILISATEUR ET CONTEXTE
SURNOM /
QUALIFICATIF
PHOTO
« Citation »
VALEUR 1
EQUIPEMENT
IDENTITÉ
NOM
Profil utilisateur et contexte
ÂGE
Objectifs / motivations
VILLE / RÉGION
CSP
Internet
+ wifi
FORMATION
ACTIVITÉS
-
Nb
PC
Nb
smartphones
QUESTIONS
+
Questions
INFORMATIQUE
PRATIQUE
D’INTERNET
(PERSO)
MOBILITÉ
ACTIVITÉ / CENTRE D’INTÉRÊT 2
-
Nb
tablettes
EXPÉRIENCES ET USAGES
ACTIVITÉ / CENTRE D’INTÉRÊT 1
SCÉNARIOS
+
Scénario 1
ACTIVITÉ / CENTRE D’INTÉRÊT 3
-
+
PRATIQUE
D’INTERNET
(PRO)
USAGES
NUMÉRIQUES
ACTIVITÉ / CENTRE D’INTÉRÊT 4
+
VALEUR 3
OBJECTIFS / MOTIVATIONS
@
MÉTIER
VALEUR 2
TEMPS PASSÉ
SUR INTERNET
1
Scénario 2
2
1
Scénario 3
3
1

37. Date : 27/10/13
Document : Personas | Modèle : 2 | Version : 1.0 | Auteur : Agence ABC | Statut : validé | Date de validation : 05/01/2013
PROFIL UTILISATEUR ET CONTEXTE
Profil utilisateur et contexte
PHOTO
OBJECTIFS
SURNOM /
QUALIFICATIF
Objectifs
MOTIVATIONS
Motivations
« CITATION »
USAGES
IDENTITÉ
NOM
COMPORTEMENTS
INFORMATIQUE
INTERNET
VARIABLE 1
COMPORTEMENT
VARIABLE 2
ÂGE
MÉTIER
INTERNET (temps passé)
VILLE / RÉGION
COMPORTEMENT
AUTRE USAGE
FORMATION
COMPORTEMENT OPPOSÉ
VARIABLE 3
MOBILITÉ
CSP
COMPORTEMENT OPPOSÉ
COMPORTEMENT
COMPORTEMENT OPPOSÉ
VARIABLE 4
COMPORTEMENT
COMPORTEMENT OPPOSÉ

38. Date : 27/10/13
Document : Personas | Modèle : 3 | Version : 1.0 | Auteur : Agence ABC | Statut : validé | Date de validation : 05/01/2013
SURNOM
« CITATION »
NOM
PHOTO
ÂGE
MÉTIER
PROFIL UTILISATEUR ET CONTEXTE
VILLE / RÉGION
FORMATION
Profil utilisateur et contexte
USAGES
INFORMATIQUE
INTERNET
OBJECTIFS
MOBILITÉ
Objectifs
AUTRE USAGE
MOTIVATIONS
Motivations
COMPORTEMENTS
VARIABLE 1
COMPORTEMENT
COMPORTEMENT OPPOSÉ
VARIABLE 2
COMPORTEMENT
COMPORTEMENT OPPOSÉ
VARIABLE 3
COMPORTEMENT
COMPORTEMENT OPPOSÉ
VARIABLE 4
COMPORTEMENT
COMPORTEMENT OPPOSÉ
RÉPONSES
Réponses
Réponses à apporter en termes de contenus, de mise en avant,
d’outils, de fonctionnalités, de style, de wording, etc.

39. PERSONAS
Définition et mise en place
LECTURES RECOMMANDÉES
1
L’outil pour définir ses personas E-commerce
Auteur : Matthieu Tran-Van
http://www.matthieu-tranvan.fr/webmarketing/taux-de-conversion-webmarketing/outil-definir-personas-ecommerce.html
2
Définir ses personas : l’info. et les outils pour mieux connaître les visiteurs de son site Internet
Auteur : Matthieu Tran-Van
http://www.matthieu-tranvan.fr/revue-de-tendance/e-business/definir-ses-personas-tous-les-outils-et-lesinformations-pour-mieux-connaitre-les-visiteurs-de-son-site-internet-partie-3.html
3
Les personas
Auteur : Raphaël
http://blocnotes.iergo.fr/breve/motsetphrases/les-personas/
4
Personas: définition et démarche
Auteur : Jean Claude Grosjean
http://www.qualitystreet.fr/2008/12/29/personas-definition-et-demarche/
5
Les personas, ces utilisateurs presque pas virtuels qui sauvent vos projets
Auteur : Frédéric de Villamil
http://t37.net/les-personas-ces-utilisateurs-presque-pas-virtuels-qui-sauvent-vos-projets.html

40. Calendrier éditorial
2 modèles

41. ocument : Calendrier éditorial | Modèle : 1 | Version : 1.0 | Auteur : Agence ABC | Statut : validé | Date de validation : 05/01/2013
JANVIER
1
FÉVRIER
Les tendances du
marketing en
2013
Services marketing /
communication
8
Interview vidéo
DRH
Service communication
+ agence de
communication
CONTENUS
14
Newsletter
Service marketing /
Agence web +
Prestataire routage
17
Billet de blog
Services marketing /
Agence éditoriale
web
Site
internet
RELAIS
ACTUALITÉ
Site
partenaire
Blog
partenaire
Réseau social :
réseau A
Réseau social :
réseau B
Réseau social :
réseau C
SUPPORT
PRINCIPAL DE
PUBLICATION
Blog
Réseau social :
réseau D
t
g
in
f
yt
 Actualités liées au
business (lancement du
produit X, du service Y), à
un événement calendaire,
à l’organisation, etc.
MARS
AVRIL
MAI
JUIN

42. ocument : Calendrier éditorial | Modèle : 1 | Version : 1.0 | Auteur : Agence ABC | Statut : validé | Date de validation : 05/01/2013
JUILLET
CONTENUS
SUPPORT
PRINCIPAL DE
PUBLICATION
RELAIS
ACTUALITÉ
AOÛT
SEPTEMBRE
OCTOBRE
NOVEMBRE
DÉCEMBRE

43. ocument : Calendrier éditorial | Modèle : 2 | Version : 1.0 | Auteur : Agence ABC | Statut : validé | Date de validation : 05/01/2013
CALENDRIER ÉDITORIAL JANVIER 2013
Les tendances du
marketing en 2013
1/01
t
g
in
f
MKTG COM
LANCEMENT PRODUIT
12/01
Interview DRH
SEMINAIRE
t
yt
COM
COM
WEB
18/01
La matrice du
content marketing
ACTUALITÉ
MKTG COM
COM
WEB
29/01
Newsletter
janvier
MKTG COM
t
Légende Twitter
g
in
f
yt
Google+ LinkedIn Facebook YouTube Flux RSS
…
…
MKTG
COM
WEB
Service
Service
Agence
marketing communication web
COM
EDITO
…
Agence
com
Agence
édito
Agence
…
WEB
Guide
Article /
Vidéo
Billet de blog
Photo
Infographie Newsletter
…
Actualité

44. Brief
2 modèles

45. Date : 27/10/13
Document : Brief | Modèle : 1 | Version : 1.0 | Auteur : Agence ABC | Statut : validé | Date de validation : 05/01/2013
LOGO
BRIEF V1.0
Nom du projet
LOGO
CLIENT
(DATE)
type de projet
CONTEXTE / OBJECTIFS / CIBLES
DEMANDE
SPÉCIFICATIONS
SOURCES / DOCUMENTS ANNEXES
Client / Marque
Livrables attendues
Deadline / Date de mise en ligne
Budget / Ressources
Equipe projet

46. Date : 27/10/13
Document : Brief | Modèle : 1 | Version : 1.0 | Auteur : Agence ABC | Statut : validé | Date de validation : 05/01/2013
LOGO
BRIEF V1.0
Nom du projet
LOGO
CLIENT
(DATE)
type de projet
Refonte de site internet / Réécriture de
contenus / Charte éditoriale / Création
d’une animation web / Infographie / etc.
Client / Marque
Logo / Nom du client / de sa (ses)
marque(s)
CONTEXTE / OBJECTIFS / CIBLES
1- Clarifier le contexte du projet : site obsolète, volonté
d’harmoniser les différents supports de communication,
chute des ventes,
2- Définir les cibles principales et secondaires
3- Préciser les objectifs du projet : se lancer dans le ecommerce, développer l’image de la marque, engager le
dialogue avec ses prospects/clients, etc.
DEMANDE
1- Définir la demande de façon synthétique et claire
2- Poser le territoire d’expression de la marque (identité
visuelle, langage, tonalité, personnalité, signature, etc.)
3- Décrire la stratégie, le message à faire passer
4- Lister les indicateurs de performances clés (KPI)
5- Décrire l’ensemble des contraintes
Livrables attendues
Conception / Maquettes graphiques /
Contenus éditoriaux / ZoningWireframes / Etc.
Deadline / Date de mise en ligne
La deadline est la date à laquelle les
contenus doivent être livrés.
Budget / Ressources
Budget alloué au projet et
profils/ressources nécessaires.
Equipe projet
Identité de tous les intervenants au
projet avec leurs missions et leurs
rôles spécifiques dans le projet.
SPÉCIFICATIONS
• Technologies (site en html 5, bannière pub au format
flash, site …)
• Spécifications (poids, taille…)
• Achat d’art
• Tags à intégrer
• Hébergement
• Langues
•…
SOURCES / DOCUMENTS ANNEXES
Afin de donner le maximum de « clés » à ceux qui vont
intervenir sur le projet, un brief s’accompagne, en règle
générale, de sources et autres documents annexes :
maquettes graphiques, charte graphique, analyse de
l’existant, benchmark de la concurrence,, conception web,
audit (contenus, ergonomie, graphisme), gabarits
éditoriaux, stratégie éditoriale, charte éditoriale,, etc.
Objectif de ces documents : offrir une vision d’ensemble,
permettre de mieux cerner le contexte du projet, ses
objectifs… et la manière dont celui-ci va s’inscrire dans une
stratégie globale efficace.

47. Date : 27/10/13
Document : Brief
Brief :
l’incontournable phase de discussion
Si de la qualité d’un brief écrit dépend la compréhension et le bon déroulement
d’un projet, gardez à l’esprit que celui-ci ne se suffit jamais. Il doit toujours servir à
nourrir une discussion orale réunissant les différents intervenants au projet. Ces
échanges vont permettre de faire de faire la lumière sur les points critiques ainsi
qu’à préciser et enrichir d’autres aspects du brief.
INCONTOURNABLE !

48. Zoning
1 modèle

49. Date : 27/10/13
Document : Zoning | Modèle : 1 | Version : 1.0 | Auteur : Agence ABC | Statut : validé | Date de validation : 05/01/2013
Espace utile de 980
pixels en 1024 pixels
100 px
200 px
300 px
400 px
500 px
600 px
700 px
800 px
900 px
1000 px
1100 px
1200 px
1300 px
1400 px
1500 px
HEADER
100 px
200 px
300 px
Web safe area = Zone
maximale visible pour une
résolution donnée
400 px
500 px
BODY
Ligne de flottaison
600 px
700 px
800 px
900 px
1000 px
La ligne de flottaison correspond à la ligne en dessous de laquelle les contenus ne sont pas directement
visibles à l’écran dans un navigateur web.
Elle dépend donc de la résolution de l’écran de l’internaute. La ligne de flottation est variable :
- Résolution de 1366 x 768 pixels => ligne de flottaison à environ 560 pixels
-Résolution de 1280 x 1024 pixels => ligne de flottaison à environ 820 pixels
- Résolution de 1440 x 1080 pixels => ligne de flottaison à environ 880 pixels
- Résolution de 1920 x 1200 pixels => ligne de flottaison à environ 1000 pixels
L’écart entre la résolution et la hauteur de la ligne de flottaison tient au fait que la partie haute du
navigateur (ligne de menu notamment + barre d’état) occupe une partie de l’espace utile visible.
Pour déterminer la ligne de flottaison optimale d’un site, il faut donc prendre en compte les résolutions
les plus utilisées par les internautes à un moment donné.
En savoir plus sur le sujet : http://www.websitedimensions.com/
1100 px
1200 px
FOOTER

50. Date : 27/10/13
Document : Zoning | Modèle : 1 | Version : 1.0 | Auteur : Agence ABC | Statut : validé | Date de validation : 05/01/2013
Espace utile en
1024 pixels
100 px
200 px
300 px
400 px
LOGO
500 px
600 px
700 px
800 px
RUBRIQUE 2
RUBRIQUE 3
300 px
VISUEL
PRODUIT
MINIATURES
AUTRES VUES
RUBRIQUE 4
1300 px
1400 px
1500 px
HEADER
RUBRIQUE 5
VUES AUTRES VISUELS
(MINIATURES
NOM PRODUIT
PRIX PRODUIT
DESCRIPTIF + NOTATION PRODUIT
Un exemple de zoning :
page produit d’un site ecommerce
PARAMÉTRAGE CARACTÉRISTIQUES
PRODUIT (taille, couleur, etc.)
ACTIONS
ACHETER / METTRE DE CÔTÉ / ETC.
Ligne de flottaison
600 px
700 px
1200 px
FIL D’ARIANE
ITEMS DE PARTAGE SOCIAL
500 px
1100 px
PANIER
RUBRIQUE 1
400 px
1000 px
ESPACE CLIENT
RECHERCHE WEB
100 px
200 px
900 px
BODY
ÉLÉMENTS DE RÉASSURANCE
(PAIEMENT SÉCURISÉ, GARANTIE…)
800 px
CONTENU ÉDITORIAL ET/OU VIDÉO
(VALORISATION DU SAVOIR-FAIRE DU FABRICANT)
900 px
1000 px
CROSS-LINKING
(CEUX QUI ONT ACHETÉ CE PRODUIT ONT AUSSI AIMÉ)
1100 px
LIENS
(MENTIONS LÉGALES, CONTACT, AIDE, ETC.)
1200 px
Là aussi, en pre-footer, il aurait été
possible d’intégrer un bloc d’inscription
à la newsletter, un push de
géolocalisation des boutiques, etc.
FOOTER

51. Date : 27/10/13
Document : Zoning
Eléments constitutifs d’un zoning
liste non exhaustive
CONTENUS
 TEXTES
 IMAGES
 MÉDIAS
 LIENS HYPERTEXTES
FIL D’ARIANE / NAVIGATION PRINCIPALE OU
SECONDAIRE / LOGO / PHOTO / LÉGENDE IMAGE /
BRÈVE / ARTICLE / INFOGRAPHIE / VIDÉO / PUSH
NOUVEAUTÉS / PUSH PRODUITS OU SERVICES /
REMONTÉE RÉSEAUX SOCIAUX / LIENS CONNEXES /
ÉLÉMENTS DE RÉASSURANCE / LIENS FOOTER / ETC.
FONCTIONNALITÉS
 FORMULAIRE DE CONTACT
 CHAMP DE RECHERCHE
 RECHERCHE A FACETTE
 ABONNEMENT NEWSLETTER
 MODULE DE GÉOLOCALISATION
 DIAPORAMA
 LECTEUR VIDÉO
 CHAT
 WEB CALL BACK
 FORUM
 QUIZ
 SONDAGE
 COMPTE
 NOTATION PRODUIT
 ETC.

52. Date : 27/10/13
Document : Zoning
Zoning / Wireframes :
quelle différence ?
AUCUNE DIFFÉRENCE…
… ENFIN, PRESQUE !
En anglais, on emploie le terme Wireframe (marquette en
fil de fer), traduit en français par le mot Zoning.
Dans certaines agences web, la distinction est parfois faite
entre le travail sur le zoning et la création des wireframes.
Lorsqu’on parle de zoning ou de wireframe, on parle donc
globalement de la même chose.
Le zoning est alors une version simplifiée de la structure
d’une page de site internet. Elle sert à poser les grandes
masses, les grandes zones. C’est le modèle (page produit de
site e-commerce) que vous trouvez précédemment en
exemple.
Le wireframe constitue une version complète et très
détaillée de la structure d’une page de site internet. C’est
un modèle que nous traiterons ultérieurement dans nos
gabarits.

53. Ces contenus sont mis à votre disposition selon les termes de la
Licence Creative Commons Attribution 3.0 France.
http://creativecommons.org/licenses/by/3.0/fr/
http://www.metacontents.fr