SlideShare une entreprise Scribd logo
1  sur  11
Télécharger pour lire hors ligne
Bâtir un site Web
               en mettant contenus et visuels
               à égalité avec la technique
                  2011           ALAIN-MARIE CARRON



mardi 20 décembre 2011
Bâtir un site
                  Une entreprise collective, des métiers différents
                  Un donneur d’ordre qui paye et prend tous les risques mais
                  souvent connaît peu le Web et la Communication
                  Nôtre méthode 4x3 fournit au donneur d’ordre et aux différentes
                  équipes le moyen de suivre et comprendre le travail de chacun
                  Elle met les contenus (Information) et le graphisme (Présentation)
                  sur un pied d’égalité avec la Technique
                  Parfaite pour les sites importants elle peut être simplifiée pour les
                  sites plus petits
                  Son premier apport tient au regard nouveau qu’elle apporte à un
                  projet Web. Attendez vous à des résistances de la part de
                  certains corps de métiers!



mardi 20 décembre 2011
La méthode 3x4
         Stratégie de l’entreprise                  e-stratégie                objectifs du site
                          3 registres
                         sur 4 niveaux   Information            Présentation Technique
                                                                    Choix du design
                                         Politique éditoriale
                          Formule         Style d’écriture
                                                                Orientations graphiques    Choix de base

         Conception
                                           Architecture                                     Architecture
                         Structure         d’information
                                                                 Organisation visuelle
                                                                                             technique


                                         Cahier des charges                                  Cahier des
                            Plan              éditorial
                                                                   Charte graphique
                                                                                          charges technique

         Production
                          Mise en        Production textes/
                                                                   Maquettes finales        Programmation
                          oeuvre          images/vidéos...




mardi 20 décembre 2011
De la stratégie d’entreprise aux
                objectifs du site

                  Stratégie d’entreprise : le site est une de ses
                  applications

                  e-stratégie : marketing et promotion, la présence
                  sur Internet demande un plan d’ensemble

                  objectifs du site : ce que l’on veut obtenir &
                  comment on va le mesurer




mardi 20 décembre 2011
Information Présentation Technique
                  Dans une industrie encore dominée par la
                  Technique, les contenus (Information) et le
                  graphisme (Présentation) n’ont pas toujours la
                  place qu’ils méritent

                         Pourtant le contenu est roi, encore plus avec
                         l’arrivée des Médias Sociaux : c’est lui qui fait le
                         succès à long terme d’un site

                         Dans notre société la place du visuel est
                         majeure. Les gestionnaires le négligent souvent
                         parce qu’il se mesure mal et ne s’exprime pas
                         en concepts

mardi 20 décembre 2011
Conception : Formule et Structure

                  Formule : le positionnement du site. Vous êtes
                  Playboy ou le Wall Street Journal ? Vous vendez
                  des diamants ou des saucisses ?

                         En partie du marketing, mais plus encore l’art de
                         communiquer

                  Structure : on ne conçoit pas un gratte-ciel
                  comme une boutique de dépanneur

                         Ce niveau concerne surtout les sites complexes


mardi 20 décembre 2011
Production : Plan et Mise en Oeuvre


                  Plan : quand vous avez dessiné la carte de ce que
                  sera le site, il faut maintenant entrer dans le détail,
                  donner les mesures exactes, choisir et placer les
                  balises, etc..

                  Mise en oeuvre: un chantier bien préparé est déjà
                  à moitié réussi, mais l’intégration des différents
                  éléments et leur exécution n’et jamais facile




mardi 20 décembre 2011
Information : conception et production

                  Formule : au niveau des contenus, quels seront les éléments
                  différentiateurs, sur quel ton le site va-t-il communiquer, quels seront les
                  éléments structurants du contenu?

                  Structure: l’Architecture d’Information (AI) est l’élément le plus abstrait de la
                  conception d’un site. Elle décide de la logique du discours et du modèle
                  argumentatif. Elle commande l’ergonomie du site et l’arborescence.


                  Cahier des charges éditorial: les collaborateurs du site écriront quoi et
                  comment,sur quelles longueurs? Fréquence de production et des mises à
                  jour.Les images/vidéos qu’ils produiront ou choisiront auront quelle durée,
                  quelle structure?

                  Mise en oeuvre : enfin on produit !




