Kit du producteur de contenus web [Version 0.7]

Kit du producteurde contenus web

VERSION :DATE DE PUBLICATION :

AUTEUR : WEB :

META CONTENTS ([email protected])WWW.METACONTENTS.FR

0.722/10/2013

GABARITSArborescence 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

Arborescence de site internet

5 modèles

TITRE RUBRIQUE 1

TITRE RUBRIQUE 2

TITRE RUBRIQUE 3

TITRE RUBRIQUE 4

TITRE RUBRIQUE 5

Page 1

Page 2

Page 3

Page 4

Page 5

Page 6

Page …

Page 1

Page 2

Page 3

Page 4

Page 5

Page 6

Page …

Page 1

Page 2

Page 3

Page 4

Page 5

Page 6

Page …

Page 1

Page 2

Page 3

Page 4

Page 5

Page 6

Page …

Page 1

Page 2

Page 3

Page 4

Page 5

Page 6

Page …

Home page [NOM_SITE] Information complémentaire

Document : Arborescence | Modèle : 1 | Version : 1.0 | Auteur : Agence ABC | Statut : validé | Date de validation : 05/01/2013 Date : 04/10/23

Home page [NOM_SITE] Information complémentaire

Sous-rubrique 1

HEADER

FOOTER

FonctionnalitéEntrée par profil

PageRecherche Page

Page 1 Page 2 Page 3 Page 4 …

Sous-rubrique 2


Sous-rubrique 3


Sous-rubrique 1


Sous-rubrique 2


Sous-rubrique 3


Sous-rubrique 1


Sous-rubrique 2


Sous-rubrique 3


Sous-rubrique 1


Sous-rubrique 2


Sous-rubrique 3


Sous-rubrique 1


Sous-rubrique 2


Sous-rubrique 3


Copyright Haut de pageContactMentions légalesRecrutement

Espace client

Page PagePagePagePage

TITRE RUBRIQUE 1

TITRE RUBRIQUE 2

TITRE RUBRIQUE 3

TITRE RUBRIQUE 4

TITRE RUBRIQUE 5


RUBRIQUE 1

RUBRIQUE 2

RUBRIQUE 3

RUBRIQUE 3

RUBRIQUE 5

Page 1

Page 2

Page 4

Page 4

Page 3Page 1

Page 2

Page 3

Page 4

Page 5

Page 1

Page 2

Page 3

Page 4

Page 5

Page 1

Page 5

Page 2

Page 3

Page 4

Page 1

Page 2

Page 3

Page 4

Page 5

RUBRIQUE 3

HOMEPAGE


Home page

Page 1

Page 2

Page 3

Page 4

Page 5

Page 1

Page 2

Page 3

Page 4

Page 5

Page 1

Page 2

Page 3

Page 4

Page 5

Page 1

Page 2

Page 3

Page 4

Page 5

Page 1

Page 2

Page 3

Page 4

Page 5

Page 1

Page 2

Page 3

Page 4

Page 5

Page 1

Page 2

Page 3

Page 4

Page 5

Page 1

Page 2

Page 3

Page 4

Page 5

Rubrique 4 Rubrique 5Rubrique 3

Page 1

Page 2

Page 3

Page 4

Page 5

Page 1

Page 2

Page 3

Page 4

Page 5

Page 1

Page 2

Page 3

Page 4

Page 5

Page 1

Page 2

Page 3

Page 4

Page 5

Rubrique 2

Page 1

Page 2

Page 3

Page 4

Page 5

Page 1

Page 2

Page 3

Page 4

Page 5

Page 1

Page 2

Page 3

Page 4

Page 5

Page 1

Page 2

Page 3

Page 4

Page 5

Sous-rubrique 1Page 1

Page 2

Page 3

Page 4

Page 5

Page 1

Page 2

Page 3

Page 4

Page 5

Page 1

Page 2

Page 3

Page 4

Page 5

Page 1

Page 2

