Guide méthodologique Les grandes étapes d un projet numérique

Guide méthodologique Les grandes étapes d un projet numérique V1-10 oct 2011 1

Mode d emploi Le guide méthodologique vous est proposé par l équipe du concours Web Generationet a été approuvé par une équipe pédagogique et des professionnels du numérique. Il présente de manière synthétique les grandes étapes de la création d un projet numérique. Il a été conçu pour nourrir votre réflexion et vous poser les bonnes questions au bon moment. Ce guide est un document support. A vous de l utiliser comme vous le souhaitez. En aucun cas, nous vous demanderons de nous restituer ce document complété. Ce guide peut être amené à évoluer. N hésitez pas à nous faire part de vos réactions et suggestions. Vous trouverez en complément de ce document, des fiches sur des aspects très précis comme le choix des polices, des couleurs ou tout simplement comment écrire pour le web. Nous vous encourageons vivement à les consulter. Vous trouverez également dans la rubrique «boîte à outils» http://www.concourswebgeneration.fr/tutoriels/ des tutoriels que nous compléterons tout au long de la compétition. 2

Les grandes étapes d un projet numérique Le processus de développement d un site internet se divise en cinq grandes étapes, chacune contribuant à la réussite finale du projet. Attention, ce processus n est pas figé et exigera parfois quelques retours en arrière. 1 Organiser le projet & l équipe 2 Analyser le projet 3 Hiérarchiser l arborescence et les contenus 4 Créer la maquette 5 Développer le projet 1 Gérer et organiser son projet S imposer une rigueur de travail, c est assurer de la rigueur au projet. Vous trouverez quelques outils qui vous permettront d organiser au mieux votre travail, votre équipe & votre projet : Brainstorming ou comment produire des idées p.4 Lister ses compétences et répartir les tâches p.5 Gérer et répartir son temps p.6 2 Réfléchir au projet à 360 Un projet s inscrit dans un contexte, un environnement : il doit répondre aux attentes d une structure et des futurs utilisateurs. Quelles sont les bonnes questions à se poser avant de commencer? Définir le périmètre du projet : l émetteur p.7 Identifier ses futurs utilisateurs : les destinataires p.8 Proposer le bon contenu : le message p.9 3 Produire et organiser l information L information que vous allez publier doit être adaptée aux besoins des utilisateurs et objectifs de votre site. De quoi allez-vous parler? Un internaute doit pouvoir trouver facilement et rapidement l information qu il cherche. Comment allez-vous hiérarchiser et organiser l information? Répartir le contenu et définir son menu p.10 4 Créer la maquette du projet La maquette est la représentation graphique de votre projet, cette étape explique comment réaliser l interface de votre site internet. Organiser le contenu page par page : le zoning p.11 Dessiner l interface p.12 5 Développement Le développement va permettre de concrétiser votre projet et achever de transformer votre maquette graphique en une réelle interface fonctionnelle. Définir les besoins techniques en développement : p.13 Répartir les compétences humaines en développement : p.14 3

1 Brainstorming ou comment produire des idées Etape 1 Gérer & organiser son projet Le brainstomingest un outil de production d idées & de résolution de problème Voici une façon de faire un brainstorming : Quelques jours avant votre réunion, définissez le sujet du brainstorming et déclinez le sous forme de mots. Exemple: comment imaginez-vous votre site internet? Le jour J, munissez-vous de feuilles et de crayons! Si vous êtes suffisamment nombreux, désignez un animateur qui aura uniquement pour rôle de noter les idées proposées, gérer le temps et que chacun puisse s exprimer librement. Définissez et attribuez un temps de parole à chaque participant, n hésitez pas à établir des règles et à les rappeler au début de la réunion: temps imparti, respect de la liberté d expression 45 minutes Proposez et notez toutes les idées, sans aucune forme de censure 30 minutes Eliminez les idées qui ne sont pas pertinentes, pas réalisables Ayez un esprit critique 30 minutes Fixez un objectif : Sélectionnez 5 idées 4

2 Lister ses compétences & répartir les tâches Etape 1 Gérer & organiser son projet Identifier vos compétences permet de connaître les points forts & points faibles de votre équipe Répartissez les tâches en fonctions des connaissances de chacun : Aucune connaissances -- Quelques connaissances - Connaissances + Très bonnes connaissances ++ Compétences Membres 1 2 3 4 5 6 Informatique Outils de développement, langage de programmation Webdesign Graphisme,infographie, typographie Geek Actualité, veille, tendance Communication Rédaction,organisation de l information, créativité Managériales Gestion d équipe,de projet D après le tableau des compétences, quels sont les points forts et les points faibles de votre équipe? Comment allez-vous mettre en valeur vos forces et pallier vos faiblesses? 5