mardi 20 décembre 2011
Présentation : conception et production


                  Design : Dior ou Levis? Gamme de couleurs, choix des contrastes, rapport
                  texte/image, look and feel...

                  Organisation visuelle: quelles seront les hiérarchies, la composition des
                  différentes sections. L’ergonomie en termes de parcours client,
                  d’utilisabilité, de lisibilité. Ce niveau n’est pas séparé du niveau design dans
                  les petits sites

                  Charte graphique: la codification de tous les principes adoptés
                  auparavant; définition des templates et CSS, normes de réalisation pour les
                  applications fonctionnelles qui ont été décidée.

                  Mise en oeuvre : enfin des maquettes !




mardi 20 décembre 2011
Technique : conception et production

                  Choix de base : site en Flash ou mélange Flash/HTML/ langage de
                  programmation, choix du CMS

                  Architecture technique : importante pour les gros sites, confondue avec
                  les choix de base pour les autres. Architecture logicielle, Serveurs, niveaux
                  de redondance, service d’accès distant, serveur de données, serveur Web,
                  etc.. bande passante...Sécurité, down time.

                  Cahier des charges technique: dossiers d’infrastructure matérielle et
                  télécom, règle de nommage (nom des classes, des objets) et de codage,
                  types et modèles de données à traiter (modèle conceptuel, opérationnel,
                  logique et physique) la codification de tous les principes adoptés
                  auparavant; guide pratique et marche à suivre. Voir en Annexe les tableaux
                  A et B

                  Mise en oeuvre : du code, du code, du code...



mardi 20 décembre 2011
WWW.CONSEILACTION.COM/




mardi 20 décembre 2011

Contenu connexe

En vedette

Séance 1: Richard Moreau (multi learn institute) Mettre en place une stratégi...
Séance 1: Richard Moreau (multi learn institute) Mettre en place une stratégi...Séance 1: Richard Moreau (multi learn institute) Mettre en place une stratégi...
Séance 1: Richard Moreau (multi learn institute) Mettre en place une stratégi...Web2LLP
 
Groupe_Menut_LGC_e-réputation_présence_web
Groupe_Menut_LGC_e-réputation_présence_webGroupe_Menut_LGC_e-réputation_présence_web
Groupe_Menut_LGC_e-réputation_présence_webChristophe G. Godingen
 
Océan Bleu, comment sortir votre entreprise du rouge..
Océan Bleu, comment sortir votre entreprise du rouge..Océan Bleu, comment sortir votre entreprise du rouge..
Océan Bleu, comment sortir votre entreprise du rouge..Alain-Marie Carron
 
Presentation emarketing
Presentation emarketingPresentation emarketing
Presentation emarketingNicolas Gillet
 
Mettre en place une stratégie de contenu en 11 actions
Mettre en place une stratégie de contenu en 11 actionsMettre en place une stratégie de contenu en 11 actions
Mettre en place une stratégie de contenu en 11 actionsAlesiacom
 
Social io t-sito s-iot
Social io t-sito s-iotSocial io t-sito s-iot
Social io t-sito s-iotLuigi Atzori
 
De l'écriture au storytelling
De l'écriture au storytellingDe l'écriture au storytelling
De l'écriture au storytellingAlain-Marie Carron
 
Christian Amauger - Contenus Web, stratégie et optimisation
Christian Amauger - Contenus Web, stratégie et optimisationChristian Amauger - Contenus Web, stratégie et optimisation
Christian Amauger - Contenus Web, stratégie et optimisationChristian Amauger
 

En vedette (10)

Séance 1: Richard Moreau (multi learn institute) Mettre en place une stratégi...
Séance 1: Richard Moreau (multi learn institute) Mettre en place une stratégi...Séance 1: Richard Moreau (multi learn institute) Mettre en place une stratégi...
Séance 1: Richard Moreau (multi learn institute) Mettre en place une stratégi...
 
Le will des médias sociaux
Le will des médias sociauxLe will des médias sociaux
Le will des médias sociaux
 
Groupe_Menut_LGC_e-réputation_présence_web
Groupe_Menut_LGC_e-réputation_présence_webGroupe_Menut_LGC_e-réputation_présence_web
Groupe_Menut_LGC_e-réputation_présence_web
 