Page 3

Page 4

Page 5

Rubrique 1

Sous-rubrique 2

Sous-rubrique 3

Sous-rubrique 4

Sous-rubrique 1

Sous-rubrique 2

Sous-rubrique 3

Sous-rubrique 4

Sous-rubrique 3

Sous-rubrique 2

Sous-rubrique 1

Sous-rubrique 4

Sous-rubrique 1

Sous-rubrique 2

Sous-rubrique 3

Sous-rubrique 4

Sous-rubrique 2

Sous-rubrique 3

Sous-rubrique 4

Sous-rubrique 1


Document : Arborescence | Modèle : 5 | Version : 1.0 | Auteur : Agence ABC | Statut : validé | Date de validation : 05/01/2013

RUBRIQUE

RUBRIQUE

PAGE

PAGE

PAGE

PAGE

PAGE

PAGE

PAGE

PAGEPAGE

PAGE

PAGE

PAGE

PAGE

PAGE

PAGE

PAGE

PAGE

PAGE

PAGE

PAGE

PAGE

RUBRIQUE

PAGE

PAGE

PAGE

PAGEPAGE

PAGE

PAGE

PAGE

PAGE

RUBRIQUE

PAGE

PAGE

PAGEPAGE

PAGE

PAGE

PAGE

PAGE

PAGE

PAGE

PAGE

PAGE

PAGE

HOME PAGE

PAGE

PAGE

PAGE

PAGEPAGE

RUBRIQUE

Date : 10/04/23


PAGE 1PAGE 1

PAGE 2PAGE 2

PAGE 3PAGE 3

PAGE 5PAGE 5

PAGE 4PAGE 4

HOME PAGEHOME PAGE

RUBRIQUE 2RUBRIQUE 2RUBRIQUE 1RUBRIQUE 1 RUBRIQUE 5RUBRIQUE 5RUBRIQUE 4RUBRIQUE 4RUBRIQUE 3RUBRIQUE 3

PAGE 1PAGE 1

PAGE 2PAGE 2

PAGE 3PAGE 3

PAGE 5PAGE 5

PAGE 4PAGE 4

PAGE 1PAGE 1

PAGE 2PAGE 2

PAGE 3PAGE 3

PAGE 5PAGE 5

PAGE 4PAGE 4

PAGE 1PAGE 1

PAGE 2PAGE 2

PAGE 3PAGE 3

PAGE 5PAGE 5

PAGE 4PAGE 4

PAGE 1PAGE 1

PAGE 2PAGE 2

PAGE 3PAGE 3

PAGE 5PAGE 5

PAGE 4PAGE 4

LIEN 1 | LIEN 2 | LIEN 3 | LIEN 4 | LIEN …

FOOTERFOOTER

FONCTIONNALITÉSFONCTIONNALITÉS

MOTEUR DE RECHERCHE FORMULAIRE DE CONTACT MODULE DE GÉOLOCALISATION WEB CALL BACK PLAYER VIDÉO / CHAT / FORUM /

SONDAGE / QUIZ / ETC.

TYPE DE CONTENUS

Texte Images vidéo Animation(flash /html5)

FONCTIONNALITÉS

Formulairede contact

Espace privé Flux RSS

ACTUALISATION DES CONTENUS

jamais limitée ponctuelle régulière fréquente

Newsletter Sondage / quiz Chat

Géolocalisation Web call back

Moteur de recherche

Blog

Agenda

Forum

FONCTIONNALITÉS

LÉGENDE ASSOCIÉE (A ADAPTER)

TYPE DE CONTENUS

Texte Images vidéo Animation(flash /html5)

ACTUALISATION DES CONTENUS

jamais limitée ponctuelle régulière fréquente

ITEMS A INTÉGRER DANS LES DIFFÉRENTS MODÈLES D’ARBORESCENCE (A ADAPTER)

O / N 29

CALL

O / N 29 CALL

O / N 29 CALL