3 Gérer & répartir son temps Etape 1 Gérer & organiser son projet Pour bien gérer votre temps, découpez votre projet en étapes de travail et fixez des échéances Octobre 10 Janvier 2012 Novembre Décembre Janvier Remise du site Exemple : Brief 25 Octobre Membres 2 / 3 / 4 6

1 Définir le périmètre du projet : l émetteur Etape 2 Réfléchir au projet à 360 Votre projet doit répondre aux besoins et enjeux d une structure! 1 Quel est l objectif du projet? Quelle problématique va-t-il résoudre? 2 A quelle structure est destiné le projet? Quelles sont ses activités? 3 Quelles sont ses valeurs? Quelle image souhaitez-vous véhiculer?... 4 La structure a t-elle des éléments de communication? Dans quelles mesures devez-vous en tenir compte? 5 Existe-t-il des contraintes particulières? Source www.drouillat.com Benoit Drouillat Design interactif, mode d emploi - Ecrire un brief 7

2 Identifier ses futurs utilisateurs : les destinataires Etape 2 Réfléchir au projet à 360 Votre projet doit être construit en fonction des futurs utilisateurs! 1 Quel(s) public(s) doit être visé par le projet? Hiérarchisez les publics. 2 Quel est leur profil? Décrivez l utilisateur type (âge, sexe, centres d intérêts ) 3 Compte tenu de votre public, de quelle façon allez-vous adapter votre site internet (look, contenu )?... Exemple : L utilisateur recherche de l information, il peut la trouver facilement et rapidement. Wikipédia www.wikipedia.org 4 Quelles seraient leurs attentes et motivations vis-à-vis du site internet? 5 Quelle valeur ajoutée pourrait apporter votre site par rapport à d autres sites? Quel est le bénéfice pour l utilisateur? Source www.drouillat.com Benoit Drouillat Design interactif, mode d emploi - Ecrire un brief 8

3 Proposer le bon contenu : le message Etape 2 Réfléchir au projet à 360 Après avoir analysé le projet, déduisez les contenus et les services 1 En fonction des besoins supposés des utilisateurs et de vos objectifs, quels seraient les services (rubriques) à proposer sur le site? 2 Quels types de contenus répondraient aux besoins supposés (texte, vidéo, image )? 3 Pour vous démarquer, quels types de contenus pourriez-vous proposer?... 4 Quelles pourraient être les requêtes des internautes pour trouver votre site internet? Quels seront les mots-clés à insérer dans vos titres et contenus?.. Source www.drouillat.com Benoit Drouillat Design interactif, mode d emploi - Ecrire un brief 9

1 Répartir le thème & définir le contenu Etape 3 Organiser l information Regroupez vos idées par thématique et hiérarchisez vos contenus Définissez vos différents contenus : listez, regroupez les thèmes, hiérarchisez les et constituez des rubriques. Pour chaque rubrique, définissez son objectif et la manière dont vous allez y répondre. Ce contenu pourra être très varié: texte, image, vidéo Définissez ensuite comment on accède aux différents contenu. On parle alors de scénario de navigation. Il vise à construire le parcours d un internaute sur le site. Lors de cette étape, mettez-vous à la place d un utilisateur et n hésitez pas à faire appel à une personne extérieure au projet pour relever ses impressions. Il doit répondre avant tout aux besoins des internautes. Thématique 1 Thématique 2 Thématique 3 Thématique 4 Rubrique 1 Rubrique 1 Rubrique 1 Rubrique 1 Texte Image Texte Texte Image Texte Image Vidéo Texte Lien thématique 3 Rubrique 2 Rubrique 2 Rubrique 2 Rubrique 2 Texte Vidéo Texte Texte Texte Texte Image Texte Lien thématique 4 texte Lien thématique 4 Hyperliens Rubrique 3 Rubrique3 Rubrique 3 A partir de là, construisez votre arborescence : Source www.drouillat.com Benoit Drouillat Qu est-ce que l architecture de l information? 10

