PROJET E-CAMPUS. Aurélie Rémia

Transcription

1 PROJET E-CAMPUS Aurélie Rémia

2 Sommaire 1 Projet ecampus 1 12 Projet ecampus 2 2 Présentation 13 Présentation 3 Notes d intention 14 Notes d intention 4 Schéma d arborescence 15 Schéma d arborescence 5 Design d interfaces 16 Design d interfaces 1 GUI 21 GUI 11 Storyboard 22 Storyboard 23 Crédits/Remerciements

3 1 PROJET E-CAMPUS 1

4 Présentation Extranet Nouveau 3 5 Aurélie Rémia 2TiD2 DASHBOARD APERCU D HORAIRE NOTIFICATIONS LUNDI 7 janvier MARDI 8 janvier MERCREDI MARDI 89 janvier LUNDI JEUDI 1 7 janvier VENDREDI LUNDI 11 7 janvier SAMEDI LUNDI 12 7 janvier Général Cours Scolaire Social Social DASHBOARD ACTUALITÉ 8:4 9:4 1:4 11:5 12:5 D4 D1 B24 B24 D1 8:4 OPTIQUE B236 T. SPE T. SPE 3 3 Houard Volont Volont 9:4 D4 T. NUM. T. NUM. AV 3 AV 3 Houard Bourgaux 1:4 CONCEPTIO... CONCEPTIO... 11:5 12:5 B236 T. SPE T. SPE 3 3 Volont Volont D4 T. NUM. T. NUM. AV 3AV 3 Houard Bourgaux D4 OPTIQUE Houard D1 B24 CONCEPTIO... B24 CONCEPTIO... D1 D4 OPTIQUE Houard D1 B24 CONCEPTIO... B24 CONCEPTIO... D1 D4 OPTIQUE Houard D1 B24 CONCEPTIO... B24 CONCEPTIO... D1 Alexandre a Alexandre ajouté un briefing au cours a d ajouté Ergonomie. un briefing au cours d Ergonomie. 1 Il y a 11mn François Bourgaux vous a ajouté dans le groupe 2TID Il y a 21mn Hel Lo 7/1/13 Le site de Bruxelles Propreté est mort! On ne peut plus travailler! AGENDA DOCUMENTS 13:5 14:5 16: 13:5 B236 T. NUM. DESSIN AV 3 Houard Gérard 14:5 16: B236 T. NUM. DESSIN AV 3 Houard Gérard X a répondu à votre commentaire sur le briefing du cours d Ergonomie. Il y a 26mn CONTACTS 17: 18: 17: 18: C est noël! Pour cette occasion, un nouveau Il y travail a 26mnà finir pour la rentrée offert! Il y a 4h TIMELINE RÉGLAGES DÉCEMBRE VIER FÉVRIER LUNDI 7 MARDI 8 JEUDI 1 JEUDI 19 LUNDI 25 SAMEDI 4 DIMANCHE 3 REMISE TRIPLE DARE Cours de HTML/CSS ESIAJ - Infographie avenue Comte de Smet de Nayer 2-5 Namur Tél Dashboard Notifications 3 1 général cours social 3 1 Dashboard Aperçu d horaire rofil Dashboard Aperçu d horaire Notifications Timeline Age D4 B236 LUNDI 7 janvier OPTIQUE Houard T. SPE 1 Govard 8h4 9h4 MARDI 8 janvier 1h4 T. NUM... Volont 11h5 12h5 B24 3 Alexandre a ajouté un briefing au cours d Ergonomie. Il y a 11mn François Bourgaux vous a ajouté dans le groupe 2TID Il y a 23mn 13h5 2