Formulaire de contact

Espace privé Flux RSS Blog Newsletter Sondage /

quiz Chat Agenda Géolocalisation Web call back Moteur de recherche Forum

Eléments complémentaires pour personnaliser une arborescence de site internet

Date : 10/04/23

Storyboard d’animation web /de bannière publicitaire

4 modèles

100 px50 px 200 px

50 px

100 px

250 px 300 px 350 px 400 px 450 px 500 px 550 px

150 px

200 px

250 px

300 px

350 px

400 px

600 px 650 px 700 px 750 px

450 px

500 px

550 px

600 px

468 px

60 px

728 px

90 px

120 px 160 px

150 px

TITRE ANIMATION

SÉQUENCE

DÉROULÉ /INTERACTIONS

TRANSITION

N° de séquence :

Durée de la séquence :

Début / Fin :

Format :

Taille :

Vidéo / Flash / Html 5

1

Description de l’animation

160 x 600 pixels

1

8’

0’00 / 0’15’’

2

3

4

5

Type de transition

Document : Storyboard | Modèle : 1 | Version : 1.0 | Auteur : Agence ABC | Statut : validé | Date de validation : 05/01/2013 Date : 10/04/23

Principaux formats publicitaires160 x 600 px120 x 600 px

468 x 60 px

300 x 250 px

728 x 90 px

Document : Storyboard Date : 10/04/23

Autres formats publicitairesliste non exhaustive

120 x 60 px

125 x 125 px180 x 150 px

120 x 240 px

300 x 600 px

250 x 250 px120 x 90 px


Utilisation des gabaritsdans le modèle 1 de storyboard

Copiez-collez le format à utiliser en le calant précisément dans le coin supérieur gauche de la grille du storyboard.

1Il ne vous reste plus qu’à travailler votre storyboard (un slide par séquence) !2


Séquence

Séquence Séquence

TITRE ANIMATION

Format :

Taille :

DÉROULÉ / INTERACTIONS

Séquence

Document : Storyboard | Modèle : 2 | Version : 1.0 | Auteur : Agence ABC | Statut : validé | Date de validation : 05/01/2013

Description de l’animation

300 x 250 pixels

Animation flash

1

2

3

4

Le déroulé de l’animation et/ou la description des différentes interactions




1 2

43

Date : 10/04/23

1 2 3

4 5 6Le déroulé de l’animation et/ou la description des différentes interactions de la séquence numéro 5.

Le déroulé de l’animation et/ou la description des différentes interactions de la séquence numéro 1.






Description de l’animationTITRE ANIMATION

Date : 10/04/23

50 px

50 p

x

INTERACTIONS

DÉROULÉ DE L’ANIMATION N° DE SÉQUENCE :

DURÉE DE LA SÉQUENCE :

DÉBUT / FIN :


1

2

3

4

5

6

Déroulé de l’animation

Détail interaction 1






1

0’04’’

0’00’’ / 0’04’’

Description de l’animationTITRE ANIMATION

Date : 10/04/23

Benchmark de site internet2 modèles

IMAGE SECTEURSECTEUR

1

5

9

IMAGE SITE

IMAGE SITE

IMAGE SITE

13IMAGE SITE

2

6

10IMAGE SITE

IMAGE SITE

IMAGE SITE

14IMAGE SITE

3

7

11

IMAGE SITE

IMAGE SITE

IMAGE SITE

15IMAGE SITE

4

8

12IMAGE SITE

IMAGE SITE

IMAGE SITE

16IMAGE SITE

Titre siteurl du site












TITRE DU BENCHMARKVoyages





Document : Benchmark | Modèle : 1 | Version : 1.0 | Auteur : Agence ABC | Statut : validé | Date de validation : 05/01/2013

SITES A ANALYSER

Date : 10/04/23


GÉNÉRAL

DÉTAIL

17

18

19

14

15

16

11

12

13

TITRE DU BENCHMARKVoyages

