Refonte du site du Master INI
Compte rendu du projet RESIN
Le projet RESIN (REfonte du Site Master INI) s’inscrit dans le ...
2 Projet RESIN – Master INI 2011/12
Université de Lorraine CESS d’Epinal Master 2 INI 2011/ 12
Compte rendu du projet RESI...
3 Projet RESIN – Master INI 2011/12
Sommaire
page
Introduction ………………………………………………………………………………………………………………… 3
Commanditaire...
4 Projet RESIN – Master INI 2011/12
Table des matières
Refonte du site du Master INI ........................................
5 Projet RESIN – Master INI 2011/12
1.Introduction Présentation du projet
Le projet RESIN (REfonte du Site Master INI) s’i...
6 Projet RESIN – Master INI 2011/12
2.Client Commanditaire
Client : Responsable de la formation :
M. Jean Luc NOIZETTE
Maî...
7 Projet RESIN – Master INI 2011/12
c. Spécifications techniques :
1. Médias
 Corriger et adapter les ressources existant...
8 Projet RESIN – Master INI 2011/12
4.Structure fonctionnelle Brainstorming
Sous la direction de Monsieur Alain Gérard, un...
9 Projet RESIN – Master INI 2011/12
Maquette 01 : modèle tablette / aspect 3D / Relief Maquette 02 : modèle sobre / aspect...
10 Projet RESIN – Master INI 2011/12
Equipe Master 2 INI – Projet RESIN
Chef de projet :
Enseignant référent : M.Alain Gér...
11 Projet RESIN – Master INI 2011/12
7.Plan de travail Répartition des tâches
Une fois la maquette validée, le projet a ét...
12 Projet RESIN – Master INI 2011/12
Nous avons commencé le tournage très tardivement mais nous avons procédé par étapes :...
13 Projet RESIN – Master INI 2011/12
Pour être au plus proche des attentes du client (méthode Agile), nous avons conçu dan...
14 Projet RESIN – Master INI 2011/12
Après validation du style des premières maquettes par le client, nous avons conçu les...
15 Projet RESIN – Master INI 2011/12
Maquette Section «Etudiant» :
16 Projet RESIN – Master INI 2011/12
Maquette Section « Espace Professionnels» :
17 Projet RESIN – Master INI 2011/12
7.3.Equipe Développement
Outils utilisés :
Système de gestion de contenu : Joomla
Log...
18 Projet RESIN – Master INI 2011/12
2. Les modules
La force de Joomla vient de sa force communautaire, et des nombreuses ...
19 Projet RESIN – Master INI 2011/12
Groupe Resin 1
Groupe Resin 2
Groupe Resin 3
20 Projet RESIN – Master INI 2011/12
Nous avons remarqué que les maquettes sont très différentes. Le groupe RESIN 3 s’est ...
21 Projet RESIN – Master INI 2011/12
L’équipe Design graphique, se devait de créer tous les éléments graphiques et ergonom...
22 Projet RESIN – Master INI 2011/12
Les icônes du menu ont beaucoup changé parce que le client ne voyait pas le rapport e...
23 Projet RESIN – Master INI 2011/12
9.Réalisations Illustrations
Aspect graphique
Arborescence
Le site devant se détacher...
24 Projet RESIN – Master INI 2011/12
La voiture a été réalisée par un étudiant. Nous pouvons, grâce à elle, constater à qu...
25 Projet RESIN – Master INI 2011/12
Dans l’entête ce sont les références importantes à l’école qui y sont placés, comme l...
26 Projet RESIN – Master INI 2011/12
10.Difficultés rencontrées
En dépit de notre organisation et implication dans la réal...
Prochain SlideShare
Chargement dans…5
×

Refonte de site web : cas pratique - site du master INI

5 043 vues

Publié le