Atelier marketing
Atelier marketing Atelier marketing
Atelier marketing
 
Océan Bleu, comment sortir votre entreprise du rouge..
Océan Bleu, comment sortir votre entreprise du rouge..Océan Bleu, comment sortir votre entreprise du rouge..
Océan Bleu, comment sortir votre entreprise du rouge..
 
Presentation emarketing
Presentation emarketingPresentation emarketing
Presentation emarketing
 
Mettre en place une stratégie de contenu en 11 actions
Mettre en place une stratégie de contenu en 11 actionsMettre en place une stratégie de contenu en 11 actions
Mettre en place une stratégie de contenu en 11 actions
 
Social io t-sito s-iot
Social io t-sito s-iotSocial io t-sito s-iot
Social io t-sito s-iot
 
De l'écriture au storytelling
De l'écriture au storytellingDe l'écriture au storytelling
De l'écriture au storytelling
 
Christian Amauger - Contenus Web, stratégie et optimisation
Christian Amauger - Contenus Web, stratégie et optimisationChristian Amauger - Contenus Web, stratégie et optimisation
Christian Amauger - Contenus Web, stratégie et optimisation
 

Similaire à Batir Un Site Web 2011

Atelier e-stratégies 2012
Atelier e-stratégies 2012Atelier e-stratégies 2012
Atelier e-stratégies 2012SID-Networks
 
AgileTour Toulouse 2012 : agilité, innovation utile au business !
AgileTour Toulouse 2012 : agilité, innovation utile au business !AgileTour Toulouse 2012 : agilité, innovation utile au business !
AgileTour Toulouse 2012 : agilité, innovation utile au business !Agile Toulouse
 
SharePoint et SQL Server pour un étudiant : quels débouchés et quelles opport...
SharePoint et SQL Server pour un étudiant : quels débouchés et quelles opport...SharePoint et SQL Server pour un étudiant : quels débouchés et quelles opport...
SharePoint et SQL Server pour un étudiant : quels débouchés et quelles opport...Microsoft Décideurs IT
 
Atelier Info Tonic : Les règles d’or pour créer son site Web
Atelier Info Tonic : Les règles d’or pour créer son site WebAtelier Info Tonic : Les règles d’or pour créer son site Web
Atelier Info Tonic : Les règles d’or pour créer son site Webambin_fr
 
Comment tirer profit du web en 2012 - présentation du 15 novembre 2011
Comment tirer profit du web en 2012 - présentation du 15 novembre 2011Comment tirer profit du web en 2012 - présentation du 15 novembre 2011
Comment tirer profit du web en 2012 - présentation du 15 novembre 2011MXO | agence totale
 
Introduction Gestion Projet web
Introduction Gestion Projet webIntroduction Gestion Projet web
Introduction Gestion Projet webguest6d3f53
 
Webdesign sites web et mobiles-methodes-realisation-outils
Webdesign sites web et mobiles-methodes-realisation-outilsWebdesign sites web et mobiles-methodes-realisation-outils
Webdesign sites web et mobiles-methodes-realisation-outilsOlivier Dommange
 
Talk Red Hat Entreprise Numerique - Eip Designer - 20160323
Talk Red Hat Entreprise Numerique - Eip Designer - 20160323Talk Red Hat Entreprise Numerique - Eip Designer - 20160323
Talk Red Hat Entreprise Numerique - Eip Designer - 20160323Laurent Broudoux
 
2UNL - Le Kit documentaire de conception pour simplifier la communication projet
2UNL - Le Kit documentaire de conception pour simplifier la communication projet2UNL - Le Kit documentaire de conception pour simplifier la communication projet
2UNL - Le Kit documentaire de conception pour simplifier la communication projet2UNL
 
Metiers & IT : boosting innovation ?
Metiers & IT : boosting innovation ?Metiers & IT : boosting innovation ?
Metiers & IT : boosting innovation ?Jérôme DIDAT
 
IT & Métiers : how to innovate ... together ???
IT & Métiers : how to innovate ... together ???IT & Métiers : how to innovate ... together ???
IT & Métiers : how to innovate ... together ???Jérôme DIDAT
 
Storyboarding for the web : Methodology and Tools
Storyboarding for the web : Methodology and ToolsStoryboarding for the web : Methodology and Tools
Storyboarding for the web : Methodology and ToolsEric DI POL
 
