Introduction
à la gestion de projet

Planning semaine
 Lundi : outils gestion, édito
 Mardi : dev/design
 Mercredi : bilan par équipe
 Jeudi: analyse technique, point com
 Vendredi : projet client, point mémoire

« Méthodes agiles »
Penser « itératif / incrémental »
 Avoir une vision de la direction globale du projet
 Mais penser en terme de mini-projets (V0, V1, V2....)
=> fixer des priorités dans la réalisation
=> concevoir chaque version en fonction des adaptations
futures

« Méthodes agiles »
Le principe du développement itératif consiste à
découper le projet en plusieurs étapes d’une durée
de quelques semaines ; ce sont les itérations. Au
cours d’une itération, une version minimale du
produit attendu est développée puis soumise, dans
sa version intermédiaire, au client pour validation.
Véronique Messager Rota « Gestion de projet – Vers les méthodes agiles »

« Méthodes agiles »
Chaque itération est un mini-projet en soi qui
comporte toutes les activités de développement,
menées en parallèle : analyse, conception, codage et
test, sans oublier les activités de gestion de projet.
Véronique Messager Rota « Gestion de projet – Vers les méthodes agiles »

Fixer la direction globale du projet
Définition DT de votre projet
0
 Quel est votre objectif ?
 Quel type de site/DVD/etc. (« vitrine »,
communautaire, ludique, institutionnel, etc...)
 En quoi votre projet est-il intéressant ? Original ?
 Public cible : profil général
Types de site, objectifs, caractéristiques

Fixer la direction globale du projet
Planning, répartition, centralisation
 Des tâches réparties entre différentes personnes
ressources
 Mais un espace de travail commun
 Outils : serveur/FTP, FilXoom, Yahoo Briefcase, ...

Fixer la direction globale du projet
Réaliser un benchmark (puis veille continue...)
 Sites concurrents (même sujet, même domaine)
 Analyse détaillée des 3 ou 4 sites (organisation du
contenu, fonctionnalités proposées / non-proposées)
 Liste de tous les sites visités (del.icio.us)

Fixer la direction globale du projet
Réaliser un benchmark (puis veille continue...)
 Sites de référence (graphisme, navigation),
composants originaux/adaptables
 Alimenter votre boîte à idées
 Constituer une bibliothèque de composants
 Penser à la réutilisation de contenus (flux RSS, API...)

Fixer la direction globale du projet
Personae et scénario d'usage (« use case »)
 Qualifier des comportements utilisateurs
 Mieux cerner leurs attentes
=> pour proposer des interfaces adaptées
Personas / personae

Fixer la direction globale du projet
(Re) Définir la ligne éditoriale (DT1)
 Les objectifs et l'intérêt du site
 Le ton et l'ambiance
 Le calibrage des pages
 Les thèmes traités et les rubriques proposées
 Les fonctionnalités proposées (dans quel but ?)

Fixer la direction globale du site
Définir les bases du dev /design
 dev/design : création graphique interactive,
collaboration entre designer et développeur
 Concept board > pistes graphiques > charte

Fixer la direction globale du site
Définir les bases du dev /design
 Concept board > pistes graphiques > charte
« mise en forme » du ton et de l'ambiance du site
définis dans la ligne éditoriale (« collages »,
« associations graphiques »)
prise en compte de l'aspect dynamique, interactif
Example détaillé 1 (ligne édito > concept)
Example 2. \"collages\"

Fixer la direction globale du site
Définir les bases du dev /design
 Concept board > pistes graphiques > charte
propositions d'une home page, de templates de page
avec un système de navigation, + définition de
composants interactifs)
example page d'accueil

Fixer la direction globale du site
Définir les bases du dev /design
 Concept board > pistes graphiques > charte
templates définitifs, iconographie/logotype et
définition du style pour chaque élément (titre, sous-
titre, encarts, footer, etc...)
Exemples de templates
Exemple de charte graphique (sans la partie template)
Exemple de logotypes

Fixer la direction globale du site
Analyse fonctionnelle générale
 Définir l'arborescence générale du site
(« blueprint »)
- navigation top-down + liens transversaux entre les pages
- utiliser une signalétique : renvoie vers une page ou simple noeud
d'arborescence ? Page dynamique ou statique ?
Exemple d'arborescence (mais sans signalétique...)
Mindomo: un outil pour réflechir sur l'arbo avant finalisation

Fixer la direction globale du site
Analyse fonctionnelle générale
 workflow et wireframe (chemin de fer)
- pour chaque page : quels répères (exple:breadcrumbs ) donne-t-
on à l'utilisateur ? Quelles possibilités de directions ?
- y-a-t-il des composants transversaux (footer, crédits, news, etc.) ?
Quels modules doivent-être scénarisés (=> storyboard)
- enrichissement progressifs des wireframes
Schéma navigation utilisateur 1 et 2
Exemple de wireframe
Design patterns (schéma de conception)

Fixer la direction globale du site
Analyse technique
 Définir les contraintes techniques
=> tout public ? référencement ? écran tél portable ?
 Spécifier les formats de données, l'encodage, la
portabilité, l'hébergement...

Fixer la direction globale du site
Analyse technique
 Définir l'arborescence pour les fichiers
=> quelle convention de nommage pour les dossiers, les images...?
 Définir la plateforme de développement et les
« briques » utilisées

Fixer la direction globale du site
Penser com et conception
 Le bouche à oreille version web, comment ça
marche ?
 Organiser la com « hors web »

Fixer les étapes de développement
Développement d'une V1
 Planifier le développement des premiers modules
du site
Développement d'une V2
AceProject
Gantt project
Basecamp

En pensant au tâches transversales
Recherche documentaire / création contenu
 Rassembler les sources d'information
 Rédiger/structurer le contenu
 Créer une banque d'images / vidéos (Source ?
Légende ? Copyright ? etc...)

En pensant au tâches transversales
Rédaction du mémoire
 Conserver tous les docs pour montrer l'évolution
de votre projet
 Réfléchir à une adaption de la charte graphique
version print
 etc...

Liens utiles
1. Gestion de projet
Livre : Conduite de projet web - S. Bordage
http://universite.online.fr/supports/projet/pdf.htm
http://fr.selfhtml.org/projet/index.htm

Liens utiles
2. Design
http://www.yesko.com/web-design-process.htm
http://www.lukew.com/
http://infosthetics.com/

Liens utiles
3. Ressources web
 http://mashable.com/2007/09/08/5000-resources-to-
 Flash: BIT-101 et levitated
 Javascript : script.aculo.us/ et GWT