conception de sites wbe (1)

ELISABETH DE PABLO 1

COMMUNICATION NUMÉRIQUE 1 :

CONCEPTION DE SITES WEB CIM4A13C

Septembre 2014


WEB PUBLISHING

- créer, éditer, publier, diffuser du contenu

- animer sur le web un produit [de communication]

- publier en ligne, publication en ligne (online publishing)


WEB PUBLISHING

>> requiert plusieurs types de compétences (multidisciplinaire)

>> nécessite l’utilisation de différentes techniques et technologies


WEB PUBLISHING

Pour cela :

>> un esprit créatif>> un logiciel>> une connexion internet>> un serveur


GESTION D’UN PROJET WEB

L’ensemble du processus est regroupé autour d’un chef de projet

web

(web manager)


GESTION D’UN PROJET WEB

Travailler autour et sur un produit web pour une entreprise (sté, association, institution, etc.)

Prendre en charge toutes les dimensions de la conception, et du suivi du produit


WEB MANAGER

Web Manager=

Gestion du projet web

Réalisation technique du site, suivi, mise à jour,

etc. (web mastering)

Gestion de la communauté ou

des réseaux sociaux (community

management)

Curation, veille d’information

autour et sur le projet (digital

curation)

Préparation et rédaction du contenu d’un site (content management)

Gestion de l’identité numérique du projet, produit, marque, …

(digital identity)


WEB MANAGER

BRAINSTORMING de départ >> définir un plan d’action

Un produit web pourquoi ? Pour qui ?

>> Déterminer les objectifs principaux, secondaires

>>Déterminer de la cible


WEB MANAGER

>> Gestion de l’identité (l’image)

Positionnement par rapport à l’existant ?

>> Moyens techniques à disposition

Mutualisation des compétences en interne ?

>> Moyens financiers à disposition


WEB MANAGER

BRIEF Note de cadrage

Le brief est un document - plus ou moins long - dont l’objectif est de d’exposer clairement les objectifs et la stratégie ainsi que les contraintes – budget, technique - du communiquant,

Le brief est l’élément majeur nécessaire pour débuter toute opération de communication.


WEB MANAGER

BRIEF Note de cadrage

http://www.choblab.com/gestion-projets/rediger-un-brief-creatif-de-qualite-1946.html

http://fr.slideshare.net/RougeInteractif/le-brief

http://www.manager-go.com/marketing/brief-communication.htm









WEB MANAGER

AUDIT – BENCHMARKING

Pour définir les objectifs en profondeur, il faut connaître l’existant

>> Etude comparative

>> Processus d’analyse de la concurrence


WEB MANAGER


Observer, comparer et analyser la concurrence

>> Etablir d’un plan de veille

Etablir des critères d’analyse (en fonction des objectifs définis)

>> Proposer une grille récapitulative simple de l’analyse


WEB MANAGER


Noter – mettre en exergue - les éléments pertinents pour le

développement de son projet


WEB MANAGER


http://www.manager-go.com/marketing/concurrence.htm

http://www.my-business-plan.fr/etude-concurrentielle

http://www.journaldunet.com/ebusiness/le-net/reussir-son-business-plan/etude-concurrence-business-model-business-plan.shtml











WEB MANAGER


Effectuer une enquête

= Etude d’opportunité permettant de montrer l’intérêt et les attentes des

utilisateurs


WEB MANAGER


http://www.blog-gestion-de-projet.com/comment-faire-une-etude-d-opportunite-pour-votre-projet/

http://www.techniques-ingenieur.fr/fiche-pratique/genie-industriel-th6/organiser-et-animer-un-projet-dt58/preparer-votre-projet-etudes-d-opportunite-et-de-faisabilite-1147/

http://www.surveystore.info/NSarticle/enquete-par-questionnaire.asp













WEB MANAGER

CAHIER des CHARGES

Document contractuel qui permet de définir avec le plus de précisions possibles ce que l’on attend du prestataire.

Le cahier des charges est le document le plus important dans la mise en route et le développement d’une action de communication


WEB MANAGER

CAHIER des CHARGES

>> Synthèse de l’ensemble des informations recueillies (brainstorming, benchmarking)