CONTENUS FONCTIONNALITÉS DESIGN


FRÉQUENCE D’ACTUALISATION

DES CONTENUS

OUTILS DE RECHERCHE

LIGNEÉDITORIALE

GABARITS ÉDITORIAUX

OUTILS DE MISE EN RELATION

…

…

……

… … …

SITES A ANALYSER

Date : 10/04/23

1


IMAGE SITE

1

2

3

1

2

3

1

2

3

EVALUATION EVALUATION EVALUATION

0 1 2 3 4 5 6 7 8 9 10 0 1 2 3 4 5 6 7 8 9 10 0 1 2 3 4 5 6 7 8 9 10


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

TITRE DU BENCHMARKSECTEUR Voyages

NOM DU SITE

PREMIÈRES IMPRESSIONS

DESIGN FONCTIONNALITÉS CONTENUS

Ce qu’il faut retenir du design, en quoi celui-ci est intéressant, original, pertinent, efficace ? L’expliquer clairement en quelques lignes.

Ce qu’il faut retenir des fonctionnalités, en quoi celles-ci sont pertinentes, efficaces ? L’expliquer clairement en quelques lignes.

Ce qu’il faut retenir des contenus, en quoi ceux-ci sont intéressants, pertinents, efficaces ? L’expliquer clairement en quelques lignes.

Point-clé 1

Point-clé 2

Point-clé 3

Point-clé 1

Point-clé 2

Point-clé 3

Point-clé 1

Point-clé 2

Point-clé 3

7 1 10

Date : 10/04/23

1


IMAGE SITE

1

2

3

1

2

3

1

2

3

EVALUATION EVALUATION EVALUATION

0 1 2 3 4 5 6 7 8 9 10 0 1 2 3 4 5 6 7 8 9 10 0 1 2 3 4 5 6 7 8 9 10




AUTRE SUJET A ANALYSER

Ce qu’il faut en retenir. Ce qu’il faut en retenir. Ce qu’il faut en retenir.

Point-clé 1

Point-clé 2

Point-clé 3

Point-clé 1

Point-clé 2

Point-clé 3

Point-clé 1

Point-clé 2

Point-clé 3

x x x

AUTRE SUJET A ANALYSER AUTRE SUJET A ANALYSER

NOM DU SITE


Date : 10/04/23


1IMAGE 3

IMAGE 4

IMAGE 1

IMAGE 2



DESCRIPTION IMAGE

DESCRIPTION IMAGE

NOM DU SITE

DESCRIPTION IMAGE

DESCRIPTION IMAGE

Date : 10/04/23


1IMG POINTFORT SITE

IMG POINTFORT SITE

IMAGE POINTFORT SITE

IMG POINTFORT SITE


TITRE POINT FORT 3 TITRE POINT FORT 5

TITRE POINT FORT 2 TITRE POINT FORT 4

TITRE POINT FORT 1

INFO CLÉ A RETENIR 3En une phrase, résumer l’information clé à retenir.




NOM DU SITE : L’ESSENTIEL À RETENIR




Date : 10/04/23










SYNTHÈSE GLOBALE DU BENCHMARK

Décrire les best practices identifiés en matière de contenus parmi les différents sites étudiés.

BEST PRACTICES

Décrire les best practices identifiés en matière de contenus parmi les différents sites étudiés.

BEST PRACTICES

Décrire les best practices identifiés en matière de design parmi les différents sites étudiés.

BEST PRACTICES

CONTENUS

FONCTIONNALITÉS

DESIGN

FOCUS POINTS FORTS

NOM SITE + TITRE POINT FORT






Date : 10/04/23

LOGO SITE

SITES ANALYSÉS

BENCHMARK [NOM DU SITE DE RÉFÉRENCE]

LOGO SITE LOGO SITE

LOGO SITE LOGO SITE LOGO SITE




Date : 10/04/23

WEB DESIGN


ASPECTS ANALYSÉS

