Presentation salon de la mode origami

la DOMINANTE est celle qui occupe la plus grande surface; elle doit être éclaircie, obs-curcie ou ternie. Elle va servir de support aux autres couleurs. C'est cette couleur qui doit être choisie en premier lorsque l'on re-cherche une harmonie colorée.la tonique est utilisée pure et en petite quantité. Elles est très utile pour tous les éléments de communication de votre site : boutons, liens, titres...la troisième couleur sera elle aussi modi-fiée (ternie,éclaircie ou obscurcie) et occu-pera une surface inférieure à celle occupée par la DOMINANTE.

Dossier_Présentation_Sandra_Ollier_Web1_2012_Site_Événementiel_Salon_De_La_Mode_Origami

DOSSIER DE PRÉSENTATION//

1

2 BEN

CHMARCK

10

-55

CONCEP

T

6-9

S O M M A I R E

3

4

64-103 ARCHITECTURES 56-63 TECHNOLOGIES BEN

CHMARCK

10

-55

S O M M A I R E

CONCE

PT

1

- ACCROCHE/ 6

- AVANT - PROPOS// 7

- CONCEPT// 8

- TITRE RETENU// 9

6

ACCROCHE//

Ici est l’histoire d’une rencontre explosive, celle du prêt à porter féminin et la tendance Origami, cet art ancien qui consiste à plié du papier qui aujourdui s’étand dans divers domaines.

Dans cette accroche on retrouve tout les mots clés nécessaires afin d’obtenir plus d’informations quand à la raison d’être du site. Les mots clés ici présent sont la Mode et l’Origami, le mot rencontre fait le lien entre les deux.

MODERENCONTRE

ORIGAMI

QUAND LA MODE ... RENCONTRE L’ORIGAMI

7

AVANT-PROPOS//

AVANT-PROPOS//

Cette année, Le Grand Palais, site emblématique de prestige et de création contemporaine décide de frapé fort en organisant un salon internationnal temporaire dédié au prêt-à-porter feminin. Le salon sera à la fois contemporain et accessible à tous publics. Passionnés comme amateurs y trouverons leur compte.

Le salon se déroulera à la NEF du Grand Palais, lieu d’exeption rempli de lumière qui offrira à l’aide des scénographes de talent un événement mémorable.

Le salon ce déroulera sur le thème de la Mode et de l’Origami, cette rencontre qui maintenant depuis dès années inspire les plus grands créateurs et ne cesse d’évoluée.

Ma mission en tant que Webdesigner est de créer un site web à la hauteur de cet événement. Afin d’aborder cette nouvelle création, plusieurs éléments sont à ma diposition tel que des informations concernant les futurs exposants ainsi que le programme entier du salon.

En outre, la partie graphique du site reste totalement libre même si la contrainte reste que le site doit reflété un événement original et très mode.

CONCEPT//

8

CONCEPT//

Le site événementiel doit être original et émergeant afin d’attirer le plus de visiteurs. L’internaute doit être plongé dans un univers de prêt à porter à la fois classe, mode mais aussi attractif. Afin de rendre le site dynamique, la mise en place de diverses idées vont être mises en place.

Dans un premier temps, l’univers graphique prendra le dessus sur le contenu du site afin d’imerger le visiteur dans cet univers.

Le site sera réalisé en flash afin de permettre au site de «vivre» graphiquement.

La mise en place d’une vidéo et de photos différentes chaques semaines sur les anciens défilés des créateurs aportera une notion culturelle au site et fidéfisera les visiteurs.

Un concours en ligne sera mis en place afin de faire émerger un nouveau talent de la mode.

TITRE RETENU//

9

Le titre retenu pour ce salon sera : SALON DE LA MODE ORIGAMI

Dans ce titre on retouve toutes les informations néccessaires pour la bonne compréhension de l’événement. Nous comprenons donc qu’il s’agit là d’un salon qui va mixer la Mode et la tendance Origami.


BENCH

MARK

10

2

11

- AVANT-PROPOS// 12 - LA CIBLE - COEUR DE CIBLE// 14-15 - CIBLE// 16-17 - CIBLE ÉTENDU// 18-19

- LES MOTS CLÉS// 20-21

- CONCURENTS - LES CONCURENTS// 22-23 - LES CONCURENTS SÉRIEUX// 24-25 - LES PLUS ET LES MOINS// 26-49 - BILAN// 50-51

- SOURCES D’INSPIRATIONS// 52-53 - POSITIONNEMENT ET POINTS FORTS// 54 - MAQUETTE DE HOME// 55

12

AVANT-PROPOS//

AVANT-PROPOS//

Le salon de la Mode Origami est un salon qui tend vers l’internationnal, avant de commencer à réaliser le site Web de cet événement nous devons dans un premier temps analyser en profondeur le sites concurents afin d’en sortir de cette analyse un bilan qui nous permettra de réfléchir au positionnement face à cette concurence. Celui-ci devra à la fois se positionné aux sites concurents afin de s’aligné sur le marché mais aussi offrir des plus que l’on ne retrouve pas sur les autres sites afin de ce démarqué et ainsi attiré le plus de visiteurs sur le site.

Pour cela est mis en place une recherche par internet avec une association de mots clés pertinants qui nous permettra de trouver la plus grande concurence du site.

Nous allons très vite constaté que les concurents directs n’existent pas, aucun événements de mode Origami n’a encore été traité ce qui est un point positif.

Maintenant analysons les concurents non-directs mais tout aussi importants ...

LA SEGMENTATION DÉMOGRAPHIQUE :Qui : Personnes passionnées de mode. Bloggeuse mode,stylistes, étudiants en mode et textile, etc... Homme/Femme : Jeune filleAge : 20-25 ansNiveau scolaire : Personnes salariés ou en freelance (bloggeuse) qui ont les moyensde s’acheter une bonne quantité de vêtement afin de resté à la pointe de la mode.Proffession : Secteur de la mode : styliste, bloggeuse mode, etc.Revenus : ÉlevésStatut marital : Célibataire, marié.Statut familial : Sans enfants.