>> Etablissement du cadre (contexte, cible,…)


WEB MANAGER

CAHIER des CHARGES

Etablissement fonctionnelle :

>>squelette ou plan du site détaillé, ergonomie, chartes éditoriales et graphique, maintenance, …


WEB MANAGER

CAHIER des CHARGES

>> Etablissement du budget

>>Ressources humaines

>> Questions juridiques

>> Planning


WEB MANAGER

CAHIER des CHARGES

http://www.commentcamarche.net/contents/978-cahier-des-charges

http://fr.openclassrooms.com/informatique/cours/rediger-correctement-un-cahier-des-charges

http://gestiondeprojet.pm/cahier-des-charges/










WEB MANAGER

LES PLUS, selon les besoins et les moyens, en fonction du cahier des charges

>> Faire appel à des ressources humaines, techniques, … extérieures

>> Faire appel à des ressources internes

>> Définir un appel d’offre

>> Mettre en place un comité de pilotage


WEB MASTER

Personne qui conçoit un site, qui est en charge de celui-ci (maintenance)

Activité multidisciplinaire qui va de la concrétisation d’un projet à sa gestion au quotidien.


WEB MASTERING

Ensemble des tâches nécessaires à la gestion d’un site.

Il s’agit d’être le plus clair possible tout de suite dans la définition de la structure


WEB MASTERING

Etablissement de l’arborescence / du squelette = Structurer l’information

>> Quelles mises en forme ?

>> Quels types de rubricages ?

>> Quel système de navigation ? …


WEB MASTERING

Page d’accueil vs pages internes

>> Quels niveaux de profondeur ?

>> Mises en forme ?

Établissement des types de contenus

>> texte/image ?

>> dynamique ?


WEB MASTERING

Tous ces éléments sont indispensables pour se déplacer dans le site,

trouver les informations recherchées facilement et donc l’utiliser aisément.


WEB MASTERING

ELEMENTS FONCTIONNELS Schématiser le système de navigation

Header

Le logo (identité visuelle pour la reconnaissance immédiate)Liens ou icônes, raccourcis vers des contenus informatifs/invariants (contact, aide, …)Barres de menu / Barres de sous-menu


WEB MASTERING

HEADER - exemples


WEB MASTERING

ELEMENTS FONCTIONNELSTechniques éditoriales

Corps

Etablissement d’une charte éditoriale Etablissement des niveaux de lecture Hiérarchisation de l’information : les titres, intertitres, paragraphes, visuels, liens, références, … L’écriture web / techniques de rédaction


WEB MASTERING

Corps

exemple


WEB MASTERING

ELEMENTS FONCTIONNELS Schématiser le système de navigation

Footer

Retrouvez des éléments de navigation Rappel informatifs/invariants (contact, plan du site, mentions légales, …)


WEB MASTERING

Footer - exemples


WEB MASTERING

REPRESENTATION GRAPHIQUE

http://www.lehtml.com/webdesign/structure.htm

http://ajblog.fr/webdesign/213-etude-de-cas-lamigraineorg-la-communaute-des-migraineux.html







WEB MASTERING

ELEMENTS INVARIANTSCompréhension rapide

Informations indispensables voire obligatoires

A propos / Plan du site / Charte / Mentions légales / Contacts / Recherche / FAQ / Accessibilité / Newsletter


WEB MASTERING

ELEMENTS INVARIANTSAccessibilité

« L’accès au Web par tous, indépendamment de toute invalidité »

http://www.w3qc.org/ressources/traductions/introduction-accessibilite-web

/

http://www.pompage.net/traduction/evaluer-accessibilite-site-1

http://www.w3qc.org/ressources/traductions/introduction-accessibilite-web/






WEB MASTERING

ELEMENTS INVARIANTSMentions légales

Toujours vérifier les droits des contenus diffusés

>> Les droits d’auteurs

Protéger son site, son contenu (dépôt/creative commons)

https://creativecommons.org/




WEB MASTERING

ELEMENTS INVARIANTSMentions légales

http://www.journaldunet.com/ebusiness/le-net/mentions-legales-site.shtml

http://www.commentcamarche.net/faq/35481-site-web-pro-mentions-legales-et-formulaire-de-contact








