Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Architecture du concept "Cu3" // Site de la Maison de la Création

Projet tuteuré de notre Master 1 Audiovisuel et Médias Numériques, option Médias Numériques, à l'ICM de Grenoble (Université Stendhal), 2011/2012.
Conception du site Internet de la Maison de la Création. Ce document est la version finale de l'architecture web de notre concept, rebaptisé "Cu3".

Démonstrateur vidéo : www.youtube.com/watch?v=xztPUlOTpCk&feature=plcp
Blog : www.gateausurlacerise.com
Twitter : @GateauSurCerise
Facebook : www.facebook.com/gateausurlacerise
LinkedIn : www.linkedin.com/in/sylvaingateau
Viadeo : www.viadeo.com/fr/profile/sylvain.gateau2

Architecture du concept "Cu3" // Site de la Maison de la Création

  1. 1. Projet tuteuré : Conception du site de la Maison de la Création Zoning du concept « CU3 »Master 1 Audiovisuel et Médias Numériques 2011 / 2012, option Médias Numériques Institut de la Communication et des Médias - Grenoble GATEAU Sylvain / ORTIZ Marius / SERRAILLIER Benoît /// Avril 2012
  2. 2. Page d’accueil
  3. 3. Page d’accueil // Accès au Back Office Membres ou Visiteurs
  4. 4. Page d’accueil // Accès au Back Office Membres ou Visiteurs MEMBRES Mail... @u-grenoble3.fr Mot de passe... OK Mot de passe oublié ? VISITEURS Créez Accédez Mail... Mail... Entrez votre mail pour recevoir votre mot de Mot de passe... passe. Mot de passe oublié ?
  5. 5. Page d’accueil // Vidéo de présentation
  6. 6. Page d’accueil // Vidéo de présentation
  7. 7. Page d’accueil // Galaxie des Cubs thématiques
  8. 8. Page d’accueil // Galaxie des Cubs thématiques
  9. 9. Page d’accueil // Galaxie des Cubs thématiques
  10. 10. Page d’accueil // Galaxie des Cubs thématiques
  11. 11. Page d’accueil // Galaxie des Cubs thématiques
  12. 12. Page d’accueil // Informations institutionnelles sur la Maison de la Création
  13. 13. Page d’accueil // Informations institutionnelles sur la Maison de la Création Sed ut tum ad senem senex de senectute, sic hoc libro ad amicum amicissimus scripsi de amicitia. Tum est Cato locutus, quo erat nemo fere senior temporibus illis, nemo prudentior; nunc Laelius et sapiens (sic enim est habitus) et amicitiae gloria excellens de amicitia loquetur. Tu velim a me animum parumper avertas, Lae- lium loqui ipsum putes. C. Fannius et Q. Mucius ad socerum veniunt post mortem Africani; ab his sermo oritur, respondet Laelius, cuius tota disputatio est de amicitia, quam legens te ipse cognosces.
  14. 14. Back Office Membres // Cub Nom du Cub Entrez des mots-clés entre « »... OK Important pour que votre Cub soit référencer dans la « Galaxie de Cubs associés » Maison de la Création Workshop conception web Master Médias Numériques Zoning site web Créez ou recherchez des Hubs et Naviguez Flux d’actualités des Hubs ajoutés glissez-déposez les sur les faces de votre Cub Mes Cubs favoris Modifiez à tout moment les noms des faces de votre Cub en cliquant dans l’encadré... Actualités RecherchezMes Hubs... plus de Hubs...
  15. 15. Back Office Membres // Cub // Paramètres de compte Nom du Cub Entrez des mots-clés entre « »... OK Important pour que votre Cub soit référencer dans la « Galaxie de Cubs associés » Modifiez votre mail... Maison de la Création Workshop conception web Modifiez votre mot de passe... Confirmez votre nouveau mot de passe... Master Médias Numériques Zoning site web Créez ou recherchez des Hubs et Naviguez Flux d’actualités des Hubs ajoutés glissez-déposez les sur les faces de votre Cub Mes Cubs favoris Actualités RecherchezMes Hubs... plus de Hubs...
  16. 16. Back Office Membres // Cub // Création d’avatar Nom du Cub Entrez des mots-clés entre « »... OK Important pour que votre Cub soit référencer dans la « Galaxie de Cubs associés » Maison de la Création Workshop conception web Ajoutez un avatar Master Médias Numériques Zoning site web Sélectionnez une image... ... Aperçu: Composez votre ...ou créez votre avatar ! Cub en glissant Naviguez Flux d’actualités des Hubs ajoutés déposant les Hubs de la sélection Undo Redo Reset Download Mes Cubs favoris Valider l’avatar Actualités RecherchezMes Hubs... plus de Hubs...
  17. 17. Back Office Membres // Cub // Glisser-déposer des Hubs Entrez des mots-clés entre « »... OK Important pour que votre Cub soit référencer dans la « Galaxie de Cubs associés » Maison de la Création Workshop conception web Master Médias Numériques Zoning site web Naviguez Flux d’actualités des Hubs ajoutés Mes Cubs favoris Actualités RecherchezMes Hubs... plus de Hubs...
  18. 18. Back Office Visiteurs // Cub Nom du Cub Recherchez des Hubs et NaviguezFlux d’actualités des Hubs ajoutés glissez-déposez les sur les faces de votre Cub Mes Cubs favoris Modifiez à tout moment les noms des faces de votre Cub en cliquant dans l’encadré... Actualités Recherchez plus de Hubs...
  19. 19. Back Office Visiteurs // Cub // Paramètres de compte Nom du Cub Modifiez votre mail... Modifiez votre mot de passe... Confirmez votre nouveau mot de passe... Recherchez des Hubs et NaviguezFlux d’actualités des Hubs ajoutés glissez-déposez les sur les faces de votre Cub Mes Cubs favoris Actualités Recherchez plus de Hubs...
  20. 20. Back Office Visiteurs // Cub // Création d’avatarNom du Cub Ajoutez un avatar Sélectionnez une image... ... Aperçu: Composez votre ...ou créez votre avatar ! Cub en glissant NaviguezFlux d’actualités des Hubs ajoutés déposant les Hubs de la sélection Undo Redo Reset Download Mes Cubs favoris Valider l’avatar Actualités Recherchez plus de Hubs...
  21. 21. Back Office Visiteurs // Cub // Glisser-déposer des Hubs NaviguezFlux d’actualités des Hubs ajoutés Mes Cubs favoris Actualités Recherchez plus de Hubs...
  22. 22. Back Office Hubs (réservé aux Membres) // Création Mes Hubs...
  23. 23. Back Office Hubs (réservé aux Membres) // Création // Galerie images Mes Hubs... Choisissez une catégorie pour ce Hub...
  24. 24. Back Office Hubs (réservé aux Membres) // Création // Galerie images Mes Hubs... Ajoutez une image... Parcourez sur votre ordinateur... OK Entrez un lien URL...
  25. 25. Back Office Hubs (réservé aux Membres) // Création // Galerie images Mes Hubs...
  26. 26. Back Office Hubs (réservé aux Membres) // Création // Galerie images Mes Hubs... Ajoutez une image... Parcourez sur votre ordinateur... OK Entrez un lien URL...
  27. 27. Back Office Hubs (réservé aux Membres) // Ajouter des mots-clés à un Hub   Mes Hubs...
  28. 28. Back Office Hubs (réservé aux Membres) // Ajouter des mots-clés à un Hub   Mes Hubs... Ajoutez des mots-clés au Hub... Entrez des mots-clés entre « »... OK Maison de la Création Workshop conception web Master Médias Numériques Zoning site web Projet tuteuré
  29. 29. Back Office Hubs (réservé aux Membres) // Inviter des collaborateurs à un Hub Mes Hubs...
  30. 30. Back Office Hubs (réservé aux Membres) // Inviter des collaborateurs à un Hub Mes Hubs... Invitez des collaborateurs... Entrez l’adresse mail d’un collaborateur... OK Benoit Serailler Marius Ortiz Sylvain Gateau Frank Grimonpont
  31. 31. Back Office Hubs (réservé aux Membres) // Confidentialité d’un Hub Mes Hubs...
  32. 32. Back Office Hubs (réservé aux Membres) // Confidentialité d’un Hub Mes Hubs... Paramétrez la confidentialité de votre Hub... Public : Hub visible par tous les internautes. Ce réglage permet de référencer le Hub dans les Cubs thématiques. OK Privé : Hub invisible au grand public. Seuls vous et les collaborateurs peuvent accéder à ce Hub.
  33. 33. Back Office Hubs (réservé aux Membres) // Supprimer un Hub Mes Hubs...
  34. 34. Back Office Hubs (réservé aux Membres) // Supprimer un Hub Mes Hubs... Supprimez le Hub... OUI Voulez-vous vraiment supprimer ce Hub ? NON
  35. 35. Back Office Hubs (réservé aux Membres) // Création // Chaine vidéos Mes Hubs...
  36. 36. Back Office Hubs (réservé aux Membres) // Création // Chaine vidéos Mes Hubs... Choisissez une catégorie pour ce Hub...
  37. 37. Back Office Hubs (réservé aux Membres) // Création // Chaine vidéos Mes Hubs... Ajoutez une vidéo... Parcourez sur votre ordinateur... OK Entrez un lien URL...
  38. 38. Back Office Hubs (réservé aux Membres) // Création // Téléchargement Mes Hubs...
  39. 39. Back Office Hubs (réservé aux Membres) // Création // Téléchargement Mes Hubs... Choisissez une catégorie pour ce Hub...
  40. 40. Back Office Hubs (réservé aux Membres) // Création // Téléchargement Mes Hubs... Ajoutez un fichier... Parcourez sur votre ordinateur... OK Entrez un lien URL...
  41. 41. Back Office Hubs (réservé aux Membres) // Création // Flux RSS Mes Hubs... Mémoire Social media
  42. 42. Back Office Hubs (réservé aux Membres) // Création // Flux RSS Mes Hubs... Choisissez une catégorie pour ce Hub...
  43. 43. Back Office Hubs (réservé aux Membres) // Création // Flux RSS Mes Hubs... Synchronisez vos comptes et sites favoris... OK Entrez un lien de flux RSS...
  44. 44. Back Office Hubs (réservé aux Membres) // Création // Blog Mes Hubs... Mémoire Social media
  45. 45. Back Office Hubs (réservé aux Membres) // Création // Blog Mes Hubs... Choisissez une catégorie pour ce Hub...
  46. 46. Back Office Hubs (réservé aux Membres) // Création // Blog Mes Hubs... Ajoutez un blog... Nom du blog Nom de l’article... OK Tapez votre texte...
  47. 47. Back Office Hubs (réservé aux Membres) // Création // Blog Mes Hubs... Ajoutez un blog... Nom du blog Nom de l’article... OK Ajoutez un lien... Image Tapez votre texte...l’article... Nom de Parcourez sur votre bureau... Ajoutez un lien URL... Vidéo Parcourez sur votre bureau... Ajoutez un code embed...
  48. 48. Back Office Hubs (réservé aux Membres) // Création // Blog // Article Mes Hubs... Mémoire Social media
  49. 49. Back Office Hubs (réservé aux Membres) // Création // Blog // Article Mes Hubs... Ajoutez un article... Workshop Création Nom de l’article... OK Tapez votre texte...
  50. 50. Back Office Hubs (réservé aux Membres) // Création // Page Web Mes Hubs... Mémoire Social media
  51. 51. Back Office Hubs (réservé aux Membres) // Création // Profil Mes Hubs... Choisissez une catégorie pour ce Hub... 31 i
  52. 52. Back Office Hubs (réservé aux Membres) // Création // Profil Mes Hubs... Ajoutez un profil ... Nom de la page... Nom de profil... OK Votre expérience... Votre formation... Vos centres d’interêts... Votre projet...
  53. 53. Back Office Hubs (réservé aux Membres) // Création // Profil Mes Hubs... Ajoutez un profil... Nom de la page... Nom de profil... OK Votre expérience... Votre formation... Vos centres d’interêts... Votre projet...
  54. 54. Back Office Hubs (réservé aux Membres) // Création // Profil Mes Hubs... Confirmation Confirmation Ajoutez un avatar (en cas d’oubli Sélectionnez une image... Aperçu: ... de mot de passe) Composez votre Hub en glissant déposant les Nubs ...ou créez votre avatar ! de la sélection + Undo Redo Reset Download 1 Valider l’avatar / 3 /3 2
  55. 55. Back Office Hubs (réservé aux Membres) // Création // Événement Mes Hubs... Choisissez une catégorie pour ce Hub... 31 i
  56. 56. Back Office Hubs (réservé aux Membres) // Création // Événement Mes Hubs... Ajoutez un événement ... Nom de l’événement... OK Date... Type de l’événement... Sujet de l’événement... Détails...
  57. 57. Back Office Hubs (réservé aux Membres) // Création // Informations Mes Hubs... Choisissez une catégorie pour ce Hub... 31 i
  58. 58. Back Office Hubs (réservé aux Membres) // Création // Informations Mes Hubs... Ajoutez une page d’informations... Titre... OK Type... Votre texte...
  59. 59. Back Office Hubs (réservé aux Membres) // Création // Page développeur Mes Hubs... Choisissez une catégorie pour ce Hub... 31 i
  60. 60. Back Office Hubs (réservé aux Membres) // Création // Page développeur Mes Hubs... Ajoutez une page web... OK
  61. 61. Cub thématique (accessible à partir de la page d’accueil) Les Hubs pratiques Recherchez...
  62. 62. Cub thématique // Visiter un HubLes Hubs pratiques Recherchez... Visitez Ajoutez
  63. 63. Cub thématique // Visiter un HubLes Hubs pratiques Recherchez... Visitez Ajoutez
  64. 64. Visite d’un HubLes Nubs pratiques Rechercher Visitez Ajoutez Changez de Hub !
  65. 65. Cub thématique // Ajouter le Hub au CubLes Hubs pratiques Recherchez... Visitez Ajoutez
  66. 66. Cub thématique // Ajouter le Hub au CubLes Hubs pratiques Recherchez... Visitez Choisissez une catégorie pour ce Hub... Ajoutez Vous possédez déjà un Cub ? Catégories... Identifiez-vous pour retrouver vos Actualités catégories personnalisées et intégrez directement le Hub Informations sélectionné ! Innovations Votre mail Projets étudiants Sujets de recherche Votre mot de passe Workshops Validez
  67. 67. Cub thématique // Accéder à son Cub (Back Office Membres ou Visiteurs) Les Hubs pratiques Recherchez... Votre Cub...
  68. 68. Cub thématique // Changer de face horizontalement Les Hubs « Workshops » Recherchez...
  69. 69. Cub thématique // Changer de face verticalement Les Hubs « Workshops » Recherchez...
  70. 70. Cub thématique // Défiler de Hubs horizontalement Les Hubs « Workshops » Recherchez...
  71. 71. Cub thématique // Défiler des Hubs verticalement Les Hubs « Workshops » Recherchez...
  72. 72. Cub thématique // Accéder à la Galaxie de Cubs associés Les Hubs « Workshops » Recherchez...
  73. 73. Visite d’un HubLes Nubs pratiques Rechercher Visitez Ajoutez Changez de Hub !
  74. 74. Visite d’un Hub // Accéder au menuLes Nubs pratiques Rechercher Visitez Ajoutez
  75. 75. Visite d’un Hub // Accéder au menu // Retourner au Cub thématique Les Nubs pratiques Rechercher Visitez Ajoutez
  76. 76. Visite d’un Hub // Accéder au menu // Accéder au Cub du créateur de ce Hub Les Nubs pratiques Rechercher Visitez Ajoutez
  77. 77. Visite d’un Hub // Accéder au menu // Accéder à la Galaxie de Cubs associés Les Nubs pratiques Rechercher Visitez Ajoutez
  78. 78. Visite d’un Hub // Accéder au menu // Ajouter le Hub à son Cub Les Nubs pratiques Rechercher Visitez Ajoutez
  79. 79. Visite d’un Hub // Accéder au menu // Partager le Hub Les Nubs pratiques Rechercher Visitez Ajoutez
  80. 80. Visite d’un Hub // Accéder au menu // Contacter le créateur du Hub Les Nubs pratiques Rechercher Visitez Ajoutez
  81. 81. Visite d’un Hub // Accéder au menu // Contacter le créateur du Hub Les Nubs pratiques Rechercher Visitez Envoyez un mail... Votre adresse mail... OK Ajoutez Objet... Votre texte...
  82. 82. Visite d’un Hub // Accéder au menu // Contacter le créateur du Hub Les Nubs pratiques Rechercher Visitez Envoyez un mail... Votre adresse mail... OK Ajoutez Ajoutez un lien... Objet... Ajoutez un pièce jointe... Cc : Votre texte...
  83. 83. Visite d’un Hub // Changer de Hub latéralement (gauche) Changez de Hub !
  84. 84. Visite d’un Hub // Changer de Hub latéralement (droite) Changez de Hub !
  85. 85. Visite d’un Hub // Changer de Hub verticalement (haut) Changez de Hub !
  86. 86. Visite d’un Hub // Changer de Hub verticalement (bas) Changez de Hub !
  87. 87. Visite d’un Hub // Changer de Hub verticalement (bas) Changez de Hub !
  88. 88. Galaxie de Cubs associés (accessible par “Cub thématiques” ou “Visite d’un Hub”) Recherchez un Cub...
  89. 89. Galaxie de Cubs associés // Zoomer, Survoler, Tourner, Trouver un Cub Hub Recherchez un Cub...
  90. 90. Galaxie de Cubs associés // Zoomer, Survoler, Tourner, Trouver un Cub Hub Recherchez un Cub...
  91. 91. Galaxie de Cubs associés // Rechercher un Cub Monsieur Marius
  92. 92. Navigation (accessible par le “Back office Cub d’un membre ou d’un visiteur” OU la “Galaxie de Cubs associés” OU le menu d’un Hub)Nom du Cub Actualités
  93. 93. Navigation // Zoomer (scroll avant)
  94. 94. Naviation // Zoomer (scroll avant)
  95. 95. Navigation // Zoomer (scroll avant maximum)
  96. 96. Navigation // Zoomer (boucle après scroll avant maximum)Nom du Cub Actualités
  97. 97. Navigation // Accéder au menuNom du Cub Actualités
  98. 98. Navigation // Accéder au menu // Ajouter le Cub à ses favoris (accessible dans le Back Office) Nom du Cub Actualités
  99. 99. Navigation // Accéder au menu // Retourner à l’accueilNom du Cub Actualités

×