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

Ludovic Trimbach - Magicmaman – Février 2007

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

Proposition pour le site Web Magic-recre.comPré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 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



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.


Proposition pour le site Web Magic-recre.comTraitement 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 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.

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.

Ambiance du site : un univers de formes et de couleurs


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.

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


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 ), la bonne humeur, la détente et le plaisir.


Variations sur le thème évoqué précédemment :



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.

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,

Navigation : un parcours fléché



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 :


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.


Intégration des éléments dans la home : la création d’une ambiance






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.

Homogénéité des pages : le changement dans la continuité



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.



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 ).



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. ….. )

Proposition pour le site Web Magic-recre.comSynthèse et conclusion


La home :

Proposition pour le site Web Magic-recre.comMaquettes

N - 1 :


Variation ( Sky et colonne de gauche sur la home ) :

Proposition pour le site Web Magic-recre.comMaquettes

Documents

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