CONTENUS ERGONOMIE FONCTIONNALITÉS

Graphisme Editorial Navigation

Parcours utilisateurFormatsGraphisme

…

Performance web

…

…… …

… …… …

… …… …

Document : Benchmark | Modèle : 2 | Version : 1.0 | Auteur : Agence ABC | Statut : validé | Date de validation : 05/01/2013 Date : 10/04/23

IMGBest Practice 1

Best practice 1

Best Practice 3

Best practice 3

RÉSUMÉ

NOM DU SITE


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

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

IMGBest

Practice 3

IMGBest Practice 2


PREMIÈRESIMPRESSIONS

DESIGN(Qualité/Originalité/…)

CONTENUS(Qualité/Pertinence/Fréquence de mise

à jour/…)

FONCTIONNALITÉS(Qualité/Originalité/…)


ATOUT/CARACTÉRISTIQUE 1 ATOUT/CARACTÉRISTIQUE 2

ATOUT/CARACTÉRISTIQUE 4ATOUT/CARACTÉRISTIQUE 3

Alternative 1

Date : 10/04/23

IMGBest Practice 1

Best practice 1

Best Practice 2

Best practice 3


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

IMGBest

Practice 3

IMGBest Practice 2


ATOUT/CARACTÉRISTIQUE 1 ATOUT/CARACTÉRISTIQUE 2

ATOUT/CARACTÉRISTIQUE 4ATOUT/CARACTÉRISTIQUE 3

RÉSUMÉ

NOM DU SITE


DESIGN


CONTENUSERGONOMIE

FONCTIONNALITÉS


NAVIGATION

Date : 10/04/23

Alternative 2


WEB DESIGN CONTENUS ERGONOMIE FONCTIONNALITÉS

BEST PRACTICE 1Nom site

BEST PRACTICE 2

BEST PRACTICE 3

BEST PRACTICE 4

BEST PRACTICE 5

1

2

3

4

5


BEST PRACTICE 2

BEST PRACTICE 3

BEST PRACTICE 4

BEST PRACTICE 5


BEST PRACTICE 2

BEST PRACTICE 3

BEST PRACTICE 4

BEST PRACTICE 5


BEST PRACTICE 2

BEST PRACTICE 3

BEST PRACTICE 4

BEST PRACTICE 5

Nom site Nom site Nom site Nom site





SYNTHÈSE MEILLEURES PRATIQUES

Date : 10/04/23

Alternative 1

BENCHMARK CETELEMBENCHMARK [NOM DU SITE DE RÉFÉRENCE]

IMGMeilleure pratique 1

Best practice 1


SYNTHÈSE MEILLEURES PRATIQUES

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sed elit massa. Praesent venenatis nibh vel urna molestie aliquet.


Best practice 2

Best practice 3


IMGMeilleure pratique

4

Best practice 4Lorem 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 6

Best practice 5

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sed elit massa.. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Pellentesque sed elit massa..


Best practice 7Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sed elit massa..

Date : 10/04/23

Alternative 2

Lorem ipsum dolor sit amet, consectetur adipiscing.

IDENTIFIER LES SITES À OBSERVER ET LES SUJETS À TRAITER

QUELS SITES OBSERVER ? QUOI OBSERVER ?

1 Sites web des concurrents directsPrenez le temps de les parcourir puis sélectionnez les plus intéressants à étudier.

2 Sites de référence dans votre secteur

3 Sites similairesEn 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é.

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.

4 Sites étrangersPensez international afin de voir ce qui se fait de meilleur dans votre domaine à l’étranger.

CONCLUSION

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é.

Personas3 modèles

PHOTO

PHOTO

des utilisateurs

des utilisateurs

PHOTO

PHOTO

des utilisateurs

des utilisateurs

Document : Personas | Modèle : 1 | Version : 1.0 | Auteur : Agence ABC | Statut : validé | Date de validation : 05/01/2013

18 %