LA SEGMENTATION GÉOGRAPHIQUE :Lieu d’habitat : Parisienne.

LA SEGMENTATION MARKETING PAR LE MODE DE VIE : (Quelles sont les habitudes de la cible)Activités de loisirs : ShoppingActivités sportives : Entretien phisique avec des sports doux (natation, yoga, massage, aquagym)Type d’habitation : appartement ou maisonEquipement de l’habitation : moderne, ambiance originale, recherche d’une identité.Activités culturelles : Ne rate pas les événements mode phares de l’année, vont aux expositions de mode ainsi que toutes les expositions design et arts qui se rapproche de près ou de loin à la mode.

COEUR DE CIBLE//

14

MARQUES LECTURES

MUSIQUES

PARISIÈNNE

SORTIES

EXPOS,SALONS, FESTIVAL...

RESTAURANTS, BAR

boitesjeunesse doré

15

CIBLE//

LA SEGMENTATION DÉMOGRAPHIQUE :Qui : Les gens qui suivent les tendances de mode à la télévision, qui aiment regarder les sites de mode, de bloggeuses mode, qui suivent les nouvelles créations des stylistes de mode.Homme/Femme : Jeune femme et hommeAge : 20-25 ansNiveau scolaire : Personnes salariés ou étudiantes.Proffession : Tout secteursRevenus : MoyenStatut marital : Célibataire, marié.Statut familial : Sans ou avec enfants.

LA SEGMENTATION GÉOGRAPHIQUE :Lieu d’habitat : France.

LA SEGMENTATION MARKETING PAR LE MODE DE VIE : (Quelles sont les habitudes de la cible)Activités de loisirs : ShoppingActivités sportives : Tennis, danse, natation, vélo, etc.Type d’habitation : appartementEquipement de l’habitation : Décoration sommaireActivités culturelles : Aime se cultiver en allant à des expositions diverses notamment dans la mode car ils s’y intéressent.

MARQUES LECTURES

MUSIQUES

PARISIENS

DIVERS


RESTAURANTS

17

CIBLE ÉTENDU//

LA SEGMENTATION DÉMOGRAPHIQUE :Qui : Les gens qui suivent les tendances artistiques, dans les domaines tels que la mode, l’art comptemporain, l’architechture, la danse, etc...Homme/Femme : femme et hommeAge : 20-35 ansNiveau scolaire : Personnes salarié ou étudiante.Proffession : Tout secteursRevenus : MoyenStatut marital : Célibataire, marié.Statut familial : Sans ou avec enfants.

LA SEGMENTATION GÉOGRAPHIQUE :Lieu d’habitat : France.

LA SEGMENTATION MARKETING PAR LE MODE DE VIE : (Quelles sont les habitudes de la cible)Activités de loisirs : ShoppingActivités sportives : Jogging, natation, vélo (sport gratuits).Type d’habitation : appartementEquipement de l’habitation : Décoration sommaireActivités culturelles : musées, cinéma, sorties avec les amis et la famille, découvertes de choses inconnus.

18

MARQUES LECTURES

ÉCOUTE

PARISIENS

SORTIES


19

• SALON

• SALON MODE

1, 3 MILLIARDS de résultats

172 MILLIONS de résultats


64,6 MILLIONSde résultats

64,3 MILLIONSde résultats


LES MOTS CLÉS//

• SALON MODE ORIGAMI


398 000 résultats

152 000résultats

152 000résultats

155 000résultats

155 000résultats

399 000 résultats

• SALON MODE ORIGAMI PARIS

• SALON MODE ORIGAMI PARIS 2012

685 000 résultats

594 000 résultats

21

Whosnext.com

Salon professionnel international de prêt-à-porter

www.salonduvintage.comAprès avoir accueilli 20000 visiteurs à la Cité de la Mode et du Design, le Salon du Vintage revient les 9, 10 et 11 mars 2012.Plus de 80 exposants mode, mobilier et accessoires viendront vendre leurs plus belles pièces Vintage sur plus de 1000 m2 d’exposition.

fashionsnightout.vogue.fr

Événement de rencontre de ceux qui font de la mode par le tous public

takemeout.fr

Salon de la mode (shopping, créateurs, concerts, artistes, etc.)

LES CONCURENTS//

mode-city.com

Salon international de la lingerie

www.premierevision.comPremier salon mondial des tissus d’habillement 14-16 Février 2012 Parc d’Expositions Paris Nord Villepinte

modamont.com

Salon des fournitures et accessoires pour la mode et le design

lesartsdecoratifs.fr

Salon des fournitures et accessoires pour la mode et le design

« LE SITE N’A PAS DE CONCURRENTS DIRECT, J’AI DONC SÉLECTIONNÉ DES ÉVÉNEMENTS PHARES DE MODE SE DÉROULANT SUR PARIS. ON Y RETROUVE DES EXPOSITIONS, DES

SALONS AINSI QUE DES FESTIVALS. »

23

Whosnext.com

Salon professionnel international de prêt-à-porter

salonduvintage.com

Salon du Vintage revient les 9, 10 et 11 mars 2012.Plus de 80 exposants mode, mobilier et accessoires viendront vendre leurs plus belles pièces Vintage sur plus de 1000 m2 d’exposition.

LES CONCURENTS SÉRIEUX//

fashionsnightout.vogue.fr

Événement de rencontre de ceux qui font de la mode par le tous public

takemeout.fr

Salon de la mode (shopping, créateurs, concerts, artistes, etc.)

« PARMIS LES DIVERS CONCURRENTS SÉLECTIONNÉS, J’AI CHOISI QUATRE CONCURRENTS SÉRIEUX DÛ À LEUR NOTORIÉTÉ OU LEUR DESIGN DE SITE. »

salonduvintage.com

LES PLUS ETLES MOINS//

26

1/

27


1/salonduvintage.com

ERGONOMIE

POINTS FORTS

POINTS FAIBLES

- Un menu de navigation vertical placé à un bonne endroit (près du contenu principal du site).- Lien en bas du site afin de remonter directement en haut de la page.

- Logo centré et gros avec des textes bien lisibles.- Possibilité de téléchargement de PDF (dossier de presse, revue de presse).