5 Notes d intention CONTEXTE Intégration et design d une fonctionnalité dans le cadre de l ecampus de l ESIAJ afin de répondre à une demande, sur base de l utilisation de l extranet. ( fonctionnalité mal exploitée/intégrée, ou inexistante ) UTILISATEUR Étudiante en 2ème Web & Multimédia. PROBLÈME Aperçu d horaire mal intégré dans la page d accueil de l extranet résultant à une fonction non utilisée. ( série de texte pour décrire l horaire ) Aucun moyen de communiquer / d être au courant des nouvelles remises en ligne sans consulter ses s. Fonction actualités obsolète. Très peu de mises à jour, non spécifiques à l utilisateur. SOLUTION Intégration d un aperçu d horaire ressemblant à l horaire classique, affichant +/- de jours selon la résolution. Centre de notifications permettant aux étudiants de mieux intéragir entre eux, ainsi qu avec les professeurs. Timeline permettant à l utilisateur de voir les évènements à venir, spécifiques à l utilisateur. ( remises, examens, évènements. ) 3

6 Schéma d arborescence 4

7 Design d interfaces // Sketches Iphone 5 (32 x 568) Ipad (768x124) Desktop (124x768) (> Changements de résolution pendant wireframe ) 5

8 Design d interfaces // Wireframes 6

10 Design d interfaces // Layouts Lien mockup desktop Extranet Nouveau 3 5 Aurélie Rémia 2TiD2 DASHBOARD APERCU D HORAIRE NOTIFICATIONS LUNDI 7 janvier MARDI 8 janvier MERCREDI MARDI 89 janvier LUNDI JEUDI 1 7 janvier VENDREDI LUNDI 11 7 janvier SAMEDI LUNDI 12 7 janvier Général Cours Scolaire Social Social DASHBOARD ACTUALITÉ 8:4 9:4 1:4 11:5 12:5 D4 D1 B24 B24 D1 OPTIQUE Houard 8:4 B236 T. SPE T. SPE 3 3 Volont Volont 9:4 D4 T. NUM. T. NUM. AV 3 AV 3 Houard Bourgaux 1:4 CONCEPTIO... CONCEPTIO... 11:5 12:5 B236 T. SPE T. SPE 3 3 Volont Volont D4 T. NUM. T. NUM. AV 3AV 3 Houard Bourgaux D4 D1 OPTIQUE Houard B24 CONCEPTIO... B24 CONCEPTIO... D1 D4 D1 OPTIQUE Houard B24 CONCEPTIO... B24 CONCEPTIO... D1 D4 D1 OPTIQUE Houard B24 CONCEPTIO... B24 CONCEPTIO... D1 1 Alexandre a Alexandre ajouté un briefing au cours a d ajouté Ergonomie. un briefing au cours d Ergonomie. Il y a 11mn François Bourgaux vous a ajouté dans le groupe 2TID Il y a 21mn Hel Lo 7/1/13 Le site de Bruxelles Propreté est mort! On ne peut plus travailler! AGENDA 13:5 14:5 13:5 B236 T. NUM. DESSIN AV 3 Houard Gérard 14:5 B236 T. NUM. DESSIN AV 3 Houard Gérard X a répondu à votre commentaire sur le briefing du cours d Ergonomie. DOCUMENTS 16: 16: Il y a 26mn CONTACTS 17: 18: 17: 18: C est noël! Pour cette occasion, un nouveau Il y travail a 26mnà finir pour la rentrée offert! Il y a 4h TIMELINE RÉGLAGES DÉCEMBRE VIER FÉVRIER LUNDI 7 MARDI 8 JEUDI 1 JEUDI 19 LUNDI 25 SAMEDI 4 DIMANCHE 3 REMISE TRIPLE DARE Cours de HTML/CSS ESIAJ - Infographie avenue Comte de Smet de Nayer 2-5 Namur Tél Extranet Nouveau DASHBOARD 3 5 Lien mockup ipad Aurélie Rémia 2TiD2 APERCU D HORAIRE NOTIFICATIONS LUNDI 7 janvier MARDI 8 janvier Général Scolaire Cours Social DASHBOARD ACTUALITÉ AGENDA D4 D1 OPTIQUE Houard 8:4 9:4 1:4 B24 B24 CONCEPTIO... 11:5 11:5 D1 12:5 13:5 14:5 14:5 T. SPE 3 Volont T. NUM. AV 3 Houard Bourgaux T. DESSIN NUM. AV 3 Houard Gérard B236 D4 B Alexandre a Alexandre a ajouté un briefing au cours d ajouté un briefing au cours d Ergonomie. Ergonomie. Il y a 11mn Il y a 11mn François Bourgaux vous a ajouté dans le groupe 2TID François Bourgaux vous a ajouté dans le groupe Il y 2TID2 a 21mn Il y a 21mn X a répondu à votre commentaire sur le briefing du cours d Ergonomie. DOCUMENTS CONTACTS TIMELINE 16: 16: 17: 18: 18: Il y a 26mn X a répondu à votre commentaire sur le briefing du C est cours noël d Ergonomie.! Pour cette occasion, un nouveau Il y travail a 26mn à finir pour la rentrée offert! Il y a 4h DÉCEMBRE VIER RÉGLAGES LUNDI 7 MARDI 8 JEUDI 1 DIMANCHE 3 REMISE TRIPLE DARE Cours de HTML/CSS ESIAJ - Infographie avenue Comte de Smet de Nayer 2-5 Namur Tél

