Kit du producteur
de contenus web
VERSION :
DATE DE PUBLICATION :
AUTEUR :
WEB :

0.7
22/10/2013
META CONTENTS (hello@meta...
GABARITS
Arborescence de site internet

> Slide 3 à 10

Storyboard d’animation web,
de bannière publicitaire

> Slide 11 à...
Arborescence de
site internet

5 modèles
Date : 10/27/13

Document : Arborescence | Modèle : 1 | Version : 1.0 | Auteur : Agence ABC | Statut : validé | Date de va...
Date : 27/10/13

Document : Arborescence | Modèle : 2 | Version : 1.0 | Auteur : Agence ABC | Statut : validé | Date de va...
Date : 27/10/13

Document : Arborescence | Modèle : 3 | Version : 1.0 | Auteur : Agence ABC | Statut : validé | Date de va...
Date : 27/10/13

Document : Arborescence | Modèle : 4 | Version : 1.0 | Auteur : Agence ABC | Statut : validé | Date de va...
Date : 27/10/13

Document : Arborescence | Modèle : 5 | Version : 1.0 | Auteur : Agence ABC | Statut : validé | Date de va...
Date : 27/10/13

Document : Arborescence | Modèle : 6 | Version : 1.0 | Auteur : Agence ABC | Statut : validé | Date de va...
Date : 27/10/13

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

Texte

Im...
Storyboard d’animation web /
de bannière publicitaire

4 modèles
Date : 27/10/13

Document : Storyboard | Modèle : 1 | Version : 1.0 | Auteur : Agence ABC | Statut : validé | Date de vali...
Date : 27/10/13

Document : Storyboard

120 x 600 px

Principaux formats publicitaires

468 x 60 px

300 x 250 px

728 x 9...
Date : 27/10/13

Document : Storyboard

300 x 600 px

Autres formats publicitaires
liste non exhaustive

120 x 90 px

250 ...
Date : 27/10/13

Document : Storyboard

Utilisation des gabarits
dans le modèle 1 de storyboard

1

Copiez-collez le forma...
Date : 27/10/13

Document : Storyboard | Modèle : 2 | Version : 1.0 | Auteur : Agence ABC | Statut : validé | Date de vali...
Date : 27/10/13

Document : Storyboard | Modèle : 3 | Version : 1.0 | Auteur : Agence ABC | Statut : validé | Date de vali...
Date : 27/10/13

Document : Storyboard | Modèle : 4 | Version : 1.0 | Auteur : Agence ABC | Statut : validé | Date de vali...
Benchmark de site internet
2 modèles
Date : 27/10/13

Document : Benchmark | Modèle : 1 | Version : 1.0 | Auteur : Agence ABC | Statut : validé | Date de valid...
Date : 27/10/13

Document : Benchmark | Modèle : 1 | Version : 1.0 | Auteur : Agence ABC | Statut : validé | Date de valid...
Date : 27/10/13

Document : Benchmark | Modèle : 1 | Version : 1.0 | Auteur : Agence ABC | Statut : validé | Date de valid...
Date : 27/10/13

Document : Benchmark | Modèle : 1 | Version : 1.0 | Auteur : Agence ABC | Statut : validé | Date de valid...
Date : 27/10/13

Document : Benchmark | Modèle : 1 | Version : 1.0 | Auteur : Agence ABC | Statut : validé | Date de valid...
Date : 27/10/13

Document : Benchmark | Modèle : 1 | Version : 1.0 | Auteur : Agence ABC | Statut : validé | Date de valid...
Date : 27/10/13

Document : Benchmark | Modèle : 1 | Version : 1.0 | Auteur : Agence ABC | Statut : validé | Date de valid...
Date : 27/10/13

Document : Benchmark | Modèle : 2 | Version : 1.0 | Auteur : Agence ABC | Statut : validé | Date de valid...
Date : 27/10/13

Document : Benchmark | Modèle : 2 | Version : 1.0 | Auteur : Agence ABC | Statut : validé | Date de valid...
Date : 27/10/13

Document : Benchmark | Modèle : 2 | Version : 1.0 | Auteur : Agence ABC | Statut : validé | Date de valid...
Date : 27/10/13

Document : Benchmark | Modèle : 2 | Version : 1.0 | Auteur : Agence ABC | Statut : validé | Date de valid...
Date : 27/10/13

Document : Benchmark | Modèle : 2 | Version : 1.0 | Auteur : Agence ABC | Statut : validé | Date de valid...
Date : 27/10/13

Document : Benchmark | Modèle : 2 | Version : 1.0 | Auteur : Agence ABC | Statut : validé | Date de valid...
IDENTIFIER LES SITES À OBSERVER
ET LES SUJETS À TRAITER

QUELS SITES OBSERVER ?
1

Sites web des concurrents directs
Prene...
Personas
3 modèles
Date : 27/10/13

Document : Personas | Modèle : 1 | Version : 1.0 | Auteur : Agence ABC | Statut : validé | Date de valida...
Date : 27/10/13

Document : Personas | Modèle : 1 | Version : 1.0 | Auteur : Agence ABC | Statut : validé | Date de valida...
Date : 27/10/13

Document : Personas | Modèle : 2 | Version : 1.0 | Auteur : Agence ABC | Statut : validé | Date de valida...
Date : 27/10/13

Document : Personas | Modèle : 3 | Version : 1.0 | Auteur : Agence ABC | Statut : validé | Date de valida...
PERSONAS
Définition et mise en place

LECTURES RECOMMANDÉES

1

L’outil pour définir ses personas E-commerce
Auteur : Matt...
Calendrier éditorial
2 modèles
ocument : Calendrier éditorial | Modèle : 1 | Version : 1.0 | Auteur : Agence ABC | Statut : validé | Date de validation :...
ocument : Calendrier éditorial | Modèle : 1 | Version : 1.0 | Auteur : Agence ABC | Statut : validé | Date de validation :...
ocument : Calendrier éditorial | Modèle : 2 | Version : 1.0 | Auteur : Agence ABC | Statut : validé | Date de validation :...
Brief
2 modèles
Date : 27/10/13

Document : Brief | Modèle : 1 | Version : 1.0 | Auteur : Agence ABC | Statut : validé | Date de validatio...
Date : 27/10/13

Document : Brief | Modèle : 1 | Version : 1.0 | Auteur : Agence ABC | Statut : validé | Date de validatio...
Date : 27/10/13

Document : Brief

Brief :
l’incontournable phase de discussion

Si de la qualité d’un brief écrit dépend ...
Zoning
1 modèle
Date : 27/10/13

Document : Zoning | Modèle : 1 | Version : 1.0 | Auteur : Agence ABC | Statut : validé | Date de validati...
Date : 27/10/13

Document : Zoning | Modèle : 1 | Version : 1.0 | Auteur : Agence ABC | Statut : validé | Date de validati...
Date : 27/10/13

Document : Zoning

Eléments constitutifs d’un zoning
liste non exhaustive

CONTENUS
 TEXTES
 IMAGES
 M...
Date : 27/10/13

Document : Zoning

Zoning / Wireframes :
quelle différence ?

AUCUNE DIFFÉRENCE…

… ENFIN, PRESQUE !

En ...
Ces contenus sont mis à votre disposition selon les termes de la
Licence Creative Commons Attribution 3.0 France.
http://c...
Upcoming SlideShare
Loading in...5
×

Kit du producteur de contenus web [Version 0.7]

573

Published on

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.

Published in: Marketing
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
573
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
35
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "Kit du producteur de contenus web [Version 0.7]"

  1. 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. 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. 3. Arborescence de site internet 5 modèles
  4. 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. 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. 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. 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. 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. 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. 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. 11. Storyboard d’animation web / de bannière publicitaire 4 modèles
  12. 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. 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. 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. 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. 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. 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. 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. 19. Benchmark de site internet 2 modèles
  20. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 34. Personas 3 modèles
  35. 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. 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. 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. 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. 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. 40. Calendrier éditorial 2 modèles
  41. 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. 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. 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. 44. Brief 2 modèles
  45. 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. 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. 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. 48. Zoning 1 modèle
  49. 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. 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. 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. 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. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×