- Une rubrique contacts et infos pratiques avec le plan.- Rubrique crédits photos.

- Inscription Newsletters ainsi qu’un lien Facebook sur la Home page.

- Logo présent que sur la page d’accueil.- On retrouve une bannière de pub qui n’a pas de rapport avec le sujet du site se situe dans le footer de la Home

page ce qui détourne l’attention du sujet principale.- Défilement horizontale trop long.

- Pas de phrase d’accroche avec le logo.- Quand on change de page, une deuxième onglet ne s’ouvre pas et on pert la page précédente.

- Pas assez de texte en général, on ne retrouve pas non plus de texte ou légende avec les photos ou vidéos.- Des éléments dans la Home page donne envie de cliquer dessus (dessins des produits) mais il ne s’agit que

d’une image non-cliquable

ARCHITECTURE DE L’INFORMATION

POINTS FORTS

POINTS FAIBLES

- Bonne architecture de l’information sur la Home page avec comme éléments premier le logo puis la date, les horaires de l’événement, des icônes qui représentent les éléments qui compose le salon, le lieu, les partenaires

en dernière position.

- Les photos des gens de facebook sur la Home page en dessous du lien Facebook sont inutiles.- Informations non cliquables alors qu’on a envie d’avoir des liens.

- Manque d’informations textuelle sur l’événement en général.Le menu de navigation aurait pu être séparer en deux menus afin d’avoir un contenu moins lourd.


1/salonduvintage.com

DESIGN

POINTS FORTS

POINTS FAIBLES

- - Le Graphisme du site nous immerge dans l’univers vintage avec une touche de modernité en plus.- Univers à la fois moderne et utilisant bien les codes graphiques du vintage.- Détails du site travaillé (listes à puces, fonds tramés, effets coutures, etc.).

- Couleurs violette qui représente bien le côté décalé de l’événement et qui donne une identité au site.

- Même si le site est plutôt immersif, il reste néanmoins pas très original concernant le sujet, celui-ci reprend les mêmes codes graphiques que ceux du graphisme vintage sans apporté un plus.

Le site du salon du vintage reste un site correcte qui graphiquement reste intéressant. Les informations sont bien

structurés mais mérites tout de même une bonne réflexion sur certains points afin de la rendre plus agréable de

navigation. Celui-ci n’a pas une ergonomie très poussé avec un logo présent que sur la Home page et avec

un scroll vertical assez long. Même si le site tien bien la route, celui-ci ne ce différencie pas avec un graphisme

de site très basique. Celui-ci manque donc de dynamisme en général (animations, phrase d’accroche) pour

le rendre plus attractif.

BILAN//

31

whosnext.com2/


32

33


2/whosnext.com

ERGONOMIE

POINTS FORTS

POINTS FAIBLES

- On retrouve deux menus de navigation, un vertical avec chaque pièces du lieu et leurs activités et un horizontal dans le footer avec des informations utiles à propos de l’événement (contact, presse, partenaires, vidéos, etc...).

- Liens des rubriques identifiable avec un changement de couleur quand on passe la souris dessus.- Défilement vertical agréable avec les menus qui reste fixe afin de revenir aux autre pages quand on le désire.

- Lien vers leur blog qui s’ouvre dans une autre fenêtre.- Logo de l’organisateur de l’événement présent en bas à droite du site, en cliquant dessus une fenêtre s’ouvre afin

de tombé su le site du logo. - Dans le menu horizontale, on retrouve un menu verticale pour changer la langue du site.

- Lien Facebook, Twitter et Vimeo avec des icônes pour une bonne lecture.

- Absence de lien pour remonté dans le haut de la page.- Mise à part la Home page, quand on défile verticalement les autres pages, les informations principales (logo,

date) se scroll avec le site et nous laisse sans ces informations essentielles.- En bas de la Home page, un lien pour «téléchargement» des photos de l’événement est présent mais celui-ci est

sous forme d’image et celle-ci est rogné par le bas du site.


POINTS FORTS

POINTS FAIBLES

- Bonne architecture de l’information sur la Home page avec comme éléments premier le logo puis la date, les horaires de l’événement, des icônes qui représentent les éléments qui compose le salon, le lieu, les partenaires

en dernière position.- Les textes dans les pages sont aérés avec des photos de qualité ce qui donne envie de lire.

Logo ainsi que le menu déroulant vertical et la date défile avec la page vertical du coup ces informations ne sont plus présentent sur le site.


2/whosnext.com

DESIGN

POINTS FORTS

POINTS FAIBLES

- On retrouve beaucoup de gris sur le site ce qui met en valeur la couleur des liens et des photographies.- Belle mise en valeur des textes avec des photographies avec des zoom ou des panoramas.

- Formes graphiques que l’on retrouve dans tout le site qui reste original (fait pensé aux mobiles de l’artiste Calder) et change de couleur en fonction

des couleurs des liens ce qui reste une bonne cohérence.

- Même si le logo reste intéressant graphiquement, les informations à l’intérieurs ne sont pas du tout lisible. (prêt à porter paris).

- On ne dissocie pas bien le logo des informations autour vu que les couleurs reste les mêmes.

Un site qui reste ergonomiquement plaisant avec une navigation vertival qui reste agréable avec une bonne

répartition des informations dans l’espace (menus, textes et photos). Côté graphique le logo reste original avec

sa verticalité mais les informations à l’intérieur sont trop peu lisible. Le graphisme du site reste sobre mais avec

une pointe d’originalité avec des formes géométriques qui correspond bien aux diverses pièces du lieu. Pour

conclure on peut donc dire que se site mériterait quelques petites modifications afin qu’il soit plus performants.

BILAN//

37

3/ fashionsnightout.vogue.fr/


38

39



ERGONOMIE

POINTS FORTS

POINTS FAIBLES

- On retrouve deux menu de navigation bien agencés avec un menu horizontal dans le header avec des icônes Facebook, Twitter et Tumblr retravaillés.

- Les textes sont écrit assez gros pour une bonne lisibilité.- En cliquant sur le logo on revient sur la page d’accueil.

- Logos des partenaires dans le footer.

