Sommaire. Introduction

Transcription

1

2 2 Sommaire Introduction Concept Problématique...5 Aspect...7 Modélisation 3D...9 Scénario d utilisation...10 Partie technique...12 Evolution de la balle...13 Site internet Introduction...14 Structure du site...15 Technologie et langages utilisés...16 Logiciels utilisés...17 Optimisations...19 Partie administrateur...19 Partie visiteur...19 Résultats d analyse Web...20 Référencement...21 Compatibilité navigateur...22 Version mobile du site internet Pourquoi une version mobile?...23 L adaptation...23 Outils utilisés...24 Comptabilité...24

3 3 Sommaire Application mobile Concept et fonctionnalités...25 Outils utilisés...26 Communication Cible...27 Analyse SWOT...28 Campagne de communication...29 Charte graphique Identité visuelle...33 Charte graphique web...35 Maquettes site internet...37 Version mobile du site internet...41 Maquette Application...42 Gestion de projet Outils de travail...43 Plannings...45 Veille...49 Problèmes rencontrées...49 Annexes Détails des campagnes de communication...43 Cahier des charges fonctionnelle...43

4 4 Introduction Concept Site web Site web mobile Application Communication Graphisme Gestion Annexes Introduction... Ce document a pour but d apporter des solutions techniques à la démarche initiée dans le cahier des charges fonctionnel. Il a également pour but d affiner le projet en confrontant la démarche de conception réflexive à la réalité de la conception technique. Il doit cerner tous les aspects de la réalisation de la balle, qu ils soient matériels, logiciels ou communicationnels.

5 5 Introduction Concept Site web Site web mobile Application Communication Graphisme Gestion Annexes Concept... Notre démarche est de créer un objet de design génératif qui s intègre dans l environnement des concerts de musiques actuelles. L objet s inspire des technologies déjà utilisées dans cet environnement tout en essayant de proposer une approche différente et plus axée sur l interactivité qu il peut y avoir dans ces lieux. Notre but est de créer une plate-forme qui puisse permettre cela. Nous ne pouvons pas en définir l ensemble des fonctionnalités car les manières d exploiter ces données en les mettant en forme sont vastes. Le but est de créer un système suffisamment inter-opérable avec d autres pour permettre une évolution et un enrichissement des fonctionnalités au fil du temps. Problématique Notre questionnement est le suivant : comment intégrer le public à un processus créatif dans cet environnement? Nous voulons ajouter une dimension supplémentaire et complémentaire. Une dimension qui allie visuels et touché. Nous sommes convaincus que voir associer l intervention de chacun sur un objet à un visuel le sublimant sous une forme inédite, a quelque chose de magique, poétique. Le moment d attente précédent l arrivée des artistes sur scène nous parait être, dans un premier temps, un moment intéressant pour une première entrée en piste de notre balle. 1) Pourquoi une balle? : La contrainte que nous nous sommes fixés est que le public ait un contact physique avec l objet. Le concert en tant qu environnement est typiquement un lieu qui permet cette interaction, et surtout qui l accepte. Un concert, c est du son, des odeurs, des lumières pourquoi pas un contact, un touché? Pourquoi une balle? Car c est indéniablement plus agréable qu un parpaing. Plaisanterie à part, il est compréhensible que bien que son utilisation soit ciblée sur des concerts et plus particulièrement ceux de musiques électroniques ; un objet imposant comme le notre peut inquiéter. La forme sphérique facilite la circulation au dessus d une foule, et ne pose pas de problèmes en cas de choc, il est difficile de l aggripper et d enfreindre sa circulation. De plus son poids peu aisément se répartir sur plusieurs personnes. Pour rappel une personne de 80kg peut aisément être receptionnée et portée par un public de concerts, tout en se jetant de scène. Ce qui est déjà le cas avec la pratique très courante dite, de stage-diving ou slam. Pour arriver à ce résultat nous avons déterminés deux leviers qui fonctionnent au sein d un même ensemble 2) Que fait-elle? Design-génératifs à partir des données captées par la balle, vidéo-projetés sur écran Qu est ce que le design génératif? C est la capacité à créer des formes graphiques à partir d algorithmes. Le but est que la balle génère un panel de données qui sera exploitable de manière visuelle. Le symbole de cette approche est le logiciel Open-Source nommé Processing destiné aux artistes numériques. C est le logiciel que nous avons privilégié pour interpréter les données issues des mouvements de la balle. Il est un logiciel libre, donc gratuit, doté de nombreux plug-in et bibliothèques, et possède une commu-

6 6 Introduction Concept Site web Site web mobile Application Communication Graphisme Gestion Annexes nauté très importante. Enfin, il est réputé facilement assimilable et manipulable. La contrainte du design-génératif appliqué à notre balle : Les mouvements de la balle sont donc traduits de manière visuelle sur un écran. Cela impose une contrainte à laquelle il faut être particlulièrement attentif. Il faut que le lien entre l action sur la balle et l effet visuel qui en découle soit clairement compris par le public. Il est impératif de préserver ce lien de continuité entre mouvement/interaction avec la balle et design-génératif. C est à dire que les visuels vidéo-projetés soient clairement identifiés comme découlant d un rapport de causalité avec le déplacement physique de la balle. Une surface recouverte de LED animée grâce au design génératif Pourquoi une surface de LED? Le choix de tapisser la surface de la balle de nombreuses LED, répond à l impérativité énoncée ci-dessus, à savoir préserver la compréhension des enjeux de l interaction avec la balle. Loin d être une fonctionnalité gadget, c est un premier indice visuel qui met l utilisateur sur la piste de la nature de l interaction dont les visuels seront visibles à l écran. De plus il nous parait important que la balle soit le plus visible possible, pour que le public ne soit pas pris par surprise lors de son déplacement. Zoom sur la technologie LED Grâce aux avancées récentes de la technologie LED, celle-ci est utilisée de plus en plus, et dans des domaines sans cesse plus variés. A l issue de notre veille, il s est avéré que cette technologie bénéficie d importants apports ces dernières années et que la marge d innovation relative à celle-ci est encore très intéressante. Ces atouts ne sont pas passés inaperçus aux artistes et bricoleurs de tous horizons qui ont multipliés les essais et initiatives ces dernières années. Nous avons trouvé les résultats intéressants, plus ou moins concluant selon les initiatives. Mais le point commun de toutes, est qu elles ouvraient des pistes sur des territoires peu explorés, aux possibilités très étendues. Evidemment la technologie LED n est pas récente, la diode rouge date du début des années 60. Cependant la manière de l utiliser notamment grâce aux technologies du numérique et des espaces de programmation libres et participatifs, a elle beaucoup avancée. En effet il est devenu envisageable d utiliser un nombre élevé de LED tout en les animant de manière complexe. Ce qui achève de nous convaincre de garder cette fonctionnalité est que le système qui permet de générer du design-génératif sur les LED s. Il s agit d un circuit-imprimé/microprocesseur du nom d Arduino. Les plans de celuici sont librement disponibles sur internet et des versions pré-assemblées sont commercialisées. Sa particularité est que son interface de programmation est en fait constitué d un plug-in de Processing nommé Wiring. Les appareils photos Pourquoi des appareils photos? Nous nous sommes intérrogés sur l utilité de garder les appareils photos. En effet leur présence complexifie la réalisation de la balle, mais ne la rend pas irréalisable. Nous tenons à les implémenter tout de même. Nous pensons que ces photos sont utiles car permettent d introduire une chronologie au design-génératif qui est vidéo-projeté. De plus les angles de vues que ces photos proposent sont tout à fait originaux et indédits dans un contexte comme celui-ci. C est un autre point de vue. Comment exploiter ces photos? De manière brute : en les intégrant au design génératif vidéoprojeté. Le déclenchement des photos est possible soit par le bais d un contact avec la balle,

7 7 Introduction Concept Site web Site web mobile Application Communication Graphisme Gestion Annexes soit déclenchable via l application mobile. Ces photos sont intégrées aux visuels vidéo-projetés. A quel moment dans le concert? Tout cela dépend de la volonté de celui qui l utilise. Un artiste n aura pas les mêmes attentes qu un organisateur (professionnel) d une gigantesque soirée mousse en boîte de nuit. Un artiste voudra pleinement l intégrer à son show en choisissant un jeu d effets spécifique et donc interviendra dans le choix du moment. Nous voulons pouvoir répondre pleinement à l attente des deux. La balle peut être lancée aussi bien, avant le début du concert c est à dire lorsque le public attend les artistes. Mais également durant le concert même. Ou encore pendant les changements de plateaux. Partie technique sur la balle Description visuelle de l objet Afin de modéliser la balle en 3 dimensions, nous avons rédigé le pitch ci-dessous. Il décrit le rendu visuel de l objet et aide ainsi à la conception de la maquette 3D. Pitch de l objet Il s agit d une grosse balle à la surface souple qui est prévue pour être lancée dans le public et manipulée par celui-ci. Le déplacement de la balle et les contacts avec celle-ci sont analysés par différents capteurs internes à la balle. Les capteurs de mouvement analysent le comportement de la balle (changement de vitesse, orientation, contact). Ces données numériques sont exploitées pour être mises en forme graphiquement et vidéo-projetées en temps réel dans la salle de concert. Des tableaux numériques sont ainsi créés collectivement et consultables sur un site internet. Des objectifs photographiques (grand-angle) répartis à la surface de la balle, prennent des clichés qui sont ensuite exploités en direct (pour être intégrés dans la vidéo projection). Les clichés seront enfin consultables sous forme de galeries chronologiques, dans le site internet. Aspect La balle fait environ 1,20m de diamètre. Sa surface extérieure est tapissée d un maillage de LED qui forme une sorte d écran sphérique. La densité du maillage est comparable à cela : Figure 1

8 8 Introduction Concept Site web Site web mobile Application Communication Graphisme Gestion Annexes Figure 2 Extérieur - Un fin film extérieur (5mm) transparent de silicone recouvrera le maillage de LED (pour protéger le matériel lors des frappes du public sur la balle). Le maillage est vraiment inspiré de la fig2. - Les LED : Le maillage de LED sera constitué de LED polychromatiques, grâce à elles il est envisageable de diffuser un flux vidéo (le maillage de la fig1 est destiné à la vidéo.) - La batterie est reliée à une prise USB 3 femelle qui est accessible depuis l extérieur, sur le maillage de LED. Prise qui permet bien entendu de la recharger. Afin de repérer la prise, celleci est intégrée au milieu du logo du projet (voir image ci-dessous): - Les objectifs photos sont disposés de manière régulière à la surface de la balle. On privilégiera des objectifs grand-angle. - Un accès devra obligatoirement être réservé pour l accès au noyau de la balle pour d éventuelles opérations de maintenance. Intérieur - La balle possède un cœur en son centre. Ce noyau regroupe les composantes de la balle (batteries, le processeur Arduino, carte wi-fi, mémoire). De ce cœur partent des «bras» (6 ou 7) qui sont reliés à l extérieur et qui maintiennent le cœur technique au centre de la sphère. Ces bras sont des sortes de tubes évasés de 4 à 5 cm de diamètre. C est par eux que passent les fils du maillage de LED. Voici dans l idée à quoi ressemblent ces bras : vimeo.com/ (voir vers 0:23 scd)

9 9 Introduction Concept Site web Site web mobile Application Communication Graphisme Gestion Annexes Modélisation 3D Nous avons effectué une modélisations 3D afin d avoir une idée précise de ce à quoi ressemblait la balle :

10 10 Introduction Concept Site web Site web mobile Application Communication Graphisme Gestion Annexes Exemple de scénario utilisateur Le but est de créer un jeu visuel utilisant les données issues d interactions avec la balle, pour ensuite les mettre en forme visuellement et esthétiquement, les possibilités sont très vastes, elles dépendront des algorithmes implémentés : Nous proposons ici un scénario d utilisation type avec des exemples de jeux d effets : Contexte : Attente avant un concert. Les lumières viennent de s éteindre. Un homme arrive sur scène avec une grosse balle dans les mains... 1) La balle est lancée dans le public par un membre du staff. Les LED sont allumées en bleu, de manière uniforme : 2) Elle arrive sur Nina, surprise, Nina la frappe mollement, ses mains sont en l air. Lorsque la balle entre en contact avec ses mains, une onde lumineuse verte se propage sur la surface de la balle. 3) La balle entame relativement lentement une trajectoire parabolique. 3 )Une prise photo se déclenche et apparait quasi instantanément sur l écran vidéo-projetée. 4) L écran derrière la scène s illumine, une trainée de peinture se dessine timidement dessus. La balle se dirige vers Max. 5) Qui avec la finesse d un rugbyman tape la balle très fort et l envoit à plusieurs mètres de lui. Cette frappe forte déclenche une onde lumineuse. rouge se propageant sur la surface de LED. 5 ) Une photo est déclenchée peu après la frappe. 6) Suite à cette frappe et pendant que la balle est en l air, sur l écran on observe une ample trainée de peinture rouge qui va quasiment d un bout à l autre de l écran. 7) La balle continue de circuler au sein de la salle pendant quelques mintutes. Les artistes ne vont pas tarder. Un membre du staff de l organisation du concert utilise l application mobile dans son interface administrateur pour éteindre la balle. La balle continue de circuler puis est récupérée par un technicien la réclamant sur scène. La circulation de la balle durant ces 5 minutes a généré un tableau où chaque trainée de peinture représente un mouvement de la balle dans la salle, et chaque tâche de peinture figure une donnée comme la puissance de la faire, le temps pendant laquelle la balle est restée en l air la puissance d une frappe. Pour conclure sur cette partie concernant notre concept, nous nous intéressons ci-dessous aux futures enrichissement implémentables sur notre objet. En effet, de par sa conception, la balle Iby est pensée pour pouvoir évoluer et accueillir à la fois de nouveaux matériels, et surtout de nouveaux algorithmes de design génératif. La liste ci-dessous est en petite partie constituée de fonctionnalités que nous avons décidé d écarter, pour éviter d alourdir le projet et d en faciliter sa compréhension

11 Introduction Concept Site web Site web mobile Application Communication Graphisme Gestion Annexes 11

