Proposition pour le site Web Magic-recre.com

1. Préambule Proposition pour le site Web Magic-recre.com Ce document ne constitue que les premières propositions pour le site Magic-recre.com. Il ne s’agit que de pistes de réflexion, mises en forme rapidement dans ce PowerPoint afin de donner un aperçu global du projet et n’a d’autres prétentions que d’expliquer brièvement mon approche, en vue de la réunion du jeudi 22 février 2007 Ludovic Trimbach - Magicmaman – Février 2007

2. Préambule Proposition pour le site Web Magic-recre.com Contexte Conception et réalisation dusite Web « magic-recre.com » consacré aux enfants. Il devra répondre aux exigences mises en place lors de la création des différents sites satellites de la société, à savoir magic-recettes.com et magic-maison.com, mais également rester en cohérence graphique avec la charte Magicmaman, tout en prenant en considération les spécificités liées au développement d’un site Web consacré aux enfants. Enjeux et Objectifs • Générer du trafic sur le site : pour ce faire, il faut le rendre suffisamment attractif par son aspect et son ergonomie, nécessairement accessible, grâce à une bonne navigabilité et utilisabilité et potentiellement fidélisant de par une forte propension évolutive. • Augmenter la visibilité de la société sur le net • Elargir sa cible principale à une nouvelle tranche d’âge • Proposer un nouveau contenu, plus spécifique au public du site Web de Magicmaman • Réunir autour d’un site Web parents et enfants Ludovic Trimbach - Magicmaman – Février 2007

3. Préambule Proposition pour le site Web Magic-recre.com Cible principale Les enfants entre 3-7 et 7- 11+ ans Cible secondaire Les parents de jeunes enfants souhaitant les accompagner dans la découverte d’un univers distrayant et éducatif ou étant à la recherche d’activités à leur proposer. Moyens et mise en œuvre • Définition du design du site du logo et des différents templates des pages. • Réalisation des illustrations et des animations • Elaboration de l’architecture et de la charte graphique • Logiciels utilisés et envisagés : Photoshop, Illustrator, Image ready, Flash. Ludovic Trimbach - Magicmaman – Février 2007

4. Traitement graphique Proposition pour le site Web Magic-recre.com Ambiance du site :un univers de formes et de couleurs S’agissant d’un site pour enfants, il est évident qu’une place prépondérante sera faite à l‘illustration. Des couleurs vives et des formes géométriques alterneront avec des tons plus légers et des contours plus doux afin de ménager des aires de repos visuel, d’aérer le contenu et de scénariser le parcours et la progression de l’enfant dans le contenu de la page. Des formes rectilignes souligneront quant à elles l’ossature du site, permettant de structurer le contenu, rendant ainsi plus claire la mise en page tout en prolongeant l’effet artistique recherché : le Pixel art. Aspect général des pages :le pixel art façon Magicmaman La solution envisagée pour le traitement graphique en général est donc celle du Pixel art. Il s’agit d’une technique d’illustration qui se caractérise par une réalisation numérique pixel par pixel en utilisant un nombre limité de couleurs. Apparu dans les années 80 il redevient depuis peu très tendance sur la toile notamment grâce à l’apparition des avatars qui ont eux-mêmes donnés naissances aux dollz, petits personnages en Pixel art. Outre ses qualités esthétiques, ce choix présente pour ce projet de nombreux avantages notamment en matière de personnalisation et d’évolutivité, que nous évoquerons tout au long de ce document. Ludovic Trimbach - Magicmaman – Février 2007