Le projet RESIN (REfonte du Site Master INI) s’inscrit dans le cadre d’une nouvelle stratégie de communication valorisant le Master 2 INI se déroulant au CESS d’Epinal. Il consiste à construire une nouvelle interface Web mettant en valeur la richesse de son contenu/cursus et des profils variés des étudiants qui y sont intégrés.
Ce document présente les démarche de gestion de ce projet web, depuis l'établissement du cahier des charges, la répartition des tâches et la planification de la réalisation. Ce document est une référence dans la gestion de projet, de l'analyse des besoin jusqu'à la réalisation.

0 commentaire
1 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
5 043
Sur SlideShare
0
Issues des intégrations
0
Intégrations
2
Actions
Partages
0
Téléchargements
0
Commentaires
0
J’aime
1
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Refonte de site web : cas pratique - site du master INI

  1. 1. Refonte du site du Master INI Compte rendu du projet RESIN Le projet RESIN (REfonte du Site Master INI) s’inscrit dans le cadre d’une nouvelle stratégie de communication valorisant le Master 2 INI se déroulant au CESS d’Epinal. Il consiste à construire une nouvelle interface Web mettant en valeur la richesse de son contenu/cursus et des profils variés des étudiants qui y sont intégrés. 2012 Master 2 INI - CESS Epinal Université de Lorraine 29/02/2012
  2. 2. 2 Projet RESIN – Master INI 2011/12 Université de Lorraine CESS d’Epinal Master 2 INI 2011/ 12 Compte rendu du projet RESIN Refonte du site du Master INI
  3. 3. 3 Projet RESIN – Master INI 2011/12 Sommaire page Introduction ………………………………………………………………………………………………………………… 3 Commanditaire…………………………………………………………………………………………………………… 4 Cahier des charges…………………………………………………………………………………………………….. 4 Structure fonctionnelle……………………………………………………………………………………………… 6 Propositions …………………………………………………………………………………………………………….. 6 Planification ……………………………………………………………………………………………………………… 8 Plan de travail…………………………………………………………………………………………………………… 9 Gestion de contenu…………………………………………………………………………………………. 9 Design graphique……………………………………………………………………………………………… 10 Développement………………………………………………………………………………………………… 15 Méthodologie de travail……………………………………………………………………………………………. 16 Réalisations ………………………………………………………………………………………………………………. 21 Difficultés rencontrées……………………………………………………………………………………………… 24 Conclusion………………………………………………………………………………………………………………….. 24
  4. 4. 4 Projet RESIN – Master INI 2011/12 Table des matières Refonte du site du Master INI ..................................................................................................... 2 Sommaire ............................................................................................................................................ 3 1.Introduction Présentation du projet ...................................................................................... 5 2.Client Commanditaire ................................................................................................................. 6 3.Cahier des charges Commande client .................................................................................. 6 4.Structure fonctionnelle Brainstorming.................................................................................. 8 5.Propositions..................................................................................................................................... 8 5.Planification................................................................................................................................... 10 6.Plan de travail Répartition des tâches................................................................................ 11 7.Méthodologie Déroulement du travail................................................................................. 18 9.Réalisations Illustrations.......................................................................................................... 23 10.Difficultés rencontrées ........................................................................................................... 26 11.Conclusion Perspectives ........................................................................................................ 26
  5. 5. 5 Projet RESIN – Master INI 2011/12 1.Introduction Présentation du projet Le projet RESIN (REfonte du Site Master INI) s’inscrit dans le cadre d’une nouvelle stratégie de communication valorisant le Master 2 INI se déroulant au CESS d’Epinal. Il consiste à construire une nouvelle interface Web mettant en valeur la richesse de son contenu/cursus et des profils variés des étudiants qui y sont intégrés. Le projet RESIN se veut innovateur en termes d’interfaçage, riche en contenu, permettant de faire connaître la spécialité auprès d’un public large (formation initiale ou continue), une vitrine promotionnelle efficace pour un diplôme reconnu à l’échelle internationale. Ce master a pour ambitions de :  favoriser le transfert des compétences entre les étudiants du master  placer les étudiants dans une situation réelle, situation de travail, notamment pour leur permettre d'appréhender le monde de l'entreprise grâce aux divers projets de cours et stages proposés. Le projet RESIN a pour objectif de rapprocher les acteurs du domaine multimédia (de la région lorraine) ouvrant la porte à la création d’un réseau de compétences et créer une dynamique de structuration opérationnelle. Il vise de fournir un portail permettant le rapprochement des entreprises spécialisées et d’apporter les conditions de développement de la compétitivité dans les domaines multimédia en contribuant à soutenir l’innovation par un encadrement directement opérationnel sur les domaines du Web, de l’audiovisuel et de la création graphique.
  6. 6. 6 Projet RESIN – Master INI 2011/12 2.Client Commanditaire Client : Responsable de la formation : M. Jean Luc NOIZETTE Maître de conférences ESSTIN Université de Lorraine 2, rue Jean Lamour, Vandoeuvre Les Nancy Cedex, F-54519, France Email ESSTIN : jean-luc.noizette@esstin.uhp-nancy.fr Email UHP : Jean-Luc.Noizette@persmail.uhp-nancy.fr ---------------------------------------------------------------------------- Work : +33 (0)3 83 68 51 32 Fax ESSTIN : +33 (0)3 83 68 50 01 Cell : +33 (0)6 16 67 75 73 Fax ISYS : +33 (0)3 83 68 50 12 Secrétariat : +33 (0)3 83 68 51 21 3.Cahier des charges Commande client Le client a formulé sa commande via un cahier des charges, rédigé et validé suite aux différents échanges et entretiens avec les membres de l’équipe. En voici le descriptif des points essentiels de sa requête: a. Objectifs : mettre l’accent sur les frais d’inscription (faibles comparés à d’autres formations du même type)  Mettre en avant la pluridisciplinarité des étudiants de la formation.  Montrer la reconnaissance nationale et internationale du diplôme.  Mettre en avant l’acceptation d’étudiants venant de diverses formations et ayant des profils hétérogènes et leurs collaborations au sein de divers projets.  Mettre en avant l’accessibilité des personnes en formation continue. b. Cibles :  Futurs étudiants  Professionnels pour les propositions de stages et les éventuels recrutements.
  7. 7. 7 Projet RESIN – Master INI 2011/12 c. Spécifications techniques : 1. Médias  Corriger et adapter les ressources existantes  Insérer de nouveaux contenus : plus récent (actualités sur la formation et autres informations sur l’université de Lorraine).  Etablissement de supports publicitaires pour la promotion de la formation : spot, audio, clip mettant en pratique les compétences. 2. Charte graphique. Seul l’ancien logo du master représente l’élément référence de la charte graphique: nous avions reçu l’autorisation de l’améliorer ou le modifier mais en respectant la nouvelle charte graphique définie par l’université de Lorraine. Le client a exprimé son souhait d’ajouter de la profondeur et du relief, d’adopter une approche dynamique et d’éviter le formatage. Le client demande d’insérer les productions étudiantes dans le design global du nouveau site 3. Les attentes. Une Web TV à mettre en œuvre (actualités, news, et débats réguliers). Réaliser une page d’accueil accrocheuse et dynamique. Classer les étudiants en fonctions de leurs domaines de compétences (3D, sites web… Réaliser une visite virtuelle de l’établissement (CESS Epinal) 4. Référencement : Le référencement consiste à améliorer et consolider le positionnement du site internet dans les résultats des moteurs de recherche.
  8. 8. 8 Projet RESIN – Master INI 2011/12 4.Structure fonctionnelle Brainstorming Sous la direction de Monsieur Alain Gérard, une journée de brainstorming a été organisée afin de définir les différents aspects et dimensions du projet : acteurs, cibles, contenus, accès,….. La classification des différents éléments de réflexion a donné le diagramme fonctionnel du site, présenté comme suit : 5.Propositions Trois équipes de travail se sont formées afin de réfléchir sur les exigences et attentes du client. La collaboration a fini par suggérer des croquis de site pouvant répondre au cahier des charges. Nous n’avons retenu que 02 maquettes que nous avons soumises à l’intéressé. Après consultation, le client a fait son choix et a souhaité garder la maquette 01 en insistant sur ses attentes et conditions du livrable.
  9. 9. 9 Projet RESIN – Master INI 2011/12 Maquette 01 : modèle tablette / aspect 3D / Relief Maquette 02 : modèle sobre / aspect 3D / Relief
  10. 10. 10 Projet RESIN – Master INI 2011/12 Equipe Master 2 INI – Projet RESIN Chef de projet : Enseignant référent : M.Alain Gérard Equipe Développement Responsable : Chouissa Equipe Design Graphique Responsable : R.Sauter Equipe Contenu Responsable : P.Carle 6.Planification Une fois la maquette validée, le projet a été scindé en tâches dont chacune fut attribuée à une équipe spécialisée : Voici le déroulement chronologique prévu des tâches à réaliser, schématisé dans le diagramme de Gantt suivant (version initiale du plan de travail): NB. Des ajustements ont été introduits dans ce diagramme afin de palier aux retards et imprévus.
  11. 11. 11 Projet RESIN – Master INI 2011/12 7.Plan de travail Répartition des tâches Une fois la maquette validée, le projet a été subdivisé en modules et tâches. Des équipes ont été formées et chacune affectée à un module spécifique. Les tâches ont été réparties par équipe et comment suit : 7.I Gestion de contenu : Le contenu du site web comportait en majeure quantité des médias, les réalisations des étudiants de toutes les promotions possibles. Le ton commun aux textes était important et devait cibler principalement les futurs étudiants tout en étant significatif pour les professionnels. Accueil : Un texte a été écrit pour l’accueil du site, il avait été convenu par l’ensemble de l’équipe que ce texte d’accueil ne devait être ni trop long ni trop formel afin d’entrer dans le site de manière assez dynamique. Etudiants, localisation : De petits textes de présentation ont également été écrits. Formation : Les professeurs ont été sollicités pour cette partie, l’équipe a tenté de les relancer à plusieurs reprises, pourtant seuls cinq nous ont fourni le contenu nécessaire. Les informations relatives aux inscriptions ont été actualisées par rapport à l’année dernière et les textes ont été réécris en gardant le ton commun à tout le site. Réalisations : Chacune des catégories de réalisations a été alimentée par les vidéos et projets de l’année en cours ainsi que des années précédentes (dans la mesure de ce qui était disponible). La plupart de ces projets a été mise en ligne via Vimeo, un compte Vimeo et une adresse mail ont donc été créés pour le master INI. Chacune des catégories est aussi introduite par un petit texte de présentation. Web TV : Le concept de la Web TV n’était pas un objectif principal, nous voulions seulement amorcer une idée pour les promotions suivantes et éventuellement fournir une démo. Le contenu n’était pas clair non plus jusqu’à l’idée de monter une télé –réalité du master INI. La télé-réalité devait pouvoir retranscrire de manière humoristique le déroulement de la vie et du travail d’équipe au sein du master.
  12. 12. 12 Projet RESIN – Master INI 2011/12 Nous avons commencé le tournage très tardivement mais nous avons procédé par étapes :  Dans un premier temps, nous avons filmé les locaux vides et fixé les noms des salles.  Ensuite nous avons filmé des scènes de travail sur 3 jours et nous avons mis en place une forme de confessionnal appelé le « crachoir ». Devant le fond bleu nous avons filmé chaque étudiant afin d’y incruster un faux décor dans l’esprit télé-réalité. Les séances de travail étaient majoritairement filmées en caméra fixe, ce qui permettait d’oublier la caméra et d’obtenir des images réalistes.  Le montage s’est fait rapidement au fur et à mesure que les rushes étaient tournés. 7.2.Equipe Design graphique Le projet dans lequel nous avons collaboré s’inscrit dans le cadre d’une refonte totale du site web du Master INI. En ce qui concerne l’équipe Design graphique, il s’agissait de créer tous les éléments graphiques et ergonomiques qui composent le nouveau site web. Nous avons donc répartis les tâches à chacun des membres de l’équipe « Design » suivant une hiérarchie d’entreprise. En effet, un coordinateur établit dans un premier temps les besoins avec les autres équipes (L’équipe « Développement » et l’équipe « Contenu ») puis transmet ces tâches aux différentes personnes du groupe suivant son domaine de compétences. De plus, afin de correspondre au mieux aux attentes du client, nous avons utilisé la méthode AGIL qui permet de travailler en interaction tout au long du projet avec le client. Composition de l’équipe : Romain Sauter : Coordinateur Céline Bernard : Conception des boutons du menu Benoit Hays : Conception de maquettes Ornella nTaloula : Conception de maquettes Kamel Mouats : Conception d’images 2D/3D Hernan Perez : Conception d’images 2D/3D Objectifs : Les contraintes initiales fournis par le client sont les suivantes : Les tâches réalisées : Conception de maquettes :
  13. 13. 13 Projet RESIN – Master INI 2011/12 Pour être au plus proche des attentes du client (méthode Agile), nous avons conçu dans un premier temps avec l’ensemble des étudiants de la promotion INI, 3 maquettes graphiques différentes. Ces dernières nous ont permis de proposer un large choix au client avec des tons très différents. Cette étape préalable nous a permis à l’équipe graphique par la suite de concevoir 2 nouvelles maquettes retraçant l’ensemble des idées proposées dans les 3 premières et validées par le client. Concernant la page d’accueil, le client désirait garder un look tablette, des boutons de menu simples et en perspectives, ainsi qu’un slideshow proposant des images de réalisations des étudiants. Conception des pages du site web : Structure du site web: Page d’accueil Forum Formation Etudiants Professionnels Réalisations Liste des étudiants actuels (Curseurs sélectionnable) Nom, Prénom, Formation,… Anciens Etudiants Graphisme Réalité augmentée Web Design 3D Vidéos -Contenu -Débouchés -CESS Carrousel (Photos et vidéos)
  14. 14. 14 Projet RESIN – Master INI 2011/12 Après validation du style des premières maquettes par le client, nous avons conçu les pages en fonction de cette organisation. Nous avons alors répartis les sections à réalisées aux membres du groupe « Design » pour concevoir chaque sous partie du site web. Maquette Section «Formation» : Pour chaque page de cette section nous avons cherché les plus belles images de réalisations étudiantes afin d’illustrer et de montrer ce qu’il est possible de faire dans notre formation.
  15. 15. 15 Projet RESIN – Master INI 2011/12 Maquette Section «Etudiant» :
  16. 16. 16 Projet RESIN – Master INI 2011/12 Maquette Section « Espace Professionnels» :
  17. 17. 17 Projet RESIN – Master INI 2011/12 7.3.Equipe Développement Outils utilisés : Système de gestion de contenu : Joomla Logiciel FTP : FileZilla : pour le transfert de fichiers sur un serveur web Modules Joomla Editeur de texte : langage PHP, HTML/CSS FONCTIONNALITES Nous avons expliqué précédemment les raisons qui nous ont poussées à utiliser le CMS Joomla. Désormais, il est temps d’aborder les fonctionnalités développées. 1. Le template Une fois Joomla installé sur un serveur web ou en local, une des premières étapes est de concevoir un template (ou thème graphique), autrement dit de définir l’aspect visuel du site, et le positionnement des différents blocs et autres composants. Il est possible d’utiliser des thèmes par défaut ou en télécharger sur Internet. Cependant, afin d’être le plus fidèle possible avec la maquette validée par le client, nous avons dû réaliser un template entier à partir d’un existant par défaut. Pour le modifier, deux solutions s’offrent à nous. La première utilise l’administration Joomla, mais les changements ne sont pas pratiques surtout si l’on fait des erreurs. La seconde, la meilleure, est d’éditer les feuilles de style directement sur le logiciel FTP (tel que FileZilla). Pour information, un logiciel FTP offre la possibilité de déposer des fichiers sur un serveur web (via le protocole FTP : File Protocol Transfert), et donc de publier en ligne son propre site web. C’est pour cette raison d’ailleurs que nous acheté un hébergement web pour permettre à l’équipe de projet, mais aussi au client, d’apercevoir les changements effectués en temps réel. D’un point de vue technique, pour créer un template reconnu par Joomla, il faut installer une archive (compressée) contenant différents fichiers (voir annexe). On retrouve ainsi : - index.php : fichier contenant la structure du site. Il est possible de lui rajouter de nouveaux blocs (div ou class en css), et de leur spécifier par exemple si on veut les voir sur la page d’accueil exclusivement ou sur également sur les autres. - templateDetails.xml : sert à l’installation du template et à ses paramètres - index.html : feuille vierge qui sert de support à la génération de la page - favicon.ico : icône du site - template_thumbnail.png : miniature de prévisualisation du site dans l’administration - css/nomFichier.css : pilote les feuilles du style du site.
  18. 18. 18 Projet RESIN – Master INI 2011/12 2. Les modules La force de Joomla vient de sa force communautaire, et des nombreuses « fonctions avancées » développées. On les appelle des modules…. 3. La partie administration Encore une fois, le choix du CMS Joomla n’a pas été pris à la légère. En effet, l’un des objectifs de la refonte du site du Master INI est de le rendre dynamique avec des mises à jour régulières. Par conséquent, il est nécessaire de pouvoir ajouter du nouveau contenu de façon simple et rapide. L’administration de Joomla est faite pour ça. Malgré un temps d’adaptation à cet environnement riche et pas toujours trivial, elle permet la gestion des droits d’utilisateurs, en leur donnant par exemple le droit d’écrire des articles dans certaines rubriques tout en interdisant d’installer de nouveaux modules ou de modifier le thème graphique actuel. 8.Méthodologie Déroulement du travail Dans ce projet, nous étions ramenés à réaliser différentes tâches et missions et nous avons adapté une méthodologie de travail spécifique pour chaque mission. Maquettes Au départ du projet la classe a été divisée en 3, pour essayer de trouver de bonnes idées pour la maquette du master. Ces groupes ont été constitués au hasard et étaient par conséquent très hétérogènes. Cet exercice avait pour but de laisser place à la créativité des étudiants. Le client nous a donné peu de conditions pour le graphismes. Nous avions beaucoup de liberté mais il fallait montrer que ce master est maitre en 3D. Donc essayer de mettre en place un design en relief et dynamique. Le nom du projet se nomme RESIN (REfonte du Site INi) donc les groupes RESIN1, 2 et 3. Voici les 3 maquettes qui en sont ressorties :
  19. 19. 19 Projet RESIN – Master INI 2011/12 Groupe Resin 1 Groupe Resin 2 Groupe Resin 3
  20. 20. 20 Projet RESIN – Master INI 2011/12 Nous avons remarqué que les maquettes sont très différentes. Le groupe RESIN 3 s’est plus attardé sur la mise en place du site au point de vue ergonomique que sur le graphisme à proprement parlé. Les 2 autres parties se sont penchées sur un design possible pour le futur site. Dans les 3 maquettes le client nous a donné les points positifs et négatifs. Sur la maquette de RESIN 1 il a bien aimé le style « tablette » et le gros SlideShow en haut de la page. Par contre n’a pas aimé les boutons du menu, le nouveau logo proposé par l’équipe et donc la couleur qui ne correspond pas au logo actuel du master. L’équipe RESIN 2 avait quand à elle présenté une maquette beaucoup plus complète avec différentes pages : « accueil », « étudiantes », « formation », « réalisations »… Le client a bien aimé le style propre, par contre il n’a pas bien réussi à voir le principe graphique du gros cube fait en 2D simulation 3D. Il n’a pas aimé non plus le nouveau logo proposé. L’aspect ergonomique du 3ème groupe a beaucoup plus au client de par leurs idées. Notamment le SlideShow avec les effets de calques. Par contre niveau graphique il n’y avait rien à en retirer. Le résumé de cet exercice nous a apporté beaucoup. Tout d’abord le client n’a pas été emballé par les propositions de nouvelle identité visuelle Donc une première consigne : de garder le logo actuel du site, donc faire le site avec ses contraintes graphiques. Ensuite un SlideShow est intéressant pour représenter le savoir faire des étudiants du master. Ils permettront d’avoir une manière plus interactive d’accéder au contenu du site. La maquette de RESIN 1 est gardé principalement mais y intégrer les points positifs des autres sites. Après la présentation des graphismes, la classe s’est divisée en 3 parties plus homogènes. Il y a désormais la partie Développement, la partie Graphisme et la partie Contenu. Chacune des parties se devait de faire le nécessaire pour avancer dans sa partie, mais une collaboration était nécessaire pour le bon avancement du projet.
  21. 21. 21 Projet RESIN – Master INI 2011/12 L’équipe Design graphique, se devait de créer tous les éléments graphiques et ergonomiques qui composent le nouveau site web. Nous avons donc répartis les tâches à chacun des membres de l’équipe « Design » suivant une hiérarchie d’entreprise. En effet, un coordinateur établis dans un premier temps les besoins avec les autres équipes (L’équipe « Développement » et l’équipe « Contenu ») puis transmet ces tâches aux différentes personnes du groupe suivant son domaine de compétences. De plus afin de correspondre au mieux aux attentes du client, nous avons utilisé la méthode AGIL qui permet de travailler en interaction tout au long du projet avec le client. La partie graphique s’est donc penchée sur l’évolution d’une maquette qui combinerait le besoin du master et l’envi du client. L’équipe graphique s’est alors divisée en 2. Un petit groupe a essayé d’améliorer la maquette graphique de RESIN 1, alors que les autres ont essayé de créer rapidement une nouvelle maquette qui reprendrait le principe de la tablette. Maquette de RESIN 1 améliorée Maquette « tablette » proposée A ce moment là le client a choisi clairement la maquette RESIN 1 amélioré. Le gros changement à effectuer se trouve dans le menu. Il fallait reprendre les icônes de la maquette « tablette ».
  22. 22. 22 Projet RESIN – Master INI 2011/12 Les icônes du menu ont beaucoup changé parce que le client ne voyait pas le rapport entre les icônes choisies et les catégories. Voici plusieurs icônes proposés pour les menus : Je pense que les logos ne sont pas encore parfaits. Il faudrait peut-être en faire en 3D avec une forme plus originale. C’est une possibilité future au site. La maquette finale du site est la suivante : Dans ce graphisme final nous retrouvons l’aspect tablette, un SlideShow qui se veut représentatif de la formation et un site en accord avec la charte graphique du logo INI. Il y a eu un peu de retard dans le graphisme en vu des nombreux changements effectué à la maquette initiale, mais nous avons à la fin une maquette plutôt design, avec du relief (la tablette) et du dynamisme (grâce au SlideShow).
  23. 23. 23 Projet RESIN – Master INI 2011/12 9.Réalisations Illustrations Aspect graphique Arborescence Le site devant se détacher des autres sites, il fallait donc trouver une arborescence un peu « originale ». Nous avons décidé de nous appuyer sur le SlideShow pour créer un menu original. En effet celui-ci nous permet directement d’accéder à des pages spécifiques du site. Explication des différentes images : Cette image nous amènera vers une page d’accueil avec un texte accrocheur. Sur cette image nous pouvons observer en arrière plan le « N » faisant référence au logo du master. Nous y avons également placé le logo de l’université de Lorraine. Cette image est censé simuler une image vue du ciel au dessus des immeubles. Pour améliorer cette image il y aura la possibilité de rajouter des fenêtres aux immeubles ou d’améliorer encore plus l’effet de relief. Le lien vers la partie Web Design se doit d’être accrocheur puisque ce sont ces réalisations qui vont attirer de nouveaux élèves. Pour cette image nous avons décidé d’utiliser plusieurs morceaux de CV réalisés par les étudiants du master. Ces images n’ont pas été choisies au hasard puisque nous pouvons apercevoir des logos et le style graphique de plusieurs CV.
  24. 24. 24 Projet RESIN – Master INI 2011/12 La voiture a été réalisée par un étudiant. Nous pouvons, grâce à elle, constater à quel niveau de compétences ce master peut nous amener en modélisation 3D. Cette image possède un lien qui nous amène vers la partie Réalisation 3D du site. Les autres images sont des créations d’étudiants qui montrent certaines de leurs créations 2D et 3D. Il est possible de faire des montages pour en associer plusieurs sur une même image du SlideShow (un peu de la manière de l’image pour le WebDesign par exemple) Le site propose d’aller sur un « Forum » et sur une « WebTV ». Les boutons sont toujours affichés sur les pages sous le menu. Le site dispose d’un fil d’Ariane pour que l’utilisateur se retrouve plus facilement dans le site. Les pages déjà traversés seront représentés par des lien pour une navigation plus efficace. Le client nous a demandé un site original dans son ergonomie et son arborescence, mais nous avons jugé qu’un menu reste indispensable. Les internautes sont habitués, et savent exactement comment cela marche. Le site est fait pour les futurs étudiants, les professeurs et les professionnels qui cherchent des étudiants. Il faut par conséquent que l’information puisse vite être trouvée. S’ils commencent à se perdre dans une « nouvelle espèce » de menu, ils ne voudront peut-être pas insister. Les pages de contact et de plan du site sont toujours présentes en bas de page du site. Disposition des éléments L’objectif du site est de marquer les personnes qui viennent sur le site, il fallait donc mettre des éléments en évidence. C’est le cas du SlideShow. Celui-ci nous propose directement des images propres à la formation et se doit d’être un point fort de la formation. Il est donc logique de l’avoir mit en avant. Lorsque nous arrivons sur la page, il arrive à peu près au centre de la page.
  25. 25. 25 Projet RESIN – Master INI 2011/12 Dans l’entête ce sont les références importantes à l’école qui y sont placés, comme le logo de l’Université de Lorraine et le logo du master. En plaçant les éléments tout en haut de la page, nous sommes sûr que les visiteurs du site seront verront ces informations. Le menu et le contenu du site sont placés en dessous du SlideShow dans la logique d’un site. La particularité du contenu est qu’il sera placé dans une fausse tablette avec quelques créations d’étudiants que l’on doit retrouver dans le site. Ceci démontre que le master connait et maitrise les dernières technologies. L’espace contact sera quand à lui en bas de page. L’internaute sera obligé de parcourir la page avant d’aller voir les contacts. Au départ la partie Contact devait faire parti du « footer » (le bas de page) et devait sortir bu bas de page mais la partie développement n’as pas eu le temps nécessaire d’étudier la manière de le faire.
  26. 26. 26 Projet RESIN – Master INI 2011/12 10.Difficultés rencontrées En dépit de notre organisation et implication dans la réalisation de ce projet, nous étions confrontés aux difficultés suivantes :  Instabilité de la maquette pour une longue durée  Contrainte de temps (cours/problème d’organisation)  La technique et la Maîtrise des différents outils de développement et la sélection des médias à insérer. 11.Conclusion Perspectives Nous remercions M.Noizette et M.Sauter de nous avoir fait confiance en nous accordant l’opportunité de réaliser ce projet à travers lequel nous avons exploité notre savoir faire et nos acquis en terme de gestion de projet. Nous avons participé à l’élaboration du plan d’actions et avons proposé plusieurs réalisations développées dans une ambiance collaborative et selon les méthodes agiles (corrections incrémentales tout le long des réalisations). Nous avons exploité tout notre savoir faire et avons trouvé dans l’hétérogénéité des profils des acteurs de ce projet une réelle richesse humaine et technique.

×