12 12 Introduction Concept Site web Site web mobile Application Communication Graphisme Gestion Annexes Partie technique Partie externe de la balle Il faudrait un boule transparente en PVC qui s ouvre facilement pour la gestion des composants. Son prix avoisine les 100 euros. - Capteur de mouvement Comme capteur de mouvement nous prenons la technologie accéléromètre. Ce capteur est capable de mesurer : L inclinaison L accélération Les vibrations Ce composant est très utile pour mesurer les chocs que subit la balle, les variations de vitesse, la pesanteur... Un capteur de ce type se trouve au prix 50 environ. - Leds Ulitilisation de led du type RVB (dites LED polychromatiques). L avantage est que les led muticolors pourront ainsi réaliser plusieurs formes, cou leurs, dessins différents sur la paroi de la balle. Pour qu elles soient moins encombrante sur la surface, il est préférable d utiliser des LEDs plates. Vu le nombre élevé des LED, nous pouvons compter 300 euros pour ce composant. - capteur photo/vidéos Il existe principalement deux types de capteur photo, soit des capteurs ccd et cmos. Deux technologies adaptées pour notre balle. Le cout est de 100 à 250 suivant la qualitée des prises de photos. - processeur Arduino est un circuit imprimé dont les plans sont publiés en licence libre. il comprend un microcontrôleur qui peut être programmé pour analyser et produire des signaux électriques, de manière à effectuer des tâches diverses. C est une plateforme basée sur une interface entrée/sortie simple et sur un environnement de développement utilisant la technique du Processing. Ce processeur est ce qu il y a de plus adapté au concept Iby. le prix de ce composant est d environ batterie En ce qui concerne l alimentation de la balle, on a opté pour une batterie de 5v rechargeable par port USB pour faciliter son utilisation. Cette batterie sera capable d alimenter le processeur et tous les composants durant la duré de la manifestation. Son prix environne les 10 euros. - composant de communication wifi : La norme g permet d obtenir un débit théorique de 54 Mbps pour des portées équivalentes à 75 m. Il est possible de diminuer le débit pour obtenir une distance plus importante. Pour garder un débit suffisant pour tranférer une photo, on descend le débit à 18Mbit/s (en suposant qu une image peise environ 2Mo) pour avoir une portée de 180m. Il faut compter dans les 20 à 30 pour avoir un composant qui gère le wifi. Au final, en terme de matériel, la ball s élèverait donc à environ 1000 euros. A cela, nous ajouterons la main d oeuvre.

13 13 Introduction Concept Site web Site web mobile Application Communication Graphisme Gestion Annexes Evolution de la balle Futures évolutions de la balle déployable à court terme - Entre chaque photo, les transitions sur l écran géant, sont réalisées grâce aux messages textes que les personnes envoient avec leur smartphone. - Les dessins envoyés par l application mobile seront disponibles sur le site dans une galerie adaptée. Il y aura la possibilité de voter et classer des meilleurs dessins envoyés. - Aux moment de prendre la photo, avec la balle, celle ci sera associé a une photo panoramique. Cette évolution ne nécéssite aucun ajout de capteur, car nous pouvons utiliser les quatres appareils photo les plus à l horizontal. - La balle peut aussi très facilement, suivant la puissance de la frappe, appliquer un filtre différent à chaque photo. C est une évolution qui nécéssite un simple traitement de données. - Par le biais de l application smartphone il y aurait la possibilité de se prendre en photo. cette photo sera envoyée à la balle et diffusé sur sa paroi. c est juste une fonctionnalité en plus sur l application. - La balle pourra diffuser des logos publicitaires. - Il y aura possibilité de mettre deux balles dans la foule. Ce qui donnera la possibilité de créer de nouvelle intéraction avec l écartement des deux balles donc de nouveau effet visuel. Futur évolution de la balle déployable à long terme - La balle pourra intéragir avec les sons ambient. Cette évolution demande de rajouter un nouveau capteur sur la carte électronique interne à la balle. - Elle pourra prendre des vidéos en fonction de la hauteur à laquelle elle est lancée. Des vidéos de courte durée pour pouvoir être transmise rapidement. Pour cette nouvelle fonction, repenser le système de transfère de donné pour envoyer des données. - Un champ magnétique pourra etre créer autour du ballon, ce qui permettra une interaction entre les mouvements de foules et celui-ci. Cela demande d ajouter un nouveau composant dans la balle.

14 14 Introduction Concept Site web Site web mobile Application Communication Graphisme Gestion Annexes Site internet... Introduction Aujourd hui, Internet connaît une expansion de plus en plus marquée En effet, c est une plate-forme populaire accessible au plus grand nombre d internautes. Par conséquent, la balle IBY se devait d être visible sur la toile. Le projet de la balle interactive sera donc appuyée sur deux supports multimédia, un site internet et une application mobile. Ces supports permettront d avoir un descriptif du concept IBY. Ils permettront aussi de consulter les données des concerts/soirées, de connaître les dates et lieux des prochains évènements. Le site mettra à disponibilité les différentes photos prisent durant un évènement.

15 15 Introduction Concept Site web Site web mobile Application Communication Graphisme Gestion Annexes Structure du site - Architecture du site internet - Architecture de la version mobile du site internet

16 16 Introduction Concept Site web Site web mobile Application Communication Graphisme Gestion Annexes - Architecture de l application Technologie et langages utilisés Langages utilisés La programmation web peut prendre différentes formes: d une simple page statique à une page dynamique avec connexion à une base de données. Dans notre cas, c est une page statique : une page représentatif du projet. Le site sera donc réalisé à la manière d un site vitrine. Lorque la balle sera commercialisée, le site internet sera connecté à une base de données afin d afficher les différentes données (photos...) des concerts. En attendant, le site utilisera les mêmes langages que pour tout site web : - Toute page web comprend une base de langage HTML - Toute page web s accompagne du CSS (Cascading Style Sheets - Feuilles de style en cascade), un langage qui se charge de la mise en forme de la page. Aussi, le site internet utilisera du Javascript pour les différentes animation. En effet, il est reconnu par tous les navigateurs actuel. Pour le menu ou les boutons qui se situeront à gauche de l écran, le Javascript est nécessaire pour avoir un effet de mouvement au passage de la souris. Le langage PHP (PHP : Hypertext Preprocessor) est un langage de script interprété avec le serveur web. Il ne sera utilisé que pour une seule fonctionnalité, l envoi de mail. Généralement, le rechargement de la page est nécessaire à l envoi d un mail. Ici, le site utilisera une méthode

17 17 Introduction Concept Site web Site web mobile Application Communication Graphisme Gestion Annexes complémentaire au PHP pour ne pas avoir à recharger la page. On utilisera la technologie Ajax (Asynchronous JavaScript And XML) permettant de rafraichir qu une partie de la page. On utilisera aussi les fichiers.htaccess. Ce sont des fichiers de configuration des serveurs web Apache. Ici il sera configuré pour gérer les erreurs de page 404. Logiciels et outils utilisés Filezilla C est un client FTP développé sous la licence publique générale GNU. Il permet de transférer les fichiers sur les serveurs et d ouvrir directement les fichiers sur le serveur pour les éditer avec un éditeur de textes. Komodo edit Il s agit d un environnement de développement multi-plateformes relativement complet basé sur la plateforme Mozilla. Il propose une coloration du code très agréable, des suggestions automatique pour faciliter la programmation. EasyPHP Il s agit d une plateforme de développement web, permettant de faire fonctionner localement des scripts PHP sans se connecter à un serveur externe. C est un des logiciels indispensable pour un développeur afin de faire des tests en local sans modifier le vrai site qui est en ligne. Photoshop Logiciel de traitement d image. Il a été beaucoup utilisé pour des créations mais aussi pour faire des modifications d images. Internet La plus grande ressource d information au monde. C est presque l outil le plus important. Il permet d apprendre par le biais des tutoriels mais aussi de corriger nos erreurs en allant sur des forums. Navigateur web Un développeur de sites web se doit de posséder sur son ordinateur différents navigateurs web pour pouvoir s adapter suivant les différents comportement de certains navigateurs. Google Web Fonts Afin de personnaliser au maximum le site, on utilisera une police de caractère différente de celle proposée pour faire un site. C est pourquoi, on utilise google web fonts qui propose des polices web rapide et facile à utiliser pour tout le monde, y compris les concepteurs et développeurs professionnels. Il suffit simplement de mettre une ligne de code : <link href=» css?family=dosis:400,700» rel=»stylesheet» type=»text/css»> W3C Le Service Markup Validation est un validateur par le World Wide Web Consortium (W3C) qui permet aux internautes de contrôler les documents HTML et XHTML pour bien former le balisage. La validation du balisage constitue une étape importante en vue d assurer la qualité technique des pages web Jquery

18 18 Introduction Concept Site web Site web mobile Application Communication Graphisme Gestion Annexes Pour tout ce qui est code Javascipt on utilise Jquery, une bibliothèque JavaScript libre. Elle porte sur l interaction entre JavaScript (comprenant Ajax) et HTML, et à pour but de simplifier des commandes communes de JavaScript. Parallax Il s agit d un terme générique correspondant au déplacement de plusieurs éléments sur des couches et à des vitesses différentes. Au scroll (défilement grâce à la roulette de la souris) ou en fonction des coordonnées de la souris, les positions des différents fonds (ou éléments à animer) vont changer, ce qui va générer un effet de profondeur. Avec une même distance de scroll, l élément a aura parcouru une distance plus faible que l élément b. C est cette différence de vitesse qui crée l effet parallaxe. effet paralaxe

19 19 Introduction Concept Site web Site web mobile Application Communication Graphisme Gestion Annexes Optimisations Si l on veut bien respecter les normes de langage, l optimisation d un site doit d abord passer par le validateur du W3C. L optimisation n est pas seulement l interprétation du code par les navigateurs mais aussi la possibilité de faire un code lisible par un autre développeur. D où l importance de commenter le code. Il faut aussi une bonne organisation dans les dossiers et fichiers. Il est important de penser aux erreurs de navigations des internautes. Lorsqu un visiteur arrivera sur le site avec une URL inconnue, il sera automatiquement redirigé vers une page 404. C est grâce au fichier.htacess que tout se fera. Ainsi que de la gestion d autres erreurs. Pour l amélioration du chargement de la page, nous aurons régulièrement fait des tests sur le site gtmetrix.com pour savoir si oui ou non le chargement de notre page était trop long. Afin que le site soit chargé le rapidement possible, nous avons faites en sorte que les images soit optimisées au maximum. Partie administrateur Le site actuel du projet ne comportera pas de partie administrateur. C est pour le moment un site vitrine. Il permet de présenter le projet. Si la balle Iby venait à être mise en production, il serait obligatoire d avoir un backoffice. Cette partie servirait à faire des mises à jour rapide et simple des différents contenus : mettre à jour les dates par exemple ou pour gérer simplement la galerie photo. Afin d avoir une meilleure gestion des différents éléments du site, il serait sûrement préférable de choisir une solution du type CMS (Système de gestion de contenu). On partirait sur la plateforme joomla, pour pouvoir bénéficier d une plus grande plage de mouvement en terme de développement. Même si le site présente seulement la balle IBY, on remarquera la présence d un blog. Cette partie du site sera réalisé avec un CMS. Nous choisirons Wordpress qui est le plus approprié pour un blog. De plus, le back office est très intuitif. Un compte administrateur sera créé pour les deux développeurs, ainsi qu un compte pour la partie communication pour l édition d articles. Partie visiteur Accueil - Page Mode le Quand on arrive sur le site, une lightbox s ouvre pour afficher la vidéo de présentation de la balle. Au moment de quitter la page on remarque un très fort effet de parallax. c est dû à la superposition de plusieurs images. Page concept Un slider est présent sur la totalité de la page, il explique les différentes fonctionnalités de la balle.

20 20 Introduction Concept Site web Site web mobile Application Communication Graphisme Gestion Annexes Page Galerie La galerie utilise une grande image, plus grande que la hauteur de la plus part des écrans. C est pourquoi, pour éviter que toutes les bulles partent dans toutes les directions (à cause de l effet parallax quand on descend pour voir la suite de limage), on bloque l effet parallax le temps que l internaute regarde la totalité de l image. A chaque date il y a un lien qui ouvre une lightbox vers la galerie photo. Page Prochains concerts Il y a également un défilement horizontal en fonction du mouvement de la souris, ce mouvement est géré en Javascript. Au passage du pointeur de la souris sur les noms d artistes, une info bulle apparait pour laisser place à un descriptif de l évènement à cette date. Page contact La présence d un Qrcode permet d accéder directement au site par le biais d un mobile. Pour contrer les sniffers de site qui aspire les adresses mail écritent en dur dans le code, on utilise un formulaire de contact. Ceci permet à l adresse mail de rester sur le serveur du site et n est pas visible pour la partie client. Pour être vraiment sûr qu il s agisse bien d un humain qui remplit ce formulaire on rajoute un captcha (c est un test de défi-réponse). L utilisation de la technologie Ajax permet de ne pas avoir à recharger la page pour l envoi du mail, qui lui se fait en PHP. Le blog Le blog sera fait sous Wordpress. C est un CMS particulièrement optimisé pour les blogs. L interface du blog sera modifiée, elle sera simplifiée pour arriver directement à l information. Le pôle communication du groupe Iby se chargera de mettre à jour le blog. Les menu Deux menus seront présents. Le menu du haut permet une navigation classique sur le site ainsi que le choix de la langue du site (Anglais ou Français). Quand au second menu, il se situera au milieu à gauche de l écran, il sera constitué d une icône reflétant les principaux réseaux sociaux (Facebook, Twitter et Google +) et deux vidéos présentant le projet. Transition Les transitions seront mises en place pour les personnes n utilisant pas les boutons de navigation, seulement pour ceux qui utilisent la roulette de la souris. Ces transitions servent à différencier une page à l autre. Elles seront représentées par des barres obliques et un rond au milieux. Dans ce rond il y a une phrase permettant de prévenir l internaute de la prochaine page. Résultats d analyse Web Aujourd hui Internet prend une grande place dans nos démarches quotidiennes. Il y a de nombreux internautes surfant sur le net faisant circuler de plus en plus de données. Afin de pouvoir voir les impacts de notre site web sur la toile, nous avons créé un compte Google Analytics. Ce compte nous permet d analyser le

21 21 Introduction Concept Site web Site web mobile Application Communication Graphisme Gestion Annexes trafic de notre site Pour le premier site (fait sous Wordpress), servant à recueillir les avis des internautes par rapport à notre projet. Nous avons aussi mis en place un compte google analytics pour le nouveau site, les résultat sont plutôt satisfaisants Référencement Les moteurs de recherche vont de plus en plus se munir d outils de lecture de langage naturel des pages web. Ceci va accroître le rôle des balises, qui facilitent la compréhension du langage naturel par les moteurs. Parmi ces balises on trouve : - le header h1, h2, h3...h6 matérialisé par <h1></h1>. Les trois premiers h1 h2 et h3 sont très importants aux yeux des moteurs. Ils permettent à ces derniers de constituer la table des matières d une page et d un site web. - la balise Alt décrit le contenu des images. C est le texte que l internaute peut visualiser en

