Rapport de stage

Page 1

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.



Turn static files into dynamic content formats.

Create a flipbook
Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.