13 % 04 %

11 %SURNOM /QUALIFICATIF

SURNOM /QUALIFICATIF



« Citation » « Citation »

« Citation »« Citation »

PERSONA PRIMAIRE

PERSONA PRIMAIRE

PERSONA PRIMAIRE

PERSONA SECONDAIRE

PERSONAS NOM DU SITE

Date : 10/04/23

12 1311

PHOTO

+

+

+

-

-

-

PROFIL UTILISATEUR ET CONTEXTE

+-

EQUIPEMENT

Internet+ wifi PC smartphones tablettes

@

EXPÉRIENCES ET USAGESACTIVITÉS

OBJECTIFS / MOTIVATIONS

QUESTIONS

SCÉNARIOS

IDENTITÉNOM ÂGE

MÉTIER

VILLE / RÉGION

CSP

PRATIQUED’INTERNET

(PERSO)

INFORMATIQUE

VALEUR 1

FORMATION

PRATIQUED’INTERNET

(PRO)

USAGESNUMÉRIQUES

MOBILITÉ

VALEUR 2 VALEUR 3

TEMPS PASSÉ SUR INTERNET


ACTIVITÉ / CENTRE D’INTÉRÊT 1




« Citation »

Profil utilisateur et contexte

Objectifs / motivations

Questions

Scénario 1 Scénario 2 Scénario 3

Nb Nb Nb

NOM DU SITEPERSONAS

Date : 10/04/23



OBJECTIFS MOTIVATIONS

PHOTO

USAGES

IDENTITÉ

COMPORTEMENTS

INFORMATIQUE

INTERNET

INTERNET (temps passé)

MOBILITÉ

AUTRE USAGE

VARIABLE 1

COMPORTEMENT COMPORTEMENT OPPOSÉ

VARIABLE 2


VARIABLE 3


VARIABLE 4



NOM

ÂGE

MÉTIER

VILLE / RÉGION

CSP

FORMATION


« CITATION »

Profil utilisateur et contexte

Objectifs Motivations

Date : 10/04/23

PHOTO

USAGES

COMPORTEMENTS

« CITATION »


OBJECTIFS MOTIVATIONS

RÉPONSES


SURNOMNOM

ÂGE

MÉTIER

VILLE / RÉGION

FORMATION Profil utilisateur et contexte

Objectifs Motivations

VARIABLE 1


VARIABLE 2


VARIABLE 3


VARIABLE 4


INFORMATIQUE

INTERNET

MOBILITÉ

AUTRE USAGE

Réponses

Réponses à apporter en termes de contenus, de mise en avant, d’outils, de fonctionnalités, de style, de wording, etc.

Date : 10/04/23

PERSONASDéfinition et mise en place

L’outil pour définir ses personas E-commerce

http://www.matthieu-tranvan.fr/webmarketing/taux-de-conversion-webmarketing/outil-definir-personas-e-commerce.html

Les personas

Auteur : Matthieu Tran-Van

http://blocnotes.iergo.fr/breve/motsetphrases/les-personas/

Auteur : Raphaël

Personas: définition et démarche

http://www.qualitystreet.fr/2008/12/29/personas-definition-et-demarche/

Auteur : Jean Claude Grosjean

LECTURES RECOMMANDÉES

Définir ses personas : l’info. et les outils pour mieux connaître les visiteurs de son site Internet

http://www.matthieu-tranvan.fr/revue-de-tendance/e-business/definir-ses-personas-tous-les-outils-et-les-informations-pour-mieux-connaitre-les-visiteurs-de-son-site-internet-partie-3.html

Auteur : Matthieu Tran-Van

1

2

3

4

Les personas, ces utilisateurs presque pas virtuels qui sauvent vos projets5 Auteur : Frédéric de Villamil

http://t37.net/les-personas-ces-utilisateurs-presque-pas-virtuels-qui-sauvent-vos-projets.html