- Quand on clique sur les liens externes la page ne s’ouvre pas dans un seconde fenêtre.- Une vidéo ce lance automatiquement lorsque l’on rentre dans la Home page ce qui devient

agaçant à la longue.


POINTS FORTS

POINTS FAIBLES

- Le logo est composé d’informations essentielles, on retrouve le titre de l’événement ainsi que la date et le lieu.En entrant sur le Home page on tombe directement sur un article qui présente l’événement avec en dessous une

vidéo pour encore plus d’immersion et de compréhension de celui-ci.- Dans le header on retrouve des liens vers les réseaux sociaux avec des icônes ce qui permet

de s’y rendre facilement.

Le vocabulaire du site n’est pas très accessible même s’il reste compréhensible, on retrouve par exemple l’acronyme de VOGUE FASHION NIGHT : VFN.



DESIGN

POINTS FORTS

POINTS FAIBLES

- Le logo reste bien visible.- Belles photos dans le site avec l’utilisation graphique de Polaroid autour des photos, cet élément est beaucoup

repris dans le monde de la mode.- Environnement moderne.

- Le site reste sobre et classe mais il y beaucoup d’utilisation de noir ce qui ne le rend pas très agréable visuellement quand on reste longtemps dessus.

- Une image en noir et blanc (vectorisée) de la Tour Eiffel est mise en arrière plan, le visuel renvoi un effet négligé.

Le site reste correct ergonomiquement mais de bonnes modifications restes à faire tel qu’ouvrir les pages ex-

ternes dans une autre fenêtre ou revoir la vidéo de la Home qui devient agaçante au d’un certain temps. A

part le logo qui reste clair même s’il est simple on ne retrouve pas de fil graphique dans le site, celui-ci reste

sobre voir trop foncé avec une image de background qui donne un effet négligé.

BILAN//

43

4/ takemeout.fr


44

45


4/ takemeout.fr

ERGONOMIE

POINTS FORTS

POINTS FAIBLES

- Le site offre une navigation simple ce qui permet un accès à l’information très rapidement, l’énumérations de la date, de l’adresse, des diverses activités ainsi que la liste des partenaires.

- Le site en lui même est seulement composé d’une Home page avec une image composé de texte et d’une image, on ne retrouve aucun lien externe à l’événement qui pourrait nous informer d’avantage.


POINTS FORTS

POINTS FAIBLES

- On retrouve toutes les informations nécéssaires : logo, date, lieu, adresse, etc...

Même si les seules informations que l’on a sont correct, on aurait aimer avoir plus d’images, d’articles, de vidéos, d’explication de l’événement.


4/ takemeout.fr

DESIGN

POINTS FORTS

POINTS FAIBLES

- On pourrait dire que l’image ce suffit à elle-même car on retrouve une photo avec un visuel fort, un logo qui correspond très bien à la photos de fond.

- Le logo reste dynamique.

- L’événement manque d’univers graphique.- Le logo est disposé par dessus une image ce qui le rend moins lisible.

Ici, on peut constater un parti pris de site plutôt intéressant avec une seule image qui regroupe toutes les infor-

mations principales. Même si le site manque d’informations supplémentaires sur l’événement celui-ci reste cor-

rect avec une idée originale de ne mettre qu’une seule image. On peut dire que ce parti pris peut être à la fois

vu positivement par certaines personnes et négativement par d’autres qui s’attende à un univers plus complet.

BILAN//

49

BILAN//

BILAN GÉNÉRAL//

Au niveau de l’ergonomie des différents sites, celle-ci est correct dans l’ensemble mais elle n’est pas étudiée en profondeur, les navigations de site sont plus agréables pour certains site que d’autres mais on remarque un réel problème avec les liens externes qui ne s’ouvre pas dans une seconde page.

On constate aussi des difficultés de lisibilité du logo parfois, un design de site qui reste sobre, peu immersif voir vide.

Ces sites ont en commun pour la plupart des photos de mode (de qualité), des articles, avec beaucoups de vidéos, des liens vers les réseaux sociaux ce qui est important pour la bonne diffusion de l’information.

50

INSPIRATIONS//

http://www.estudioagraph.com/

http://www.whosnext.com/

http://www.lukx.nl/

http://www.whosnext.com/ http://www.kipling.com/fr-fr/

POSITIONNEMENT ETLES POINTS FORTS//

54

POSITIONNEMENT//

Concernant les rubriques et les informations composant le site, je vais me référé aux sites concurrents afin de proposer le même type de services, de programme que mes concurents. Je vais mettre des vidéos, des photos ainsi que des articles afin de faire un site qui se colle aux autres sites de mode.

Graphiquement, je vais rester dans les codes couleurs de la mode avec un logo qui se rapproche de ceux qui existe actuellement. Mon site se positionnera graphiquement aux autres sites vu afin de garder cette univers à la fois sobre et coloré.

LES POINTS FORTS//

Les points forts du site ce retrouveront graphiquement avec un univers très immersif. Le site sera réalisé entièrement en Flash ce qui donnera du dynamisme au site.

On retrouvera une phrase d’accroche afin de bien faire comprendre l’événement aux visiteurs.Le site restera à la fois ouvert aux publics mais aussi aux proffessionnelles.

Nous pouvons donc conclure qu’avec un design fort, une cible à la fois proffessionnel et tous publics, une arboresence de site original le site aura de bons atouts pour concurencer de grands événements mode sur Paris.

MAQUETTE DEHOME//

55

TEC

HNOLO

GIES

56

3

57

- RUBRIQUES ET MODULES/ 58-59

- ERGONOMIE ET NAVIGATION// 60

- MÉDIAS ET TRAITEMENT VISUEL// 61

- OUTILS ENVISAGÉS ET PROCESSUS DE MISE À JOUR// 62

MENU PRINCIPALE//

On retrouve sur la home-page du site un menu principale situé à même du visuel graphique qui va permettre de naviguer dans le site en toute facilité.

ACCUEILContient les informations les plus importantes du site tel que le logo, la date, les horaires, les boutons de la rubrique.

SALONPrésentation du salon, photos, une vidéo de présentation.

