2. Planning semaine
Lundi : outils gestion, édito
Mardi : dev/design
Mercredi : bilan par équipe
Jeudi: analyse technique, point com
Vendredi : projet client, point mémoire
3. « 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
4. « 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 »
5. « 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 »
6. 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
7. 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, ...
8. 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)
9. 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...)
10. 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
11. 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 ?)
12. 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
13. 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. quot;collagesquot;
14. 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
15. 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
16. 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
17. 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)
18. 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...
19. 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
20. Fixer la direction globale du site
Penser com et conception
Le bouche à oreille version web, comment ça
marche ?
Organiser la com « hors web »
21. 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
22. 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...)
23. 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...
24. 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
25. Liens utiles
2. Design
http://www.yesko.com/web-design-process.htm
http://www.lukew.com/
http://infosthetics.com/
26. 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