http://blocnotes.iergo.fr/breve/motsetphrases/les-personas/

http://www.qualitystreet.fr/2008/12/29/personas-definition-et-demarche/



http://t37.net/les-personas-ces-utilisateurs-presque-pas-virtuels-qui-sauvent-vos-projets.html

Calendrier éditorial2 modèles

JANVIER FÉVRIER JUINMARS AVRIL MAI

CONTENUS

SUPPORTPRINCIPAL DEPUBLICATION

RELAIS

ACTUALITÉ

Document : Calendrier éditorial | Modèle : 1 | Version : 1.0 | Auteur : Agence ABC | Statut : validé | Date de validation : 05/01/2013

Actualités liées au business (lancement du produit X, du service Y), à un événement calendaire, à l’organisation, etc.

Les tendances du marketing en 2013

Interview vidéo DRHService communication + agence de communication

Siteinternet Blog

ing f

NewsletterService marketing / Agence web + Prestataire routage

Billet de blogServices marketing / Agence éditoriale web

yt

Sitepartenaire

Blogpartenaire

Réseau social :réseau A

Réseau social :réseau B

Réseau social :réseau C

Réseau social :réseau D

Services marketing / communication

1

8

17

t

14

JUILLET AOÛT DÉCEMBRESEPTEMBRE OCTOBRE NOVEMBRE

CONTENUS

RELAIS

ACTUALITÉ

SUPPORTPRINCIPAL DEPUBLICATION



1/01Les tendances du marketing en 2013

t ing f

12/01 Interview DRH

t yt

18/01 La matrice ducontent marketing

29/01 Newsletterjanvier

t ing fTwitter Google+ LinkedIn Facebook

ytYouTube Flux RSS

MKTG COM WEB

Servicemarketing

Servicecommunication

Agence web

COM

Agence com

…

Agence …

Guide Article /Billet de blog

Vidéo

CALENDRIER ÉDITORIAL JANVIER 2013

…

… Photo Infographie

MKTG

EDITO

Agence édito

Newsletter …

MKTG COM

COM COM

WEBCOM COM

MKTG COM WEB

LANCEMENT PRODUIT

SEMINAIRE

ACTUALITÉ

LégendeActualité

WEB

Brief2 modèles

Document : Brief | Modèle : 1 | Version : 1.0 | Auteur : Agence ABC | Statut : validé | Date de validation : 05/01/2013 Date : 10/04/23

LOGO(DATE)

LOGOCLIENT

BRIEF V1.0Nom du projet

type de projet

Client / Marque

Livrables attendues

Deadline / Date de mise en ligne

Budget / Ressources

Equipe projet

DEMANDECONTEXTE / OBJECTIFS / CIBLES

SOURCES / DOCUMENTS ANNEXESSPÉCIFICATIONS

Refonte de site internet / Réécriture de contenus / Charte éditoriale / Création d’une animation web / Infographie / etc.

type de projet

Logo / Nom du client / de sa (ses) marque(s)

Client / Marque

Conception / Maquettes graphiques / Contenus éditoriaux / Zoning-Wireframes / Etc.

Livrables attendues

La deadline est la date à laquelle les contenus doivent être livrés.

Deadline / Date de mise en ligne

Budget alloué au projet et profils/ressources nécessaires.

Budget / Ressources

Identité de tous les intervenants au projet avec leurs missions et leurs rôles spécifiques dans le projet.

Equipe projet

Document : Brief | Modèle : 1 | Version : 1.0 | Auteur : Agence ABC | Statut : validé | Date de validation : 05/01/2013 Date : 10/04/23

LOGO(DATE)

LOGOCLIENT

BRIEF V1.0Nom du projet

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 secondaires3- Préciser les objectifs du projet : se lancer dans le e-commerce, 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 claire2- Poser le territoire d’expression de la marque (identité visuelle, langage, tonalité, personnalité, signature, etc.)3- Décrire la stratégie, le message à faire passer4- Lister les indicateurs de performances clés (KPI)5- Décrire l’ensemble des contraintes