VISITERDates et horaires du salon, informations concernant le lieu (plan), optention du badge.

EXPOSANTSListes des exposants avec un lien vers leur site respectif.

DÉFILÉSOn retrouve les dates des défilés prochains avec toutes les informations nécéssaires sur les créateurs.

CONCOURSInformations concernant le concours avec un PDF explicatif en téléchargement.

CONTACTLa page contact rassemble des informations pour contacté les représentants pour des requêtes, on y retrouve aussi les partenaires de l’évènement, les mentions légales ainsi que des dossiers de presse téléchargeables.

RUBRIQUES ETMODULES//

MISE EN PLACE DE MODULES//

SONOn retrouvera un bouton sur le site afin que l’internaute puisse gérer lui même le son et décider de l’enlever s’il le désire.

LANGUESVu que le site est internationnale un petit menu déroulant sera mis en place afin de choisir sa langue sur la home-page du site.

FULLSCREENUn icône afin de mettre le site en pleine écran sera à disposition pour plus d’imersion dans l’univers du site.

FORMULAIRESUn formulaire sera mis en place dans la page CONCOURS afin d’obtenir le badge.

59

ERGONOMIE ETNAVIGATION//

ERGONOMIE

L’ergonomie d’un site web va premettre de naviguer facilement et de manière intuitive dans le site web, ce qui permettra à l’intérnaute d’accédé aux informations désirées le plus rapidement possible. Les visiteurs du site aurons donc un confort et une qualité de navigation dans le site qui leur donnerons envie d’y revenir.

- Le site ici présenté offrira un graphisme de site exploité au maximum ainsi qu’une qualité graphique ce qui donnera envie aux visiteurs d’y rester et d’y revenir et donnera au site une bonne image.- Le site sera dynamique (utilisation du logiciel Flash) afin d’attirer l’oeil du visiteur.- Le temps de chargement sera minimisé avec une optimisation des images, vidéos...tout en gargant une qualité à l’oeil.- Le site offrira une hierarchisation des informations afin de le rendre le plus compréhensible possible. - La taille du site s’adaptera à tous les formats d’écrans.- Tout liens sera repérable dans la page web (changement d’état au survol).- Il y aura une adaptation de la lisibilité des informations en fonction de leur importance.- On retrouvera un gabarit dans les pages du site, celles-ci ce ressemblerons pour créer un fil rouge.

NAVIGATION

- La navigation du site ce fera sous forme de fênetre que l’on ouvre et referme avec le header et le footer toujours visible.- Un menu sera mis en place en fonction de la popolarité des contenus.- Le logo de l’évènement ainsi que les informations situés dans le header et le footer resterons visibles à tout moments, on parle ici de navigation structurelle.

60

MÉDIAS ET TRAITEMENT VISUEL//

MÉDIAS

Les médias se retrouverons dans le site afin de le dynamiser et de concretiser l’évènement. Dans la page Salon on y retrouvera une vidéo et des photos que l’on peut zoomer, dans la page Défilés des photos déroulerons sous forme de slides, dans la page Espace jeux en ligne un jeux crée en flash sera disponible.

TRAITEMENT VISUEL

Le graphisme du site restera à la fois sobre et comtemporain afin d’offrir aux visiteurs à la fois une qualité de site mais aussi une ambiance originale et «fraiche». Il sera en mageur partie blanc et gris clair avec des couleurs très dynamiques tel que la couleur du logo.

On y retrouvera des visuels détourés et traités graphiquement tout au long du site avec des illustrations sur le thème de la mode et de l’origami. La Home-Page inclura une grosse partie graphique afin de s’imerger dans l’univers.

61

OUTILS ENVISAGÉS ET PROCESSUS DE MISE À JOUR//

OUTILS ENVISAGÉS//

Le site sera entièrement réalisé en Flash, mes commanditaires désirez un site très émergeant avec beaucoups de dynamisme. Mes intentions ce sont porté vers le Full Flash.

PROCESSUS DE MISE À JOUR//

Le Grand Palais voit grand pour cet évènement, la mise à jour n’est en aucun cas un soucis car le budget ne pose pas de problème. Les mises à jour sur flash seront effectuées par des Webdesigners qui prendrons la suite des opérations si je ne suis pas affectée à ce poste.

- chaques semaines les photos de la page SALON devrons être changé afin de donné vie au site et ainsi fidélisé les visiteurs. - La page d’accueil changera d’aspect graphiquement toutes les trois semaines (changement d’accessoires, de mannequin, d’illustrations...).- La vidéo restera la même jusqu’à la fin de l’évènement, des vidéos supplémentaires seront ajoutés un fois le salon terminé.- La commande de badges n’existera plus une fois le salon fini.- Changement d’aspet de la page CONCOURS une fois le concours terminer le nom du grand gagant sera mis en ligne à une certaine date et heure.

62

OUTILS ENVISAGÉS ET PROCESSUS DE MISE À JOUR//

ARCH

ITECT

URES

64

4

65

- ARBORESCENCE GÉNÉRALE/ 66

- ARBORESCENCE FONCTIONNELLE// 67-69

- ZONING// 70-83

- GABARITS// 84-97

- WIREFRAMES// 98-103

ARBORESCENCE GÉNÉRALE//

NIVEAU 0

NIVEAU 1

NIVEAU 2

Date,horaires

L ieu

Badges

Presentat ion 11 Nov. Envoi du proje t

Photos 20 Nov.

Vidéo 25 Nov.Zoom plan

Commande badge

Informat ionsprat iques

Par tenaires

Ment ionslégales

Presse

HOME

SALON VISITER EXPOSANTS DÉFILÉS CONCOURS CONTACT

66

AUTORISAT IONS REFUS

ACHETER VOTRE BADGE

INVITAT ION GRATUITE ENTRER CODE INVITAT ION

IMPRESS ION DU BADGE

CODE ACCEPTÉ

CODE REFUSÉ

COMMANDE BADGE

ETAPE SUIVANTE

ETAPE SUIVANTE

ETAPE SUIVANTE

PAS REMPL I

PAS REMPL I