11 Design d interfaces // Layouts Lien mockup iphone Dashboard Notifications rofil Dashboard Age général cours social Aperçu d horaire Notifications 3 Alexandre a ajouté un briefing au cours d Ergonomie. Il y a 11mn Timeline François Bourgaux vous a ajouté dans le groupe 2TID Il y a 23mn ESIAJ - Infographie avenue Comte de Smet de Nayer 2 5 Namur Dashboard D4 B236 LUNDI 7 janvier OPTIQUE Houard T. SPE 1 Govard Timeline MARDI JEUDI 27 DECEMBRE 8 janvier 8h4 9h4 1h4 LUNDI 7 VIER Triple Dare T. NUM... à rendre B24 en HTML/CSS Volont 11h5 12h5 3 1 VIER Dashboard D4 B236 François Bourgaux vous a ajouté dans le groupe 2TID LUNDI 7 janvier OPTIQUE Houard T. SPE 1 Govard... 8h4 9h4 1h4 Il y a 24mn 3 1 Aperçu d horaire MARDI 8 janvier T. NUM... Volont 11h5 B24 12h5 13h5 9

12 GUI Normal Nouveau Active Nouveau NOTIFICA ACTUALITÉ ACTUALITÉ JEUDI 1 JEUDI 1 Scolaire NOTIFICATIONS Scolaire Général Cours 1

13 Storyboard NOTIFICATIONS Général Cours Scolaire Social Social 1 Alexandre a Alexandre ajouté un briefing au cours a d ajouté Ergonomie. un briefing au cours d Ergonomie. Il y a 11mn Hel Lo 7/1/13 Le site de Bruxelles Propreté est mort! On ne peut plus travailler! François Bourgaux vous a ajouté dans le groupe 2TID Il y a 21mn Cours X a répondu à votre commentaire sur le briefing du Scolaire Social cours d Ergonomie. Social Il y a 26mn clic ndre a C est noël! Pour cette ndre é un briefing au cours a d occasion, un nouveau Il y travail a 26mnà un briefing au cours d Le site de Bruxelles omie. finir pour la rentrée offert! omie. Propreté est mort! On ne Il y a 11mn peut plus travailler! Il y a 4h Onglet activé par défault ois Bourgaux vous a Général dans le groupe 2TID2 -. Scolaire Social Cours Il y a 21mn Scolaire Social Hel Lo 7/1/13 Social pondu à votre andre entaire sur le briefing a du ndre a d Ergonomie. é un briefing au cours d nomie. é un briefing au cours d omie. 11 Hel Lo 7/1/13 Le site de Bruxelles

14 12 PROJET E-CAMPUS 2