5. Traitement graphique Proposition pour le site Web Magic-recre.com En fonction de la place disponible et de l’importance du contenu nous pourrons opter indifféremment pour une vue en perspective isométrique ou une vue classique en 2D Identité visuelle :se différencier des sites concurrents Là ou les sites destinés aux enfants se limitent à proposer une mise en forme constituée d’aplats de couleurs, d’illustrations diverses pas toujours cohérentes entre elles et d’animations gifs à profusion, il s’agit ici de créer au contraire un univers structuré par des codes couleurs et des espaces distincts, dans lequel l’enfant pourra s’immerger grâce notamment à l’utilisation de couleurs complémentaires et de la perspective isométrique. L’identité visuelle de magic-récré reposera donc essentiellement sur la technique aisément reconnaissable du pixel art. Le logo du site subira le même traitement afin de respecter une certaine cohérence : Contours multiples, couleurs tranchées et police carrée. Le soleil et la police du texte « magic » sont conservés dans le but d’assurer une continuité satisfaisante avec les autres sites de la société. Cependant à cette partie immuable du logo vient s’intégrer « récré.com » sous la forme précédemment évoquée ainsi qu’un pictogramme représentant un personnage souriant, évoquant à la fois le pixel art, les possibilités de personnalisation du site (dont nous parlerons plus loin ), labonne humeur, la détente et le plaisir. Ludovic Trimbach - Magicmaman – Février 2007

6. Traitement graphique Proposition pour le site Web Magic-recre.com Variations sur le thème évoqué précédemment : Ludovic Trimbach - Magicmaman – Février 2007

7. Traitement graphique Proposition pour le site Web Magic-recre.com Structure du site :la notion d’ateliers récréatifs Il est question ici de concevoir le site comme une grande maison constituée de pièces distinctes, chacune d’entre elles représentant une rubrique du dit site et disposant d’un code couleur propre. Figureront donc sur la home une porte d’entrée vers l’atelier de coloriage, l’atelier d’histoires, l’atelier de jeux, l’atelier de musique et l’atelier découverte. Navigation :un parcours fléché Même si a ce stade l’aspect définitif reste à définir, nous pouvons envisager de mettre en exergue une toute petite partie de la pièce et du contenu afin d’inciter le jeune Internaute à pousser la porte de chaque atelier et découvrir petit à petit la richesse des éléments graphiques et du contenu qu’il renferme. Chaque rubrique sera identifiée de la même manière afin de faciliter le parcours visuel : le nom de l’atelier dans la barre de titre, un texte introductif, la représentation d’une portion de la pièce, un pictogramme un code et un aplat de couleur qui lui est propre et qui permettent de correctement structurer la page. La multiplication des points de repère dans le site et une forte iconisation, assureront ainsi une bonne navigabilité au site, même pour le plus jeune public, Ludovic Trimbach - Magicmaman – Février 2007

8. Traitement graphique Proposition pour le site Web Magic-recre.com Parallèlement à cette navigation par espace, un accès plus direct et plus classique, sera rendu possible par la présence d’une barre horizontale intégrée à la zone identitaire, en haut de la page d’accueil,. Les mêmes rubriques seront accessibles, dans le même ordre, sans code couleur spécifique afin de ne pas saturer la page. Cependant, elle disposera des mêmes pictogrammes distinctifs pour un meilleur repérage des rubriques. La home franchie, la partie centrale de la page découvrira la pièce dans son intégralité. Celle-ci sera elle-même divisée en zones, meublées en conséquence et représentant chacune une sous rubrique. Des légendes graphiquement identiques aux noms des ateliers sur la home permettront par un clic d’accéder à un niveau inférieur. Variations : Ludovic Trimbach - Magicmaman – Février 2007

9. Traitement graphique Proposition pour le site Web Magic-recre.com Intégration des éléments dans la home :la création d’une ambiance En jouant avec des couleurs complémentaires, des dégradés les tonalités différentes d’une même couleur et un assemblage précis des éléments constitutifs de la home, nous pouvons alors, créer des univers et des ambiances différents. Ludovic Trimbach - Magicmaman – Février 2007

10. Traitement graphique Proposition pour le site Web Magic-recre.com Ludovic Trimbach - Magicmaman – Février 2007

11. Traitement graphique Proposition pour le site Web Magic-recre.com Ludovic Trimbach - Magicmaman – Février 2007