PAS REMPL I

MESSAGE ERREUR

MESSAGE ERREUR

MESSAGE ERREUR

MESSAGE ERREUR

REMPL IR UN FORMULAIRE

LES COORDONNÉES

INFORMATIONS

ARBORESCENCE FONCTIONELLE//

AUTORISAT IONS REFUS

ENVOI DEL’E -MAIL

ENVOI DU PROJET (ges t ion de l ’e-mai l )

RENTRER L’E -MAIL

POIDS DE LA P IÈCE JOINTE

E-MAIL CORRECT

POIDS ACCEPTÉ

E-MAIL REFUSÉ

POIDS REFUSÉ

AUTORISAT IONSREFUS REFUS

ENVOI DEL’E -MAIL

CONTACT (gest ion de l ’e-mai l )

RENTRER L’E -MAIL E-MAIL CORRECT

E-MAIL REFUSÉ

ZONING //

FORCE V ISUELLE EN %

100 % 80 % 50 % 20 %

ZONING DE LA PAGE D’ACCUEIL

LOGO ACCROCHE, DATE, L IEU

NAV

NAV

FOOTER

NAV

NAV

LOGO GRAND PALAIS ,

FULLSREEN, SON

NAV

NAV


100 % 80 % 50 % 20 %

ZONING DE LA PAGE SALON - SOUS RUBRIQUE PRÉSENTAT ION

LOGO

TITRE RUBR IQUE CROIX FERME FENÊTRE

ACCROCHE, DATE, L IEU

FOOTER

LOGO GRAND PALAIS ,

FULLSREEN, SON

TEXTE SOUS-MENU RUBR IQUES

I L LUSTRAT ION

ZONING //


100 % 80 % 50 % 20 %

ZONING DE LA PAGE SALON - SOUS RUBR IQUE PHOTOS

LOGO



FOOTER

LOGO GRAND PALAIS ,

FULLSREEN, SON


PHOTO

PHOTO

FLÈCHENAVIGAT ION

FLÈCHENAVIGAT ION

PHOTO

PHOTO

PHOTO

PHOTO

PHOTO

PHOTO

PHOTO

PHOTO

PHOTO

PHOTO


100 % 80 % 50 % 20 %

ZONING DE LA PAGE SALON - SOUS RUBR IQUE VIDÉO

LOGO



FOOTER

LOGO GRAND PALAIS ,

FULLSREEN, SON

SOUS-MENU RUBR IQUES

TEXTE VIDÉO

ILLUSTRAT ION

ZONING //


100 % 80 % 50 % 20 %

ZONING DE LA PAGE V IS ITER - SOUS RUBR IQUE DATES, HORAIRES

LOGO



FOOTER

LOGO GRAND PALAIS ,

FULLSREEN, SON


I L LUSTRAT IONTEXTE


100 % 80 % 50 % 20 %

ZONING DE LA PAGE V IS ITER - SOUS RUBR IQUE L IEU

LOGO



FOOTER

LOGO GRAND PALAIS ,

FULLSREEN, SON


PHOTO

TEXTEPLAN

BOUTONZOOMPLAN

ZONING //


100 % 80 % 50 % 20 %

ZONING DE LA PAGE V IS ITER - SOUS RUBR IQUE BADGES

LOGO



FOOTER

LOGO GRAND PALAIS ,

FULLSREEN, SON


TEXTEI L LUSTRAT IONBADGE

BOUTONCOMMANDER

BOUTONCOMMANDER


100 % 80 % 50 % 20 %

ZONING DE LA PAGE EXPOSANTS

LOGO



FOOTER

LOGO GRAND PALAIS ,

FULLSREEN, SON

BOUTONS LETTRES ALPHABET

L ISTE EXPOSANTS

ZONING //


100 % 80 % 50 % 20 %

ZONING DE LA PAGE DÉF I LÉS - LE GABARIT RESTE LE MÊME POUR LES TROIS SOUS-RUBR IQUES

LOGO



FOOTER

LOGO GRAND PALAIS ,

FULLSREEN, SON

TEXTE

SL IDEPHOTOS

TEXTE EXPL ICAT IF



100 % 80 % 50 % 20 %

ZONING DE LA PAGE CONCOURS

LOGO



FOOTER

LOGO GRAND PALAIS ,

FULLSREEN, SON

BOUTON TÉLÉCHARGEMENT PDF

L IEN BOITE MAIL

PHOTODÉTOURÉ

TEXTE EXPL ICAT IF

ZONING //


100 % 80 % 50 % 20 %

ZONING DE LA PAGE CONTACT - INFORMATIONS PRAT IQUES

LOGO



FOOTER

LOGO GRAND PALAIS ,

FULLSREEN, SON


TEXTE TEXTE

I L LUSTRAT ION


100 % 80 % 50 % 20 %

ZONING DE LA PAGE CONTACT - PARTENAIRES

LOGO



FOOTER

LOGO GRAND PALAIS ,

FULLSREEN, SON


LOGOS PARTENAIRES

ZONING //


100 % 80 % 50 % 20 %

ZONING DE LA PAGE CONTACT - MENTIONS LÉGALES

LOGO



FOOTER

LOGO GRAND PALAIS ,

FULLSREEN, SON


TEXTE

I L LUSTRAT ION


100 % 80 % 50 % 20 %

ZONING DE LA PAGE CONTACT - PRESSE

LOGO



FOOTER

LOGO GRAND PALAIS ,

FULLSREEN, SON


IMG DOSSIER

DE PRESSE

IMG DOSSIER

DE PRESSE

IMG DOSSIER

DE PRESSE

BOUTON DE TÉLÉCHARGEMENT



TEXTE

GABARITS //

GABARIT DE LA PAGE D’ACCUEIL

LOGO ACCROCHE, DATE, L IEULOGO

GRAND PALAIS ,

FULLSREEN, SON

359 px 51 px 9 px

57 px

164 px

94 px

532

px

868 px

79 px

14 px 107 px

68 px

56 px

77 px

92 px

77 px

65 px

970 px

148 px168 px69 px

16 px 8 px13 px25 px

17 px

17 px17 px