Le management d’une équipe UX par le profil en T
Le management d’une équipe UX par le profil en TLe management d’une équipe UX par le profil en T
Le management d’une équipe UX par le profil en TGuillaume Abel
 
Innovative Architecture Design
Innovative Architecture DesignInnovative Architecture Design
Innovative Architecture DesignAirmis
 
Desig formation-design-web-avec-photoshop-et-illustrator
Desig formation-design-web-avec-photoshop-et-illustratorDesig formation-design-web-avec-photoshop-et-illustrator
Desig formation-design-web-avec-photoshop-et-illustratorCERTyou Formation
 

Similaire à Batir Un Site Web 2011 (20)

Atelier e-stratégies 2012
Atelier e-stratégies 2012Atelier e-stratégies 2012
Atelier e-stratégies 2012
 
AgileTour Toulouse 2012 : agilité, innovation utile au business !
AgileTour Toulouse 2012 : agilité, innovation utile au business !AgileTour Toulouse 2012 : agilité, innovation utile au business !
AgileTour Toulouse 2012 : agilité, innovation utile au business !
 
Improve Foundations
Improve FoundationsImprove Foundations
Improve Foundations
 
SharePoint et SQL Server pour un étudiant : quels débouchés et quelles opport...
SharePoint et SQL Server pour un étudiant : quels débouchés et quelles opport...SharePoint et SQL Server pour un étudiant : quels débouchés et quelles opport...
SharePoint et SQL Server pour un étudiant : quels débouchés et quelles opport...
 
Atelier Info Tonic : Les règles d’or pour créer son site Web
Atelier Info Tonic : Les règles d’or pour créer son site WebAtelier Info Tonic : Les règles d’or pour créer son site Web
Atelier Info Tonic : Les règles d’or pour créer son site Web
 
Comment tirer profit du web en 2012 - présentation du 15 novembre 2011
Comment tirer profit du web en 2012 - présentation du 15 novembre 2011Comment tirer profit du web en 2012 - présentation du 15 novembre 2011
Comment tirer profit du web en 2012 - présentation du 15 novembre 2011
 
Introduction Gestion Projet web
Introduction Gestion Projet webIntroduction Gestion Projet web
Introduction Gestion Projet web
 
Webdesign sites web et mobiles-methodes-realisation-outils
Webdesign sites web et mobiles-methodes-realisation-outilsWebdesign sites web et mobiles-methodes-realisation-outils
Webdesign sites web et mobiles-methodes-realisation-outils
 
2UNL - PARISWEB 2010
2UNL - PARISWEB 20102UNL - PARISWEB 2010
2UNL - PARISWEB 2010
 
Talk Red Hat Entreprise Numerique - Eip Designer - 20160323
Talk Red Hat Entreprise Numerique - Eip Designer - 20160323Talk Red Hat Entreprise Numerique - Eip Designer - 20160323
Talk Red Hat Entreprise Numerique - Eip Designer - 20160323
 
2UNL - Le Kit documentaire de conception pour simplifier la communication projet
2UNL - Le Kit documentaire de conception pour simplifier la communication projet2UNL - Le Kit documentaire de conception pour simplifier la communication projet
2UNL - Le Kit documentaire de conception pour simplifier la communication projet
 
3 architecte-si
3 architecte-si3 architecte-si
3 architecte-si
 
Vanessa i ref_2014
Vanessa i ref_2014Vanessa i ref_2014
Vanessa i ref_2014
 
Metiers & IT : boosting innovation ?
Metiers & IT : boosting innovation ?Metiers & IT : boosting innovation ?
Metiers & IT : boosting innovation ?
 
IT & Métiers : how to innovate ... together ???
IT & Métiers : how to innovate ... together ???IT & Métiers : how to innovate ... together ???
IT & Métiers : how to innovate ... together ???
 
test
testtest
test
 
Storyboarding for the web : Methodology and Tools
Storyboarding for the web : Methodology and ToolsStoryboarding for the web : Methodology and Tools
Storyboarding for the web : Methodology and Tools
 
Le management d’une équipe UX par le profil en T
Le management d’une équipe UX par le profil en TLe management d’une équipe UX par le profil en T
Le management d’une équipe UX par le profil en T
 