12. Traitement graphique Proposition pour le site Web Magic-recre.com Homogénéité des pages :le changement dans la continuité Les pages intérieures du site se structureront de la même manière que la page d’accueil et répondront aux mêmes codes couleurs. L’atelier se dévoilera dans son intégralité et l’accès aux sous rubriques sera rendu possible. Ludovic Trimbach - Magicmaman – Février 2007

13. Traitement graphique Proposition pour le site Web Magic-recre.com Personnalisation et évolutivité :la notion d’objets Le site Web tel qu’il est prévu, est constitué en fait d’un assemblage d’univers distincts, eux-mêmes constitues par le positionnement d’objets et de revêtements en Pixel art. Une fois crées ces objets sont aisément modifiables en 2 ou 3 clics et peuvent être utilisés afin de créer un nouvel univers, totalement différent. Quant à la personnalisation de l’interface et l’interactivité avec l’internaute, elle passe principalement par la possibilité de choisir son avatar et de le modifier à sa guise. Si les choix seront restreints au lancement du site, à terme il pourrait être possible de choisir la couleur de ses cheveux, de sa peau, sa coupe de cheveux ainsi que ses vêtements. Si l’exercice est concluant, pourquoi ne pas proposer, selon le même fonctionnement technique, la création de son propre atelier à l’intérieur de la zone personnalisée. Ludovic Trimbach - Magicmaman – Février 2007

14. Traitement graphique Proposition pour le site Web Magic-recre.com Parallèlement à cela nous pourrions envisager également le remplacement du fond de header en fonction de la saison (cf. ci-dessous), ajouter des décorations dans les ateliers pour noël ou pour Pâques par exemple, habiller en conséquence les personnages faisant partie du décor, etc. …., L’événementiel devient alors un élément intégré au site et permet ainsi de fidéliser les internautes qui découvriront au fil des mois un site en constante mutation. Les espaces seront également modifiés et enrichis lors de l’ajout de nouveaux contenus. A terme, il sera également possible d’animer, en flash ou en gifs, pour une très faible contrainte technique et un faible poids ( car les objets pris individuellement sont très petits ), tout ou partie d’un espace. En fait les possibilités découlant de cette construction sont extrêmement nombreuses, notamment dans le domaine de l’interactivité, du marketing viral et de la participation active des internautes : interaction avec les objets du décor pour la consultation de son agenda ou de son carnet d’adresses, ou de son journal de bord par exemple, icones pour le bureau, fonds d’écran, jeux en flash, téléchargement de son atelier personnel, organisation de concours de la meilleur création en pixel art, réalisation de BD, d’e-cards personnalisables – selon le même procédé que pour la création de l’atelier personnel - etc. …. C’est un thème particulièrement fédérateur, apprécié par les jeunes ( et moins jeunes Internautes ). Ludovic Trimbach - Magicmaman – Février 2007

15. Synthèse et conclusion Proposition pour le site Web Magic-recre.com Le projet réside donc dans la création d’un univers particulier qui se décline au fil des différentes rubriques et présente de nombreux avantages que nous pouvons synthétiser ainsi : • Thème tendance, plébiscité par les jeunes enfants; la référence : http://www.habbo.fr - monde virtuel en pixel art présent dans la plupart des pays et dans toutes les langues. • Immersion dans le site grâce à l’utilisation de la perspective isométrique. • rapidité de réalisation et extrême évolutivité: Une fois les formes de bases et les prototypes objets et « moules » personnages crées il est alors très simple de combiner les éléments pour créer des personnages et des univers (plage, ville, appartements, ateliers) totalement différents • Facilité d’animation en Flash ou Gif, de par la simplicité des formes, des couleurs et la petitesse des éléments constitutifs de l’animation dans leur singularité. • nombreuses possibilités de personnalisation (avatars – appartement ou atelier perso, etc. ….. ) Ludovic Trimbach - Magicmaman – Février 2007

16. Maquettes Proposition pour le site Web Magic-recre.com La home : N - 1 : Ludovic Trimbach - Magicmaman – Février 2007

17. Maquettes Proposition pour le site Web Magic-recre.com Variation ( Sky et colonne de gauche sur la home ) : Ludovic Trimbach - Magicmaman – Février 2007