design book

par la DOMINANTE. DESIGN BOOK//

Design_Book_Sandra_Ollier_Web1_2012_Site_Événementiel_Salon_De_La_Mode_Origami

AR TE

H

C

UE

IQ

PH

RA

G

DU TE

SI

1 H

C AR TE UE

IQ

PH

RA

G

DU

G

LO

O

4-13

2 14-23

S O M M

24-29

RA

EC

S

N

R IÈ N N BA

E

DE

A I R E

4 ES C S N RD DA A N BO TE ND DE TRE

30-41

B PU

3

UE

IQ

PH

CH DU AR LO TE GO GR A

1

- AVANT-PROPOS/ - PRINCIPES GÉNÉRAUX// - GRAPHISME// - COULEURS// - TYPOGRAPHIES// - ZONE DE PROTECTIONS// - LES INTERDITS//

6 7 8 9 10 11 12-13

AVANT-PROPOS//

AVANT-PROPOS// Un logotype sert à identifié une société, association, un service, ect.. ou dans le cas de mon projet un événement. Celui-ci doit être identitaire et lisible pour tous.

De nombreuses informations doivent être prises en compte afin de faire passé le message souhaité, tant au niveau des couleurs que des formes.

Par exemple, la forme ronde représente la terre et la forme triangulaire assure l’idée d’innovation, la progression et les techniques de pointes. Les formes carrées quant à elles font référence à la stabilité et la robustesse.

Quelques principes de base :

- Le logo du salon de la Mode Origami doit être unique, afin de faire aucune confusion avec d’autres logotypes.

- Celui-ci doit être fonctionnel et utilisé facilement dans différents contextes.

- Il doit rester efficace petit ou grand.

- Fonctionner en couleurs ou en ton de gris.

- Respecter une qualité graphique avec une combinaison de couleurs clair et foncées.

- Une stylisation des éléments graphique.

6

aux autres couleurs. C'est cette couleur qui doit être choisie en premier lorsque l'on recherche une harmonie colorée. la tonique est utilisée pure et en petiteGÉNÉRAUX// PRINCIPES 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 modifiée (ternie,éclaircie ou obscurcie) et occupera une surface inférieure à celle occupée par la DOMINANTE. PRINCIPES GÉNÉRAUX// Le logotype du salon de la Mode Origami fait parti des logo «à lire» car celui-ci n’inclu pas d’illustrations, le triangle coloré reste une forme géométrique non compréhensible au premier regard.

7

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 modifiée (ternie,éclaircie ou obscurcie) et occupera une surface inférieure à celle occupée par la DOMINANTE.

GRAPHISME//

GRAPHISME// Concernant le graphisme du logo, celui-ci s’appui dans un premier temps sur les logos des sites concurents, ces logos font partis également de la catégorie des logos «à lire» et sont à la fois simple et très typographique afin de donner le plus d’informations concernant l’évènement en question.

Le logo doit néamoins resté graphique et moderne.

Mon choix c’est porté sur un logo typographique donnant des informations essentielles sur l’évènement, il est composé pour être graphiquement moderne et aussi lisible.

La forme triangulaire représente une feuille d’Origami plié en deux, cette forme n’a pas été choisie au hazard puisqu’elle dynamise le logo et inclu une identité graphique que l’on retrouvera tout au long de la visite du site (slashs, formes géométriques dans la Page-Home qui fait un rappel du logo, etc...).

La forme triangulaire représente la modernité, le dynamisme, l’innovation mais aussi la stabilité.

8

COULEURS//

COULEURS DU LOGOTYPE// J’ai choisi deux couleurs dans le logotype, le noir sert de couleur dominante, il représente l’élégance, la classe. Cette couleur est classique dans le monde de la mode (depuis Coco Chanel et la petite robe noir). Cette couleur est intemporel et reste très lisible.

Le vert d’eau sert de tonique, il s’agit d’une couleur moderne et très tendance dans la mode actuellement.

On la retrouve dans les magazines de mode, dans les couleurs des nouvelles collections de prêt à porter, sur des sites internets. Cette tonique donne cette fraicheur au logo et cette touche de modernité qui correspond bien à la forme triangulaire.