22 22 Introduction Concept Site web Site web mobile Application Communication Graphisme Gestion Annexes mettant le pointeur de la souris sur une image dans une page web. Le référencement se fait aussi grâce au fichier sitemap. Un site map est littéralement en anglais le «plan d un site web». Google a proposé un protocole nommé Sitemaps dès Ce protocole établit des règles pour représenter le plan des sites en texte ou XML à destination exclusive des moteurs de recherche. La balise meta est une information sur la nature et le contenu d une page web, ajoutée dans l entête de la page au moyen de marqueurs HTML. L une des premières utilisations a été de servir de clé d accès supplémentaire pour les moteurs de recherche. Les mots-clés ont alors permis aux robots des moteurs de recherche d indexer les pages web dans les bases de données suivant différentes entrées. Etre présent sur les réseaux sociaux est important pour le référencement. Tout ce qui est posté ou tweeté, que ce soit des images, des vidéos, des liens ou des posts affectent l optimisation du classement au sein des moteur de recherche (SEO). Le blog permettra de faire des mises à jour de l information présente sur le site. Si un site se met régulièrement à jour, il est plus souvent visité par les robots des moteurs de recherche. Le fichier robots.txt est un fichier texte contenant des commandes à destination des robots d indexation des moteurs de recherche afin de leur préciser les pages qui peuvent ou ne peuvent pas être indexées. Ainsi tout les moteurs de recherches commencent l exploration d un site web en cherchant le fichier robots.txt à la racine du site. Compatibilité navigateur Le site de la balle IBY sera conçu pour fonctionner avec l essentiel des navigateurs. Nous avons fait nos tests sur les navigateurs les plus utiliséss Mozilla Firefox, Google Chrome, Safari et Internet Explorer. Les visites du site nous conforte dans notre choix de développer avec ces navigateurs.

23 23 Introduction Concept Site web Site web mobile Application Communication Graphisme Gestion Annexes Version mobile du site internet... Pourquoi une version mobile? La possibilité de consulter le site internet sur mobile aux formats smartphone et tablette est indispensable afin que la balle Iby bénéficie d un site informatif sur son concept sur tout les supports possibles. Une version mobile sera donc nécessaire dans la mesure où les informations sur le produit et sur son concept doivent être consultables dans n importe quelle situation et sur n importe quel support. De plus, cela donne l occasion au public d avoir à disposition un support informationnel lorsqu une personne s interroge sur le concept en voyant une affiche publicitaire par exemple. Cette version mobile reprend ainsi globalement la même architecture que le site internet à savoir dans un premier temps une page consacrée à l explication et l illustration du concept; l internaute est alors rapidement en mesure de se rendre compte des capacités et des fonctionnalités de l Iby ball ainsi que de sa manière d utilisation et de l univers dans lequel elle évolue. Par ailleurs, et encore une fois dans la même idée que le site internet, cette version proposera un calendrier des prochains rendez-vous entre la balle et le public, ainsi qu une galerie photo proposant de visionner les photos des différentes soirées ou événements auxquels la balle participera et interagira avec le public. Enfin, une page dédiée aux contacts sera disponible proposant les coordonnées de l entreprise et la possibilité d envoyer un message à l administration via un formulaire. L adaptation La structure ainsi que la navigation devra être extrêmement simple et intuitive. Nous avions tout d abord pensé à utiliser la technique responsive design qui permet d adapter un site déjà existant, grâce à des modifications CSS, à n importe quelle résolution. Cette méthode semble performante dans un premier temps et nous aurait permis de faire qu un seul site pour deux versions différentes et pour trois formats d écrans différents : pc, smartphone et tablette. En considérant toutefois le type de techniques utilisées pour le site web comme notamment l effet parallaxe et le défilement de page par ancre, cela rendrait très difficile la consultation sur smartphone du même affichage que le site car ce sera compliqué de gérer la taille des images pour l effet de parallax selon différentes résolutions. Un second site sera donc créé avec un design proche du site web mais nettement plus simplifié pour faciliter la navigation sur smartphone et tablette. Cette version, plus conventionnelle,

24 24 Introduction Concept Site web Site web mobile Application Communication Graphisme Gestion Annexes disposera d une navigation par liste de liens qui permetteront d aller d une page à l autre. Pour chaque sous-page, un bouton retour sera disponible pour retourner à la page parente. L arborescence n étant composée que de seulement trois niveaux au maximum, il suffira à l utilisateur de 3 clics au plus pour revenir à la page d accueil. L ensemble du site web mobile sera adapté à l affichage des petites résolutions. Et finalement, nous utiliserons le responsive design pour adapter l affichage et surtout la taille des illustrations et autres images sur format tablette. On trouvera donc grossièrement deux CSS différents; un pour le format smarphone et un pour le format ipad. Outils utilisés Pour le développement du site internet, les technologies d usage standard du web seront utilisées; HTML pour la structure du contenu, le CSS pour l intégration, le Javascript pour la galerie photo ainsi que pour la gestion des messages d erreurs de la rubrique contacts et du PHP pour effectuer les envois de mail. L élément le plus important sera l utilisation de la bibliothèque opensource jquery-mobile car elle permet d adapter facilement une page au format mobile, ou plutôt à tout type de format. Le zoning s adapte donc automatiquement selon le type d écran utilisé. La bibliothèque permet ainsi d obtenir rapidement une apparence et un design type smartphone avec un style adapté. De plus étant très utilisé, jquery bénéficie d une communauté et d un support web très riche où l on peut trouver bons nombres d exemples et d explications. jquery permet également d avoir des interactions entre le code Javascript et HTML permettant ainsi d avoir des effets de transitions d une page à l autre en rappelant par exemple ce que l on peut rencontrer sur les applications mobiles. La galerie photo provient elle aussi d un code opensource appelé Photoswipe qui propose une galerie type smartphone, et sait s adapter encore une fois à toutes les résolutions puisqu elle s appuie sur la bibliothèque jquery. La mise en place d une galerie Photoswipe, son fonctionnement ainsi que ces possibles configurations sont expliqués sur le site officiel. Comptabilité Il sera par ailleurs nécessaire que le site soit compatible sur toutes les plateformes; ios, Android, Blackberry. Le jquery permet en effet cet adaptabilité, nous retrouvons donc un site compatible sur tous ces supports : Format iphone

25 25 Introduction Concept Site web Site web mobile Application Communication Graphisme Gestion Annexes Application mobile... Concept et fonctionnalités L application mobile est avec la balle elle même l outil au coeur de l intéractivité entre la balle et le public. Bien que l Iby ball en elle même propose une certaine intéractivité grâce à la prise de photo au tapé et au tracé graphique de son déplacement au dessus de la foule sur l écran géant, il nous semblait essentiel de proposer au public une intéractivité plus développée et plus personnifiée avec la balle grâce à une application mobile. de choisir l emplacement où il veut faire apparaître son dessin. La localisation du dessin est gérée par des points de repères entre la balle réelle et sa représentation sur l application. Le dessin est reproduit sur la balle grâce aux LEDs. L application propose une palette de couleur afin de choisir la couleur globale de la balle. Cette action reste effective pour une durée limitée à 10 secondes. L application propose de prendre une photo en direct. Cette photo est stockée sur le serveur et est éventuellement projetée sur l écran géant. Des photos sont également affichées sur l écran géant de manière aléatoire. La fréquence d affichage des photos sera fonction du nombre de tapé de la balle en une durée définie de manière à évaluer le fréquence de frappe et donc le nombre de personne (*). Schéma d utilisation d application de l application L utilisateur utilise l application selon les fonctionnalités suivantes : écrire un message, dessiner une forme, changer la couleur de la balle et prendre une photo. L application permet alors d interagir de différentes manie res avec la balle Interactions avec la balle L application propose à l utilisateur une interface où une visualisation de la balle en 3D qui lui permet de dessiner une forme graphique à l endroit de la balle qu il souhaite. Cette représentation 3D de la balle donne la possibilité à l utilisateur Interactions avec l écran géant L application propose d écrire un message textuel qui sera reproduit sur l écran géant. L emplacement du message est disposé aléatoirement sur la création graphique produite sur l écran. Rappels : la trajectoire de la balle est reproduite sous forme de tracé graphique sur l écran géant. Les données nécessaires à l exécution des fonctionnalités sont envoyées par wifi au serveur qui stocke l intégralité de ces données et les photos prises pendant l événement. Celles-ci sont directement renvoyées à la balle sans traitement, ce sont les capteurs de la balle qui les renvoient directement vers la balle.

26 26 Introduction Concept Site web Site web mobile Application Communication Graphisme Gestion Annexes Le processeur inclus dans le coeur de la balle va alors traiter ces informations pour déterminer si l interaction concerne une animation lumineuse (LED) ou ordonne de prendre une photo; deux possibilités s offre alors : - L appareil photo s enclenche - L effet lumineux est affiché grâce au LED - Les données de l interaction choisie sont stocker sur une mémoire SD. vsi l interaction concerne la prise de photo, celle-ci est envoyé sur l écran de la scène dans la mesure où les conditions exprimées plus haut (*) sont respectées. Schéma d utilisation de la balle : Les capteurs de mouvement inclus dans la balle calcule en continu les déplacements de la balle et leurs informations sont traitées par le processeur. Les coordonnées de la balle dans la salle éditées par ces capteurs sont interprétées grâce aux programmes Processing qui vont permettre de réaliser une création graphique de type Jackson Pollock. Si l utilisateur frappe dans la balle, le programme analyse les changements de direction pour la création graphique et permet d afficher un effet lumineux sur la balle. L ordre de prendre une photo est par ailleurs demandé, la photo prise est stockée sur base de données et envoyée sur l écran de la scène dans la mesure où les conditions exprimées plus haut (*) sont respectées. Cette application sera dédiée à une distribution public pour que les spectateurs puissent interagir avec la balle. Il sera cependant également prévu une application administrateur afin que la balle dispose d une interface de commande plus évoluée de façon à déconnecter la balle à distance par exemple ou encore d effectuer une mise à jour des données enregistrées pendant l événement. Le technicien sur place disposera donc de fonctionnalités administrateur permettant une gestion à distance. Outils utilisés Dans le même principe que la version mobile du site internet, nous utiliserons logiquement la librairie jquery pour adapter l application aux formats smartphone et tablette. L application ne sera réalisé qu au point de vue de la navigation. Les langages de programmation pour le développement des fonctionnalités demandent des connaissances et de l expérience que nous n avons pas. De plus, le langage Processing nécessaires pour programmer les interactions graphiques avec la balle sur l écran géant demande de bonnes connaissances en Java. Nous avons par ailleurs décidé de faire différentes visualisations des fonctionnalités de manière à ce rendre compte de leur aspect graphique sur les formats smartphone et tablette. Afin d exporter le code en format application, nous aurons par ailleurs besoin de créer un compte Apple Developper de manière à obtenir une vraie application.

27 27 Introduction Concept Site web Site web mobile Application Communication Graphisme Gestion Annexes Communication... Introduction Cible La communication sera pensée pour toucher les deux cibles définies (organisateurs d événements et public 15-35). De par la nature même de la balle et de ses fonctionnalités, elle sera fortement rattachée au mouvement numérique naissant qui consistera à explorer les différentes possibilités d interactivités pendant des manifestations culturelles. Cette tendance sera portée et explorée en grande partie par les musiques électroniques contemporaines. note par note une mélodie à chaque fois que les mains du public la touchait. Shaka ponk quant à eux utilisent des photos prise lors de concert pour la création de leur propre résaux sociaux. Notre balle sera un moyen de mettre en commun un véritable melting pote culturel et faire que chaque personne présente dans un concert soit intégrée non pas comme un simple spectacteur mais comme un véritable acteur. Cible Principale Notre cible principale concernera les organisateurs de soirées, les propriétaires de salles de spectacles, les artistes, les collectivités, les festivals. C est en suscitant l intérêt du public dans les concerts qu on intéressera les organisateurs. Les organisateurs de spectacle pourront contacter l équipe par le site internet, un marketing direct sera mis en place afin de se faire connaître auprès d eux. La balle sera inspirée en partie d expériences effectuées par des artistes comme Ez3kiel ou encore Shaka Ponk qui ont des démarches très axées sur l interactivité et sur la communication avec le public et les réseaux sociaux. Ez3kiel a par exemple créé une balle interactive jouant Nous déciderons de pousser notre simulation de la communication comme si la balle sera commercialiser à la fin du projet. Le but sera avant tout de fournir une communication clé-en-main à d éventuel investisseurs. Cible secondaire Notre cible secondaire concerne les participant aux soirées (public de ans). Elle concernera les personnes participantent à des concerts de musiques actuelles mais également de diverses manifestations (festival, meeting...).

28 28 Introduction Concept Site web Site web mobile Application Communication Graphisme Gestion Annexes Analyse SWOT Nous avons voulu analyser les points forts et les points faibles de notre entreprise afin d avoir une meilleure idée de la situation de notre projet sur le marché. Cette analyse nous a conforté dans l idée que notre projet sera viable dans le monde d aujourd hui malgrè quelques points négatifs. Économique Force L entreprise est composée de 10 personnes, chacune spécialisée dans des domaines complémentaires permettant à l entreprise d évoluer correctement. Moyen de communication interne efficace avec des rendez vous entre pôle et des rendez-vous avec tous les membres du groupe. Opportunitées Moyen de communication interne efficace avec des rendez vous entre pôle et des rendez-vous avec tous les membres du groupe. Faiblesse Entreprise naissante : Peu de fond Elle doit se créer une notoriété Menaces Ne pas trouver d investisseurs. Social Technologique Esprit social dans l air du temps: - Rassemble les gens par l intéractivité de la balle, tout le monde participe. - Les personnes aiment avoir des photos d eux des soirées passées Adaptation de la balle limitée au niveau technologique en fonction des besoins du spectacle Lassitude du produit par le manque d innovation (peut être compenser par la recherche et la personnalisation de la balle) Acceptation dans le milieu du spectacle de Iby ball Coût élevé de l innovation (Recherche et de la production) Environnemental Utilisation de matériaux recyclé pour la fabrication de la balle. Utilisation de matériaux écologique (batterie bio...) Basse consommation d énergie Malgré les effort, certains composants seront toujours polluant (micro processeur...) Acceptation dans le milieu du spectacle de Iby ball Légal Esprit social dans l air du temps: Mise en place d un brevet pour se préserver de la concurrence le temps de la mise en place sur le marché- Les personnes aiment avoir des photos d eux des soirées passées Droit à l image :mise un place d un document à faire signer à l achat du billet de concert. Acceptation dans le milieu du spectacle de Iby ball