15 Présentation Extranet Nouveau 3 3 DASHBOARD QUOI DE NEUF? Aurélie Rémia 2TiD VENTE T-SHIRTS 19 1 ANS VENTE T-SHIRTS 27 1 ANS 28 VENTE T-SHIRTS 1 1 DASHBOARD ACTUALITÉ À partir de ce mardi 23, et jusqu au mois de février, la compagnie ferroviaire belge sera en grève. SOURCE : LESSENTIEL.LU 5 Vente de T-shirts iens super tendance ce vendredi 26 à midi au grand hall en exclusivité! 52 8 Affaire On a pas tous les jours 1 ans! Alors, à l, on a décidé d inviter tous les étudiants le jeudi 19 à partir de 2h pour fêter cet évènement À partir de ce mardi 23, et jusqu au mois de février, la compagnie ferroviaire belge sera en grève. SOURCE : LESSENTIEL.LU 5 Vente de T-shirts iens super tendance ce vendredi 26 à midi au grand hall en exclusivité! 52 8 Affaire On a pas tous les jours 1 ans! Alors, à l, on a décidé d inviter tous les étudiants le jeudi 27 à partir de 2h pour fêter cet évènement Vente de T-shirts iens super tendance ce vendredi 28 à midi au grand hall en exclusivité! 52 8 Affaire Train Lièges Bruxelles Mode Évènement Train Lièges Bruxelles Mode Évènement Mode DOCUMENTS AGENDA 29 1 ANS 1 DOCUMENTS CONTACTS CONTACTS REGLAGES On a pas tous les jours 1 ans! Alors, à l, on a décidé d inviter tous les étudiants le jeudi 29 à partir de 2h pour fêter cet évènement Évènement REGLAGES Extranet Nouveau 3 3 DASHBOARD QUOI DE NEUF? Aurélie Rémia 2TiD VENTE T-SHIRTS 19 1 ANS - Infographie avenue Comte de Smet de Nayer 2-5 Namur Tél DASHBOARD À partir de ce mardi 23, et jusqu au mois de février, la Vente de T-shirts iens super tendance ce vendredi On a pas tous les jours 1 ans! Alors, à l, on a compagnie ferroviaire belge 26 à midi au grand hall en décidé d inviter tous les sera en grève. exclusivité! étudiants le jeudi 19 à partir ACTUALITÉ SOURCE : LESSENTIEL.LU Affaire de 2h pour fêter cet évènement Train Lièges Bruxelles Mode Évènement DOCUMENTS AGENDA 16 TOURNOI BASKET DOCUMENTS CONTACTS Tournoi de basket à 17h! Les gagnants remporteront.. Un gateau fait maison. CONTACTS REGLAGES 52 8 Sport Basket Dashboard 3 1 REGLAGES rofil 23 Dashboard Age À partir de ce mardi 23, et jusqu au mois de février, la compagnie ferroviaire belge sera en grève. SOURCE : LESSENTIEL.LU ESIAJ - Infographie avenue Comte de Smet de Nayer 2-5 Namur Tél Notifications À partir de ce mardi 23, et jusqu au mois de février, la compagnie ferroviaire belge... Train Liège Bruxelles Train Liège 5 Bruxelles ESIAJ - Infographie avenue Comte de Smet de Nayer 2 5 Namur 16 VENTE T-SHIRTS 13

16 Notes d intention CONTEXTE Intégration et design d une fonctionnalité dans le cadre de l ecampus de l ESIAJ afin de répondre à une demande, sur base de l utilisation de l extranet. ( fonctionnalité mal exploitée/intégrée, ou inexistante ) UTILISATEUR Étudiant en 2ème Jeux Vidéo. PROBLÈME Pas de possibilité de voir les évènements à venir / grèves de train. SOLUTION Feed sous forme de modules rectangulaires permettant à l utilisateur de s abonner aux actualités qui l intéresse. 14

17 Schéma d arborescence 15

18 Design d interfaces // Sketches Iphone 5 (32 x 568) Ipad (768x124) Desktop (124x768) (> Changements de résolution pendant wireframe ) 16