DOMINANTE : héxadécimal : #000000 RVB : 0 0 0 CMJN : 100 100 100 100 Pantone : Noir

TONIQUE : héxadécimal : #00FFC0 RVB : 0 255 192 CMJN : 60 0 43 0 Pantone : PMS 3395 9

aux autres couleurs. C'est cette couleur qui doit être choisie en premier lorsque l'on recherche 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 modifiée (ternie,éclaircie ou obscurcie) et occupera une surface inférieure à celle occupée par la DOMINANTE.

TYPOGRAPHIES//

Dans le logo deux typographies sont présentes : la plus dominante c’est la police sans sérif Av Garde C Medium, je l’ai choisi pour son caractère moderne, sa forte lisibilité et ses lignes géométriques. Avec cette police j’ai donc mis en avant les informations les plus importantes, c’est à dire les mots Mode et Origami.

Le mot Salon est traité avec la police St Marie, une police moins lisible afin de mettre en retrait le mot salon afin de porté l’accent sur les autres mots. Cette police est à sérif, elle reste plus sophistiqué ce qui correspond au lieu de l’évènement, la NEF reste un endroit classe et grandiose. Cette police donne aussi une touche de féminité au logo qui tant à rappeler le coeur de cible, les jeunes femmes exerçants dans la proffession de la mode.

10

> St Marie

> Av Garde C Medium

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 12345678910 «»§!&@#<>,;+=$*£%({})

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 12345678910 «»§!&@#<>,;+=$*£%({})

grande surface; elle doit être éclaircie, obscurcie ou ternie. Elle va servir de support aux autres couleurs. C'est cette couleur qui doit être choisie en premier lorsque l'on recherche 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 modifiée (ternie,éclaircie ou obscurcie) et occupera une surface inférieure à celle occupée par la DOMINANTE.

ZONES DE PROTECTIONS// X

X

la DOMINANTE est celle qui occupe la plus grande surface; elle doit être éclaircie, obscurcie ou ternie. Elle va servir de support aux autres couleurs. C'est cette couleur qui doit être choisie en premier lorsque l'on recherche 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 modifiée (ternie,éclaircie ou obscurcie) et occupera une surface inférieure à celle occupée par la DOMINANTE.

ZONES DE PROTECTIONS//

EXEMPLE//

lacus, in pellentesque quam. Nunc quam felis, adipiscing sollicitudin pellentesque ac, faucibus quis sem. Curabitur sagittis fringilla interdum.

Curabitur fermentum, arcu sed fermentum

X X

la DOMINANTE est celle qui occupe la plus grande surface; elle doit être éclaircie, obscurcie ou ternie. Elle va servir de support aux autres couleurs. C'est cette couleur qui doit être choisie en premier lorsque l'on recherche 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 modifiée (ternie,éclaircie ou obscurcie) et occupera une surface inférieure à celle occupée par la DOMINANTE.

vestibulum, urna ligula rutrum est, eu mattis.

TAILLE MINIMUM LOGO// 27 X 12 mm ou 70 X 34 px

11

LES INTERDITS// la DOMINANTE est celle qui occupe la plus grande surface; elle doit être éclaircie, obscurcie ou ternie. Elle va servir de support aux autres couleurs. C'est cette couleur qui doit être choisie en premier lorsque l'on recherche 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 modifiée (ternie,éclaircie ou obscurcie) et occupera une surface inférieure à celle occupée par la DOMINANTE.

LES INTERDITS//

Interdit de déformer le logo

la DOMINANTE est celle qui occupe la plus grande surface; elle doit être éclaircie, obscurcie ou ternie. Elle va servir de support aux autres couleurs. C'est cette couleur qui doit être choisie en premier lorsque l'on recherche 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 modifiée (ternie,éclaircie ou obscurcie) et occupera une surface inférieure à celle occupée par la DOMINANTE.

Interdit de remplacer la couleur du triangle et du texte par une autre.

Interdit de changer l’emplacement de la typo par rapport au triangle

AUX GRAND PALAIS Aucun effets ( textures, ombre porté, lueur externe, flou...) .

12

Ne rajouter aucun éléments typographique ou graphique.

Voici un exemple de fond interdit, le logo devient peu lisible.

