Claire Mounier Rapport de stage UVHC - Master 2 Creanum Infographie
20
08
/2
00
9
2d design graphisme infographie print web
nts iem e er c rem Je tiens tout d’abord à remercier Dominique Ringeval et Jean-Michel Flamant pour leur confiance en mon travail et mes capacités, ils m’ont donné l’opportunité de travailler sur des projets variés et riches en apprentissage. Un grand merci à Antoine, Denis et Ismaël pour leur bonne humeur quotidienne et leurs conseils précieux en matière de techniques graphiques. Pour finir, je tiens à remercier également toute l’équipe d’Idées-3Com pour leur accueil et
1
leur sympathie.
mai re som REMERCIEMENTS
PAGE 1
INTRODUCTION
PAGE 3
ENTREPRISE
PAGE 5
1. Identité
page 5
2. Services et prestations
page 6
STAGE
PAGE 10
1. Introduction
page 10
2. Organisation du travail
page 11
3. Réalisations
page 14
CONCLUSION
PAGE 92
1. Problèmes et difficultés rencontrés
page 92
2. Bilan du stage
page 94
2
n ctio odu intr Passionnée depuis toujours par le web design et l’infographie 2D en général, j’ai eu l’opportunité d’effectuer un stage de 5 mois (du 30 mars au 28 août 2009) au sein de la société Idées-3Com, basée à Villeneuve d’Ascq. C’est avec le Directeur Artistique que nous avons établi trois grands axes de réalisation pour mon stage :
1. Conception web design
- Conception du site Web Idées-3Com sur la base de la charte graphique
existante
- Iconographie
- Mise en place d’une ergonomie de navigation
- Intégration HTML
2. Conception plaquette de présentation de produit
- Création et mise en page des plaquettes de présentation, services et
produit de la société sur la base de celles existantes et de la charte
graphique générale de la société
3. Etude et conception de l’ergonomie de navigation au sein d’un univers virtuel 3D
- Conception et réalisation graphique de l’outil de navigation principal de
l’univers 3D (accès aux diverses fonctionnalités du site)
- Création des éléments de navigation
- Ergonomie des interfaces fonctionnelles de l’univers 3D
Nous aborderons dans un premier temps la présentation d’Idées-3Com et des différents services qu’elle propose. Dans un second temps, nous effectuerons une description détaillée du déroulement du stage, de l’organisation du travail au sein de la société, des projets réalisés durant cette période. Nous terminerons par une conclusion, un bilan, qui permettra de mettre en avant les points importants et surtout les débouchés du stage. Je tiens à vous préciser que tous mes travaux sont consultables sur le DVD fourni avec le
3
rapport.
rise ent r ep 1. Identité C’est le 25 septembre 2006 que JeanMichel
Flamant,
Aurélien
Morel
et
Dominique Ringeval fondent la société Idées-3Com. Basée à Villeneuve d’Ascq au sein du
Idées-3Com base ses services sur les
Parc Scientifique de la Haute Borne, c’est
quatre points suivants :
avec son équipe de 12 personnes que l’entreprise réalise de nombreux projets
1. Enrichir les espaces de vente
principalement axés sur le principe du
2. Innover dans la communication et
e-commerce, de la formation à distance
améliorer l’expérience d’achat
mais aussi et surtout sur la création de
3. Scénariser un parcours client idéal
mondes virtuels sur le web.
dans un espace de vente interactif 4. Créer et animer des communautés
Plus précisemment, Idées-3Com est
d’internautes autour d’une marque
spécialisée dans la conception et la création d’univers virtuels 3D interactifs en temps réel sur Internet. Elle propose des solutions 3D innovantes d’aide à la vente et de fidélisation, mais aussi la possibilité d’une découverte interactive, intuitive et ludique d’un produit.
4
Idées-3Com - Locaux de l’entreprise
2. Services et prestations Galerie et visite virtuelle L’interactivité fait partie intégrante des services de l’entreprise, le principe résidant dans le fait qu’un produit doit être mis en valeur d’une manière ingénieuse et efficace. La galerie virtuelle permet
Boutique Victoria Couture - Galerie Virtuelle - 2007
de reproduire la notion d’achat sur Internet. Elle transpose virtuellement la notion de parcours client et de shopping. L’utilisateur est constamment informé et accompagné pendant sa visite, afin d’assurer un bon confort de navigation. Un des éléments importants pour Idées3Com est que l’utilisateur doit prendre du plaisir à effectuer ses achats, qu’il
Centre de recherche INRIA Lille - Visite virtuelle - 2008
retrouve la sensation qu’il éprouve lorsqu’il est dans une boutique réelle. Il peut découvrir et manipuler un objet, première étape de l’appropriation. C’est la mise en situation et l’association de produits dans l’univers 3D qui favorisent la vente et augmentent ainsi la valeur du Orange - Boutique virtuelle - 2008
5
panier d’achat.
Présentation des fonctionnalités d’un produit Idées-3Com
offre
à
l’internaute
la
possibilité d’appréhender les principales fonctionnalités d’un produit de manière intuitive et ludique. C’est donc une véritable
simulation
du
réel
que
l’utilisateur peut explorer, manipuler et expérimenter pour comprendre plus facilement le fonctionnement du produit. Les cinq points suivants caractérisent les engagements d’Idées-3Com dans le cadre des présentations interactives de produit : - Simplifier le discours technique - Simuler le fonctionnement du produit
Canapé 3 Suisses - Présentation 3D produit - 2008
- Mettre en valeur les caractéristiques déterminantes du produit - Donner à découvrir - Accompagner l’internaute dans ses choix
6
Appareil Numérique Sony Cybershot - Présentation 3D produit - 2007
Configurateur d’appartement Si Idées-3Com présente de nombreux services dans le domaine du virtuel, elle propose également des systèmes de mise en situation dans ces univers. Un des principaux objectifs est la stimulation de l’acte d’achat, cependant le configurateur 3D apporte aussi une
3D.Co by 3Suisses - Aménagement d’appartement 3D - 2008
nouvelle expérience à l’utilisateur en lui permettant de créer la pièce de ses rêves. L’objet est mis virtuellement dans les mains de l’internaute, il peut choisir où placer et orienter celui-ci comme il le désire.
Room Planner - Aménagement d’appartement 3D - 2008
7
Room Planner Plage France. - Création d’un appartement 3D personnalisable - 2008
Univers communautaires L’élaboration
de
mondes
virtuels
mettant en scène le principe de la communauté d’utilisateurs fait partie des services proposés par l’entreprise. De
la
génération
de
son
propre
avatar personnalisé à la création d’un appartement personnel décoré selon ses choix, Idées-3Com développe la notion d’univers communautaires. L’internaute ne doit plus se heurter à la monotonie d’un simple site web en 2D, il peut désormais entrer dans un monde en 3D et découvrir les produits qui l’intéressent par le biais d’interfaces ludiques, ergonomiques et originales. Son avatar créé, l’utilisateur évolue dans les différents magasins et peut faire son shopping en visualisant les produits en 3D. Il a également la possibilité de décorer son appartement en fonction des éléments mis à sa disposition (meubles, objets déco, high tech etc...). C’est donc un grand bond en avant pour
Personnage 3D - Tests de textures - 2009
l’internaute, qui peut donner vie à son avatar et évoluer au gré de ses envies dans un monde au contenu riche et
8
évolutif.
ge sta 1. Introduction Afin de présenter mes différents projets de manière claire et structurée, j’ai pris la décision de décrire chacun d’entre eux un à un, par ordre d’importance de réalisation (quantité de travail apportée à chaque projet). Une présentation par thème ou type de travaux serait moins explicite compte tenu du fait que la plupart des projets sont similaires par leur caractéristiques techniques.
- MaBoutique3D : un site web présentant le tout nouveau produit
d’Idées-3Com permettant la création d’une boutique entièrement en trois
dimensions.
- Easy Dress : une boutique de vêtements avec un modèle vidéo possédant
nos mensurations.
- Plage France / Décoration intérieure : refonte du site e-commerce des
créateurs des tous premiers stickers muraux géants.
- MonConvertible.com : un site web e-commerce destiné à l’enseigne
Mon Magasin de Meuble.com, proposant des canapés convertibles design.
- Idées-3Com : refonte totale du site web de l’entreprise.
- Centre Commercial online : un projet vaste et ambitieux basé sur le
principe de l’élaboration d’une gigantesque communauté d’internautes.
9
Voici la liste des différents projets auxquels j’ai pu participer :
2. Organisation du travail L’organisation du travail autour des projets est simple mais efficace. Ce sont généralement Dominique ou Jean-Michel qui viennent présenter les contrats obtenus et qui briefent les équipes afin d’établir un plan de travail. En ce qui me concerne plus spécifiquement, la manière de procéder est la suivante: je discute du projet à réaliser puis j’effectue une première démarche de recherche en terme d’inspiration. Il est toujours primordial de consulter au préalable sur Internet les différents sites de la concurrence afin de déterminer quels sont leurs forces mais surtout leurs faiblesses. Je puise donc dans plusieurs visuels qui m’interpellent et que je juge intéressants par leur structure, leurs couleurs ou encore leur ergonomie. De nombreux sites recensent les tendances web du moment et sont donc une fabuleuse source d’idées et d’inspiration, en voici quelques uns :
- http://www.cssdrive.com
- http://www.css-design.fr
- http://www.css-website.com
- http://www.smashingmagazine.com
Bien évidemment, l’inspiration n’existe pas uniquement sur Internet et il n’est pas rare que je conserve des brochures ou des magazines qui comportent des mises en page particulières et originales. Une fois cette recherche effectuée, je commence une première maquette de l’interface ou du site web où je place les éléments qui doivent composer la page. Il s’agit en sorte d’une «pré-maquette» qui me permet de réaliser le zoning de la page : placer tous les éléments qui sont nécessaires à la construction de la page, sans se soucier au départ de
10
l’apparence graphique et esthétique de celle-ci.
J’ai découvert ce type de procédure au fil des semaines durant mon stage, ce qui m’a permis d’optimiser mon efficacité en création web. Au tout début, j’avais plutôt tendance a créer directement sur logiciel ma maquette, sans passer par les étapes intermédiaires de recherche et de zoning. Une fois la première maquette créée, elle est présentée et critiquée. Des modifications sont apportées, au fur et à mesure la page se construit et prend forme. Lorsque la maquette est totalement finalisée et validée, nous passons au découpage : il s’agit d’extraire les éléments graphiques du site afin de les préparer pour le développeur qui se chargera de coder la page web. Pour résumer, la démarche de création d’un design web ou d’interface se compose des étapes suivantes :
1. Prise de connaissance du projet
2. Recherche d’idées et d’inspiration sur divers supports
3. Elaboration du zoning avec une pré-maquette
4. Réalisation de la maquette avec le design
5. Validation du design
6. Découpage de la maquette pour le développement
Dans mon travail il est très important de pouvoir jongler sur différents types de logiciels afin d’être rapide et efficace. J’ai eu à ma disposition tous les logiciels de PAO de la Suite Adobe CS4 : Photoshop et Illustrator. Photoshop est parfait pour ce qui est des maquettes web, celles-ci étant en 72 dpi il n’y a aucun problème. Par contre, pour les éléments de communication visuelle, les logos, les icônes, j’utilise de préférence Illustrator car il permet de créer des objets vectoriels. Cela est bien plus pratique et efficace pour ce type de réalisations.
11
J’ai également eu recours à Flash pour des tests dl’animation simple d’un logo.
3.1. Réalisations // MaBoutique3D
Le projet de MaBoutique3D est né des capacités de la société Idées-3Com à pouvoir créer des univers en trois dimensions. Forte de son expérience en matière de boutiques 3D, Idées-3Com est sur le point de proposer un concept nouveau et original, la possibilité de générer son propre magasin virtuel. Le but est de permettre aux professionnels d’accéder à cette innovation le plus facilement possible, sans devoir posséder des connaissances particulières en programmation ou modélisation 3D. Toute l’équipe d’Idées-3Com travaille donc à ce projet novateur, et les deux meilleurs moyens de se faire connaître des entreprises étaient bien évidemment la presse et Internet. C’est tout d’abord avec le Directeur Artistique d’Idées-3Com, Dominique Ringeval, que nous avons conçu et mis en page un article sur le projet MaBoutique3D, destiné à être
12
diffusé dans le journal Les Echos.
13
MaBoutique3D - Mise en page d’un article destiné à la presse - 2009
On m’a ensuite chargée de concevoir un mini-site promotionnel pour MaBoutique3D, devant correspondre à plusieurs critères qualité :
- simplicité et sobriété du design
- efficacité du message délivré
- présentation classe du produit
Avant de me lancer corps et âme dans la création d’une maquette, j’ai tout d’abord effectué un petit tour d’horizon sur la toile afin d’y trouver l’inspiration et de constater que la notion de magasin en 3D demeure peu exploitée actuellement. Mon idée s’était déjà arrêtée sur un thème colorimétrique bien précis : couleurs sombres pour démontrer un côté sérieux et classe.
Scallon - Vente immobilière
Treforest - Design web et développement
GZ design - Design web
alinga - Design web et multimédia
14
Inspiration
expressionTINTS - Peinture professionnelle
1 minus 1 - Design web
Le contenu texte du site et la structure globale m’ont été fournis dans un document afin de me permettre de me consacrer exclusivement au design du site web. Pour celui-ci, j’ai opté pour des couleurs sobres évoluant dans le noir bleuté. De légers halos de bleus viennent éclairer les éléments cliquables des différentes pages. Une arabesque en transparence décore délicatement le fond du site et apporte une touche raffinée au design.
#0f1012
#1f2024
#2c3638
#7d9aa0
La typographie utilisée (Caviar Dreams) pour les titres et les boutons est fine, contemporaine et donne elle-aussi une certaine sobriété au design. Bien entendu, il s’agit d’une police de caractères libre de droit.
abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789 MaBoutique3D Le professionnel est mis en confiance et impliqué dès son arrivée sur le site : on lui propose de découvrir, mais aussi de créer. De nombreuses vidéos accompagnent le texte et permettent d’illustrer les explications des différentes étapes de création de la boutique
15
3D.
La page d’accueil donne le ton : classe et sobriété. L’ambiance colorimétrique et la disposition des éléments est simple mais efficace, l’utilisateur n’a pas à chercher où cliquer et comment se diriger sur le site, tout est explicite. Il était très important de donner un caractère sérieux et rassurant au site web, les professionnels doivent immédiatement avoir une impression de qualité et le sentiment qu’ils sont en face d’un produit qui saura combler leurs attentes.
MaBoutique3D - Page «Accueil» - 2009
16
MaBoutique3D - Page «Découvrir» - 2009
Le design est similaire sur les quatre pages qui composent le site web, on retrouve le menu horizontal principal sur le haut. Les textes sont clairs et vont à l’essentiel, l’internaute doit pouvoir comprendre rapidement de quoi il s’agit et ne pas se perdre dans des explications trop conséquentes et fastidieuses. La quantité de texte est très importante dans le web, ce serait une erreur de s’attarder dans des descriptions compliquées où le visiteur préfèrera changer de page (ou pire, quitter le site). La page la plus importante du site web consiste à prouver aux professionnels que la création de leur boutique est très simple. C’est pourquoi la page Créer présente cette élaboration sous forme de quatre étapes illustrées par une vidéo, l’utilisateur peut donc comprendre très facilement le déroulement du processus de création.
17
MaBoutique3D - Page «Créer» - 2009
MaBoutique3D - Page «Contact» - 2009
Comme le veut la convention, la dernière page est consacrée à la rubrique contact. On y retrouve toutes les informations pratiques et nécessaires :
- Les coordonnées complètes de la société Idées-3Com
- Un formulaire de contact détaillé
Conclusion Le design est le codage de ce site sont finalisés, les vidéos sont actuellement en cours de réalisation. Il est cependant possible d’accéder au site : http://www.maboutique3d.com Je me suis chargée de réaliser rapidement un design temporaire pour informer les internautes de la préparation du site, car nous avions eu un petit imprévu : l’article de journal était paru une semaine trop tôt et le site web n’existait pas encore. Plus de peur que de mal car nous avons réagit très rapidement et mis en ligne la page que j’avais très
18
vite réalisé.
3.2. Réalisations // Easy Dress
Dans le cadre de ce projet, il m’a été demandé de concevoir plusieurs maquettes web sur un principe novateur. Lorsqu’on souhaite acheter un vêtement sur Internet, il est toujours très difficile de savoir si celui-ci sera à la bonne taille. Pas évident de se faire une idée quand on a simplement quelques clichés d’un t-shirt sur un site. C’est en partenariat avec la société audiovisuelle VideoEnLigne qu’Idées-3Com a proposé le concept suivant : élaborer un site où il sera possible de fournir ses propres mensurations et de visualiser le vêtement choisi sur un véritable mannequin en mouvement. Ce système commence à émerger progressivement sur la toile et devient très tendance. Mon travail a donc consisté tout d’abord à proposer une à deux maquettes pour structurer le site. Destiné à être proposé à de grandes marques telles que La Redoute ou 3Suisses, le site web devait pouvoir permettre trois états : - un site complet avec son propre menu - un module pouvant être inséré dans un site existant
19
- une simple fenêtre «pop-up», séparée du reste du site existant
Inspiration Différents sites web proposent désormais la possibilité d’essayer virtuellement un vêtement, par le biais d’un mannequin possédant
nos
mensurations.
C’est
notamment le cas de Dessous Chéri et Knicker Picker, deux sites proposant de la lingerie par ce système.
Dessous Chéri - Vente en ligne de lingerie féminine
On choisi le modèle qui nous correspond le mieux en terme de mensurations, le vêtement que l’on désire essayer et le tour est joué. Un véritable mannequin filmé apparaît et défile sous nos yeux, avec même la possibilité de zoomer sur les détails. H&M va plus loin et propose de créer un
KnickerPicker - Vente en ligne de lingerie féminine
personnage en 3D, afin de pousser la personnalisation et surtout l’identification de l’utilisatrice. On se surprend à chercher sa couleur et coupe de cheveux, la couleur de son tein et le petit haut qui ira avec le pantcourt d’été. Il est même possible de choisir des accessoires et le type de décor derrière notre personnage. Notons tout de même que le personnage H&M - Cabine d’essaye virtuelle avec avatar 3D
20
n’est pas animé.
Maquette 1
Easy Dress - Proposition 1 pour maquette web
La structure se démarque par son originalité : la vidéo du mannequin est au centre de la page. Le choix des modèles, du type de vêtement et de la gamme sont situés à gauche ; les informations sur le produit sélectionné sont à droite de la vidéo. Par cette disposition, j’ai voulu rappeler le principe du défilé de mode. Le mannequin focalise l’attention de l’utilisateur, on le voit dès le premier coup d’oeil. Les éléments cliquables sont mis en valeur par leurs couleurs vives, le reste de la page se faisant plus discret, dans les tons rose pastel pour adoucir et contraster la page web. Le
21
graphisme aéré apporte douceur et lisibilité, chaque élément se détache bien des autres.
Easy Dress - Proposition 1 pour maquette web avec déclinaison couleur
Cependant, ce n’est pas cette version qui a été retenue, car elle était justement trop éloignée des standards d’ergonomie habituels. C’est donc la seconde maquette qui correspondait le mieux aux attentes de nos partenaires.
Maquette 2 (retenue)
22
Easy Dress - Proposition 2 pour maquette web, page d’accueil
Easy Dress - Proposition 2 pour maquette web, page produit
Facilement déclinable selon une charte graphique précise, cette maquette est plus conventionnelle. On retrouve le choix du modèle, astucieusement présenté sous la forme d’un onglet glissant qui dispraît par la suite : l’important est de donner un maximum de place aux produits proposés, ce système permet ainsi de maximiser l’espace. Le cadre vidéo est lui aussi plus grand que dans la maquette précédente, on retrouve un sens de lecture (de la gauche vers la droite) plus logique pour l’utilisateur. Dans un souci de neutralité, une déclinaison plus conventionnelle a été établie pour les clients qui
23
souhaiteraient un design facilement adaptable (voir page suivante).
Easy Dress - Déclinaison de la maquette 2, page d’accueil
24
Easy Dress - Déclinaison de la maquette 2, page produit
Les couleurs utilisées pour la maquette 2 évoluent dans la gamme du violet avec la présence de blanc pour donner une grande clareté au site :
#3d0b48
#59106a
#7c7c7c
#ffffff
La gamme utilisée pour la déclinaison est plus neutre, quelque notes de bleu viennent dynamiser l’ensemble :
#000000
#6d6d6d
#4595ba
#ffffff
La typographie utilisée pour le contenu est Arial. C’est la police de caractères Geo Sans Light qui a été choisie pour les titres et éléments de menu :
abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789 Conclusion Jusqu’à ce jour le projet demeure en suspend, la maquette a été validée et l’entreprise partenaire chargée de filmer les mannequins poursuit son travail. Participer à la réalisation des maquettes, proposer mes idées et partager différents points de vue ont été autant de choses bénéfiques pour m’aider à évoluer. Ce projet a été le premier que j’ai réalisé en arrivant en stage et il m’a permis de prendre
25
confiance en moi et de tenir compte des remarques des différents collaborateurs.
3.2. Réalisations // Plage France, Décoration intérieure
Fondée en 1987, la société Plage France
s’est
spécialisée
dans
la
décoration intérieure des sols et des murs. Pionnière dans le domaine des stickers géants muraux, Plage accorde une grand importance à la créativité de ses clients. Idées-3Com avait déjà travaillé avec l’entreprise, afin de lui concevoir son site e-commerce. Cependant, Plage ayant
récemment
fait
refondre
sa
charte graphique avec son site de présentation, il était nécessaire de procéder à des modifications graphiques et ergonomiques. Le nouveau design devait s’adapter à la charte du nouveau site de Plage, afin de conserver une
Plage France - Site de présentation de l’entreprise
26
cohérence graphique logique.
Boutique Plage - Design actuel du site de vente de stickers
Voici l’actuel site e-commerce pour la vente des stickers de la société Plage France. Idées-3Com avait réalisé celui-ci selon les critères d’ergonomie et de couleur que le commanditaire désirait. Mon travail a donc tout d’abord consisté à étudier et comprendre le fonctionnement du site actuel, car je me devais de conserver les différentes fonctionnalités présentes sur le site : module de recherche, panier de commande, module de login à un compte, les outils 3D... Après une réunion avec le client, j’ai donc commencé par déterminer les couleurs à utiliser pour le nouveau site e-commerce. L’utilisation récurrente d’un dégradé de gris sur le site de présentation devait se retrouver dans ma déclinaison graphique. J’ai également apporté des touches d’orange, de violet et de bleu : des couleurs vives présentes dans le logo du commanditaire :
#2b2b2b
#ca5c0f
#b14a99
#5d85c3
27
#0f0f0d
La typographie utilisée pour le contenu est Arial. C’est la police de caractères Mank Sans qui a été choisie pour les titres et éléments de menu :
abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789 Si la tâche qui m’a été confiée peut paraître simple : adapter un site existant à un nouveau design, il n’en est rien. Il est même parfois plus difficile que de créer soi-même une nouvelle charte graphique. On est moins libre dans ses actions, il respecter scrupuleusement l’agencement de la page, éviter de déstructurer les éléments. J’ai cependant pu me permettre quelques libertés dans ma réalisation, et proposer de nouvelles fonctionnalités ou améliorations : création d’un module de recherche avec des critères de type de pièce, diaporama flash des recettes collections. J’ai proposé deux versions pour la page d’accueil : une première diffusant un diaporama de photos de stickers, une seconde plus conventionnelle présentant les produits nouvellement arrivés.
28
Plage France - Quelques exemples de stickers muraux
Nouvelles maquettes
Plage France - Maquette 1 pour page d’accueil
29
Plage France - Maquette 2 pour page d’accueil
La nouvelle maquette se compose de deux grandes parties. Celle de gauche contient les blocs menu principal, recherche, informations sur la boutique et les produits. La seconde partie se situe sur la colonne de droite, elle contient les éléments statiques du site : panier de commande, présélection, compte client et accès aux modules 3D. Le menu de l’ancienne version, composé de plusieurs carrés, a totalement disparu pour faire place à une simple barre en dégradé, plus sobre. On retrouve le module de recherche en dessous, avec la possibilité de cocher des cases pour spécifier sa recherche selon le type de pièce à décorer. Viennent ensuite deux cadres permettant au commanditaire d’attirer l’attention du visiteur sur des promotions, produits spécifiques, nouveautés... Enfin, le diaporama des nouveautés ou la liste des produits viennent dynamiser la page.
30
Plage France - Diaporama photo type carrousel
Plage France - Maquette pour la page liste des produits
31
Plage France - Maquette pour la page d’un produit
La page de la liste des différents produits est relativement standard : on retrouve les stickers sous la forme d’une vignette photo avec son nom et son prix. Le visiteur n’a qu’à cliquer sur un produit pour accéder à une page plus complète. Dans un souci de bonne lisibilité, le nombre de lignes de vignettes se limite à quatre, afin de ne pas trop surcharger
La seconde possibilité est de choisir
l’écran.
un appartement préconçu, et de poser
Un
système
de
pagination
permet de naviguer dans la liste des
simplement le sticker sur le mur voulu.
produits. Ces deux techniques révolutionnent La page produit contient de nombreuses
l’achat sur Internet, pouvoir visualiser
informations. On retrouve un grand
le produit dans un appartement virtuel
visuel du sticker, le plus souvent dans un
dépasse la simple photo à côté d’un
environnement meublé afin de permettre
canapé.
au visiteur de se projeter plus facilement. Celui-ci a la possibilité de consulter tout
Un bloc est également consacré aux
le détail de la composition du produit,
produits qui sont similaires au sticker
il peut également zoomer sur la photo,
sélectionné.
envoyer le lien à un ami. les différentes
rapidement trouver des produits qui
ambiances sont présentées en dessous,
seront
avec l’opportunité de visualiser le produit
excellent moyen de créer une décoration
dans deux types de mise en situation.
harmonieuse
Le
visiteur
compatibles et
peut
ensemble,
cohérente
si
donc un l’on
souhaite avoir plusieurs stickers dans la La première mise en situation permet à
même pièce.
l’utilisateur de créer un appartement en 3D, via un dispositif nommé le Room
Pour finir, on retrouve les traditionnelles
Planner (créé et développé par Idées-
options d’ajout au panier de commande,
3Com). Une fois l’appartement créé, il
ou de présélection de produit (wishlist).
est possible de placer le produit comme
32
on le désire dans la pièce.
Conclusion Les autres pages du site n’ont actuellement pas encore été déclinées car nous sommes en attente de réponse auprès de Plage France. Ce projet est intéressant de par le fait qu’il m’a fallut partir d’un design existant. C’était, pour ainsi dire, la première fois que je me trouvais face à cette contrainte et j’ai dû m’adapter rapidement avec le travail d’une autre personne. C’est un exercice stimulant qui relance la créativité car on réfléchit beaucoup plus à l’adaptation que l’on effectue. la concentration
33
est maximale, il ne faut pas perdre de temps et s’éloigner des balises déjà placées.
3.2. Réalisations // MonConvertible.com
Ce projet m’a été confié vers le début de mon stage. Le commanditaire, spécialisé dans la vente de mobilier de luxe à des prix défiant toute concurrence, souhaitait faire réaliser un site e-commerce. Ce site, appelé MonConvertible.com, devait proposer des canapés convertibles en lit au look très design, le tout pour des prix accessibles au grand public. Le client désire donc casser l’image qui colle aux meubles des grands designers, un
prix
très
élevé,
un
caractère
inaccessible pour la plupart des gens du fait que les produits de grande marque sont jusqu’à 10 fois supérieurs aux prix d’usine. Cependant la tendance semble être de proposer ce type de produit, à des prix de plus en plus attractifs et intéressants (exemple : myfab.com). Le dernier fauteuil super design à la mode n’est plus inabordable, il est désormais possible de s’en procurer un pour un prix tout à fait raisonnable.
34
myfab.com - Site de vente de mobilier design à prix «discount»
Mais avant de nous intéresser aux maquettes web, je vais tout d’abord vous présenter différents essais de logos pour la marque MonConvertible.com. Le commanditaire souhaitait que nous fassions quelques propositions pour l’identité visuelle de la future marque. Je me suis tout d’abord basée sur l’idée de la transformation : le canapé qui devient lit. Mes premiers logos transposent cette action, de manière très schématique.
MonConvertible - Tests de logos
35
MonConvertible - Tests de logos
Le commanditaire ne voulait pas d’un symbole compliqué et trop détaillé, il désirait plus un sigle qu’un dessin. J’ai donc également proposé des versions plus orientées sur la typographie, avec des lettres stylisées.
36
MonConvertible - Tests de logos
MonConvertible - Tests de logos
Cependant il ne s’agissait que de quelques essais, je n’avais été prévenue que tardivement pour proposer des logos, il faut savoir que l’élaboration d’un logotype est longue et nécessite beaucoup de réflexion. Le commanditaire a eu finalement reccourt à une agence de communication visuelle, qui s’est chargée d’élaborer la charte graphique pour l’identité visuelle de MonConvertible.
Cela m’a permit de me concentrer pleinement sur le design web, mon domaine de
37
prédilection.
Inspiration La plupart des sites de vente de mobilier et objets design possèdent une structure très épurée, beaucoup de blanc et de gris, quelques touches de couleurs vives. Une grande place est donnée aux photos des objets et des meubles, le tout présenté avec goût et simplicité. Le but n’est pas d’avoir un site clinquant et bariolé, on préfèrera le rafinement et la douceur d’un savant mélange de blanc et de gris, le tout associé à une structure bien
habitat - Mobilier et décoration
nestliving - Mobilier et décoration de designers
Oxford Inns & Suites - Hôtel prestigieux roumain
Vitradirect - Mobilier et objets design
38
pensée qui laisse respirer le contenu du site web.
Après plusieurs tests, j’ai réalisé deux maquettes à proposer au commanditaire de ce projet. J’en ai tout d’abord créé une où la couleur blanche domine, avec seulement quelques touches discrètes de vert anis et des nuances de gris.
# 808080
#8cc63e
#e8e8e8
#ffffff
La typographie utilisée pour le contenu est Arial. C’est la police de caractères GeoSansLight qui a été choisie pour les titres et éléments de menu :
abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789 Maquette 1
39
MonConvertible - Maquette 1 pour page d’accueil
MonConvertible - Maquette 1 pour page livraison
40
MonConvertible - Maquette 1 pour page produit
Le site e-commerce en préparation ne propose pas un trop grand choix de canapés, le commanditaire souhaitait donc qu’on puisse facilement voir tous les produits (ou du moins une bonne partie) dès l’arrivée sur le page d’accueil. Un grand diaporama photo est diffusé sur celle-ci, avec la mise en avant de certains produits. On retrouve le catalogue des différents canapés avec un système de naviguation par flèches haut et bas. Chaque produit est représenté dans un cadre fin avec une photo et son prix. Le commanditaire insistait également sur le fait de mettre en confiance l’internaute, tous les engagements qualité sont donc mis en évidence sur la gauche de la page. On retrouve d’ailleurs cette rubrique sur toutes les pages, sauf celle concernant la fiche produit d’un canapé. Cette fiche se compose de nombreuses informations, toutes souhaitées par le commanditaire : - Nom de produit - Choix des matières - Choix des tailles - Couleurs disponibles - Description du produit - Prix - Différentes vues photos - Zoom sur la photo Les deux boutons situés sous le visuel sont spécifiques au savoir-faire d’Idées-3Com : la modélisation en 3D d’un produit et son animation. En effet, l’utilisateur pourra découvrir le canapé en trois dimensions, pivoter tout autour et activer le principe d’ouverture du canapé convertible. C’est là une différence importante entre un site e-commerce basique et un site basé sur
41
l’interactivité entre le produit et le consommateur.
C’est pourtant la seconde maquette proposée, que vous allez découvrir, qui remportera tous les suffrages. Dans celle-ci le catalogue de produits est entièrement visible. On retrouve le même système de diaporama, cependant celui-ci est plus grand. La couleur dominante pour cette maquette demeure un degradé de mauve. Le gris est également très présent dans ce design.
#5c5c5c
#ae0174
#d4d4d4
#ffffff
La typographie utilisée pour le contenu est Arial. C’est la police de caractères GeoSansLight qui a été choisie pour les titres et éléments de menu :
abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ
42
0123456789
MonConvertible - Maquette 2 pour page d’accueil
Le menu horizontal s’est un peu étoffé, on retrouve les engagements sur la droite de la page. Ceux-ci sont représentés par différents symboles, plus accrocheur qu’un simple texte. Le bas de la page, le footer, est très important. En effet, le commanditaire nous a fait savoir qu’il comptait décliner le principe de ce site pour d’autres types de meubles : table, chaise, lampe, canapé et lit. D’où la présence de ce footer, surplombé par le logo
43
principal du concept : Mon Magasin de Meubles.com.
MonConvertible - Maquette 2 pour page livraison
La page livraison se devait d’être aussi claire que possible, afin que le visiteur comprenne rapidement le fonctionnement du site. J’ai donc représenté chaque étape par un
44
pictogramme, le contenu texte nous a été fournis par le commanditaire.
MonConvertible - Maquette 2 pour page garantie qualité
Comme vous pouvez le constater, c’est à chaque fois le contenu du bandeau gris qui change, le catalogue de produits reste toujours visible. Un aspect qui a séduit le commanditaire : le visiteur peut à tout moment cliquer sur un produit pour en connaître le
45
détail, peut importe la page où il se trouve.
MonConvertible - Maquette 2 pour page garantie qualité
Si les éléments qui composent la page produit n’ont pas changés, la structure et l’apparence sont différents. Les listes déroulantes ont disparu pour faire place à des boutons correspondants aux critères du produit : taille et dimensions. Ici, la fiche produit est plus claire et aérée, on a retiré les photos supplémentaires qui deviennent inutiles
46
puisque le visiteur peut voir le canapé entièrement en 3D.
Conclusion Ce projet a été très important pour mon stage car j’ai vraiment pu proposer le fruit de ma créativité. Il était de plus très agréable de travailler pour ce type de produits, étant attirée par les objets et meubles design je n’ai pu qu’être enchantée de ce projet. Les nombreux allers-retours avec le commanditaire m’ont enseigné le fait que l’on jamais à l’abri de devoir tout changer. Le client peut parfois totalement modifier sa vision du projet et on doit alors essayer de comprendre ses nouvelles attentes, gérer au mieux ce changement pour
47
éviter de perdre du temps au niveau du planning de conception.
3.2. Réalisations // Site web Idées-3Com
Nous voici maintenant dans l’un des deux plus gros projet qu’il m’a été donné à réaliser. Lors de mon entretien de stage, j’avais fait part de mes talents en matière de design web et de mon goût pour la création 2D. On m’avait donc affirmé que je serai probablement chargée de concevoir une nouvelle charte graphique pour le site officiel de l’entreprise. C’est une lourde responsabilité, car toute l’équipe me faisait confiance et je ne devais donc pas les décevoir. Sous la direction de Dominique Ringeval, Directeur Artistique, j’ai donc entrepris de donner un nouveau souffle à l’entreprise et son site web. En effet, le site actuel avait besoin d’un sérieux remaniement graphique: l’activité de l’entreprise et son originalité technologique n’étaient pas correctement mises en valeur. Des incohérences d’ergonomie, ou encore des choix de couleurs peu esthétiques devaient être corrigés afin d’offrir une image
Idées-3Com - Ancien site web
48
dynamique et sûre d’elle.
Inspiration Après avoir longuement discuté avec Dominique, nous avons ciblé des sites web au design susceptible de nous inspirer pour celui d’Idées-3Com. Il était nécessaire d’effacer l’aspect «lourd» du site actuel, apporter du dynamisme et de la fraîcheur.
Visite Prestige - Studio de création de visite virutelle
tribeca - Agence marketing
Evaleda - Aménagement de bureaux
49
Phoenix Studio - Créateur de jeux vidéo
Un aspect épuré... le leitmotiv de Dominique était imprimé dans mon cerveau, je m’efforçais de réfléchir à un design pur, mais avec une empreinte graphique forte et reconnaissable pour l’internaute.
Une
première
difficulté
se présenta à moi : les couleurs du logotype. Il ne m’était pas évident, au
premier
abord,
de
les
placer
Idées-3Com - tests de maquette
judicieusement sans que la page ne soit trop chargée. L’idée d’une page à taille fixe était séduisante, tant par son côté pratique mais également son côté esthétique. Je me suis donc basée sur ce principe pour toutes les premières maquettes de test. La couleur blanche est dominante, avec des touches de bleu et de gris.
Idées-3Com - tests de maquette
De nombreux essais ont vu le jour, des prototypes de toutes sortes, fruits de mon imagination et de ma créativité. Après
plusieurs
essais,
Dominique
trouva que la page manquait d’orignialité. J’ai donc proposé un menu dynamique représenté sous la forme d’un cube flottant : les différentes facettes du cube correspondant à des thèmes de
Idées-3Com - tests de maquette
50
compétences d’Idées-3Com.
L’idée du cube plaisait et j’ai essayé de le décliner sous plusieurs formes. Le cube représente la notion d’espace en trois dimensions, notion caractérisant clairement les services proposés par Idées-3Com. En cliquant sur une facette, l’utilisateur Idées-3Com - tests de maquette
déclenche l’apparition de rectangles correspondant à différentes rubriques du site. L’activation d’une rubrique affiche une lightbox (troisième image) avec toutes les informations nécessaires. Un concept intéressant car l’utilisateur conserve toujours le site en arrière-plan, il ne quitte pas la page principale.
Idées-3Com - tests de maquette
J’ai fait le choix d’un fond hachuré gris pour donner du dynamisme à la page. Un simple fond coloré ne me paru pas assez puissant visuellement : les hachures focalisent l’oeil sur le bloc central de la page.
51
Idées-3Com - tests de maquette
Mais ce ne fut que le commencement des tests, Dominique avait en tête un concept bien précis mais il ne parvenait malheureusement pas à me le faire comprendre. De nombreuses autres maquettes ont donc vu le jour, me rapprochant peu à peu, pixel par pixel,
Idées-3Com - tests de maquette
vers la maquette utlime et finale. Le côté assez «étrange» de ce projet, fut le fait que Dominique réalisait luiaussi des maquettes de son côté. Nous n’étions pas toujours au courant des travaux de chacun et il nous arrivait parfois de découvrir au dernier moment
Idées-3Com - tests de maquette
des maquettes de lui comme de l’autre. Cette méthode de fonctionnement ne m’était pas du tout familière et j’avais du mal à trouver ma place dans ce système. Au bout de quelques jours, j’ai préféré aller discuter avec Dominique afin de trouver un moyen de travailler efficacement, sans que l’on se retrouve
Idées-3Com - tests de maquette
à chaque fin de journée à découvrir les travaux de l’autre. Une décision radicale fut prise : un vote général de tous les salariés allait déterminer
quelle
maquette,
parmi
certaines réalisées par Dominique et moi-même, allait remporter les suffrages.
52
Idées-3Com - tests de maquette
Au bout de plusieurs semaines de réflexion, de tests, d’essais de maquettes, ce fut finalement une de mes réalisations qui fut retenue.
Idées-3Com - Maquette page d’accueil
On retrouve le fond hachuré, cependant celui-ci est passé dans le bleu. La notion de cube est également présente avec les carrés du menu principal. Le système de page statique, la taille ne change pas, est lui-aussi conservé avec un bloc centré en plein milieu de l’écran. Des vidéos de présentation des projets réalisés sont diffusées sur la plupart des pages. Sur la page d’accueil, l’utilisateur a la possibilité de sélectionner une vidéo parmi quatre proposées. Pour finir, chaque page dispose d’un bandeau vertical sur le côté gauche, rappelant l’intitulé de la rubrique où l’on se trouve. Dans un souci de clarté, un soin particulier a été apporté au contenu texte : des phrases
53
simples qui vont à l’essentiel.
Idées-3Com - Maquette page présentation agence
Le menu principal fut tout d’abord basé sur le principe d’une animation spécifique : lorsqu’on cliquait sur une rubrique comportant des sous-rubriques (agence par exemple), apparaissaient alors au dessus d’autres carrés plus petit. Ces petits carrés représentant les éléments de sous-menus de la rubrique sélectionnée. Cependant, après plusieurs tests de compatibilité de résolution d’écran, nous avons dû modifier le comportement du menu principal. En effet, les personnes possédant un écran de résolution 1024 pixels par 768 pixels ne pouvaient pas correctement voir les éléments de sous-menu. Nous étions donc face à problème récurrent dans le domaine du web : la résolution d’écran. Bien que de plus en plus de personnes possèdent de nos jours un écran large, la
54
résolution minimale à respecter demeure le 1024 pixels de largeur.
Idées-3Com - Page présentation agence
Un système plus standard, mais néanmoins esthétique, a donc été adopté pour le sousmenu : un cadre se déroule lorsque la souris passe sur le bouton carré. Compte tenu du fait que le site soit statique, nous avons parfois eu recours à des ascenseurs pour naviguer dans certains paragraphes. Afin de ne pas briser la cohérence graphique et la couleur, les ascenseurs ont été stylisé au lieu de conserver la simple apparence des navigateurs basiques. Passons maintenant au couleurs qui ont été utilisées pour la charte graphique de ce tout nouveau site web. Comme vous pouvez le constater, le bleu prévaut dans la page et quelques notes de jaune viennent s’ajouter pour mettre en valeur les titres. Ces deux couleurs ont été tirées du logotype d’Idées-3Com :
#0186af
#f3ba35
#ffffff
55
#005571
La typographie utilisée pour le contenu est Arial. C’est la police de caractères GeoSansLight qui a été choisie pour le bandeau vertical sur la gauche de la page :
abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789 Conclusion Beaucoup à dire sur ce projet qui fut, avec le dernier que je vais vous présenter par la suite, un véritable défi graphique. Il s’agit tout d’abord du seul projet où j’ai pu travailler en étroite collaboration avec le Directeur Artistique d’Idées-3Com. C’était un combat de tous les instants car je devais défendre mes idées, proposer sans cesse de nouveaux concepts graphiques et me remettre en question quand mes propositions ne semblaient pas convenir. J’ai beaucoup appris durant ce projet, tant bien sur le plan technique que social car Dominique n’était jamais loin et nous faisions souvent de petites réunions de brainstorming pour comparer nos designs. Ce qui me paraît le plus formidable reste le fait que j’ai eu la sensation d’avoir réussi à transmettre mon concept jusqu’au bout. Il y a pourtant eu des moments difficiles où j’avais la sensation de perdre pied, mais j’ai tenu bon et ai défendu mes idées : le fruit de mes efforts a été fièrement récompensé par la mise en ligne en août du nouveau site. http://www.idees-3com.com C’est toujours la meilleure des satisfactions quand le produit fini se retrouve en ligne. On a
56
la sensation d’un travail pleinement accompli, d’un objectif atteint avec succès.
3.2. Réalisations // Centre commercial online Le projet le plus complet et important
Un travail titanesque de modélisation
auquel j’ai eu la chance de participer
3D, de programmation et de design a
reste sans conteste celui-ci. Mais je
été nécessaire. Car il faut préciser que
dois tout d’abord préciser une chose
ce monde 3D sera accessible depuis
importante : lorsque je suis arrivée à
n’importe quel ordinateur muni d’une
Idées-3Com, j’ai dû signer une clause
connexion Internet. Imaginez un instant
de confidentialité pour ce projet. Le
pouvoir visiter des magasins en 3D,
client concerné ne désire pas être connu
retrouver vos amis, discuter, décorer
avant la sortie du projet. Je n’ai donc pas
votre appartement personnel...
l’autorisation de communiquer le nom du commanditaire, ainsi que certains
Le succès grandissant des communautés
éléments graphiques qui symbolisent
sur Internet n’est pas anodin à ce
celui-ci (logotype, éléments de charte
projet. Le client veut surfer sur la
graphique spécifiques).
vague des nouvelles technologies et la démocratisation des mondes virtuels qui
Je vais essayer de vous présenter malgré
sont de plus en plus nombreux.
tout ce projet, du mieux que je le pourrai car mon travail a été très important dans
Et le commanditaire ne s’est pas arrêté
celui-ci.
à la réalisation de ce monde virtuel, il nous a aussi été demandé de créer
Présentons tout d’abord le contexte : le
un site web communautaire (de type
client est une marque bien connue de
«Facebook» ou «Copainsdavant») pour
centre commercial et a contacté Idées-
que tous les utilisateurs se retrouvent
3Com dans un but bien précis. Le projet
et partagent leurs avis sur des produits,
concerne la réalisation d’un monde
mettent en ligne des photos, des
virtuel, basé sur le principe d’une galerie
vidéos, des articles, etc... Un second
marchande composée de nombreux
site web était également à réaliser : un
magasins.
comparateur de prix (exemple : leguide,
L’utilisateur
pourra
donc
évoluer dans un centre commercial en
twenga...).
3D, se promener, visiter des boutiques (également en 3D), avoir son propre
Mais revenons sur mon travail, n’étant
appartement en trois dimensions et
pas spécialisée dans la 3D, on a eu
placer des meubles...
surtout recours à mes compétences de
57
graphiste 2D.
Afin de clarifier les différents travaux que j’ai réalisés, voici la liste des sous-projets liés au grand projet de centre commercial virtuel : - Site comparateur de prix - Site communautaire - Création de textures pour les avatars - Interface de création d’avatar Je vais vous expliquer pour chaque sous-projet son fonctionnement et les travaux que j’ai réalisés. Comme je l’ai déjà précisé, je suis tenue au secret sur de nombreux aspects graphiques et techniques, il ne me sera pas toujours possible de dévoiler totalement certaines choses.
Site comparateur de prix Dans ce projet, un gros travail de zoning a été effectué afin de correctement structurer les pages web. Nos réunions avec le client étaient nombreuses et très utiles puisque cela me permettait d’avancer vite, de corriger efficacement les imperfections des maquettes présentées. L’idée de ce site était de permettre à l’internaute de choisir ses critères de recherche sur la page d’accueil. Ainsi, il pourra choisir de rechercher un produit, une marque ou encore une boutique particulière. Autre possibilité pour chercher un produit: utiliser les différentes catégories présentées sous la forme d’icônes. On retrouve ces systèmes sur la plupart des comparateurs de prix actuels de nos jours. De plus en plus d’options s’offrent à l’utilisateur afin d’optimiser sa recherche.
Let’s Buy It - Comparateur de prix
58
PrixduNet - Comparateur de prix
Twenga - Comparateur de prix
LeGuide - Comparateur de prix
Voici donc le zoning de la page d’accueil pour le comparateur de prix :
59
Comparateur de prix - Zoning page d’accueil
Bien que ces maquettes puissent paraître simplifiées au maximum et dénuées de toute esthétique, le travail de zoning est primordial quand le site prévoit de nombreuses pages. Il est impératif de s’organiser correctement pour placer les éléments au bon endroit, réfléchir à l’espace qui sera attribué à chaque rubrique etc... Je n’ai pas seulement décliné la page
Comparateur de prix - Zoning page liste produits
d’accueil pour le zoning, mais également d’autres pages telles que le résultat d’une recherche (pour un ordinateur portable), ainsi qu’une page d’un produit spécifique. À ce stade il n’est pas du tout évident de se projeter et d’imaginer le site avec sa propre charte graphique. Ce fut d’ailleurs, au départ, quelque peu frustrant pour moi qui suis plus habituée à entrer dans le vif du sujet directement. Mais j’ai dû reconnaître que c’est une méthode très utile, surtout quand on doit
Comparateur de prix - Zoning page produit
montrer rapidement quelque chose au client. Après
avoir
validé
le
zoning
des
maquettes, j’ai donc pu m’atteler à la création de l’aspect graphique du futur comparateur de prix. En sont sorties les
60
maquettes suivantes :
Maquettes comparateur de prix
Comparateur de prix - Maquette page d’accueil
Je m’excuse par avance pour les blancs qui peuvent apparaître sur les maquettes mais je n’avais pas le choix, rapport à la clause de confidentialité. Un premier indicateur concernant la couleur symbolique pour le comparateur de prix m’avait été donné : l’orange. On retrouve la structure du zoning dans cette première maquette, je tiens à préciser que les icônes utilisés pour les catégories ne sont pas représentatives et ne servent qu’à signifier la présence des futurs icônes. Le bandeau du haut permet d’accéder à tout moment au monde 3D, au site communautaire ou à l’espace de login de compte.
61
Voici quelques pages déclinées suite au zoning :
62
Comparateur de prix - Maquette page liste produits
63
Comparateur de prix - Maquette page produit
Comme dans tout comparateur de prix, on retrouve le principe de produits à cocher pour en comparer le prix, les fonctionnalités etc... Il est possible de voir les différents prix des différents vendeurs, connaître la disponibilité des magasins. Un des intérêts majeurs de ce nouveau comparateur réside notamment dans la chose suivante : la possibilité de consulter une page sur le vendeur et de mettre une note au produit mais aussi au vendeur lui-même. Mieux encore, l’internaute pourra s’il le souhaite accéder à la boutique en 3D, dans l’univers virtuel créé par Idées-3Com. Il convient bien sûr que la boutique en question ai conclu un accord, contre monnaie sonnante et trébuchante, pour figurer dans le monde 3D. Voici les gammes de couleurs utilisées :
#f89434
#f9cc57
#434341
#ffffff
La typographie utilisée pour le contenu est Arial. C’est la police de caractères Y2K Neophyte qui a été choisie pour les éléments de titres et certains boutons :
abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789 Après ce premier jet, et quelques réunions plus tard, j’ai continué à apporter des modifications, modifier des blocs et leur emplacement. Ce n’était pas toujours chose facile car je me suis heurtée à une curieuse façon de fonctionner de la part du commanditaire. En effet, il ne fut pas rare que le client arrive en réunion avec une maquette, correspondant à l’une des miennes mais «retouchée» par ses soins. J’avoue avoir été très surprise la première fois, ce n’est après tout pas leur travail. Loin de moi l’idée de trouver mes maquettes parfaites et sans défaut mais je n’ai pas spécialement apprécié de découvrir parfois des maquettes adaptées à partir de mon propre travail. Mais cela n’a fait finalement
64
que renforcer mon envie de satisfaire les besoins du commanditaire et redoubler d’effort.
Conclusion C’est après une réunion très importante avec tous les intervenants et acteurs du projet que j’ai dû opérer un changement majeur dans mon design. Il fallait en effet essayer de mieux coller aux sites des centres commerciaux de la marque, ce qui n’était pas spécialement le cas au départ. Le projet est actuellement en «stand-by», la sortie du comparateur de prix n’est pas prévue avant fin décembre voir début 2010. Voici cependant la dernière version en cours de réalisation pour le site :
Comparateur de prix - Dernière version actuelle page d’accueil
Bien que ce projet ne soit pas encore terminé, je peux en tirer un bilan positif, même s’il est parfois difficile de comprendre les attentes du client. Mais ce n’est pas ma première expérience et j’ai toujours su correctement m’y prendre pour réussir à adapter mon travail
65
au mieux dans le but de satisfaire les attentes du commanditaire.
Site communautaire Nous abordons une partie passionnante de ce grand projet : la création d’un site communautaire. Celui-ci s’apparente directement au légendaire et mondialement connu Facebook, parfois par sa forme mais surtout par ses fonctionnalités nombreuses et variées. Le commanditaire voulait que les utilisateurs du monde 3D puissent se retrouver en une communauté d’internautes pour échanger des photos, des vidéos, des articles et des musiques. La possibilité de créer des groupes d’amis, des communautés sur des sujets divers et variés était également de la partie. Je dois avouer que j’ai beaucoup étudié en détail le fonctionnement de Facebook, étant moi-même une utilisatrice de ce site communautaire. La quantité d’informations est surprennante, voir presque effrayante tant les possibilités sont nombreuses. L’utilisateur de Facebook peut vraiment faire ce qu’il désire, il existe peu de limites aujourd’hui. Etant donné que je n’avais eu que peu de directives au départ, j’ai proposé de très nombreuses maquettes, en voici un échantillon :
Maquette 1
66
Site communautaire - Maquette 1 page profil
Site communautaire - Maquette 1 page rĂŠseau
67
Site communautaire - Maquette 1 page crĂŠation album photo
Site communautaire - Maquette 1 page crÊation d’un article
68
Site communautaire - Maquette 1 page gestion du profil
Cette première version donne un bon aperçu de la structure et du fonctionnement du site communautaire. L’utilisateur possède un profil qu’il peut garnir de diverses informations le concernant (âge, profession, loisirs, situation amoureuse etc...), il créé des albums photos et vidéos et les diffuse, écrit des articles sur des sujets qui le passionnent, se fait des amis etc... Comme je l’ai dit précédemment possibilités sont multiples et exponentielles. Après une première réunion, le commanditaire nous a fait savoir qu’il souhaitait un design plus frais et surtout plus «fun». Voici donc les maquettes et leurs évolutions :
Maquette 2
69
Site communautaire - Maquette 2 page profil dépliée
Site communautaire - Maquette 2 page profil repliée
Avec cette nouvelle maquette, j’ai proposé l’idée d’avoir des blocs pouvant se déplier et se placer où le souhaite l’utilisateur. Les couleurs ont totalement changé, des cercles viennent décorer la page et le bouton d’accès au monde 3D est beaucoup plus visible. On retrouve le bloc d’activité récente qui correspond aux différentes actions accomplies par l’utilisateur : rédaction d’un article, mise en ligne d’un album ou encore achats effectués
70
dans le monde 3D.
Maquette 3
Site communautaire - Maquette 3 page profil
71
Site communautaire - Maquette 3 page albums photo
C’est à partir ce cette dernière maquette que les choses sérieuses ont commencé. Le client était séduit par la structure de la page et le système des boutons cercles. Les rubriques principales sont situées sur le menu horizontal en haut de page : ma messagerie, mon profil, mon appartement 3D, mes notifications, mes paramètres et la déconnection. On retrouve la photo de son avatar 3D présent dans le monde virtuel, le menu sur la droite permet d’accéder aux différentes options disponibles : accès à l’activité récente, mes amis, mes photos / vidéos / articles, etc... Après plusieurs modifications autres tests, nous sommes arrivés à faire valider la maquette suivante :
Maquette 4 (validée par le client)
72
Site communautaire - Maquette 4 page profil
Site communautaire - Maquette 4 page amis
73
Site communautaire - Maquette 4 page crĂŠer une communautĂŠ
Site communautaire - Maquette 4 page communauté
La structure a bien été conservée, ce sont essentiellement des changements d’ordre colorimétrique ainsi que l’ajout de fonctionnalités qui ont été apporté. Les tons sont clairs, avec quelques notes d’orange et de vert :
#f99535
#484848
#dedede
#67a713
#ffffff
74
#f56725
La typographie utilisée pour le contenu est Arial. C’est la police de caractères Y2K Neophyte qui a été choisie pour les éléments de titres et certains boutons :
abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789 Conclusion Actuellement en cours de développement, le site communautaire devrait voir rapidement le jour sur la toile. Je dois encore décliner toutes les pages importantes afin de guider au mieux les développeurs dans leur travail, un rôle que je prends très au sérieux car j’ai moi-même effectué des études de programmation durant mon DUT et ma Licence Professionnelle. Ce projet est très ambitieux car il concurrence directement Facebook, le monstre du communautaire actuellement. J’ai hâte de découvrir les réactions du public face à ce nouveau concept qui lie habilement 2D et 3D grâce au monde virtuel. Je pense, et j’espère, que les gens sauront accueillir comme il se doit ce projet innovant. N’oublions pas que les internautes adore parler de leur vie (exemple : phénomène des blogs) et ils trouveront très
75
facilement leur place avec un site communautaire tel que celui-ci.
Création de textures pour les avatars Nous arrivons à une partie plus qu’intéressante : l’élaboration de textures pour les avatars 3D. Totalement novice en matière de texturing, c’est quelque peu anxieuse que j’ai saisi mon stylet de tablette graphique pour réaliser ma toute première peau virtuelle. Un véritable défi où Antoine (infographiste 3D) a su me guider avec patience dans les méandres de l’épiderme numérique. J’ai eu pour objectif la création de plusieurs textures pour les avatars féminins et masculins, destinés à évoluer dans le monde virtuel : - Aspect de la peau des avatars - Aspect et couleur des yeux des avatars - Maquillage de l’avatar féminin - Pilosité de l’avatar masculin
Avatars 3D - Personnages sans texture
Les infographistes 3D d’Idées-3Com travaillent sur le logiciel Blender, un logiciel gratuit et puissant. Je n’ai cependant pas eu à utiliser Blender, simplement Photoshop CS4. En effet, celui-ci me permet d’ouvrir un fichier de type OBJ qui contient le modèle 3D de la
76
partie à texturer.
Une texture se compose de plusieurs couches ou calques qui se superposent selon
un
ordre
précis.
L’une
des
couches les plus importantes est celle de la radiosité : elle fournit toutes les informations d’ombre et de lumière de la texture. C’est la radiosité qui va donner du relief et donc de la forme à un élément 3D, sans cette fameuse radiosité on obtient un objet plat sans réalisme.
Avatar 3D - Radiosité de la texture du visage féminin
J’ai essentiellement travaillé sur le visage des avatars. La texture qui compose ce visage se présente sous la forme d’un masque déplié et aplati. J’apporte mes retouches et modifications sur la texture plate, je sauvegarde et le résultat apparaît dans le fichier OBJ. C’est un moyen extrêmement pratique qui permet de travailler vite et de voir rapidement le résultat de la texture plaquée sur le modèle 3D. Avatar 3D - Texture du visage féminin
Le grain d’une peau humaine est bien plus complexe que je ne pouvais l’imaginer. Le but étant de réaliser une texture la plus proche de la réalité, je me suis appliquée très sérieusement pour donner le meilleur de moi-même. Gérer les contrastes au niveau des paupières, des lèvres et des oreilles ont été un
77
casse-tête énigmatique.
Ma passion pour le dessin m’a été d’une grande utilité pour les textures. Notamment pour les yeux, j’avais déjà le réflexe pour placer ombres et lumières dans l’iris. Je me suis ensuite attelée à l’élaboration de différents sets de maquillage pour l’avatar fénimin. Dans le monde virtuel, il était prévu que l’utilisateur puisse choisir de maquiller son avatar, il fallait donc créer les textures prévues à cet effet. Peu
familière
des
techniques
de
maquillage, je me suis documentée sur Internet afin de comprendre et assimiler l’application parfaite d’un rouge à lèvres, d’un fard à paupières ou encore d’un blush. Je me suis retrouvée face à un problème conséquent : l’univers virtuel prévoyait le choix de l’ethnie de l’avatar entre africain, asiatique et caucasien. Le souci qui s’est posé à moi a été le problème de compatibilité des couleurs de maquillage entre les différentes teintes de peaux. Une peau bronzée ne se maquille pas du tout de la même façon qu’une peau claire. J’ai dû adapter chaque couleur de maquillage pour que celle-ci soit plus ou moins compatible avec toutes les déclinaisons de peaux.
78
Avatar 3D - Texture et couleur des yeux féminins
79
Avatar 3D - Exemples de maquillages
Même traitement pour les avatars masuclins mais avec la création de plusieurs types de pilosité du visage : barbes, barbes naissantes, moustaches etc...
80
Avatar 3D - Exemples de pilosité faciale
Une fois qu’une texture de barbe est créée, on l’exporte en PNG sans rien d’autre qu’elle-même. Elle est ensuite appliquée par-dessus le visage, suivant la couleur des cheveux de l’avatar : blond, roux, chatain ou brun. La radiosité est appliquée en dernier, au dessus de toutes les autes couches. Il en va ainsi pour tous les éléments du corps, qui sont assemblés au final pour former un personnage entier et texturisé de la tête
Avatar 3D - Radiosité du visage masculin
aux pieds.
Conclusion Cette étape dans le projet du centre commercial a été la plus forte en matière d’apprentissage. J’ai pu découvrir la façon de travailler des infographistes 3D et ce fut réellement passionnant. La construction d’un personnage virtuel demande de longues heures de patience et de concentration pour parvenir à un
Avatar 3D - Texture du visage masculin
résultat le plus réaliste possible. Je suis pour ainsi dire fière que les futurs avatars portent les textures de peau, les maquillages et types de pilosité que j’ai réalisé. Comme je l’ai toujours dit c’est la meilleure des satisfaction que de voir son travail utilisé pour une chose concrète.
81
Avatar 3D - Texture pour barbe naissante rousse
Interface de création d’avatar Appelé morphotype par les développeurs, l’interface de création d’avatar a été élaborée dans le but de créer son propre personnage 3D selon des critères choisis : - Sexe (établi dès la création du compte) - Ethnie - Couleur de peau - Style de coiffure et couleur des cheveux - Maquillage (si avatar féminin) ou pilosité (si avatar masculin) - Visage - Nez - Yeux - Bouche - Mensurations - Morphologie - Vêtement haut - Vêtement bas - Chaussures - Accessoires J’ai donc été chargée de charter l’interface permettant toutes ces modifications, sachant que celle-ci devait s’intégrer sous la forme d’une fenêtre dans le monde 3D. Avant de partir tête baissée sur Photoshop, j’ai pris le temps d’étudier les différents types d’interface
82
de création d’avatar, notamment dans le domaine du jeu vidéo.
Les Sims 2 - Interface crĂŠation personnage
83
Les Sims 3 - Interface crĂŠation personnage
Lord Of The Ring Online - Interface création personnage
84
World Of Warcraft - Interface création personnage
Donjons & Dragons Online - Interface choix personnage
85
AION - Interface crĂŠation personnage
Après avoir pu me faire une bonne idée de l’aspect graphique pour l’interface j’ai entrepris de réaliser celle-ci. Il fallait un système pratique permettant de placer les nombreux critères cités précédemment. J’ai donc opté pour des onglets déroulant chaque option, se repliant lorsqu’on en ouvre un autre. Le choix des aspects de l’avatar est représenté sous le forme de vignettes rectangulaires aux bords arrondis. La création du personnage est séparée en quatre étapes distinctes, l’utilisateur peut voyager à sa guise entre celles-ci. À la base le design devait se composer principalement de la couleur verte, à cette époque je n’avais pas encore les directives du client pour la couleur orange. Voici pourquoi les exemples de maquette que vous allez découvrir sont en vert et gris. Vous noterez également que j’ai utilisé l’image d’un personnage tiré du jeu Les Sims 2 pour représenter l’avatar. Je n’avais pas à ma disposition un personnage créé par Idées-3Com. Il en va de même pour les vignettes, il ne s’agit que d’images tirées du jeu qui seront remplacées par la suite.
86
Interface création avatar - Choix de l’ethnie
Interface création avatar - Choix de la couleur de la peau
87
Interface création avatar - Choix du style de coiffure et de la couleur des cheveux
Interface création avatar - Choix du maquillage et de la forme des sourcils
88
Interface création avatar - Paramétrage de la forme du visage
Interface création avatar - Paramétrage de la forme du nez
89
Interface création avatar - Paramétrage de la forme des yeux et de leur couleur
Interface création avatar - Choix des vêtements pour le haut
90
Interface création avatar - Choix des vêtements pour le bas
Les quatre étapes sont placées sur la droite de l’interface, représentées par symboles dans des carrés aux bords arrondis. L’utilisateur peut faire pivoter son avatar afin de mieux se rendre compte du résultat de ses modifications. Si celui-ci ne souhaite pas trop réfléchir pour créer son personnage, il a la possibilité de prendre un visage prédéfini pour aller plus vite et ne pas s’attarder dans les nombreux réglages disponibles pour le morphing. Nous avons d’ailleurs récemment intégré une nouvelle fonctionnalité qui permet de choisir un avatar complétement prédéfini, de la tête aux pieds.
Conclusion J’ai adoré travailler pour ce projer car il m’a rappelé l’univers du jeu vidéo, une de mes passions. C’était très prennant de créer les différents éléments graphiques de cette interface, et surtout une grande satisfaction de pouvoir voir au final les avatars avec les types de pilosité et de maquillage que j’avais réalisés. N’ayant jamais créé ce type d’interface, j’ai surtout une grande expérience dans les sites web, j’ai été enchantée de pouvoir m’essayer à ce type de design. On se sent beaucoup plus libre dans sa créativité, même si les principes de naviguation demeurent similaires au web. Actuellement en cours de développement dans le monde virtuel, une version beta devrait sortir durant le mois d’octobre mais elle ne sera apparemment pas publique au départ. J’espère pouvoir vous en dire plus lors de ma soutenance de stage, les choses auront
91
avancé et je serai très probablement plus amenée à vous en dire davantage.
n sio cl u con 1. Problèmes et difficultés rencontrés Dans cette partie, je ne parlerai pas du temps d’adaptation au sein de l’équipe car j’ai été très bien accueillie et me suis entendue rapidement avec tous les membres d’Idées3Com. Je pense que les difficultés que j’ai pu rencontrer durant mon stage se situe principalement avec la relation client, l’organisation du travail et la communication au sein de l’équipe.
La relation avec le commanditaire Ayant déjà effectué d’autres stages en entreprise, j’ai été plusieurs fois en contact avec les différents commanditaires des projets que je devais mener à bien. Je ne suis pas de nature asociale mais j’avoue qu’il est parfois difficile de dialoguer avec le client. Le problème que j’ai souvent rencontré est le suivant : parvenir à diriger le commanditaire dans la bonne direction en matière de choix graphique, alors que celui-ci campe sur une idée bien précise mais qui serait tout simplement catastrophique pour l’esthétique du projet. J’ai été de nombreuses fois étonnée de l’acharnement avec lequel le client ne veut pas entendre raison. Et comme toute personne, la patience a des limites sauf que dans le cas présent il ne faut bien entendu pas manquer de respect à l’interlocuteur coriace. De nature quelque peu réservée, j’ai eu parfois du mal à faire valoir mes propositions. J’en ai d’ailleurs discuté avec Jean-Michel Flamant, Directeur d’Idées-3Com, qui m’a encouragé à travailler sur ma légère timidité pour être plus confiante face au client.
L’organisation du travail S’il y a peut-être une unique chose que je puisse souligner de problématique à Idées3Com, c’est la manière dont les projets nous sont communiqués. En effet il n’était absolument pas rare qu’on vienne me voir pour réaliser «un truc vite fait», chose dont j’ai tout simplement horreur. J’aime prendre le temps nécessaire pour créer un visuel correctement et apporter toutes les modifications qui s’imposent de façon à ce que le
92
résultat final soit le meilleur possible.
Je ne travaille pas spécialement lentement mais j’ai toujours dit qu’il fallait du temps pour produire quelque chose de qualité. On m’a déjà demandé de proposer plusieurs logotypes pour une entreprise en seulement quelques jours. Une chose impensable quand on sait que l’élaboration d’un logo nécessite des semaines et des semaines de réflexion. Ce n’est cependant pas le lot quotidien de mes journées à Idées-3Com, dans tous les cas je m’adapte avec le temps qu’on me donne pour réaliser au mieux mes projets.
La communication entre les différents services Un dernier point à aborder en ce qui concerne les difficultés rencontrées durant mon stage: j’ai constaté parfois des petits soucis vis-à-vis de la communication entre les graphistes et les développeurs. Rien de bien méchant mais il arrive parfois que la communication ne se fasse pas forcément correctement. Par exemple lorsque je travaillais en collaboration avec un développeur, celui-ci ne me tenait pas toujours au courant des modifications qu’il apportait dans son programme. L’ennui était que les modifications qu’il faisait engendrait des modifications dans mon design, ce qui est toujours un peu désagréable quand on découvre par hasard que des choses ont changé. Mais une fois de plus, il ne s’agit pas de soucis quotidiens, la communication entre
93
développeurs et graphistes est très bonne la plupart du temps.
2. Bilan du stage Nous arrivons à la dernière et ultime partie de ce rapport : le bilan sur ces 5 mois de stage. Un stage riche en expérience, aussi bien technique que sociale. J’ai beaucoup appris en terme de méthode de travail pour réaliser mes designs web et autres éléments graphiques. Les autres membres de l’équipe m’ont fait partager leur savoir-faire, nous avons pu échanger nos connaissances et c’était un vrai bonheur de pouvoir découvrir de nouvelles choses ainsi. Je suis désormais beaucoup plus compétente et efficace sur Photoshop et Illustrator, mes deux compagnons logiciels. Je réagis également plus vite face à la demande de la part de mes supérieurs ou collègues. Je parle de collègues, mais je pourrai plutôt dire amis. En effet, un véritable lien s’est créé au fil des jours et des semaines au sein de l’entreprise. J’ai découvert des gens formidables, qui savent allier le travail sérieux et une ambiance détendue et bonne enfant. C’était une réel bonheur de venir chaque matin car je savais que j’allais retrouver mes amis et passer une bonne journée malgré la quantité de travail à réaliser. Je pense qu’il est, de nos jours, primordial de se sentir bien sur son lieu de travail. C’est une chance pour moi d’avoir pu évoluer dans cette ambiance, conserver d’excellent rapport avec les salariés et les supérieurs. Pour finir, je ne peux qu’être heureuse et satisfaite de ce stage car j’ai découvert un univers qui m’était moins familier que la 2D : les univers virtuels communautaires et le principe du serious game. Je recommande à tous les étudiants du master de tenter leur chance à Idées-3Com, ils ne seront pas déçus de ce qu’ils pourront y apprendre, aussi bien en 2D qu’en 3D. La chance ne s’est pas arrêtée là, j’ai eu le plaisir de me voir proposer un CDI il y a deux semaines. Contrat que j’ai bien évidemment accepté, je démarre directement après mon stage, le premier septembre, en tant qu’infographiste 2D à Idées-3Com. Je parle de chance mais en réalité je ne peux que me dire que ces années d’études et de travail m’ont permis de réaliser ce que je souhaitais le plus : travailler au sein d’une équipe jeune,
94
motivée dans le domaine du graphisme.