21 Design d interfaces // Layouts Lien mockup desktop Extranet Nouveau 3 3 DASHBOARD QUOI DE NEUF? Aurélie Rémia 2TiD VENTE T-SHIRTS 19 1 ANS VENTE T-SHIRTS 27 1 ANS 28 VENTE T-SHIRTS 1 1 DASHBOARD ACTUALITÉ À partir de ce mardi 23, et jusqu au mois de février, la compagnie ferroviaire belge sera en grève. SOURCE : LESSENTIEL.LU 5 Vente de T-shirts iens super tendance ce vendredi 26 à midi au grand hall en exclusivité! 52 8 Affaire On a pas tous les jours 1 ans! Alors, à l, on a décidé d inviter tous les étudiants le jeudi 19 à partir de 2h pour fêter cet évènement À partir de ce mardi 23, et jusqu au mois de février, la compagnie ferroviaire belge sera en grève. SOURCE : LESSENTIEL.LU 5 Vente de T-shirts iens super tendance ce vendredi 26 à midi au grand hall en exclusivité! 52 8 Affaire On a pas tous les jours 1 ans! Alors, à l, on a décidé d inviter tous les étudiants le jeudi 27 à partir de 2h pour fêter cet évènement Vente de T-shirts iens super tendance ce vendredi 28 à midi au grand hall en exclusivité! 52 8 Affaire Train Lièges Bruxelles Mode Évènement Train Lièges Bruxelles Mode Évènement Mode DOCUMENTS AGENDA 29 1 ANS DOCUMENTS CONTACTS CONTACTS REGLAGES 1 On a pas tous les jours 1 ans! Alors, à l, on a décidé d inviter tous les étudiants le jeudi 29 à partir de 2h pour fêter cet évènement Évènement REGLAGES - Infographie avenue Comte de Smet de Nayer 2-5 Namur Tél Extranet Nouveau 3 3 Lien mockup ipad DASHBOARD QUOI DE NEUF? Aurélie Rémia 2TiD VENTE T-SHIRTS 19 1 ANS 1 DASHBOARD ACTUALITÉ À partir de ce mardi 23, et jusqu au mois de février, la compagnie ferroviaire belge sera en grève. SOURCE : LESSENTIEL.LU 5 Vente de T-shirts iens super tendance ce vendredi 26 à midi au grand hall en exclusivité! 52 8 Affaire On a pas tous les jours 1 ans! Alors, à l, on a décidé d inviter tous les étudiants le jeudi 19 à partir de 2h pour fêter cet évènement Train Lièges Bruxelles Mode Évènement DOCUMENTS AGENDA 16 TOURNOI BASKET DOCUMENTS CONTACTS Tournoi de basket à 17h! Les gagnants remporteront.. Un gateau fait maison. CONTACTS REGLAGES 52 8 Sport Basket REGLAGES ESIAJ - Infographie avenue Comte de Smet de Nayer 2-5 Namur Tél

22 Design d interfaces // Layouts 3 1 Lien mockup iphone rofil Dashboard Age Notifications À partir de ce mardi 23, et jusqu au mois de février, la compagnie ferroviaire belge Train Liège Bruxelles... Dashboard 23 À partir de ce mardi 23, et jusqu au mois de février, la compagnie ferroviaire belge sera en grève. SOURCE : LESSENTIEL.LU 16 VENTE T-SHIRTS 5 Train Bruxelles Liège ESIAJ - Infographie avenue Comte de Smet de Nayer 2 5 Namur 2

23 GUI Normal Active ACTUALITÉ ACTUALITÉ Train Train Nouveau Nouveau (seulement sur mobile) 21

24 Storyboard 2 2 clic 2 23 Un nouveau briefing! Par Alexandre 7 Un anticyclone Par Valérie Gérard 22

25 Crédits / Remerciements Ressources utilisées miketheindian, sneakpeekit pour les modèles des différentes interfaces des croquis potatoestomatoes pour les vecteurs de l ipad, imac et iphone ludidcharts pour l outil utilisé pour la création de l arborescence 23

26 Travail réalisé par Aurélie Rémia dans le cadre du cours de Dessin à l ESIAJ aurelie.remia@etud.infographie-sup.eu Merci de votre lecture!