17 px

17 px

17 px

LE SALON

VISITEREXPOSANTS

DÉFILÉS

CONCOURS

CONTACT

GABARIT DE LA PAGE SALON - PRÉSENTAT ION


GRAND PALAIS ,

FULLSREEN, SON

359px 51px 9px

57px

164px

94px

26p

x

9p

x9

px

9p

x

79px

89px

355px364px

16px 16p

x

884px

248

px

482p

x

151p

x

78px

43px

33px

14px 107px

970px

148px168px69px

16px 8px13px25px

SALONCROIX FERME FENÊTRE


I L LUSTRAT ION(TRAIT F IN)

GABARITS //

GABARIT DE LA PAGE SALON - PHOTOS


GRAND PALAIS ,

FULLSREEN, SON

359px 51px 9px

57px

164px

94px

26p

x

133

px

133px

418

px

9p

x9

px

9p

x

79px

89px 16px 16p

x

884px

560px

482p

x

78px

42px

42p

x

43px

33px

14px 107px

970px

148px168px69px

16px 8px13px25px



FLÈCHENAVIGAT ION

GABARIT DE LA PAGE SALON - V IDÉO


GRAND PALAIS ,

FULLSREEN, SON

359px 51px 9px

57px

164px

94px

26p

x

309

px

338

px

9p

x9

px

9p

x

79px

89px 16px 16p

x

884px

445px

151px

197px

482p

x

78px

43px

33px

14px 107px

970px

148px168px69px

16px 8px13px25px



TEXTE

GABARITS //

GABARIT DE LA PAGE V IS I TER - DATES, HORAIRES


TEXTE

LOGO GRAND PALAIS ,

FULLSREEN, SON

359px 51px 9px

57px

164px

94px

26p

x

191

px

161p

x

9p

x9

px

9p

x

79px

89px 16px 16p

x

884px

482p

x

78px

43px

33px

14px 107px

970px

148px168px69px

16px 8px13px25px

VISITERCROIX FERME FENÊTRE


359px

143px


GABARIT DE LA PAGE V IS I TER - L I EU


TEXTEPLAN

LOGO GRAND PALAIS ,

FULLSREEN, SON

359px 51px 9px

57px

164px

94px

26p

x

74p

x24

3p

x

118

px

9p

x9

px

9p

x

79px

89px 16px 16p

x

12p

x

884px

482p

x

78px

43px

33px

14px 107px

970px

148px168px69px

16px 8px13px25px


BOUTONZOOM


357px

704px

179px 87px

151px

GABARITS //

GABARIT DE LA PAGE V IS I TER - BADGES


TEXTE

I L LUSTRAT ION

BOUTON

BOUTON

LOGO GRAND PALAIS ,

FULLSREEN, SON

359px

228px

164px

192px 83px

51px 9px

57px

164px

94px

26p

x

202

px

151p

x

9p

x

14

px

9p

x9

px

79px

89px 16px 16p

x

884px

482p

x

38p

x

78px

43px

33px

14px 107px

970px

148px168px69px

16px 8px13px25px



151px

GABARIT DE LA PAGE EXPOSANTS


L ISTES DES EXPOSANTS

LOGO GRAND PALAIS ,

FULLSREEN, SON

359px

115px

544px

437px144px

51px 9px

57px

164px

94px

26p

x

9p

x

18p

x

18p

x23

4p

x

79px

89px 16px 16p

x

884px

482p

x

14px 107px

970px

148px168px69px

16px 8px13px25px

EXPOSANTSCROIX FERME FENÊTRE

BOUTONS ALPHABET

BOUTON

GABARITS //

GABARIT DE LA PAGE DÉF I LÉS LE GABARIT RESTE LE MÊME POUR LES TROIS SOUS-RUBR IQUES


TEXTE

LOGO GRAND PALAIS ,

FULLSREEN, SON

359px 51px 9px

57px

164px

94px

26p

x

175

px

262

px

9px

9px

9px

79px

89px

78px

16px 16p

x

884px

351px 274px

482p

x

14px 107px

970px

148px168px69px

16px 8px13px25px

DÉFILÉSCROIX FERME FENÊTRE

LOREM IPSUM TOTO GEZIOG BIZBE


151px

GABARIT DE LA PAGE CONCOURS


TEXTE

LOGO GRAND PALAIS ,

FULLSREEN, SON

359px

332px 235px

51px 9px

57px

164px

94px

26p

x

198

px

383p

x

79px

89px 16px 16p

x

884px

482p

x

14px 107px

970px

148px168px69px

16px 8px13px25px

CONCOURSCROIX FERME FENÊTRE

151px

GABARITS //

GABARIT DE LA PAGE CONTACT - INFORMATIONS PRAT IQUES


TEXTE


LOGO GRAND PALAIS ,

FULLSREEN, SON

359px 51px 9px

57px

164px

94px

26p

x18

px 18

px

9p

x

387p

x

247p

x

86px 454px

361px

72px

59px

40px

79px

89px 16px 16p

x

884px

482p

x

14px 107px

970px

148px168px69px

16px 8px13px25px

CONTACTCROIX FERME FENÊTRE

151px

GABARIT DE LA PAGE CONTACT - PARTENAIRES


GRAND PALAIS ,

FULLSREEN, SON

359px 51px 9px

57px

164px

94px

26p

x18

px 18

px

66p

x

9p

x

86px88px 682px

386p

x

72px

59px

40px

79px

89px 16px 16p

x

884px

482p

x

14px 107px

970px

148px168px69px

16px 8px13px25

CONTACT

LOGOPARTENAIRE

CROIX FERME FENÊTRE

151px

GABARITS //

GABARIT DE LA PAGE CONTACT - MENTIONS LÉGALES


TEXTE

LOGO GRAND PALAIS ,

FULLSREEN, SON

359px 51px 9px

57px

164px

94px

26p

x18

px 18

px

9p

x

86px 290px

72px

59px

40px

79px

89px 16px 16p

x

884px

482p

x

14px 107px

970px

148px168px69px

16px 8px13px25px


151px

374

px

247p

x

361px