AUTORISÉS// la DOMINANTE est celle qui occupe la plus grande surface; elle doit être éclaircie, obscurcie ou ternie. Elle va servir de support aux autres couleurs. C'est cette couleur qui doit être choisie en premier lorsque l'on recherche 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 modifiée (ternie,éclaircie ou obscurcie) et occupera une surface inférieure à celle occupée par la DOMINANTE.

On peut mettre un fond de couleurs ou une image en fond dès que le logo reste lisible.

La couleur du triangle et du texte reste les mêmes.

CH

HI QU E

AP

DU AR SI TE TE GR

2

- AVANT-PROPOS/ - PRINCIPES GÉNÉRAUX// - COULEURS// - TYPOGRAPHIES// - ICÔNES// - ACCESSIBILITÉ// - ERGONOMIE// - LISIBILITÉ//

16 17 18 19 20 21 22 23

AVANT-PROPOS//

AVANT-PROPOS// Après avoir conçu le logotype de notre évènement, il convient de réfléchir quand à la charte graphique du site qui lui est associé.

Le site se doit d’être cohérent graphiquement avec le logo afin d’obtenir une identité graphique forte pour l’événement.

Voici quelques conditions de bases pour constitué un site fiable : - Utiliser le plus de polices sans empattement afin de rendre les informations les plus lisibles possible.

- Le graphisme du site doit mettre en valeur les informations importantes tel que le menu, l’accroche, le logo.

- Le site ne doit pas être trop chargé graphiquement, il doit y avoir du vide de temps en temps afin de faire respiré le site et ainsi offrir un confort visuel au visiteurs.

- L’œil parcourt les pages en diagonal, du coin supérieur gauche au coin inférieur droit. Les éléments importants de la page sont à placer sur cet axe.

16

PRINCIPES GÉNÉRAUX//

PRINCIPES GÉNÉRAUX// Après avoir bien pris en compte les règles afin de créer un site efficace nous allons maintenant aller un peu plus en profondeur.

Un site événementiel doit avant tout être emergant graphiquement afin de plonger le visiteur dans l’univers souhaité.

Pour la réalisation graphique de mon site, j’ai tout d’abord regarder les sites concurents d’une part et d’autre part des sites actuelles et populaires graphiquement.

Afin de porter l’attention sur le graphisme fort du site du salon de la Mode Origami, j’ai décidé de rester sur un site simple et efficace ergonomiquement. Cette navigation simple laissera place à cette univers fort que l’on retrouvera dans la page d’accueil du site en majeur partie avec toute une partie graphique, ce graphisme sera en mouvement avec un effet parallaxe réalisé avec le logiciel Flash.

On y retrouvera deux types d’illustrations, le logitiel Photoshop me servira pour faire des plateformes s’inspirant de l’Origami et le logiciel Illustrator pour réalisé des formes en filets que l’on retrouvera dans les pages rubriques.

17

COULEURS//

COULEURS// Dans les dominantes on retrouve une couleur gris clair en fond de site, afin de garder un esprit calme, neutre et reposant. Ensuite vient le bleu qui correspond au formes graphiques représentant l’origami, le bleu représente l’élévation, la lévitation comme j’ai voulu montré avec des structures qui vole, qui lévite.

La couleur vert d’eau est la tonique, elle donne du dynamisme au site tout en restant moderne.

Le blanc est une couleur secondaire, elle permet de délimité le header et le footer du contenu du site.

DOMINANTES : héxadécimal : #f9f9f9 RVB : 249 249 249 CMJN: 2 1 1 0 Pantone : Gris clair

héxadécimal : #28acd2 RVB : 249 249 249 CMJN: 61 9 10 0 Pantone : 7461

SECONDAIRE :

TONIQUE : héxadécimal : #00FFC0 RVB : 0 255 192 CMJN : 60 0 43 0 Pantone : PMS 3395

héxadécimal : #ffffff RVB : 255 255 255 CMJN: 0 0 0 0 Pantone : Blanc

TYPOGRAPHIES//

TYPOGRAPHIES// Dans la totalité du site on retrouve deux polices, la première ne sert que pour l’accroche, il s’agit de la police manuscrite Dear joe trouvé sur le site Dafont. Cette police est gratuite et n’inclu donc pas d’accent et de caractère spéciales.