29 29 Introduction Concept Site web Site web mobile Application Communication Graphisme Gestion Annexes Campagnes de communication Toutes les campagnes envisagées L image que nous voulons donner à notre balle est une image jeune et dynamique, comme le public auquel elle sera destinée. Nos campagnes seront donc élaborées dans un même esprit. Nous souhaitons mettre en place une campagne de communication en deux temps. Premièrement une campagne sur internet en essayant de créer un buzz avec ce nouveau concept et commencer à se faire connaître du grand public. Elle se fera par notre site internet, qui expliquera le plus clairement possible les fonctionnalités de la balle grace à une page concept et une vidéo de présentation du type motion design. Puis par les blogueurs et autres sites influant sur le web, nous espérons qu ils relayeront l information en leur envoyant des mails explicatifs de notre projet avec notre site internet en lien. Il y aura également une présence sur des réseaux sociaux Facebook et Twitter et également notre blog qui relayeront les dernières actualités concernant les concerts et autres manifestations ainsi que les dernières technologies concernant de près ou de loin notre projet et permettra de générer du traffic et être vu par le plus grand nombre de personne. Dans un second temps, nous envisagerons d avoir recours à d autres moyens de communication tel que la radio avec des annonces sur des radios jeunes, l affichage par des affiches 4mx3m disposées dans des grandes villes ou encore évenementiel avec une soirée exceptionnelle sur Paris avec un artiste international pour créer un buzz, mais également une soirée lancement de produit destinés à toucher notre cible primaire qui sont les organisateurs de soirée. Pour toucher cette même cible, nous voudrions avoir recours au marketing direct avec une campagne de phoning pour avoir un contact direct avec nos prospects. Pour rester dans le thème de notre projet, nous envisagerons également une publicité intéractive dans les abris bus qui consistera grace à une vidéo de teaser présentant Iby ball dans un concert lorsque quelqu un brancherait ces écouteurs à l endroit prévu à cet effet. Pour finir, nous voudrions effectuer des partenariats auprès d entreprises qui apporterait plus de crédibilités et de notoriété à notre projet telles que des boissons énergisantes (ex : Red Bull, monster,dark dog qui sont des marques présentes lors d évenement du type sport extreme ou festival de musique), la fédération française de France de Volley Ball, le groupe de rock shaka ponk qui utilise leurs site internet comme un véritable réseau social... Vous retrouverez le detail de toutes ces campagnes de communication en annexe x page xx Les campagnes retenues Parmi les campagnes de communication, nous retiendrons celles qui nous paraissent les plus pertinentes par leur capacité à toucher notre public cible et le coût qu elles engendrent. Notre communication tournera essentielement autour de deux axes de communication. Nous