Innovative Architecture Design
Innovative Architecture DesignInnovative Architecture Design
Innovative Architecture Design
 
Desig formation-design-web-avec-photoshop-et-illustrator
Desig formation-design-web-avec-photoshop-et-illustratorDesig formation-design-web-avec-photoshop-et-illustrator
Desig formation-design-web-avec-photoshop-et-illustrator
 

Plus de Alain-Marie Carron

Du bon usage professionnel des Médias Sociaux
Du bon usage professionnel des Médias SociauxDu bon usage professionnel des Médias Sociaux
Du bon usage professionnel des Médias SociauxAlain-Marie Carron
 
Stratégie Internet Minute pour patrons pressés
Stratégie Internet Minute pour patrons pressésStratégie Internet Minute pour patrons pressés
Stratégie Internet Minute pour patrons pressésAlain-Marie Carron
 
La Chine dans nos affaires (2)
La Chine dans nos affaires (2)La Chine dans nos affaires (2)
La Chine dans nos affaires (2)Alain-Marie Carron
 
La Chine dans nos affaires (1)
La Chine dans nos affaires (1)La Chine dans nos affaires (1)
La Chine dans nos affaires (1)Alain-Marie Carron
 
Marketing Medias Sociaux _ le basique
Marketing Medias Sociaux _ le basiqueMarketing Medias Sociaux _ le basique
Marketing Medias Sociaux _ le basiqueAlain-Marie Carron
 
Ocean Bleu: cultiver sa différence
Ocean Bleu: cultiver sa différenceOcean Bleu: cultiver sa différence
Ocean Bleu: cultiver sa différenceAlain-Marie Carron
 

Plus de Alain-Marie Carron (12)

Du bon usage professionnel des Médias Sociaux
Du bon usage professionnel des Médias SociauxDu bon usage professionnel des Médias Sociaux
Du bon usage professionnel des Médias Sociaux
 
Stratégie Internet Minute pour patrons pressés
Stratégie Internet Minute pour patrons pressésStratégie Internet Minute pour patrons pressés
Stratégie Internet Minute pour patrons pressés
 
La Chine dans nos affaires (2)
La Chine dans nos affaires (2)La Chine dans nos affaires (2)
La Chine dans nos affaires (2)
 
La Chine dans nos affaires (1)
La Chine dans nos affaires (1)La Chine dans nos affaires (1)
La Chine dans nos affaires (1)
 
Marketing Medias Sociaux _ le basique
Marketing Medias Sociaux _ le basiqueMarketing Medias Sociaux _ le basique
Marketing Medias Sociaux _ le basique
 
Entreprise internet patrons
Entreprise internet patronsEntreprise internet patrons
Entreprise internet patrons
 
Design Web Nouveautes 2011
Design Web Nouveautes 2011Design Web Nouveautes 2011
Design Web Nouveautes 2011
 
Petite Revue Du Web 2009
Petite Revue Du Web 2009Petite Revue Du Web 2009
Petite Revue Du Web 2009
 
Webdesigntendances
WebdesigntendancesWebdesigntendances
Webdesigntendances
 
Ecrire Faire Lire
Ecrire Faire LireEcrire Faire Lire
Ecrire Faire Lire
 
Facing Asian Competition
Facing Asian CompetitionFacing Asian Competition
Facing Asian Competition
 
Ocean Bleu: cultiver sa différence
Ocean Bleu: cultiver sa différenceOcean Bleu: cultiver sa différence
Ocean Bleu: cultiver sa différence
 