L’accroche sert à faire passer un message aux visiteurs, j’ai voulu rendre ce message encore plus fort avec une police manuscrite qui lui donne du vivant ,de l’authenticité et donne une proximité avec l’internaute.

La deuxième police utilisé est la futura Std, on la retrouve en light pour les textes et sous-rubriques et en Heavy pour les titres des rubriques pour plus de lisibilité et d’impact. J’ai choisi la Futura pour son modernisme et parce que c’est une police sans sérif, ce qui facilite la lisibilité.

Futura Std light

Futura Std heavy

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 12345678910 «»§!&@#<>,;+=$*£%({})

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 12345678910 «»§!&@#<>,;+=$*£%({})

ICÔNES//

ICÔNES// Afin de ne pas rendre le site trop lourd les icônes restes modernes et simples.

Liens réseaux sociaux - Situé sur la page d’accueil Flèche de navigation pour les photos - sous-rubrique défilés Son

/

Séparateur entre les liens du footer

@

représente un lien vers une boite mail - situé dans le footer Croix pour fermé la fenêtre des rubriques Fullscreen

20

ACCESSIBILITÉ//

ACCESSIBILITÉ/ Le site web du salon de la Mode Origami doit resté accessible aux plus grand nombres de visiteurs.

Commençons dans un premier temps par l’url du site, celui ci se doit d’être internationnal c’est pourquoi l’extention .com est approprié, il s’agit d’un domaine de premier niveau générique non-restreint d’internet.

L’url du site : salondelamodeorigami.com Afin que le site soit le plus accessible possible un module permettant de choisir sa langue est mis en place sur le site, on peut changer de langue à tout moment.

Pour permettre le développement de l’accessibilité à travers le web, le W3C a créé des recommandations à travers le projet Web Accessibility Initiative (WAI) créé en 1996 : - les outils de production de contenu doivent d’une part pouvoir être utilisés par tous, et d’autre part autoriser et favoriser la production d’un contenu accessible.

- le contenu mis en ligne lui-même doit être accessible.

- le site doit être accessible sur tout les navigateurs web.

Pour plus d’informations : www.w3.org La taille du site recommandée est de 970 x 650 pixels, le site du salon abordera ces dimensions.

La règle des 3 clics est respécté, c’est à dire que l’internaute dois effectuer au maximun 3 clics afin d’accédé à l’information désiré.

21

ERGONOMIE//

ERGONOMIE/ Concernant l’ergonomie du site, nous pouvons dire que le site donne priorité à la partie graphique situé sur la Home-Page.

Le menu de navigation situé au milieu du site ne sera pas visible à tout moment mais il suffira de fermer la fenêtre d’une page pour retourné à la Home-Page et ainsi cliquer sur les autres boutons du menu.

Nous pouvons donc dire que même si les liens du menu ne sont pas visible tout le temps, l’ergonomie mise place facilite totalement la navigation à travers le site et offre un site ergonomique.

Concernant les autres mises en place concernant l’ergonomie une approche plus en profondeur a été mise en place dans le dossier Présentation page 60.

22

LISIBILITÉ//

LISIBILITÉ/ Concernant la lisibilité du site, on y retrouve tout d’abord le logo en haut à gauche, celui-ci reste constament lisible par l’internaute. Les informations sont positionnées hirarchiquement.

Dans le header on retrouve bien en premier lieu le logo, puis la phrase d’accroche, la date, le lieu, le logo du lieu, l’icone du fullscreen et du son.

Dans le footer on retrouve les icônes des réseaux sociaux ainsi que des liens tels que les crédits, le plan du site et aussi un module pour changer la langue du site.

Toutes ses informations sont visibles tout au long de la visite du site.

Le menu de navigation est situé dans le coprs du site, celui-ci est integré aux visuels sous forme de vignettes colorés. Tout a été mis en oeuvre pour bien distingué les liens hypertextes du texte basique non-cliquable.

Afin de bien repérer les liens hypertexte du menu, il y aura aucun autre texte.

23

CH BA AR NN TE IÈ GR RE A DE PHI PU QU B E

3

- COULEURS// - TYPOGRAPHIES// - STORY BOARD// - MISE EN SITUATION//