GABARIT DE LA PAGE CONTACT - PRESSE


TEXTE

LOGO GRAND PALAIS ,

FULLSREEN, SON

359px 51px 9px

57px

164px

94px

26p

x18

px

236p

x

18p

x9

px

86px

169px

364px 78px

14p

x

75p

x

72px

59px

40px

79px

89px 16px 16p

x

884px

482p

x

14px 107px

970px

148px168px69px

16px 8px13px25px


151px

BOUTON BOUTON BOUTON

WIREFRAMES//

XOXOXOXO XOXOXO XOXOLOREM IPSUM DOLOR S IT AMET, CONSECTETUR

ADIP ISC ING EL I T. MAURIS FACIL IS I

S I T AMET, CONSECTETUR ADIP ISC ING EL I T. M

XOXOXO

XOXOXO

XOXOXO

XOXOXO

XOXOXO

XO XOXOXO

NAV

EFFET PARALLAXE PAGE D’ACCUEIL// Sur la page d’accueil, on retrouver un effet parallaxe léger sur les visuels ainsi que sur le menu de navigation.

Bouton de navigation cliquable qui par interpolation se transforme en fenêtre.

WIREFRAME DE LA PAGE D’ACCUEI L

LOREM IPSUM DOLORF/T

1

2

2

22

2

2

1

2

LOGO

Une fois la fenêtre ouverte, on peut changer de page intérieur à l’aide du sous-menu, les pages s’afficheront sous forme d’interpolation de mouvement pour créer du dynamisme.

À l’aide des flèches de navigations on pourra changer les images de la galerie de photos.

Une petite croix en haut à droite de la fenêtre permet de la fermer et ainsi retourné à la page d’accueil.

1

2

3

1

2

3

WIREFRAME DE LA PAGE SALON - SOUS RUBR IQUE PHOTOS

T ITRE RUBR IQUE



SOUS-MENU RUBR IQUESPHOTO

PHOTO

PHOTO

PHOTO

PHOTO

PHOTO

PHOTO

PHOTO

PHOTO

PHOTO

PHOTO

PHOTO



XO XOXOXOLOGO

>>

X

AVANT PROPOS//Concernant les Wireframes, j’ai pris en considération le fait que les différentes fenêtres du site se ressembles et donc il n’y a ce besoin de réaliser la totalité des Wireframes.J’ai donc sélectionné les pages les plus dynamiques afin de mieux comprendre le fonctionnement de celle-ci.

Une vidéo de présentation de l’évènement va être mise en place, on pourra lire la vidéo et aussi l’arrêté.1

WIREFRAME DE LA PAGE SALON - SOUS RUBR IQUE PHOTOS

T ITRE RUBR IQUE






XO XOXOXOLOGO

X

WIREFRAMES//

VIDÉO

LE SALON DE LA MODE ORIGAMI A LA NEF DU GRAND PALAIS EST LE RENDEZ-VOUS INCONTOURNABLE DE LA MODE À PARIS.

VENEZ FAIRE PARTIE DE CE NOUVEAU SALON.

LE SALON DE LA MODE ORIGAMI PRÉSENTE UNE SÉLECTION DE 350 CRÉATEURS POINTUS, HAUT-DE-GAMME QUI INFLUENCENT LES ACHATS D’UNE DISTRIBUTION EXCLUSIVE INTERNATIONALE.

VENEZ DÉCOUVRIR NOTRE SALON TEMPORAIRE AINSI QUE LESDÉFILÉS DES CRÉATEURS INFLUENTS DANS LE MONDE LA MODE ORIGAMI.


1

Une image du plan du lieu sera disposer dans la fenêtre, en cliquant dessus on pourra accédé à un zoom du plan et en cliquant sur le bouton d’à coté celui-ci nous dirigera vers une page externe google map.

1

T ITRE RUBR IQUE






XO XOXOXOLOGO

X


VENEZ FAIRE PARTIE DE CE NOUVEAU SALON. 1

WIREFRAME DE LA PAGE V IS ITER - SOUS RUBR IQUE L IEU

PHOTO

PLAN

WIREFRAMES//

En cliquant sur les lettres de l’alphabet on retrouve en dessous la liste des marques classés.

En cliquant sur le bouton TOUTES LES MARQUES on obtient une liste des marques non-classés.

1

2

WIREFRAME DE LA PAGE EXPOSANTS

T ITRE RUBR IQUE



XO XOXOXOLOGO

X

AMET & LADOUEANMIANNE-MARIE AERCKESANOUKART AWEAR ADIMITRIADISBARKBEIRN*BERACAMY APARISBLUIBY BOEBY PHILIPPEAPERRETTICATHSCHANA LUUCHEET LONDONCHIC ALORSACITRUSCORALIAAEETS JEWELRYDALALEOADE LONTIADECOR DE DECORERFURT LUXURYACCESSORIESERIC GALLAISAVA KRYSTALEVATINI (DI DANIELA TRAMPINI)ALLETTI FIRENZE

ALEN PRINCEANNEIMAÌIMUKA ATIMUKAT APARISJACCOKATIE AMOND AJEWELRYKUSA ANMURILE ANDORINE

12

A B C D E F G H I G K L M N O P Q R S T U V W X Y ZTOUTES LES MARQUES

À l’aide des flèches de direction on pourra changer les photos de la collection de vêtements.1

WIREFRAME DE LA PAGE DÉF I LÉS

T ITRE RUBR IQUE



XO XOXOXOLOGO

X

DÉL I LÉ AUTOMNE-HIVER 2010





VENEZ FAIRE PARTIE DE CE NOUVEAU SALON.

LE SALON DE LA MODE ORIGAMI PRÉSENTE UNE SÉLEC-TION DE 350 CRÉATEURS POINTUS, HAUT-DE-GAMME QUI INFLUENCENT LES ACHATS D’UNE DISTRIBUTION EXCLUSIVE INTERNATIONALE.


>< 1


Dossier_Présentation_Sandra_Ollier_Web1_2012_Site_Événementiel_Salon_De_La_Mode_Origami

DOSSIER DE PRÉSENTATION//

Documents

Presentation salon de la mode origami