Batir Un Site Web 2011

  • 1. Bâtir un site Web en mettant contenus et visuels à égalité avec la technique 2011 ALAIN-MARIE CARRON mardi 20 décembre 2011
  • 2. Bâtir un site Une entreprise collective, des métiers différents Un donneur d’ordre qui paye et prend tous les risques mais souvent connaît peu le Web et la Communication Nôtre méthode 4x3 fournit au donneur d’ordre et aux différentes équipes le moyen de suivre et comprendre le travail de chacun Elle met les contenus (Information) et le graphisme (Présentation) sur un pied d’égalité avec la Technique Parfaite pour les sites importants elle peut être simplifiée pour les sites plus petits Son premier apport tient au regard nouveau qu’elle apporte à un projet Web. Attendez vous à des résistances de la part de certains corps de métiers! mardi 20 décembre 2011
  • 3. La méthode 3x4 Stratégie de l’entreprise e-stratégie objectifs du site 3 registres sur 4 niveaux Information Présentation Technique Choix du design Politique éditoriale Formule Style d’écriture Orientations graphiques Choix de base Conception Architecture Architecture Structure d’information Organisation visuelle technique Cahier des charges Cahier des Plan éditorial Charte graphique charges technique Production Mise en Production textes/ Maquettes finales Programmation oeuvre images/vidéos... mardi 20 décembre 2011
  • 4. De la stratégie d’entreprise aux objectifs du site Stratégie d’entreprise : le site est une de ses applications e-stratégie : marketing et promotion, la présence sur Internet demande un plan d’ensemble objectifs du site : ce que l’on veut obtenir & comment on va le mesurer mardi 20 décembre 2011
  • 5. Information Présentation Technique Dans une industrie encore dominée par la Technique, les contenus (Information) et le graphisme (Présentation) n’ont pas toujours la place qu’ils méritent Pourtant le contenu est roi, encore plus avec l’arrivée des Médias Sociaux : c’est lui qui fait le succès à long terme d’un site Dans notre société la place du visuel est majeure. Les gestionnaires le négligent souvent parce qu’il se mesure mal et ne s’exprime pas en concepts mardi 20 décembre 2011
  • 6. Conception : Formule et Structure Formule : le positionnement du site. Vous êtes Playboy ou le Wall Street Journal ? Vous vendez des diamants ou des saucisses ? En partie du marketing, mais plus encore l’art de communiquer Structure : on ne conçoit pas un gratte-ciel comme une boutique de dépanneur Ce niveau concerne surtout les sites complexes mardi 20 décembre 2011
  • 7. Production : Plan et Mise en Oeuvre Plan : quand vous avez dessiné la carte de ce que sera le site, il faut maintenant entrer dans le détail, donner les mesures exactes, choisir et placer les balises, etc.. Mise en oeuvre: un chantier bien préparé est déjà à moitié réussi, mais l’intégration des différents éléments et leur exécution n’et jamais facile mardi 20 décembre 2011
  • 8. Information : conception et production Formule : au niveau des contenus, quels seront les éléments différentiateurs, sur quel ton le site va-t-il communiquer, quels seront les éléments structurants du contenu? Structure: l’Architecture d’Information (AI) est l’élément le plus abstrait de la conception d’un site. Elle décide de la logique du discours et du modèle argumentatif. Elle commande l’ergonomie du site et l’arborescence. Cahier des charges éditorial: les collaborateurs du site écriront quoi et comment,sur quelles longueurs? Fréquence de production et des mises à jour.Les images/vidéos qu’ils produiront ou choisiront auront quelle durée, quelle structure? Mise en oeuvre : enfin on produit ! mardi 20 décembre 2011
  • 9. Présentation : conception et production Design : Dior ou Levis? Gamme de couleurs, choix des contrastes, rapport texte/image, look and feel... Organisation visuelle: quelles seront les hiérarchies, la composition des différentes sections. L’ergonomie en termes de parcours client, d’utilisabilité, de lisibilité. Ce niveau n’est pas séparé du niveau design dans les petits sites Charte graphique: la codification de tous les principes adoptés auparavant; définition des templates et CSS, normes de réalisation pour les applications fonctionnelles qui ont été décidée. Mise en oeuvre : enfin des maquettes ! mardi 20 décembre 2011
  • 10. Technique : conception et production Choix de base : site en Flash ou mélange Flash/HTML/ langage de programmation, choix du CMS Architecture technique : importante pour les gros sites, confondue avec les choix de base pour les autres. Architecture logicielle, Serveurs, niveaux de redondance, service d’accès distant, serveur de données, serveur Web, etc.. bande passante...Sécurité, down time. Cahier des charges technique: dossiers d’infrastructure matérielle et télécom, règle de nommage (nom des classes, des objets) et de codage, types et modèles de données à traiter (modèle conceptuel, opérationnel, logique et physique) la codification de tous les principes adoptés auparavant; guide pratique et marche à suivre. Voir en Annexe les tableaux A et B Mise en oeuvre : du code, du code, du code... mardi 20 décembre 2011