26 27 28 29

COULEURS//

DOMINANTES : héxadécimal : #f9f9f9 RVB : 249 249 249 CMJN: 2 1 1 0 Pantone : Gris clair

TONIQUE : héxadécimal : #00FFC0 RVB : 0 255 192 CMJN : 60 0 43 0 Pantone : PMS 3395

26

héxadécimal : #28acd2 RVB : 249 249 249 CMJN: 61 9 10 0 Pantone : 7461

TYPOGRAPHIES//

TYPOGRAPHIES// Les typographies restes les mêmes pour la bannière promotionelle que celle utilisées pour le site afin de garder cette cohérence graphique.

Pour l’accroche on retrouve la Dear joe et pour le texte la Futura Std Book.

Futura Std Book ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 12345678910 «»§!&@#<>,;+=$*£%({})

27

STORY BOARD//

STORY BOARD// Bannière 728x90 Dans un premier temps, on retrouve le logo ainsi qu’une part de l’identité visuelle du site, l’oiseau est en mouvement ainsi que les plateformes graphiques.

Ensuite la plateforme fait un mouvement vers la droite pour laissé place à l’accroche.

L’oiseau reste toujours en mouvement sur la droite.

Sous forme d’interpolation, l’accroche disparaît pour laissé apparaitre la phrase : venez vivre l’expérience au Grand Palais.

Vient ensuite par mouvement se mettre dessous la phrase l’url du site évènementiel.

Puis les écritures s’effacent pour laisser place au visuel qui revient.

MISE EN SITUATION//

E

NC

EC TR RA EN N DB DE OA TE RD ND A

4

- COULEURS/

32-33

- FORMES//

34

- TEXTURES// - PUCES, ICÔNES, PICTOS, SÉPARATEURS// - TYPOGRAPHIES// - LOGOTYPES// - AMBIANCES// - ARCHITECTURES// - ANNEXE//

35 35 36 37 38-39 40-41 42-43

COULEURS//

DOMINANTES : héxadécimal : #f9f9f9 RVB : 249 249 249 CMJN: 2 1 1 0 Pantone : Gris clair

héxadécimal : #28acd2 RVB : 249 249 249 CMJN: 61 9 10 0 Pantone : 7461

SECONDAIRE :

TONIQUE : héxadécimal : #00FFC0 RVB : 0 255 192 CMJN : 60 0 43 0 Pantone : PMS 3395

héxadécimal : #ffffff RVB : 255 255 255 CMJN: 0 0 0 0 Pantone : Blanc

33

FORMES//

TEXTURES//

PUCES, ICÔNES, PYCTOS, SÉPARATEURS//

TYPOGRAPHIES//

CODE PRO :

AV GARDE :

LOGOTYPES//

AMBIANCES//

AMBIANCES//

ARCHITECTURES//

http://www.estudioagraph.com/ L’utilisation d’une photographie en gros plan sur le site donne une immersion total, le menu vertical integré dans la forme triangulaire donne de la modernité.

http://www.monet2010.com/ Le site de Monet m’inspire beaucoup, celui-ci est très bien pensé avec un header et un footer «léger» avec des icônes simple qui laisse place au contenu centrale.

http://www.lukx.nl/ J’ai retenu ce site pour sa modernité et aussi pour le traité des photos qui donne une vrai identité visuelle.

www.premiere-classe-tuileries.com Le site est épuré, avec un menu de navigation qui s’ouvre sous forme de fenêtre, un visuel du badge avec un texte cliquable à coté sur la page d’accueil est pertinant.

Le site s’adapte aux écrans ce qui reste judicieux. Ce site m’inspire pour la réalisation de mon site.

ANNEXE//

IDÉE DE PAGE D’ACCUEIL POUR LES PROCHAINES SEMAINES// (pas terminé)

LES COMMENCEMENTS DU SITE// Idée de début : site horizontale

j’ai décidé par la site de ne pas faire un site horizontale parce que le site possède beaucoups d’informations et le rendu aurait été moins ergonomique et accessible.

43

par la DOMINANTE. DESIGN BOOK//

Design_Book_Sandra_Ollier_Web1_2012_Site_Événementiel_Salon_De_La_Mode_Origami