WEB MASTERING & CONTENT MANAGEMENT

GESTION du CONTENU

Compréhension rapide

Etablissement de la charte éditoriale en relation avec l’arborescence/la structure du site



CHARTE EDITORIALE

Consignes autour de la rédactionPrendre en compte le référencement (mots-clefs, titre,…)Consignes autour de l’organisation du site : en termes de noms de fichiers, procédures, …Etablir les droits internes et externes



GESTION du CONTENU

Au niveau de la rédaction, établir des règles (phrases courtes, précises, …) Etablir les différentes niveaux de lecturePrendre en compte le rapport texte/image, techniques rédactionnelles, les liens internes/externes



GESTION du CONTENU

http://www.180-360.net/technique-barbara-minto

http://www.dithyrambe.fr/pdf/Techniques%20redactionnelles%20en%208%20points%20cles.pdf








GESTION du CONTENU

http://trinity-advise.com/eye-tracking-ergonomie-web-explications-oculometrie-e-marketing

/

http://trinity-advise.com/eye-tracking-ergonomie-web-explications-oculometrie-e-marketing/





WEB MASTERING & WEB DESIGNER

IDENTITE du SITEles aspects visuels

Compréhension rapide

Etablissement de la charte graphique en relation avec l’arborescence/la structure du site



CHARTE GRAPHIQUE

Choix typographiques (police et taille des caractères) = établir des règles CSS

Règles de couleurs (la connotation)

Choix des éléments multimédias = photos, dessins, symboles iconiques, …



CHARTE GRAPHIQUE

Etablir une maquette = grille de mise en page

http://www.r-u-experienced.net/2008/12/la-grille-de-mise-en-page.html

http://paris.blog.lemonde.fr/2008/12/27/grilles-de-mise-en-page-typographie-web-et-print/







http://www.fbservices.fr/divine-proportion-et-site-internet



CHARTE GRAPHIQUE - TYPOGRAPHIE

Bien souvent le CCS est déjà enregistré dans le modèle du site CMS (ce qu’il va se passer pour vous)

TYPOGRAPHIE = IDENTITE



CHARTE GRAPHIQUE - TYPOGRAPHIE

Permet de créer un style visuel, d’établir des protocoles (niveaux de lecture), créer un CSS (feuille de style personnalisée)



CHARTE GRAPHIQUE - COULEURS

Influent sur les comportements, dégagent une ambiance…

COULEUR = IDENTITE



CHARTE GRAPHIQUE - COULEURS

Normalement dans le CSS de votre modèle CMS.

Il va donc falloir en jouer au niveau des éléments des contenus



CHARTE GRAPHIQUE - MULTIMEDIA

Vidéo, cartes interactives (google map), diaporama, podcasts, toutes intégrations d’éléments extérieurs.

Déterminer l’impact, le type de réalisation, l’apparition, … l’utilisation des éléments multimédias



IDENTITE du SITE

http://www.blogduwebdesign.com/

http://www.pinterest.com/awwwardscom/web-design-inspiration-ui-ux/

http://www.pinterest.com/misz000/web-design/










COMMUNITY MANAGEMENT

GESTION DES RESEAUX SOCIAUXun aspect incontournable

Quels réseaux sociaux pour quels usages ? Comment les choisir ? Quels sont les plus ? Que leur demander ?

>> Mettre en place une stratégie >> Créer, suivre et animer les réseaux choisis


DIGITAL CURATION

CURATION – VEILLE D’INFORMATION

Qu’est-ce qu’une veille d’information et comment la pratiquer ?

>> Différence entre veille d’information et curation d’information

>> Liens entre réseaux sociaux et gestion de l’identité numérique


DIGITAL CURATION

CURATION – VEILLE D’INFORMATION

Choisir ses modes de veille ?

>> Mettre en place une stratégie de veille

>> Analyser et utiliser la veille


DIGITAL IDENTITY

E-REPUTATIONGestion de l’identité numérique

Qu’est-ce qu’une identité numérique ?

En quoi est-ce important ?

Comment suivre et gérer sa réputation sur internet ?

conception de sites wbe (1)

Education