30 30 Introduction Concept Site web Site web mobile Application Communication Graphisme Gestion Annexes retrouverons donc internet, et une communication classique (street-marketing / partenariats, guerilla marketing etc... pensée pour être clé en main. Elle sera également pensé autour d un point d interrogation, qui appelle aux questionnements, à l étonnement et à la curiosité et incitera les gens à se renseigner sur le projet (mise en place d une campagne de teasing). Ce point d interrogation sera présent sur la plupart de nos supports de communication pendant tout le temps où le projet ne sera pas encore lancé. Une fois celui-ci commercialisé, il sera accès sur une phrase je l ai touché, et vous?. Internet : réseaux sociaux, blog et site Internet sera la façon la plus simple, la moins coûteuse et la plus efficace dans un premier temps pour nous faire connaitre du public et espérer mettre en place un buzz virtuel.cette communication sera donc primordiale pour le début de la communication de l Entreprise Nous pensons que les réseaux sociaux sont aujourd hui un moyen de communication indispensable surtout lorsque l on souhaite toucher un public jeune qui concerne notre cible. En effet, Facebook et Twitter sont des sites permettant une communication de masse pour un coût peu élevé (création profils, placement publicitaire), en créant des groupes sur ces réseaux nous pourrons assurer une communication dynamique et faire partager des informations à tous les membres inscrits sur nos pages. La communication est d autant plus forte qu elle peut être véhiculée par des personnes qui partageront nos articles sur leur réseau d amis, ce qui aura un impact beaucoup plus fort que si l annonce est véhiculée par l entreprise elle-même et permet une meilleure visibilité. En ce qui concerne notre site internet, il permettra de faire comprendre notre concept ce qui sera ici important pour espérer diffuser l information. Une information claire sera plus facilement comprise par le public et sera donc mieux diffusée. Le site sera traduit en anglais pour une question de visibilité et de diffusion d un point de vue national. Quant à notre blog, il donnera les dernières actualités pouvant intéresser certains internautes. Ceux-ci pourront ainsi partager nos articles sur leurs réseaux sociaux ou autres et aura pour conséquence un accroîssement de la visibilité de notre site et un meilleur référencement sur le web. La vidéo Notre projet étant assez complexe, il est indispensable qu il soit expliqué le plus clairement possible. C est pourquoi nous voulons créer une vidéo avec un graphique simple et une voie off qui permettra de comprendre les fonctionnalités de la balle et comment elle sera utilisée lors des manifestations. Le motion design sera diffusé sur le site internet, et plus largement sur le web. Abri Bus La publicité dans les abris bus permettrait d avoir un fort impact sur la cible, tout d abord, par son originalité mais ensuite par sa proximité avec le public. En effet celui ci permettra de regarder les bandes annonces (trailer) ainsi que l actualité événementielle autour de celui ci.

31 31 Introduction Concept Site web Site web mobile Application Communication Graphisme Gestion Annexes A l avenir il pourrait permettre des partenariats (et donc une réduction des coût de communication ) avec d autres entreprises au travers de publicités, de sponsor. Radio Le spot radio sera un spot court et promotionelle diffusé sur des radios jeune et dynamique, (ex: Virgin radio, NRJ, Fun radio, vitamine) présentant le produit, mais surtout les évènements où on pourra retrouver notre balle intéractive les spots radios nous permettrons de toucher des jeunes à un coût abordable pour une jeune entreprise. Celui ci fera 30 secondes, mettra en scène des personnages qui feront la promotion du produit avec un aspect fun et dans l air du temps Soirée événementiel - lancement de produit : Cet événement sera préservé car il est le seul touchant réellement la cible primaire. Il est donc très important et nous envisageons plusieurs commandes dès la fin de la soirée.pour assurer un évenement Marketing direct Le phoning nous permettra d avoir un contact direct avec notre cible primaire et sera très important pour déclencher l achat et ainsi avoir un certain suivi de notre clientèle. Le marketing direct sera le seul moyen de communication qui nous amènera à faire agir nos clients contrairement aux autres qui sont plus pensées pour faire connaître et faire aimer. Affichage Cette campagne permettra de nous faire aimer du public. Nous la conservons car l affichage est un élément basic d une campagne de communication et permet une grande visibilité.(certe mais encore ) Les campagnes non retenue Evénement sur Paris L idée etait bonne, mais a un principal défaut : toucher qu une seule ville mais le buzz aurait étendu sa visibilité de manière significative. Cependant, le coût d un tel événement (équipe organisationnelle, concert, sécurité, cadeaux ) est trop élevé pour un lancement de produit tel que le notre dans une entreprise naissante. Même avec l association de partenaire, les revenues envisagées ne couvriront pas les dépenses et l apport financier est trop grand pour le lancement du produit. Avec cette campagne, nous serons capable de toucher nos deux cibles, le grand public et les organisateurs de soirée, de manière étendu par des moyens classiques ou des moyens plus originals comme l est notre projet. La prévision du budget et moyen d évaluation de la communication. Campagne publicitaire ( a finaliser un peu plus) c good mais voir se qui à compléter. Les affiches ( classique des panneaux sucettes) Impression de 5000 affiches implantation dans la ville de Paris=5000 faces 350K soit 70 euros/affiches. La technologie de ce type d affiche coûtant très cher nous avons décider d en implanter un très petit nombre dans les grandes villes.

32 32 Introduction Concept Site web Site web mobile Application Communication Graphisme Gestion Annexes on compte 3000 en matériaux/abribus, néanmoins, ce type de technologie n étant pas encore réellement commercialisé, il fut très difficile de déterminer le prix de la location d espace (JCDecaux). pose : 2 h de travail avec 2 personnes/affiche:7,50 de l heure soit 30 euros création vidéo ( storyboard, réalisation etc) 10 jours Stickers ( campagne de guerilla marketing) Création de la maquette, impression de 250 stickers, découpe =200 euros Graphisme print - Affiche 600 à 2000 HT - Annonce presse HT - Campagne de publicité à HT - Carton d invitation soirée évenementiel = 305 HT x Visuel pour agence de pub. (invitation, affiche) HT Photographie - Création originale pour un poster ou autre à HT + droits Illustration / animation - Animation flash complexe à HT - 1 image pour campagne institutionnelle (1 an) HT Honoraire ht/jour (free-lance) - Graphiste indépendant 200 à 600 >>100 à 600 /j - DA indépendant 800 >>400 à 1500 /j - Web designer indépendant 300 à 800 >> N.C. - Illustrateur 150 à >>200 à 1000 /j - Maquettiste presse indépendant 30 à 60 HT/ h - Intégrateur HTML 150 à 250 >> 100 à 250 /j - Intégrateur Flash, animateur Flash 200 à 350 >>150 à 400 /j - Développeur (Flash, PHP, ASP) 300 à 500 >>200 à 1000 /j - Chef de projet web 400 à 700 /j Quel mode le économique pour la balle Iby? Quelques pistes : Court terme : La balle Iby sera disponible à la location sous un système de forfait qui comportera : La mise à disposition de la balle et de l application mobile Le technicien. L hébergement des photos. Moyen terme / long terme : - Le développement de nouveaux designs génératifs vendables sous forme de contenus additionnels ; comparables aux DLC des jeux-vidéos. - Commercialisation de la balle à la vente.

33 Introduction Concept Site web Site web mobile Application Communication Graphisme Gestion Annexes Charte graphique... Identité visuelle La phase de recherche (nos travaux) Au départ, nous n étions pas sûre de la méthode de travail concernant la charte graphique. Nous avons commencé par une recherche de palette de couleur pour savoir l ambiance dans laquelle notre projet allait évoluer. Couleur Notre recherche s est principalement centrée sur la volonté de transmettre une symbolique des choix des couleurs. Nous voulions, à travers la palette de couleur, faire vivre la balle à l intérieur de la charte graphique. Les palettes Nous avons demandé à tous nos graphistes de participer à l élaboration de la charte graphique en créant 3 plages de couleurs. Pour cela, plusieurs d entre nous avons utilisé différents sites web proposant des types palettes de couleurs pour nous aider dans nos choix : Grâce à ses outils, il nous a été possible de choisir des plages de couleurs contenant chacune d entre elle entre deux à quatre couleurs. Ainsi nous avons pu effectuer un vote au sein de toute l équipe pour déterminer la palette qui nous correspondait le mieux. Notre choix s est finalement porté sur quatre couleurs pour la plage. En effet, il nous a paru plus judicieux d avoir différentes couleurs pour faciliter l ergonomie de la charte graphique. Alors qu avec seulement deux couleurs, le choix serait plutôt restreint. L icône du logo Pour commencer, des croquis de logo ont été demandé. Une pré-selection a alors été établie Nous pensions d abord à mettre en liaison la balle à l abeille notamment avec le nom du logo. Toutefois, la symbolique de l abeille renvoyait au club de basket ball au usa ou encore à la marque de céréale miel pops. Nous avons donc abandonner cette symbolique, trouvant certains désaccord au sein de l équipe. En effet, certains n arrivaient pas à concevoir le lien avec la balle, d autres trouvaient que la symbolique de l abeille reprenait les formes de la balle. Finalement, nous avons fait le choix de revenir au concept de la balle avec une notion plus simple de la forme arrondie.

34 Introduction Concept Site web Site web mobile Application Communication Graphisme Gestion Annexes Le deuxième croquis reprend l la forme ronde de la balle. Cependant, il nous fallait une icône représentant la relation entre la balle et le public ainsi que son interactivité. Bien que ce logo est significatif, il lui manque une forme qui puisse être utilisé de manière miniaturisé : une forme type que l on puisse analyser en un regard en complément avec l écrit. Au départ, nous avions validé ce logo et il devait être le symbole de la balle. Toutefois, après mûre réflexion, nous avons constaté que la typographie était trop fine et ne correspondait pas à nos attentes. Il nous fallait une typographie beaucoup plus imposante et visible, image de d un univers technologique et contemporain adressée à un jeun public. E87726 Couleur chaude, elle exprime le dynamisme de la foule. Le logo finale Contenu plastique (couleurs) Ainsi la forme de flèche et la direction de celle ci vers le nom de la balle evoque parfaitement l idée de Iby. Nous avions décidé de mieux travaillé le logo pour lui donner plus de dynamisme et de volume avec un léger dégradé. La symbolique 92C A5C Ces deux couleurs se distinguent et se complètent à la fois. L une ne pouvant pas aller sans l autre. En effet, avec le vert et le gris, l idée est d accorder une importance à un univers moderne, jeune lié à la aux nouvelles technologies. Ces couleurs s adaptent à la cible fixés par la balle. Nous avons préféré l utilisation de formes simples et minimalistes pour notre logo. Nous avons aussi élaborer un peu plus l écriture de notre nom. Ainsi les usager reconnaîtrons facilement notre logo. Pour la forme, nous avons gardé la même forme précdente mais enlevé le dégradé pour rester dans la simplicité et la clarté. Pour la typographie, nous nous sommes appuyé sur Helvetica pour la recréer et la définir tel que nous le souhaitions : - un epaississement de la police, permet de s imposer et se marie parfaitement avec nos

35 Introduction Concept Site web Site web mobile Application Communication Graphisme Gestion Annexes attentes. - l inversement du B ciblant un jeune public Textes La typographie se veut simple. Elle réunit à la fois la clarté et le concept de la balle. Nous voulions mettre en avant trois points principaux : - l homogénéité - la clarté - la cohérence Police des titres Pour la police des titres, nous avons opté pour la clarté et la lisibilité des lettres. Pour cela, notre choix s est porté sur une police arrondie reprenant les formes de la Iby ball : SF New Republic (cf. SF New Republic) Police des sous-titres En ce qui concerne les sous-titres c est la notion de clarté et de cohérence que nous voulions mettre en avant. En effet, la police Arial est l une des plus répandue grâce à ses formes nettes et cette facilité de lecture à la fois sur papier et sur écran d ordinateur. Le fait de mettre cette police seulement en gras l a met en valeur et la différencie du contenu textuel de la page. (cf.arial) Police du texte Pour ce qui est du texte en lui même, nous avons repris la police des sous-titres afin de créer une certaine cohérence entre les deux. Nous souhaitions rester simple, clair et lisible puisque l utilité de ces polices servent à la rédaction des cahiers des charges où à d autres documents administratifs. Ainsi ces polices présentent à la fois une certaine homogénéité entre elle tout en se différenciant des autres polices. Charte Graphique web recherche (nos travaux) L idée est de créer un site web vitrine de la balle IBY. Pour cela, la maquette devrait être simple et clair. Simple au niveau du design et clair au niveau du contenu visuel et textuel. Toutefois, nous avons rencontré des problèmes au niveau de la création graphique. Il nous a était difficile de créer un design représentatif de notre balle. Version 1 C est pour cela, qu au départ, notre première maquette était de type basique. L internaute aura accès aux informations nécessaires sur la balle, les photographies prises par la balle lors de concerts et les prochains concerts ou se trouvera la balle. Le design représente un graphisme et une navigation classique avec un header ou on accède au menu, au corps présentant un diaporama des photos de la balle et un explicatif bref et enfin un footer reprenant les pages les plus utiles à l internaute. Après quelques réflexions, nous avons réalisé que le design et l architecture web n était pas assez approfondis et qu il lui fallait beaucoup plus de dynamisme.

36 Introduction Concept Site web Site web mobile Application Communication Graphisme Gestion Annexes Version 2 C est dans l idée d innover que nous nous sommes penché sur un concept original mais qui s est avéré peut efficace puisqu il était difficile de conceptualiser la balle IBY et d en comprendre ses fonctionnalité. L idée était de représenter un fond sombre et à chaque mouvement de la souris l internaute pouvait voir apparaître le menu. Un menu constitué de plusieurs balles qui menait l utilisateur vers l information recherché. Toutefois, l idée a été abandonnée. Entre temps, une importante réflexion sur la forme du site a été effectué. Nous voulons nous différencier. Créer un site qui soit à la fois à l image de notre balle et dynamique. Version 3 Ce qui marquera notre site web sera l effet parallaxe. Cet effet est révélateur de notre balle IBY. C est un effet de vitesse et de perspective pour donner une illusion agréable de mouvement. L internaute pourra ainsi naviguer en scrollant tout en découvrant le dynamisme de la balle lié au parallaxe. Cependant, la version 3 manquait de contenu. Le design était trop simple. En effet, nous nous sommes centré sur un représentation graphique simplifié : un rond qui serait représentatif de la balle. Le design a été controversé expliquant que les couleurs seraient trop frappante lorsque que l on passe d une page à l autre. Le travail représentait seulement un début d idée de réalisation. Il est important de constater un manque de contenu visuel dans ce design. Par ce manque de contenu, l effet parallaxe recherché n était pas abouti et utiliser dans toute sa globalité. De même, la balle n est pas réellement représentée. Il nous fallait une représentation 3D de la balle. Grâce à ces trois versions du site web, le site finale se veut de relier ces recherches. Notre site internet restera fidèle : - à l architecture web et au contenu de la première version - à une importance accordée à la forme ronde de la deuxième version - à l effet parallaxe et à la forme de la troisième version

37 Introduction Concept Site web Site web mobile Application Communication Graphisme Gestion Annexes Maquette du site internet Avant d arriver à la page d accueil, une vidéo du projet IBY, sorte de teaser, sera lancé pour suciter l intérêt et la curiosité de l internaute. La page d accueil Une page retrouvant une information de la balle invitant l internaute à en savoir plus et à découvrir le site. Cette page d accueil sera composé des actualités de la balle : les prochains concerts ou se trouve la balle.

38 Introduction Concept Site web Site web mobile Application Communication Graphisme Gestion Annexes Page concept Présentation des techniques et fonctionnalités de base la balle IBY afin de mieux comprendre les fonctionnements de celle ci. Page galerie Elle sera en continuité avec l idée de la forme ronde qui illustre la balle IBY. En effet, sur chaque gros rond sera inscrit une date dans laquelle la balle aura effectué des photographies prises lors des concerts. L internaute pourra les consulter et les télécharger s il le souhaite.

39 Introduction Concept Site web Site web mobile Application Communication Graphisme Gestion Annexes Page prochainement La page prochain concert IBY sera consituté des trois prochains mois ou IBY sera présente dans les concerts. Sur chaque mois, on verra apparaître les artistes et leur lieu de concerts. Ici, l idée de la forme ronde sera également illustré. Page contact Moyen mis en oeuvre pour contacter ou en connaitre plus sur la présence de la balle ou de ses évenements.

40 Introduction Concept Site web Site web mobile Application Communication Graphisme Gestion Annexes Transitions Entre chaque page nous mettrons des transitions pour différencier une page d une autre. La transition sera marqué d un long trait diagonale avec une forme ronde en son milieu. Ce rond contiendra un contenu d interrogation afin de communiquer avec l internaute.

41 Introduction Concept Site web Site web mobile Application Communication Graphisme Gestion Annexes Maquette de la Version Mobile du site internet La version mobile se veut être en continuité au site internet. Le contenu textuel sera bref et court et le contenu visuel reprendra celui du site. L internaute naviguera en toute facilité à travers chaque page. la page d accueil la page concept la page Galerie la page prochainement la page contact

42 Introduction Concept Site web Site web mobile Application Communication Graphisme Gestion Annexes Maquette de l Application mobile L application mobile a pour but de faciliter la gestion de la balle pour celui qui l utilise. De ce fait, celle-ci sera clair et simple d utilisation. la page d accueil la page envoyer un texte la page faire un dessin la page interagir avec la balle

43 Introduction Concept Site web Site web mobile Application Communication Graphisme Gestion Annexes Gestion... Outils de travail Durant les premières semaines de travail nous avons pu tester différents outils collaboratifs. Nous avons sélectionné parmi eux 4 outils qui nous semblaient complémentaires et qui répondaient à nos besoins organisationnels. Nous nous sommes limités à 4 outils car au dessus de ce nombre il nous apparaissait que l information devenait trop volatile et avait tendance à se disperser. Facebook Facebook est un réseau social que l ensemble des membres du groupe utilise. Sa consultation quotidienne assure une importante visibilité des informations. Le système des alertes lorsque du contenu nouveau est posté est également très important. Il est également possible de générer des documents écrits hébergés sur facebook, un peu à la manière d un Gdoc (mais en moins complet). De plus, sa relative facilité d accès lorsque l on possède un smartphone est un atout non négligeable. Plusieurs groupes privés ont donc été créés dans le cadre du projet. Un groupe collectif (Groupe 2 Tais CIAN), et un groupe privé par pôle. Groupe 2 TAIS CIAN : - Consulter l ensemble du groupe à chaque fois que des avis collectifs étaient nécessaires. - Poster des liens issus de la veille. - Maintenir un lien relationnel entre les membres du groupe. - Tenir informer des derniers avancements du projet. - Distribuer des tâches. - Motiver les troupes. Ce groupe permet notamment de définir un environnement du projet en postant les résultats de la veille sous forme de liens. Afin de ne pas surcharger le groupe commun à tous les membres du groupe en informations et donc nuire à la lisibilité de celles-ci, chaque pôle possède son propre groupe privé auxquels seuls les membres des pôles correspondant ont accès. Bien sûr les chefs de projets ont accès à l ensemble des groupes de travail. Ces groupes permettent de faire circuler les informations relatives à chaque pôle. (Groupes de pôles, Infographie, Développement, Audiovisuel, Communication ) En conclusion, Facebook nous sert pour toutes les informations fraîches. C est un vecteur de transmission de l information, mais il ne permet pas à proprement parler de travail collaboratif. Il nous permet de faire le point sur l avancement du projet. Nous avons mis en place certaines conventions afin d augmenter la lisibilité des informations. Chaque post des chefs de projet est accompagné d une entête indiquant l objet de la discussion. Ces en-têtes sont utiles pour faire des accroches visuelles lors d un scrolling pour retrouver un post précis. Ex :

44 Introduction Concept Site web Site web mobile Application Communication Graphisme Gestion Annexes ********* CAHIER DES CHARGES ********** ********* REUNION ******* ********* A CONSULTER ********** ********* INFORMATION IMPORTANTE ********* Nous sommes également particulièrement attentifs à la mise en forme de ces posts : textes aérés, sauts de ligne, séparation des idées de manière visuelle quand un post en véhicule plusieurs. Enfin nous avons interdit toute forme de flood afin que les informations prépondérantes ne soient pas noyées par des messages n ayant rien à voir avec le sujet. Gdoc Google Doc nous est par ailleurs particulièrement utile. Il permet de travailler à plusieurs en même temps sur le même document ce qui s est avéré très pratique. De plus, il est équipé d une messagerie qui permet de communiquer en même temps que l on rédige. Il possède une compatibilité avec quasiment toutes les suites Office (Microsoft, Macintosh, Open Office, Libre Office). Nous nous en servons aussi bien pour le traitement de texte, que pour son tableur ou encore son outil de dessin permettant de faire des organigrammes de manière très intuitive. On l utilise pour les productions qui nécessitaient une intervention collective. Bien sûr l accessibilité des documents est limitée aux gens qui sont amenés à travailler dessus, donc souvent aux membres d un même pôle et aux chefs de projet. Breeze & Skype Nous nous en servons afin de réaliser des réunions. Breeze lorsque celle-ci concernait l ensemble des membres du groupe de réaco. Skype était privilégié lors des discussions pair à pair. Il est à noter que, bien que Breeze soit un outil très pratique, nous sommes bien trop tributaires des aléas des connexions internet de chacun. Quelques réunions ont donc dû être ajournées à cause de lags trop importants. Nous nous sommes vite rendus compte du manque de fiabilité de cet outil quand les connexions sont lentes. Nous avons également utilisé le bloc note disponible sur l interface afin de noter le contenu de chaque réunion. Dropbox et FTP Nous nous en servons comme espace de stockage en ligne. Il nous permet de stocker les documents (souvent issus de Gdoc) dans leur forme finale. Les comptes-rendus de réunion sont stockés sur la DropBox. L échange de documents se fait également par son biais. Chaque pôle possède son propre dossier permettant l échange et le stockage des fichiers relatifs à ses actions. Chaque pôle est chargé de faire le ménage de son dossier afin de ne pas surcharger la dropbox dont l espace de stockage est limité à 2,5 Go. Pour les documents les plus volumineux (rush vidéo, logiciels...) nous avons bénéficié de l hébergement d un ami qui nous prête son ftp. DotProject Il nous a servi à l élaboration et à la distribution des tâches en vue d4un diagramme de Gantt.

45 Introduction Concept Site web Site web mobile Application Communication Graphisme Gestion Annexes Planning

46 Introduction Concept Site web Site web mobile Application Communication Graphisme Gestion Annexes

47 Introduction Concept Site web Site web mobile Application Communication Graphisme Gestion Annexes

48 Introduction Concept Site web Site web mobile Application Communication Graphisme Gestion Annexes

49 Introduction Concept Site web Site web mobile Application Communication Graphisme Gestion Annexes Veille Comme tout projet il a été indispensable d assurer une veille afin de cimenter le projet, de découvrir des pistes et surtout d assurer une vision commune du projet à l ensemble des membres du groupe. Cette veille a été effectuée sur le groupe privé facebook Groupe 2 Tais Cian. En tant que chefs de projet, nous avons donc très régulièrement posté des liens que nous commentions afin d illustrer une idée ou soulever une question. Au début nous étions les principaux «veilleurs» mais au fur et à mesure plusieurs membres de l équipe ont joué le jeu en faisant des apports très utiles. Notre veille juridique s est cantonnée au droit à l image en relation avec la fonction de prise de photographies de la balle. Cela n est pas censé poser de problèmes particulier car ces photos sont sous le même régime juridique que les autres prises de vues de concerts. Pour conclure cette partie sur la gestion de projet, nous avons axé notre gestion sur la création d un environnement de travail, qui ne se cantonne pas à la simple distribution de tâches. Nous nous sommes particulièrement attachés à garder la cohérence du projet en faisant des récapitulatifs écrits très réguliers afin d en baliser son avancement. certains membres n étaient pas à l aise avec et prenaient peu la parole lors des réunions collectives. Le fait de ne pas voir ses interlocuteurs donne l impression que les gens se sentent moins concernés et se repose sur l autre pour participer. La conséquence a été des réunions où seul les chefs de projets s exprimaient et où la prise de parole d une tierce personne n était pas spontanée. Nous avons également été confrontés à des incompatibilités des logiciels de la Creative Suite d Adobe. De plus, notre projet nécessite des logiciels professionnels que nous n étions pas en mesure de nous payer. Nous nous sommes rendus compte qu une veille collective était très intéressante car cela permet de varier les sources d informations et donc de toujours apporter un contenu neuf et inédit. Les liens étaient soit des images, des vidéos (le plus souvent) ou des articles issus de différents médias. Nous étions particulièrement attentifs aux blogs relatifs aux nouvelles technologies et aux avancées numériques. Problèmes rencontrés Au cours de ce projet réaco nous avons été confrontés à plusieurs difficultés qui nous semblent bon de préciser ici. Nous commencerons par l outil Breeze qui nous a plusieurs fois posé problème. En dehors des nombreux écueils techniques rencontrés, il est difficile de libérer la parole sur cet outil. En effet, La disparition de MegaUpload et de ses serveurs en Direct Download a rendu bien plus difficile l accès à ces logiciels pourtant indispensables. Enfin, nous avons eu quelques difficultés avec l utilisation de l outil dotproject, les critères de planification des tâches ne correspondant pas forcément à la réalité de l organisation qu impose la réaco.

50 Introduction Concept Site web Site web mobile Application Communication Graphisme Gestion Annexes Annexes x - Détails des campagnes de communication Internet - Réseaux sociaux, blogs et notre site internet. Le coût reste faible car l inscription et la création des pages sur les réseaux sociaux est gratuite. Seules les publicités ciblées seront payantes, mais celles-ci ne seront pas envisagées pour le moment. Les articles fait sur Facebook seront automatiquement relayés sur Twitter pour une meilleure diffusion de l information une visibilité plus étendue. Grâce à une iframe, il est possible de personnaliser sa page Facebook, nous profiteront de cet outil pour attirer et toucher notre cible avec une page d accueil incitant à aimer notre page. Une personne sera attribué pour faire du community management et on y proposera des photos/vidéos des événements ainsi que l actualité autour des concerts et dernières technologies pouvant avoir un rapport de près ou de loin avec notre projet. Du côté de Twitter, nous sommes partis sur l idée de booster un maximum notre communication et notre connaissance du produit par nos clients, et ce rapidement l impact et la portée du groupe, afin de se faire connaître d un maximum de monde, nous avons donc décidé d utiliser un outil permettant d augmenter significativement le nombre d abonnés à notre page : Metwee. Le principe de cet outil est qu il abonne automatiquement notre page à d autres qui ont les mêmes critères, ainsi ces personnes s ajoutent réciproquement à notre page et cela fait ainsi augmenter notre portée sur le site. Voici ce que nous esperons en terme de statistiques de la page sur 3 semaines. On prévoit un pic d abonnement à cause de l outil Metwee. Cependant, il est mal vu d avoir beaucoup d abonnments et peu d abonnés. Nous nous désabonnerons ensuite de certains. Cependant le nombre d abonnements ne devrait pas baisser pour autant. Nous devrons donc d ici un mois avoir une centaine d abonnés. Du côté du monde de la communication blog, nous contacterons un maximum de blogueurs connus dans le monde des nouvelles technologies et des musiciens amateurs de technologie musicale. Voici le mail type qu il serait intéressant d envoyer aux différents bloggers : Bonjour, Nous sommes le groupe Iby-Ball, un projet étudiant de licence professionnelle. Nous avons pour but de créer fictivement un objet communiquant dans les lieux public. Voici une présentation de notre concept. Nous sommes partis sur l idée d une balle interactive introduite pendant toute sorte de manifestations telles que les concerts, festival, meeting... Il s agit d une balle d 1,20 mètres de diamètre à la surface souple qui est prévue pour être lancée dans le public et manipulée par celui-ci. Le déplacement de la balle et les frappes avec le public sont analysées par différents capteurs internes à la balle. Les capteurs de mouvement analysent le comportement de la balle (changement de vitesse, orientation, contact.).

51 Introduction Concept Site web Site web mobile Application Communication Graphisme Gestion Annexes Ces données numériques sont exploitées pour être mises en forme graphiquement et vidéo-projetées en temps réel dans la salle de concert. Des tableaux numériques sont ainsi crées collectivement et consultables sur un site internet en direct et en différé. Des objectifs photographiques (grand-angle) répartis à la surface de la balle prennent des clichés qui sont ensuite exploités en direct (pour être intégrés dans la vidéo projection). Les clichés seront enfin consultables sous forme de galeries chronologiques dans le site internet. Le public peut également intéragir grâce à une application mobile en 3G. Ils pourront ainsi envoyer des messages textes et dessins prédéfinis ou ces propres réalisations (grâce à une page blanche où les utilisateur pourront dessiner librement avec le tactile), qui s afficheront sur la balle grâce aux Leds de différentes couleurs. Voilà notre site : iby-ball.kipooz.com Notre twitter Notre page facebook : pages/iby-ball/ Et pour finir notre page google+ : google.com/u/0/ /about La vidéo de présentation du projet : en cours de réalisation La vidéo de présentation de l équipe : youtube.com/watch?v=ujkn2fkaryy Nous sommes à votre disposition pour toute question ou besoin (informations supplémentaires, images...), n hésitez pas! Cordialement, L équipe Iby ball Quant à notre site internet, nous devront avoir une augmentation significative des visites grâce aux blogs ou aux réseaux sociaux au bout de quelques semaines. Une version mobile sera également disponible pour faciliter la navigation du site à travers les smartphones et tablettes numériques qui sont utilisés par de plus en plus de monde. Abris de bus L objectif est de proposer une campagne de communication qui soit interactive pour rester dans le même esprit que l Iby Ball. Avec une campagne qui sort de l ordinaire, elle suscitera l attention et permettra d être encrée dans l esprit des gens. Cette action sera en place avant la mise en circulation de notre balle : Nous avons choisi de réaliser des panneaux publicitaires sur les abris bus, qui seront composés d un écran vidéo où l on verrait une image fixe avec un point d interrogation et un message de teasing branchez-vous. Lorsque quelqu un branche un casque ou des écouteurs, la vidéo de promotion teasing commence pendant environ 10 secondes, puis elle finit avec le logo apparaissant pour reformer le point d interrogation. La vidéo sera dynamique avec une musique représentative du plus large public auquel s adresse la balle. Elle aura pour but d attiser la curiosité des passants et de faire le lien avec les autres campagnes comme l affichage (voir ci-après) pour suivre le lancement du produit et se sentir concerné. Nous envisageons également deux autres types de messages après le lancement du produit :

52 Introduction Concept Site web Site web mobile Application Communication Graphisme Gestion Annexes - pour faire connaitre les prochains concerts de la ville - faire découvrir/aimer le produit lorsqu aucun concert n est organisé dans la ville Événement sur Paris Nous envisageons également une campagne de communication du type Street guérilla événement 3 Semaines avant l événement : Mise en place de 2 camions, un noir et un blanc, à des endroits stratégiquement fréquentés de la capitale. Chacun sera muni d un comte à rebours et d un bouton à l arrière du camion sur lequel sera écrit push. Nous retrouverons le même point d interrogation que celui présent sur nos affiches publicitaires. L objectif ici est d attirer la curiosité des journalistes et des passants qui observeront pendant 1 semaine des camions fixes avec un point d interrogation et un compte à rebours. 2 Semaines avant l évènement A la fin du compte à rebours, le bouton «push» présent à l arrière se met à clignoter de couleur vive. Les passant intrigués et sous l influence de personne supervisant l opération, vont venir appuyer sur le bouton. Les passants se verront alors offrir des sacs fermé avec l instruction de ne pas les ouvrir avant une certaine date (le sac contenant une mini balle lumineuse iby, un tee shirt ), ainsi qu un lecteur mp3 sur lequel sera enregistré un message indiquant aux personnes qu ils vont être les principaux acteurs d un événement gigantesque gratuit, tel jour, à tel heure et à tel endroit. Ça sera bien sur au bon vouloir des personnes de ne pas ouvrir le sac surprise et de jouer le jeu. Jour J de l événement Les personnes seront donc invité à se rendre sur une grande place, ils se retrouveront face à un écran géant avec écrit «ouvrez vos sac, sortez la balle et activez la lumière» puis un compteur de 10 sec s affiche sur l écran géant, une fois arrivé à zéro le compteur s arrête comme si il y avait une coupure de courant. Apparaît alors un baromètre sonore, plus les gens feront du bruit, plus celui-ci se remplira. Une fois remplie, de la fumée apparaît sur la scène. Arrive alors David Ghetta ou un autre dj connu qui commence à mixer, puis il prendra 2 iby ball et les jettera dans le public. L animation peut alors commencer ainsi que le concert gratuit d une durée de 2h. Soirée événementiel - lancement de produit : Organisation d une soirée de présentation du produit avec comme invités, les journalistes, les organisateurs de soirées, les propriétaires de salles de spectacles, artistes, collectivités, festivaliers, puis surtout les chaînes de télévisions et autres médias pour couvertures médiatiques. Cette cérémonie de présentation grandeur nature verra aussi la présence d un grand public puisqu elle se déroulera dans une grande salle de spectacle stratégiquement choisie. Ce serait alors le lancement officiel de la balle interactive. C est pendant cette soirée que les potentiels acheteurs de notre objet communicant en milieu public jugeront de la pertinence de celui-ci et éventuellement son impact sur leur recette futur. Nul doute que ce moment magique mettra le public en haleine. Marketing direct Concernant notre cible secondaire nous voudrions entamer une campagne de phoning. Elle permettrait un message individualisé, un bon ciblage, un rendement plus élevé que les autres campagnes de marketing direct mais surtout la possibilité d argumenter et de traiter les objections. Affichage Des affiches 4m x 3m seront disposées dans les plus grandes villes. - Avant la sortie du produit avec un point d interrogation comme pour les autres campagnes pour susciter l intérêt et la curiosité.

53 Introduction Concept Site web Site web mobile Application Communication Graphisme Gestion Annexes - Après la campagne avec la balle bien en vue avec une phrase je l ai touché, et vous? pour cultiver la curiosité et donner envie. Ainsi nous aurons des campagnes de publicité prévues avant la sortie de la balle pour faire le buzz et pour attiser la curiosité des personnes. Mais également après la sortie pour ne pas se faire oublier et pour entretenir l image du produit. La radio En effet, qui n écoute pas la radio dans sa voiture lors de déplacement, de bouchon, où encore lors de départ en vacances, il est donc nécessaire de mettre en place une campagne de publicité radio de type dynamique, afin de donner envie aux conducteurs où aux personne devant leurs postes de radio, d écouter notre message et ainsi toucher une très grande majorité de personnes, c est un moyen de communication de masse. Même si lors de la publicité les gens ont tendance à zapper celle-ci. La cible touchée: Notre campagne de publicité sera diffusée sur des radios locales et régionales ayant un fort impact en termes d audience, nous ciblerons donc les radios où sont diffusées des musiques actuelles et des artistes susceptibles d utiliser la balle lors des concerts. Par conséquent, nous éliminerons les radios de musique classique et de trafic (Radio écouté mais pas par des personnes intéressé à taper dans une balle dans un concert). C est pour cela que nous avons pensé négocier des créneaux dans les heures de trajet et donc de forte écoute, c est à dire le matin entre 6h et 9h, et le soir entre 16h et 19h. Cela sur des radios jeunes de forte écoute, citons par exemple Virgin Radio, Nrj, Vitamine ou encore Fun radio. En effet en touchant cette tranche de la population nous assurons une augmentation de la fréquence des concerts où la balle iby sera présente. Les partenaires potentiels Pour financer une partie du projet, nous avons besoin de partenaires prêts à nous aider. Nous préparons donc des démarches auprès d entreprises tel que : - Des boissons énergisantes (ex : Red Bull) - La fédération française de France de Volley Ball - Le groupe de rock shaka ponk : Ce groupe utilise leur site internet comme un véritable réseaux social, ils prennent des photos des personnes lors de leurs concerts, les partagent et les personnes peuvent s identifier. Ce partenariat nous permettrait d être vu par un site internet ayant déjà fait ses preuves ce qui accroitrait notre notoriété. Partenariat avec le festival tomorrowland dans lequel sont présents les plus grand dj du monde. Iby ball sera présente pour certains concerts gratuitement. En contre partie, le festival communiquera sur Iby ball. De notre côté, nous aurons une communication intensive avant et pendant ce festival, ce qui veut dire que nous ferons de la publicité à la fois pour le festival et pour Iby ball. Ce partenariat nous fera connaître par un large public qui concerne notre cible.

54

55 Présentation du projet Le projet...2 Le concept...2 Le logo...2 Les objectifs...4 Les publics visés...4 Les contraintes et risques...5 La gestion du groupe...5 Sommaire La réalisation audiovisuelle Pré production...8 Postproduction...8 Etude des coûts...9 Le site internet et l application mobile Objectifs...11 Prestations attendues...11 Graphisme et ergonomie...11 Rubriques...12 Le design...13 Types de documents...17 Mise à jour du site...17 Référencement du site web...17 Statistiques de fréquentation...18 Etude et analyse de sites concurrents...18 Etude des coûts...19 Un plan de communication Cible principale...20 Cible secondaire...20 Les partenaires...20 Les campagnes envisagées...20 Etude des coûts...22 Les estimations budgétaires

56 Présentation Réalisation audiovisuelle Site internet et application mobile Plan de communication Estimations budgétaires Présentation du concept... Le projet Dans le cadre du projet de la formation TAIS- CIAN, de l Institut Ingémedia à l université du Sud Toulon-Var, les étudiants ont pour mission la réalisation et la diffusion d un objet communicant lié aux lieux public. D une durée de 10 mois, ce projet permettra aux étudiants de mettre en pratique leurs connaissances et savoirs au sein d un groupe de dix personnes, chacune attribuée à un domaine. Grâce à cette diversité, le projet du groupe s est développé et enrichi tant au niveau technique que fonctionnel. Le concept La balle Iby, plateforme de design génératif. Il s agit d une balle interactive de grande dimension voyageant au dessus de la foule tout en étant manipulée par celle-ci (en tapant dessus, comme un ballon de plage). Les déplacements et les contacts avec la balle sont analysés par différents capteurs (accéléromètres, appareils photos). Grâce à ces capteurs, un traitement graphique des données en temps réel sera diffusé sur des écrans géants. Ce traitement consiste à associer la trajectoire, vitesse et hauteur du ballon traitées sous forme d effets graphiques Les photos prises et les compositions graphiques issues de ce processus seront consultables sur un site internet dédié. La balle ne sera pas un simple terminal de capteurs. Sa surface sera couverte de LED qui pourront proposer des événements lumineux en fonction de la musique (comme un equalizer graphique, de la puissance des frappes, ou encore d une application mobile permettant de la piloter. Les notions de processing et de design génératif sont aux centre de notre projet. Le but étant de faire de la balle une véritable plateforme dédiée au data-design. Le logo Notre première démarche a été de créer un logo. Nous le voulions simple et sobre. Nous avons choisit une police plus graphique pour le nom de l agence. Elle s inspire des typographies de groupes de musiques électroniques.le B à l envers cible un public jeune et technologique. 3

57 4 Présentation Réalisation audiovisuelle Site internet et application mobile Plan de communication Estimations budgétaires L utilisation de formes simple a été privilégiée. Ainsi le logo sera aisément identifiable. Des couleurs unies, et un léger dégradé sur la forme pour donner un peu plus de volume. Le logo aura un impact visuel assuré. Il se veut de style moderne, arrondi en allusion à la balle. L inspiration du logo vient en partie de la marque de voiture Smart. un pictogramme en forme de cercle dont le côté droit est composé d une flèche triangulaire pointant vers l extérieur. Dans notre cas, ce n est pas une flèche mais deux flèches qui pointent vers le nom de la balle. Les objectifs Le but de notre projet est de proposer un tout nouveau moyen de divertissement et d interaction, s intégrant dans le cadre de concerts ou de manifestations culturelles. Nous voulons en faire une véritable plateforme de design génératif dont les fonctionnalités s ajouteront facilement au fur et à mesure du temps. La balle doit être pensée le plus consciencieusement possible, afin d obtenir un résultat professionnel (que notre concept soit réellement constructible et surtout qu il puisse séduire les cibles avant une mise sur le marché). Nous aboutirons à un tel produit fini en liant les compétences de l ensemble des membres du groupe ; que ce soit pour la conception, la réalisation ainsi que par la stratégie de communication. Notre produit s appuiera sur des points forts, comme ses fonctionnalités, la stratégie mise en place pour sa «confrontation» aux publics. Les publics visés Cette balle sera introduite par les organisateurs de soirées où les propriétaires de salles, ils doivent donc être pris en compte dans la communication autour du concept, mais il est impératif que la balle séduise avant tout le public car si elle n attire pas celui-ci, les organisateurs ne verront aucun intérêt à la proposer. L iby Ball, prenant place dans le cadre du concert, il est nécessaire de définir à quel type de public elle conviendra le mieux. Les concerts sont de nos jours de plus en plus interactifs, tout particulièrement les concerts de musiques électroniques qui sont de véritables laboratoires en terme d interaction avec le public. C est pourquoi il y a de fortes chances que l IBY Ball soit plébiscitée par un public issu de ce style de musique. De plus, la musique électronique, n est pas comme certains autres genres, limitée au seul lieu de la salle de concert. On la retrouve dans les discothèques et les clubs. Le public visé est de ans. Il est principalement urbain. L IBY Ball peut également profiter d un renouveau de la musique électronique qui a lieu actuellement en surfant sur la vague Dubstep, genre novateur en plein essor. Il est important de s intéresser aux possibilités de transpositions de la balle à d autres types d événement que les concerts ; même si elle reste avant tout conçue pour ceux-ci. On pense notamment aux colloques, meetings, et d autres rassemblements où les conditions de sécurité sont réunies.

58 5 Présentation Réalisation audiovisuelle Site internet et application mobile Plan de communication Estimations budgétaires Les contraintes et risques Tout au long du projet nous devrons faire face à de nombreuses contraintes et risques. Ces contraintes seront de plusieurs ordres : - Étude de marché (la connaissance des besoins de nos cibles). - Techniques (études de l existant et des techniques liées à la création d un concept grand public), - Matérielles (nous ne disposons pas du matériel nécessaire à la construction réelle de notre concept il faudra trouver des solutions pour approcher et illustrer l idée). - Humaines (chacun des membres travaillant sur le projet viennent d univers socio-professionnels et géographiques différents, il faudra donc lier les compétences et connaissances de tous. La formation étant en semi-distanciel il faudra organiser et gérer le travail en fonction des emplois du temps. - Environnementaux (pour le tournage des spots publicitaires, les conditions météo joueront un rôle important). - Maîtrise du matériel professionnel (caméra pour le tournage, logiciel de montage...), que nous devrons approfondir par nos recherches personnelles. Le projet devra être à la fois innovant et réalisable car nous mettons un point d honneur à ce que notre projet soit viable et soit le plus réaliste possible, en gardant à l esprit le fait qu il pourrait être conçu et construit en situation réelle. Sécurité Notre projet s intégrant dans l espace public et comme il induit un jeu avec la foule, il est très important de s intéresser aux problématiques de sécurité. Une réflexion doit être menée sur la manière de rendre le produit sécurisant aux yeux du public d un concert ou dtout simplement d une foule. Gestion de Projet Concernant la gestion des tâches, un diagramme de GANTT et un réseau PERT seront mis en place, il permettra ainsi de planifier le projet en attribuant chacune des tâches à un pôle ou un membre. Il donnera une vue d ensemble du temps global de réflexion et production des livrables. On pourra ainsi optimiser les temps de réalisation de chacune des tâches, et cas échéant modifier le planning afin de ne pas prendre de retard sur l ensemble du projet. De plus la mise en place des tâches dans un diagramme de Gantt permettra de prendre conscience de ce qu on appellera la «continuité de tâches», c est à dire la dépendance d une tâche par rapport à la fin de réalisation d un autre. D imposer des jalons de rendus. Grâce à ces outils, les dates aux plus tôt et au plus tard de chacune des tâches seront déterminées..

59 Présentation Réalisation audiovisuelle Site internet et application mobile Plan de communication Estimations budgétaires Une partie importante est la coordination des pôles, pour cela l utilisation d outil dit collaboratif et social sera mise en place. Ces outils seront différents et auront deux fonctions propres : - Une troisième catégorie sont les stocks online ou uploader in Cloud, on entend par là des logiciels permettant de stocker des fichiers en ligne en permettant un accès par l ensemble des membres et effectuant des mises à jour de contenus en direct. - La première catégorie permettra de communiquer avec l ensemble des membres, de poster des commentaires, ou des questions que peuvent se poser les pôles lors des réalisations. Il servira aussi de support informationnel par lequel le chef de projet ou tout autre membre pourrait faire partager ses inspirations, recherches ou actualités en lien avec le projet. - La seconde permettra une mise en ligne du planning global, mais permettra à chaque pôle de consulter les taches relatives uniquement à leurs pôles. D indiquer le temps estimé aux tâches, mais aussi le temps qu il a fallu pour finir une tâche. Ainsi en temps réel on pourra prendre connaissance de l avancement du projet. Chaque chef de pôle mettant à jour les avancées de son groupe. - D autres outils standards du type «appels téléphoniques» ou «messages texto» serviront pour les situation nécessitant une plus grande vélocité d action. - Concernant les réunions, un logiciel de visioconférence permettra de réunir l équipe en un même lieu virtuel pour faciliter les échanges malgré les possibles distances. L ensemble des spécifications techniques concernant ces outils sera abordé dans le cahier des charges techniques.

60 Présentation Réalisation audiovisuelle Site internet et application mobile Plan de communication Estimations budgétaires La gestion du groupe Cette partie présentera la proposition de gestion du projet. Tout d abord quelques mots concernant l organisation du groupe. Les membres seront répartis dans différents pôles de compétences. Cela permettra une séparation distincte du travail, de plus cette séparation correspond précisément aux domaines d activités dont aura besoin le projet. Le pôle Gestion de projet Garnier Florian et Lesou Gildas. Ce pôle aura pour mission la gestion du projet. Pour cela, ils utiliseront une plateforme collaborative en ligne dans laquelle il pourront enregistrer les estimations d heures par tâches, les heures effectuées et les membres assignés. Ainsi ils pourront connaitre l avancement du projet, les retards éventuels, et alors modifier les prévisions et estimations sur certaines tâches pour pouvoir rentabiliser le temps. Ils devront également veiller à garder une bonne cohésion dans l équipe. Leur rôle est de centraliser les informations pour mieux les hiérarchiser et les faire circuler. C est eux qui prendront en charge la veille stratégique en rapport avec l environnement du projet. Le pôle Infographie Chef de pôle Brunel Manon. Moussa Assema. Le pôle apportera l identité visuelle du projet. Par leurs connaissances en matière de communication visuelle et d art graphique ils pourront réaliser les différentes affiches destinées à la communication, le design du site internet mais aussi tout autres habillages visuels nécessaires. Le pôle Communiation/Marketing Chef de pôle Leriche Alexandre. Gangloff Joris, Zaccaria Pauline. Ils devront mettre en place les bases d une communication sur le projet. Il faut que la communication soit pensée pour être multi-supports. Ils devront apporter diverses solutions pour promouvoir le projet auprès des cibles désignées. Ils travailleront en étroite collaboration avec le pôle infographie pour tout ce qui touche à la communication visuelle. Ils devront faire connaitre le concept ainsi que l entreprise au travers de nombreux moyens matériels et logiciels. Ils travailleront en collaboration avec le pôle infographie afin de garder une logique entre la politique de communication (publics visés) et l aspect esthétique des affiches. Ils auront entre autres comme charge, l élaboration d une stratégie de communication multi support, recherche de partenaire pour établir des bases solides. Le pôle développement Chef de pôle Paillery Celtill. Wisniewski Florian. Ils sont en charge de la création du site internet et de l application mobile. Les échanges avec l infographiste et le responsable de communication seront essentiels. Ainsi un site communicatif et clair sera élaboré. Ils s occuperont aussi de sa mise à jour, c est-à-dire d apporter les différentes modifications et assurer la mise en ligne des nouveaux contenus. Ils devrons faire preuve de sérieux afin de jongler entre les différentes normes de programmations. Le pôle Audio/Visuel Chef de pôle Sugewei Boris. Il sera aidé par Garnier Florian. 7

61 8 Présentation Réalisation audiovisuelle Site internet et application mobile Plan de communication Estimations budgétaires Réalisation audiovisuelle... Teaser : L utilisation de l audiovisuel dans notre projet, à la vocation de rendre compréhensible. Son utilisation doit être très démonstrative et explicative de ses fonctionnalités. Il est nécessaire de présenter le projet de manière visuelle afin de le rendre lisible et intelligible dans sa forme et ses fonctionnalités. C est pourquoi nous avons décidé de le faire sous forme de teaser vidéo. Il devra être réalisé en motion-design et devra s adapter au format web. Pré-Teaser : Les sources Un pré-teaser va être produit dont le but est de souder les membres de l équipe par le biais d une première réalisation commune. Il consistera en une présentation de l équipe. Une première maquette de la balle va être présentée dans celui-ci. Son rôle est le suivant : attiser la curiosité du public et informer que l agence est en train de travailler sur un concept novateur. Nos sources d inspirations sont les vidéos de making-of des phases de développement de projets en agence (ex : watch?v=ygascg6-wje) L autre source d inspiration sont les vidéos de making-of de jeux vidéos. A noter : les montages utilisées vont contenir des vidéos filmés, soit par nos propre soins, soit par des images et de la musique de libre de droit. Le synopsis et scénario L agence IBY travaille, en ce moment, sur un concept novateur de la balle en accordant une grande importance à l interactivité. Pour cela, le scénario présentera la phase de conception de cet objet avec toute la partie technique avant de nous dévoiler les premiers prototypes : le résultat des premiers travaux de l équipe. L objectif étant de faire découvrir au public que cette balle a été réalisé par nos propre soins. Le story-board Un story-board devra être produit afin de préproduire et d organiser l ensemble des plans et lors de la phase de tournage. Celui-ci sera détaillé plan par plan dans un soucis de rentabilité lors du tournage. Postproduction La maquette de la balle introduite dans la vidéo sera enrichie de différents effets visuels et sonores afin de simuler son utilisation et son rendu visuel. Cette maquette developpera toutes les fonctionnalités de la balle, le teaser la mettra en situation.

62 9 Présentation Réalisation audiovisuelle Site internet et application mobile Plan de communication Estimations budgétaires Etude des coûts

63 Présentation Réalisation audiovisuelle Site internet et application mobile Plan de communication Estimations budgétaires

64 Présentation Réalisation audiovisuelle Site internet et application mobile Plan de communication Estimations budgétaires Site internet et application mobile... Objectifs Le site internet Nous souhaitons que celui-ci soit particulièrement pertinent et bien réalisé. En effet internet est un moyen de communication efficace et peu couteûx. Il faut que sa forme soit particulièrement originale. Destiné à tout public, il doit pouvoir être vue par la majorité. Il doit apporter au public des informations complémentaires sur la réalisation, les intervenants, les partenaires du projet tout en proposant des contenus interactifs pour renforcer l engagement. Le site Internet du concept de la Iby Ball aura pour principal objectif de présenter et d illustrer en détail l ensemble du projet. On y détaillera précisemment le concept de la balle, ses fonctionnalités, les divers résultats qu elle peut créer ainsi que l univers dans laquelle elle évolue. Le contenu précis de la balle en terme de matériels sera également détaillé et expliqué. Le site sera donc un support vitrine de la balle et proposera une galerie de photos afin de récupérer le contenu des données pris lors des événements. L application mobile L application mobile propose des fonctionnalités de gestion et de paramétrage des différentes interactions de la balle. Elle permettra un usage simplifié, rapide et direct notamment pendant le concert. Elle se doit d être la plus intuitive possible pour que quiconque qui ait à s en servir puisse rapidement régler ses choix. Prestations graphiques Le site doit présenter : - Une interface graphique agréable, aux couleurs du projet, épurée et simple (proscrire tout surplus textuel ou graphique). - Un style graphique respectant la charte graphique qui permette aux internautes de s imprégner de l univers. - Le logo, qui a une place prépondérante. - Apporter du dynamisme pour se différencier d autres sites jugés trop statiques. L application doit présenter : - Tout comme le site internet, une interface graphique agréable (même si c est une application de configuration de la balle elle ne doit pas être déplaisante), épurée au maximum (ne faire apparaître que les éléments de réglage) - Bien sûr, respecter la charte graphique du site (qui marquera nettement l appartenance de l application mobile au projet) Référencement du site internet Dans le but de populariser le concept, le site internet devra être accessible par les principaux moteurs de recherches (apparaître en tête de liste). Ce référencement se fera principalement par un référencement naturel (pour cela le site devra être optimiser et développer en conséquence) mais aussi par une forte présence sur la toile (article parlant du projet dans des blogs et les réseaux sociaux, par exemple). Spécifications techniques L ensemble des spécifications techniques sera abordeé dans le cahier des charges techniques mais, dans le but d informer au maximum le

65 Présentation Réalisation audiovisuelle Site internet et application mobile Plan de communication Estimations budgétaires client de l étendue du travail à effectuer, une liste exhaustive de spécification est ici présentée..- La structure est de type arborescente. - Les balises <meta> sont remplies dans leur intégralité. - Le site est compatible pour Internet Explorer, Firefox, Chrome, Safari. - La base de données est de type SQL. - L application mobile est compatible ios, Android, BlackBerry Graphisme et ergonomie Le site étant prévu pour un large public, le temps de chargement des pages ne doit pas dépasser quelques secondes (pour cela l utilisation d animations flash sera proscrite et il doit être visible sur des écrans avec une résolution 800 x 600 et 1024 x 768 ou sur des écrans à plus haute résolution. L information doit être facilement accessible afin de ne pas lasser les utilisateurs. La navigation doit être fluide, intuitive et la règle des trois clics doit être respectée. La structure doit être classique pour ne pas heurter l utilisateur. Une première page affichant le logo, s effaçant progressivement pour laisser place à la page d accueil. Eléments constitutifs du site : Un fond d écran original s adaptant à une structure de site classique. - Un haut de page avec (le logo du projet de façon visible, un menu horizontal) - Le contenu scinder en deux parties, une avec un photoslide faisant défilés les photos (selon le thèmes de la rubrique etc...) puis une autre avec les articles de la page souhaités. - Un pied de page (contenant les informations de copyright et un rappel du menu) Il sera prévu l animation de certains élément s du site pour un gain de dynamisme. En ce qui concerne l application mobile, son graphisme et son ergonomie seront également succints et fluides. Elle doit être très rapide d utilisation et de navigation grâce à une interface simple et claire notamment pour accéder facilement aux commandes possibles à ordonner à la balle. Elle servira de module de prise de contrôle de la balle lors des soirées. Page d accueil La page d accueil du site Internet étant la vitrine du projet, présentera dans sa totalité le produit pour permettre une rapide identification par l internaute lors de sa première visite. Une image grand format (l image lors d un concert par exemple) de la balle apparaîtra sur la page d accueil présentant l univers dans laquelle le projet évolue. De plus, une vidéo sera intégrée pour une courte mise en situation de soirée événementielle. L objectif est de permettre une compréhension visuelle et éviter ainsi une surcharge textuelle qui polluerait le site internet et serait en totale opposition au désir d une ergonomie épurée. L interface s imposera de clarté tout comme le site de la marque Nike ( nikeos/p/nike/fr_f) Rubriques Les rubriques aideront notamment à une compréhension plus approfondie de la balle en elle même, dans un aspect tant technique que sociale. Les outils et matériels utilisés pour la concevoir ainsi que les fonctionnalités qui lui

66 Présentation Réalisation audiovisuelle Site internet et application mobile Plan de communication Estimations budgétaires sont attribuées seront expliqués et détaillés de manière précise dans les différentes rubriques. Outre les rubriques désignées pour l apport d informations concernant la balle, on trouvera également des rubriques affectées à un aspect plus communautaire avec un contenu qui concerne directement l internaute à savoir les données photos récoltées pendant les événements et le calendrier des prochaines soirées prévues avec la balle. L application mobile permettra l accès à différentes fonctions de réglages et de gestion de la balle. L application mobile permettra l accès à différentes fonctions dédiées à l information, à la consultation des données photos et à une gestion ludique de la balle en temps réel. Le design Le design du site doit être simple et agréable pour attirer des personnes de tout les âges. Le site et surtout la page accueil ne doit pas être surchargée pour ne pas agresser l oeil de l internaute.

67 14 Présentation Réalisation audiovisuelle Site internet et application mobile Plan de communication Estimations budgétaires La page Accueil Concept Galerie Prochains concerts Contact

68 15 Présentation Réalisation audiovisuelle Site internet et application mobile Plan de communication Estimations budgétaires Version mobile du site internet Accueil Concept

69 16 Présentation Réalisation audiovisuelle Site internet et application mobile Plan de communication Estimations budgétaires Version mobile du site internet Galerie Calendrier Contact

70 Présentation Réalisation audiovisuelle Site internet et application mobile Plan de communication Estimations budgétaires Application mobile Menu Prendre une photo

71 Présentation Réalisation audiovisuelle Site internet et application mobile Plan de communication Estimations budgétaires Application mobile Changement de couleurs Faire un dessin Envoyer un message

72 19 Présentation Réalisation audiovisuelle Site internet et application mobile Plan de communication Estimations budgétaires Types de documents Les principales données consultables et récupérables par l internaute seront les photos prises par la balle lors des concerts, ainsi que les compositions graphiques. Ces documents seront disponibles dans la section galerie. Mise à jour du site Le site ne nécessitera pas de mise à jour régulière en ce qui concerne le contenu informationnel sur la balle et le concept. Il sera néanmoins nécessaire d effectuer des changements pour la partie galerie et le calendrier des événements et des classements. Compatibilité technique Pour le site internet : Le site doit respecter l ensemble des normes et standards et actuels du web (W3C). Il doit être accessible sur tout les navigateurs tel Mozilla Firefox, Google Chrome, Safari, Internet Explorer. Parallèlement, le site Internet doit être accessible depuis toutes les plateformes et systèmes d exploitation utilisés à savoir Windows, Mac OS et Linux de manière à rendre disponible le site au plus grand nombre. Pour l application : Elle se doit d être compatible à tout les téléphones de type smartphone cela passe par ios, Android et autre firmwares similaires. Configuration logicielle et matérielle Le site Internet sera créé avec des langages de développement et d intégration web via des plateformes de programmation. Il sera connecté à une base de données qui stockera toutes les informations nécessaires à l utilisation du site internet comme, en autres, les photos des événements qui y seront conservées. Le site sera mis en ligne grâce à un hébergeur qui proposera la mise à disposition d un serveur web. Un nom de domaine sera également fourni pour bénéficier notamment de notre propre adresse URL. L application sera codée dans les différents formats de développement afin de pouvoir être installés sur les principaux systèmes d exploitation de smartphones. L application devra pouvoir être récupérable depuis les différents stores propres aux smartphones (ITunes, android market...); et donc respectée des normes pour la mise en ligne. Référencement du site web Le site internet doit être référencé pour être accessible depuis les navigateurs internet les plus couramment utilisés (Mozilla, Chrome, Safari, Internet Explorer). Le référencement doit être le plus efficace possible. La présence du site web sur les moteurs de recherche internet les plus courants est donc indispensable (notamment Google, Bing et Yahoo). Pour un référencement visible et utile il est aussi nécessaire d optimiser au mieux le site web. La présence de pages référençant le site web sur les réseaux sociaux est un atout pour obtenir plus de visites et plus de trafics. Pour un référencement optimal, il doit d abord être réfléchi lors de l élaboration du site web grâce à un nom de domaine clair, une structure correctement organisée, des titres de pages et de rubriques clairs, la présence de mots-clés pertinents sur toutes les pages etc. L utilisation de balises META pertinentes est donc indispensable afin que les navigateurs et les moteurs de recherches internet puissent établir une indexa-

73 20 Présentation Réalisation audiovisuelle Site internet et application mobile Plan de communication Estimations budgétaires tion du site et identifier les informations les plus importantes du site : - iby - iby.fr (nom de domaine déjà pris) - balle interactive - balle - interactive Par ailleurs, des sociétés en lignes proposent de prendre en charge le référencement de site web. Nom de domaine Déjà attribués : - iby.fr - iby.com Disponibles : - iby-ball.fr - iby-ball.com - iby-concept.fr s Une adresse doit être liée au site internet pour éventuellement recevoir des avis, plaintes ou réclamations de la part des internautes. Cet sera aussi le moyen d être joignable auprès des partenaires, potentiels acheteurs et organisateurs d évènements (ex : [email protected]). Hébergement La solution d hébergement doit permettre de disposer : - d un nom de domaine - d une connectivité importante - d une grande capacité de stockage - d un trafic illimité - de compte(s) mail(s) - d une base de données importante - d une sécurité avancée notamment grâce à des sauvegardes en continues sur plusieurs serveurs. Statistiques de fréquentation Les statistiques de fréquentation ne seront pas évaluées via l hébergeur mais par la solution Google Analytics. Un compte Web Developper sera donc ouvert auprès de Google. Il n y aura pas de compteur de visiteurs sur le site. Elles doivent fournir au minimum : - le nombre de visiteurs pour permettre d évaluer l impact du site - le nombre de pages vues pour améliorer éventuellement améliorer les contenus l origine géographique des visiteurs pour vérifier si les cibles sont atteintes - Le temps moyen passé sur le site pour connaître les taux de visionnement de la galerie photo Etude et analyse de sites concurrents : le benchmarking Les sites concurentiels, avec lesquels nous avons développé notre veille, présentent des services similaires aux notres. Ainsi, nous nous sommes inspirés de ces sites notamment pour la structure et le design afin d en dégager le meilleur pour notre site internet. Ils nous ont permis de développer : - trois parties expliquant le concept de la balle, avec une phrase d accroche - l idée de mettre le logo en pleine page avant d arriver à la page d acceuil - l idée aussi de mettre soit des illustrations «grossières» ou avec une polices anciennes (idée abandonnée) - intégrer des éléments (photographies) pour prononcer l ambiance du site et son dynamisme Les sites evenementiels :

74 Présentation Réalisation audiovisuelle Site internet et application mobile Plan de communication Estimations budgétaires Les autres sites qui ont servi à la collecte d informations : Etude de coûts Suite à cette analyse voici les aspects de ces sites qui seront exploités: - Les informations présentes sur le site doivent être facilement accessibles, rédigées clairement en s intégrant parfaitement au design du site. Elles doivent pouvoir répondre à la plupart des questions que se posent les internautes et par conséquent être présentes en quantité suffisante mais pas excessive. - En cas de non réponse aux interrogations des internautes, ils pourront entrer en contact par mail avec l équipe. - Un lien vers les profils sociaux seront implémentés De fait les internautes se sentiront plus impliqués dans le projet et seront tenues régulièrement au courant des nouveautés. - Ponctuellement, des sondages seront proposés aux internautes afin de donner leur avis ou leur sentiments sur la balle Iby. - Le site devra être attractif visuellement et plonger le spectateur dans l univers de la balle avant même d avoir participé à une des soirées. 21

75 Présentation Réalisation audiovisuelle Site internet et application mobile Plan de communication Estimations budgétaires Plan de communication... Cible principale Notre cible principale concerne les organisateurs de soirées, les propriétaires de salles de spectacles, les artistes, les collectivités, les festivals. C est en suscitant l intérêt du public dans les concerts qu on va intéresser les organisateurs. Les organisateurs de spectacle pourront contacter l équipe par le site internet, un marketing direct sera mis en place afin de se faire connaître auprès d eux. Cible secondaire Notre cible secondaire concerne les participant aux soirées (public de ans). Elle concerne les personnes participant à des concerts de musiques actuelles mais également de diverses manifestations (festival, meeting...). Malgré le fait qu elle soit la cible secondaire elle en est, pour autant, très importante puisque c est à elle qu est destinée l utilisation Iby ball. C est pourquoi, nous avons préparé des plans de communications, ce qui permettra de diffuser l information pour accroître la notoriété de notre projet. Les campagnes envisagées L image que nous voulons donner à notre balle est jeune et dynamique, comme le public auquel elle est destinée. Nos campagnes sont donc élaborés dans un même esprit. Mise en place d un campagne sur réseaux sociaux La communication par les réseaux sociaux est indispensable aujourd hui. En effet, Facebook, et Twitter sont des sites permettant une communication de masse pour un cout peu élevé (création profils, placement publicitaire), en créant des groupe sur l ensemble de ceux-ci nous pourrons assurer une communication dynamique, et faire partager des informations à tous les membres participants aux manifestations. Mise en place de campagnes de street marketing Abris de bus L objectif est de proposer une campagne de communication qui soit interactive pour rester dans le même esprit que l Iby Ball. Avec une campagne qui sort de l ordinaire, elle suscitera l attention et permettra d être encrée dans l esprit des gens. Cette action sera en place avant la mise en circulation de notre balle : Nous avons choisi de réaliser des panneaux publicitaires sur les abris bus, qui seront composés d un écran vidéo où l on verrait une image fixe avec un point d interrogation et un message

76 23 Présentation Réalisation audiovisuelle Site internet et application mobile Plan de communication Estimations budgétaires de teasing branchez-vous. Lorsque quelqu un branche un casque ou des écouteurs, la vidéo de promotion teasing commence pendant environ 10 secondes, puis elle finit avec le logo apparaissant pour reformer le point d interrogation. La vidéo sera dynamique avec une musique représentative du plus large public auquel s adresse la balle. Elle aura pour but d attiser la curiosité des passants et de faire le lien avec les autres campagnes comme l affichage (voir ci-après) pour suivre le lancement du produit et se sentir concerné. Nous envisageons également un autre message après le lancement du produit, lorsque celui ci aura acquis assez de notoriété. Évènement Nous envisageons également une campagne de communication du type Street guérilla événement où des passants seront conviés à participer à une soirée exceptionnelle surprise avec un DJ d exception où la balle serait exposé et testé par le public pour la première fois. Avec cette campagne, nous avons pour objectif de faire un buzz et d attirer non seulement la curiosité des gens et leur montrer pour la première fois l utilisation de Iby Ball mais également d attirer les médias sur notre concept qui auront été tenu au courant de l événement. Soirée événementiel - lancement de produit : Organisation d une soirée de présentation du produit avec comme invités, les journalistes, les organisateurs de soirées, les propriétaires de salles de spectacles, artistes, collectivités, festivaliers, puis surtout les chaînes de télévisions et autres médias pour couvertures médiatiques. Cette cérémonie de présentation grandeur nature verra aussi la présence d un grand public puisqu elle se déroulera dans une grande salle de spectacle stratégiquement choisie. Ce serait alors le lancement officiel de la balle interactive. C est pendant cette soirée que les potentiels acheteurs de notre objet communicant en milieu public jugeront de la pertinence de celui-ci et éventuellement son impact sur leur recette futur. Nul doute que ce moment magique mettra le public en haleine. Marketing direct Concernant notre cible secondaire nous voudrions entamer une campagne de phoning. Elle permettrait un message individualisé, un bon ciblage, un rendement plus élevé que les autres campagnes de marketing direct mais surtout la possibilité d argumenter et de traiter les objections. Affichage Des affiches 4m x 3m seront disposées dans les plus grandes villes. - Avant la sortie du produit avec un point d interrogation comme pour les autres campagnes pour susciter l intérêt et la curiosité.

77 Présentation Réalisation audiovisuelle Site internet et application mobile Plan de communication Estimations budgétaires - Après la campagne avec la balle bien en vue avec une phrase je l ai touché, et vous? pour cultiver la curiosité et donner envie. Ainsi nous aurons des campagnes de publicité prévues avant la sortie de la balle pour faire le buzz et pour attiser la curiosité des personnes. Mais également après la sortie pour ne pas se faire oublier et pour entretenir l image du produit. Les partenaires potentiels Pour financer une partie du projet, nous avons besoin de partenaires prêt à nous aider. Nous préparons donc des démarches auprès d entreprises tel que : - des boissons énergisantes (ex : Red Bull) - la fédération française de France de Volley Ball - SONY, qui est la marque de l appareil photo intégré à la balle. - Certaines maisons de disques (universal etc..). Ces entreprises sont susceptibles de nous supporter afin de donner une aura jeune et dynamique à leur image de marque. Etudes de coûts 24

78 25 Présentation Réalisation audiovisuelle Site internet et application mobile Plan de communication Estimation budgétaires Estimations budgétaires... Dans un soucis de réalisme, il nous parait important de quantifier ce que coûterait le développement de l IBY Ball. Il ne s agit que d une estimation basée sur les coûts des matériaux et des technologies utilisées. Nous ne comptons ni les coûts en terme de ressources humaines, ni les différentes charges inhérentes à une agence (taxes, immobilisations). Ce que nous voulons estimer c est le coût approximatif pour le projet. La balle utilise un ensemble de technologies existantes et peu coûteuses. Nous estimons que l élément le plus onéreux sera le développement de la structure, même si les matériaux utilisés ne sont en soit onéreux. Nous basons notre estimation des différentes composantes sur une une fourchette de prix que nous avons trouvé sur les sites de plusieurs fournisseurs; ainsi que sur les estimations pour les différents pôles.

79 Brunel Manon Gangloff Joris Garnier Florian Leriche Alexandre Lesou Gildas Moussa Assema Paillery Celtill Sugewe JusteBoris Wisniewski Florian Zaccaria Pauline