Ludovic Trimbach - Magicmaman – Février 2007 Ce document ne constitue que les premières propositions pour le site Magic-recre.com. Il ne sagit que de pistes.

Présentation au sujet: "Ludovic Trimbach - Magicmaman – Février 2007 Ce document ne constitue que les premières propositions pour le site Magic-recre.com. Il ne sagit que de pistes."— Transcription de la présentation:

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

2 Ludovic Trimbach - Magicmaman – Février 2007 Proposition pour le site Web Magic-recre.com Préambule Contexte Conception et réalisation du site 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 dun 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 dun site Web parents et enfants

3 Ludovic Trimbach - Magicmaman – Février 2007 Proposition pour le site Web Magic-recre.com Préambule 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 dun univers distrayant et éducatif ou étant à la recherche dactivité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 larchitecture et de la charte graphique Logiciels utilisés et envisagés : Photoshop, Illustrator, Image ready, Flash.

4 Ludovic Trimbach - Magicmaman – Février 2007 Proposition pour le site Web Magic-recre.com Traitement graphique 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 sagit dune technique dillustration 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 à lapparition 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. Sagissant dun site pour enfants, il est évident quune place prépondérante sera faite à lillustration. 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, daérer le contenu et de scénariser le parcours et la progression de lenfant dans le contenu de la page. Des formes rectilignes souligneront quant à elles lossature du site, permettant de structurer le contenu, rendant ainsi plus claire la mise en page tout en prolongeant leffet artistique recherché : le Pixel art. Ambiance du site : un univers de formes et de couleurs

5 Ludovic Trimbach - Magicmaman – Février 2007 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 daplats de couleurs, dillustrations diverses pas toujours cohérentes entre elles et danimations gifs à profusion, il sagit ici de créer au contraire un univers structuré par des codes couleurs et des espaces distincts, dans lequel lenfant pourra simmerger grâce notamment à lutilisation de couleurs complémentaires et de la perspective isométrique. Lidentité visuelle de magic-récré reposera donc essentiellement sur la technique aisément reconnaissable du pixel art. En fonction de la place disponible et de limportance du contenu nous pourrons opter indifféremment pour une vue en perspective isométrique ou une vue classique en 2D Proposition pour le site Web Magic-recre.com Traitement graphique 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 dassurer une continuité satisfaisante avec les autres sites de la société. Cependant à cette partie immuable du logo vient sintégrer « récré.com » sous la forme précédemment évoquée ainsi quun pictogramme représentant un personnage souriant, évoquant à la fois le pixel art, les possibilités de personnalisation du site (dont nous parlerons plus loin ), la bonne humeur, la détente et le plaisir.

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

7 Ludovic Trimbach - Magicmaman – Février 2007 Structure du site : la notion dateliers récréatifs Il est question ici de concevoir le site comme une grande maison constituée de pièces distinctes, chacune dentre elles représentant une rubrique du dit site et disposant dun code couleur propre. Figureront donc sur la home une porte dentrée vers latelier de coloriage, latelier dhistoires, latelier de jeux, latelier de musique et latelier découverte. Même si a ce stade laspect définitif reste à définir, nous pouvons envisager de mettre en exergue une toute petite partie de la pièce et du contenu afin dinciter le jeune Internaute à pousser la porte de chaque atelier et découvrir petit à petit la richesse des éléments graphiques et du contenu quil renferme. Chaque rubrique sera identifiée de la même manière afin de faciliter le parcours visuel : le nom de latelier dans la barre de titre, un texte introductif, la représentation dune 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, Navigation : un parcours fléché Proposition pour le site Web Magic-recre.com Traitement graphique

8 Ludovic Trimbach - Magicmaman – Février 2007 Parallèlement à cette navigation par espace, un accès plus direct et plus classique, sera rendu possible par la présence dune barre horizontale intégrée à la zone identitaire, en haut de la page daccueil,. 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 daccéder à un niveau inférieur. Proposition pour le site Web Magic-recre.com Traitement graphique Variations :

9 Ludovic Trimbach - Magicmaman – Février 2007 En jouant avec des couleurs complémentaires, des dégradés les tonalités différentes dune 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. Proposition pour le site Web Magic-recre.com Traitement graphique Intégration des éléments dans la home : la création dune ambiance

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

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

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

13 Ludovic Trimbach - Magicmaman – Février 2007 Personnalisation et évolutivité : la notion dobjets Le site Web tel quil est prévu, est constitué en fait dun assemblage dunivers distincts, eux-mêmes constitues par le positionnement dobjets 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 linterface et linteractivité avec linternaute, 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 lexercice est concluant, pourquoi ne pas proposer, selon le même fonctionnement technique, la création de son propre atelier à lintérieur de la zone personnalisée. Proposition pour le site Web Magic-recre.com Traitement graphique

14 Ludovic Trimbach - Magicmaman – Février 2007 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 lajout de nouveaux contenus. A terme, il sera également possible danimer, 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 dun espace. En fait les possibilités découlant de cette construction sont extrêmement nombreuses, notamment dans le domaine de linteractivité, 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 dadresses, 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, de-cards personnalisables – selon le même procédé que pour la création de latelier personnel - etc. …. Cest un thème particulièrement fédérateur, apprécié par les jeunes ( et moins jeunes Internautes ). Proposition pour le site Web Magic-recre.com Traitement graphique

15 Ludovic Trimbach - Magicmaman – Février 2007 Le projet réside donc dans la création dun 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.http://www.habbo.f Immersion dans le site grâce à lutilisation 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é danimation en Flash ou Gif, de par la simplicité des formes, des couleurs et la petitesse des éléments constitutifs de lanimation dans leur singularité. nombreuses possibilités de personnalisation (avatars – appartement ou atelier perso, etc. ….. ) Proposition pour le site Web Magic-recre.com Synthèse et conclusion

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

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