1 Organiser les contenus page par page Etape 4 Représentation Graphique Représentez votre site à travers des blocs de contenus et de services Une fois que vos contenus ont été listés et les scénarios de navigation construits, il faut organiser visuellement chaque page de votre site. On parle de zoning, ce premier acte créatif vise à structurer et représenter sous forme de blocs, le contenu et les fonctionnalités du site. Oùplacermonmenu?Oùplacerlelogo?Oùplacerlesblocs?Pourquoimettreceblocenavant?Pourquoi mettreceblocenretrait? Une fois que votre zoning vous plait, dessinez le sur Photoshop ou Illustrator. Choisissez votre logiciel : Fireworks, Photoshop, Illustrator, mettez votre zoning en calque, verrouillez et suivezleplan! Exemple : zoning page d accueil Logo Publicité Navigation Présentation Raccourcis Actualités LikeBox Facebook Pied de page Sources www.drouillat.com Benoit Drouillat Qu est-ce que l architecture de l information? www.egoblog.fr C est quoi un webdesign? 11

2 Dessiner l interface Etape 4 Représentation Graphique L interface est au service des objectifs du site et des messages à faire passer Lorsque vous créez l interface, vous créez la maquette de votre site. L interface doit être au service des objectifs du site internet et des messages à faire passer. L objectif est de travailler sur la dimension graphique et ergonomique du site : la clarté, la facilité d utilisation, l originalité, l intuitivité sont des éléments à intégrer dans la phase de création. Quel est l univers graphique de votre site : en terme d ambiance, de couleurs, de texture, de police de caractère, d agencement, de visuels? Quels sont les signes forts de votre univers graphique? Quelles impressions souhaitez-vous donner à vos internautes? Quels symboles retrouvez-vous sur des sites qui traitent du même sujet? Quelques exemples de site aux identités graphiques très différentes : www.limouzicola.com www.lesfrancophonies.com www.iut.unilim.fr Valeurs exprimées: énergie, force, plaisir, passion. Valeurs exprimées: univers poétique, artistique, formes et couleurs douces. Valeurs exprimées: univers institutionnel. Informations très structurées. Couleur à dominante technologique. 12

1 Définir les technologies à utiliser Etape 5 Choix techniques et développement Pour un même choix de design, un choix de technologies différent peut totalement changer le site final. CSS : le squelette graphique HTML / xhtml: le squelette fonctionnel Javascript: animations et interactivité simple> Flash : animation et interactivité complexe En matière de développement web, plusieurs technologies vous permettent de réaliser des sites internet: - le langage HTML, vous permet de structurer votre page en zones de contenus - la langage CSS, permet d enrichir graphiquement cette structure avec des images, couleurs, etc - le langage Javascript apporte des animations et une interactivité aux éléments de votre page - le langage Flash, est utilisé aussi bien pour la création d un site entier que pour une animation, avec une gestion complexe de l interactivité Vous devez choisir et définir quelles seront les technologies à utiliser, ainsi que comment vous allez procéder à l acquisition et la répartition de ces compétences pour les utiliser dans votre projet. Chaque technologie possède ses avantages et ses inconvénients. Ainsi, privilégiez le JavaScript pour des animations légères et simples, et Flash pour des animations complexes mais plus élaborées graphiquement. Les technologies HTML et CSS sont, elles, seront pratiquement incontournables dans la réalisation de votre site. N oubliez pas enfin que votre site devra être visible sous plusieurs navigateurs, et que son temps de chargement devra être pris en compte (une animation Flash, par exemple, peut prendre plus longtemps à charger qu une animation Javascript). Deux articles sur les technologies en jeu dans un site web : - http://www.site-internet.in/s-technologies-d-un-site-internet-html,css,javascript,php,flash-p5.html - http://www.fknet.fr/site_internet_technologie.htm 13

2 Organiser le développement final Etape 5 Choix techniques et développement Le développement est l étape finale concrétisant la réalisation du projet multimédia Lors de la phase de développement de votre interface, vous allez devoir structurer scrupuleusement sa réalisation, en découpant ainsi en plusieurs phases la concrétisation informatique de la maquette graphique. Durant cette phase, vous devrez définir les technologies dont vous aurez besoin pour cette réalisation, et les mettre en adéquation avec les ressources de votre équipe en terme de temps, compétences acquises ou à acquérir, afin de réaliser votre site de façon complète et utilisable dans le temps imparti. Il convient alors de définir et répondre à plusieurs questions : Quelles technologies de développement vont nécessiter votre site? Ces technologies sont-elles pertinentes avec l utilisabilité et l accessibilité voulue? Disposez-vous des compétences en développement nécessaires ou devrez-vous les acquérir? De quelle façon va se répartir ces différents apprentissages? Quelles tâches doivent être faites en amont des autres? Quels membres doivent jouer un rôle préalable en développement? Une fois les tâches réalisées, votre site est-il conforme à vos attentes? Est-il intuitif et utilisable, et est-il compatible avec les différents principaux navigateurs (Internet Explorer, Firefox, Chrome)? 14