• 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• …

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.

CONTEXTE / OBJECTIFS / CIBLES

SOURCES / DOCUMENTS ANNEXESSPÉCIFICATIONS

Document : Brief Date : 10/04/23

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 !

Brief :l’incontournable phase de discussion

Zoning1 modèle

200 px100 px 400 px

100 px

200 px

500 px 600 px 700 px 800 px 900 px 1000 px 1100 px

300 px

400 px

500 px

600 px

700 px

800 px

1200 px 1300 px 1400 px 1500 px

900 px

1000 px

1100 px

1200 px

300 px

Document : Zoning | Modèle : 1 | Version : 1.0 | Auteur : Agence ABC | Statut : validé | Date de validation : 05/01/2013 Date : 10/04/23

HEADER

BODYLigne de flottaison

Espace utile de 980 pixels en 1024

pixels

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/

Web safe area = Zone maximale visible pour une résolution donnée

FOOTER

Document : Zoning | Modèle : 1 | Version : 1.0 | Auteur : Agence ABC | Statut : validé | Date de validation : 05/01/2013 Date : 10/04/23

200 px100 px 400 px

100 px

200 px

500 px 600 px 700 px 800 px 900 px 1000 px 1100 px

300 px

400 px

500 px

600 px

700 px

800 px

1200 px 1300 px 1400 px 1500 px

900 px

1000 px

1100 px

1200 px

300 px

Ligne de flottaison

Espace utile en 1024 pixels

LOGO RECHERCHE WEB

PANIER

ESPACE CLIENT

RUBRIQUE 1 RUBRIQUE 2 RUBRIQUE 3 RUBRIQUE 4 RUBRIQUE 5

HEADER

BODY

FOOTER

FIL D’ARIANE

Un exemple de zoning : page produit d’un site e-commerce

MINIATURESAUTRES VUES

ITEMS DE PARTAGE SOCIALNOM PRODUIT

DESCRIPTIF + NOTATION PRODUIT

PRIX PRODUIT

PARAMÉTRAGE CARACTÉRISTIQUES PRODUIT (taille, couleur, etc.)

VISUELPRODUIT

CROSS-LINKING(CEUX QUI ONT ACHETÉ CE PRODUIT ONT AUSSI AIMÉ)

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.

LIENS(MENTIONS LÉGALES, CONTACT, AIDE, ETC.)

VUES AUTRES VISUELS (MINIATURES ACTIONS

ACHETER / METTRE DE CÔTÉ / ETC.

ÉLÉMENTS DE RÉASSURANCE(PAIEMENT SÉCURISÉ, GARANTIE…)

CONTENU ÉDITORIAL ET/OU VIDÉO(VALORISATION DU SAVOIR-FAIRE DU FABRICANT)

Eléments constitutifs d’un zoningliste non exhaustive

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.

TEXTES IMAGES MÉDIAS LIENS HYPERTEXTES

Document : Zoning Date : 10/04/23

FONCTIONNALITÉSCONTENUS

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.

Zoning / Wireframes :quelle différence ?

Document : Zoning Date : 10/04/23

En anglais, on emploie le terme Wireframe (marquette en fil de fer), traduit en français par le mot Zoning.

Lorsqu’on parle de zoning ou de wireframe, on parle donc globalement de la même chose.

Dans certaines agences web, la distinction est parfois faite entre le travail sur le zoning et la création des wireframes.

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.

… ENFIN, PRESQUE !AUCUNE DIFFÉRENCE…

Ces contenus sont mis à votre disposition selon les termes de laLicence Creative Commons Attribution 3.0 France.

http://creativecommons.org/licenses/by/3.0/fr/

http://www.metacontents.fr

http://creativecommons.org/licenses/by/3.0/fr/

http://www.metacontents.fr/

Marketing

Kit du producteur de contenus web [Version 0.7]