21

SOMMAIRE - création et refonte de site internet · Charte graphique - Agence AntheDesign Page 2 SOMMAIRE LOGOTYPE 4 Typographie utilisée 4 Signiication 4 Fonds colorés 5 Zone de

  • Upload
    others

  • View
    6

  • Download
    0

Embed Size (px)

Citation preview

Page 1: SOMMAIRE - création et refonte de site internet · Charte graphique - Agence AntheDesign Page 2 SOMMAIRE LOGOTYPE 4 Typographie utilisée 4 Signiication 4 Fonds colorés 5 Zone de
Page 2: SOMMAIRE - création et refonte de site internet · Charte graphique - Agence AntheDesign Page 2 SOMMAIRE LOGOTYPE 4 Typographie utilisée 4 Signiication 4 Fonds colorés 5 Zone de

PageCharte graphique - Agence AntheDesign 2

SOMMAIRELOGOTYPE 4

Typographie utilisée 4

Signiication 4

Fonds colorés 5

Zone de protection 5

Construction du logotype 5

Déclinaisons du logotype 6

Les interdits 7

PALETTE CHROMATIQUE 8

Couleurs primaires 8

Couleurs secondaires 8

Couleurs d’appoint 8

PAPETERIE 9

Carte de visite 9

RIB 9

En-tête et Enveloppe personnalisées 10

WEB 11

Balises web contenus 11

Balises web stylisées 12

Exemple de contenu 13

Exemple stylisé (widget) 13

Signature de mail 14

Tableaux types 15

Contenu rédactionnel 16

Puces 16

Blocs de contenus 16

Styles de boutons 17

Boutons primaires 17

Boutons simples 17

Page 3: SOMMAIRE - création et refonte de site internet · Charte graphique - Agence AntheDesign Page 2 SOMMAIRE LOGOTYPE 4 Typographie utilisée 4 Signiication 4 Fonds colorés 5 Zone de

PageCharte graphique - Agence AntheDesign 3

Big bouton (réservé à des utilisations particulières) 17

Formulaire & notiications 18

Champs Checkbox 18

Champs Radio 18

Menu déroulant 18

Champ upload 19

Champs textes 19

Barre de statut 19

Gabarits des visuels 20

Page 4: SOMMAIRE - création et refonte de site internet · Charte graphique - Agence AntheDesign Page 2 SOMMAIRE LOGOTYPE 4 Typographie utilisée 4 Signiication 4 Fonds colorés 5 Zone de

PageCharte graphique - Agence AntheDesign 4

Brandon Grotesque Light

Brandon Grotesque Regular

SIGNIFICATION

Une feuille de tilleul représentant la croissance est pro-longée par un crayon de papier symbolisant la créativité. Le dégradé de couleur orange vers le fuchsia est ap-pliqué en ce sens car la couleur orange était la couleur unie du précédent logo. Le fuchsia devenant la nouvelle couleur unie pour d’autres éléments tel que le mot «an-the» d’AntheDesign. Il signiie le dynamisme comme l’orange mais apporte une nuance plus délicate. C’est également la couleur de coniance, elle est également associée au sérieux et à l’évolution pointue d’AntheDe-sign.

TYPOGRAPHIE UTILISÉE

� Brandon Grotesque

Le nom AntheDesign s’écrit avec un A et un D ma-juscules de façon courante tel une marque ou un nom propre mais reste écrit en bas de casse dans le logotype.

LOGOTYPE

Page 5: SOMMAIRE - création et refonte de site internet · Charte graphique - Agence AntheDesign Page 2 SOMMAIRE LOGOTYPE 4 Typographie utilisée 4 Signiication 4 Fonds colorés 5 Zone de

PageCharte graphique - Agence AntheDesign 5

FONDS COLORÉS

Le logotype initial s’applique sur fond blanc ou trans-parent.

Sur fond foncé, le mot «design» et le crayon sont blancs. La feuille garde sa couleur dégradée comme le mot «anthe» reste en fuschia.

Sur fond coloré, le logotype entier est blanc.

ZONE DE PROTECTION

L’espace minimum à respecter est représenté par la hauteur et la largeur de la lettre «a».

CONSTRUCTION DU LOGOTYPE

Le nom «anthedesign» s’inscrit sur une ligne de pied qui passe par une pointe du crayon et est espacé de l’em-blème par la largeur du caractère «a» (voir ci-contre).Les diférentes baselines s’inscrivent sur une ligne de pied sous la boucle du «g» (voir ci-contre). Leur corps est égal à celui du nom de l’agence divisé par la valeur de référence 2,5.

Page 6: SOMMAIRE - création et refonte de site internet · Charte graphique - Agence AntheDesign Page 2 SOMMAIRE LOGOTYPE 4 Typographie utilisée 4 Signiication 4 Fonds colorés 5 Zone de

PageCharte graphique - Agence AntheDesign 6

DÉCLINAISONS DU LOGOTYPE

Les formats carrés sont réservés pour le web et les ré-seaux sociaux. On peut également l’utiliser en cas de mises en pages complexes.

Sur le web, l’utilisation du symbole seul permet d’iden-tiier l’entreprise en dessous de 100 pixels.

Les formats noirs et blancs sont utilisables sur tous les supports imprimés sans couleurs.

La dénomination de l’entreprise en baseline rappelle le domaine d’activité.

Page 7: SOMMAIRE - création et refonte de site internet · Charte graphique - Agence AntheDesign Page 2 SOMMAIRE LOGOTYPE 4 Typographie utilisée 4 Signiication 4 Fonds colorés 5 Zone de

PageCharte graphique - Agence AntheDesign 7

LES INTERDICTIONS

Imenis etur? Explitionse quae nias esectatquis mil im illenimet, sequiss imincil lupiendus qui abo. Nem fugia dolor suntia vollorr oratendel eaquat pa culparu ptaspel ecusdae nobis con prae dero magnis accab idunt.Giaeriatur ratem labo. Nam ex et es sitas auta nem-poreprat eatisciis et as sus exped eumquia eat. At ellup tatquae rest, quossit ut aut moluptaqui omnimint aut ulparum fugia cullabor simil et qui nonsenis ea volupit explique sitatur repelita nihicab orrorepro dolorepuda soluptamus del molorerum quasimil mi, tem hiciis

Ne pas respecter la zone de protectionNe faire subir aucune rotation au logotype.

Ne pas rogner le logotype. Ne pas utiliser d’autres couleurs que celles présentent dans la charte graphique.

Il est interdit de modiier l’homothétie du logotype.

Page 8: SOMMAIRE - création et refonte de site internet · Charte graphique - Agence AntheDesign Page 2 SOMMAIRE LOGOTYPE 4 Typographie utilisée 4 Signiication 4 Fonds colorés 5 Zone de

PageCharte graphique - Agence AntheDesign 8

PALETTE CHROMATIQUECOULEURS PRIMAIRES

Valeur hexadécimale#E51356CMJN0 97 46 0RVB230 22 87

Valeur hexadécimale#FF4E00CMJN0 79 94 0RVB233 81 29

DégradéOrange vers Fuschia - Échelle 100 % - Angle 130°

Valeur hexadécimale#EEEEEECMJN8 5 7 0RVB238 238 238

Valeur hexadécimale#222222CMJN74 64 59 78RVB34 34 34

Valeur hexadécimale#7E7E7ECMJN50 39 39 21

RVB127 126 126

COULEURS SECONDAIRES

Valeur hexadécimale#4EBCC2CMJN65 0 27 0RVB78 189 195

Valeur hexadécimale#8D398DCMJN54 88 0 0RVB142 58 142

Valeur hexadécimale#CCD500CMJN28 0 100 0RVB205 213 0

Valeur hexadécimale#33AD6ACMJN74 0 73 0RVB52 173 106

COULEURS D’ACCENTUATION

Page 9: SOMMAIRE - création et refonte de site internet · Charte graphique - Agence AntheDesign Page 2 SOMMAIRE LOGOTYPE 4 Typographie utilisée 4 Signiication 4 Fonds colorés 5 Zone de

PageCharte graphique - Agence AntheDesign 9

PAPETERIE

RIB

Format : 210 x 98 mm.

RIB envoyé au format PDF pour faciliter la copie des informations bancaires.

CARTE DE VISITE

Les cartes de visites ont un format de référence CB qui équivaut à 84mm de largeur sur 54 ou 55 mm de hau-teur.

Page 10: SOMMAIRE - création et refonte de site internet · Charte graphique - Agence AntheDesign Page 2 SOMMAIRE LOGOTYPE 4 Typographie utilisée 4 Signiication 4 Fonds colorés 5 Zone de

PageCharte graphique - Agence AntheDesign 10

EN-TÊTE ET ENVELOPPE PERSONNALISÉES

Page 11: SOMMAIRE - création et refonte de site internet · Charte graphique - Agence AntheDesign Page 2 SOMMAIRE LOGOTYPE 4 Typographie utilisée 4 Signiication 4 Fonds colorés 5 Zone de

PageCharte graphique - Agence AntheDesign 11

WEB

Abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz

H135 pts - interlignage 42 ptsBrandon Grotesque Thin

Abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz

H228 pts - interlignage 34 ptsBradon Grotesque Light Italic

Abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz

H321 pts - interlignage 25 ptsBrandon Grotesque Regular

Abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz

H418 pts - interlignage 21 ptsBrandon Grotesque Medium

Abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz

H518 pts - interlignage 21 ptsBrandon Groteque Regular

Abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz

H614 pts - interlignage 16 ptsBrand Grotesque Regular

BALISES WEB CONTENUS

Page 12: SOMMAIRE - création et refonte de site internet · Charte graphique - Agence AntheDesign Page 2 SOMMAIRE LOGOTYPE 4 Typographie utilisée 4 Signiication 4 Fonds colorés 5 Zone de

PageCharte graphique - Agence AntheDesign 12

Abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz

Titres widget28 pts - interlignage 34 ptsBrandon Grotesque Light

Abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz

Titre d’item17 pts - interlignage 20 ptsBradon Grotesque Black

Abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz

Titre d’item small15 pts - interlignage 18 ptsBrandon Grostesque Regular

Abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz

Contenu d’item15 pts - interlignage 18 ptsBrandon Grotesque Regular

Abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz

Contenu d’item small12 pts - interlignage 15 ptsBrandon Grosteque RegularGris # 7E7E7E

BALISES WEB STYLISÉES

Page 13: SOMMAIRE - création et refonte de site internet · Charte graphique - Agence AntheDesign Page 2 SOMMAIRE LOGOTYPE 4 Typographie utilisée 4 Signiication 4 Fonds colorés 5 Zone de

PageCharte graphique - Agence AntheDesign 13

EXEMPLE DE CONTENU

EXEMPLE STYLISÉ (WIDGET)

Page 14: SOMMAIRE - création et refonte de site internet · Charte graphique - Agence AntheDesign Page 2 SOMMAIRE LOGOTYPE 4 Typographie utilisée 4 Signiication 4 Fonds colorés 5 Zone de

PageCharte graphique - Agence AntheDesign 14

SIGNATURE DE MAIL

Prénom NOMFonctionAgence Anthedesign

Tél : +33 (0)3 60 45 57 13www.anthedesign.fr

Prénom NOMFonctionAgence Anthedesign

Tél : +33 (0)3 60 45 57 13www.anthedesign.fr

Prénom NOMFonctionAgence Anthedesign

Tél : +33 (0)3 60 45 57 13www.anthedesign.fr

Ajout d’une annonce promotionnelle

Annonce promotionnelle

Annonce promotionnelle

Signature disponible en format HTML et au format image.

Page 15: SOMMAIRE - création et refonte de site internet · Charte graphique - Agence AntheDesign Page 2 SOMMAIRE LOGOTYPE 4 Typographie utilisée 4 Signiication 4 Fonds colorés 5 Zone de

PageCharte graphique - Agence AntheDesign 15

TITREIndice

Indice

IndiceIndice

Agencement préparéAgencement préparé

Retrait immédiatRetrait immédiat

IndiceIndice

IndiceIndiceIndiceIndiceIndice

Indice 098

46

098

098

098

098

23 098 098 098

098 68 098 098

08

098

39

372

098

098

098

098

687

098

074

098

098

098

098

098

Indice

Indice

Indice

Indice

Indice

IndiceIndice IndiceIndice IndiceIndice IndiceIndice

Indice

Indice

098098

4646

098098

098098

2323 098098 098098

098098 6868 098098

0808

098098

098098

098098

687687

098098

Indice

Indice

Indice

Indice

Indice

Indice

TABLEAUX TYPES

Les tableaux types seront utilisables à la fois pour des formats web et des formats print.

Page 16: SOMMAIRE - création et refonte de site internet · Charte graphique - Agence AntheDesign Page 2 SOMMAIRE LOGOTYPE 4 Typographie utilisée 4 Signiication 4 Fonds colorés 5 Zone de

PageCharte graphique - Agence AntheDesign 16

CONTENU RÉDACTIONNEL

PUCES

BLOCS DE CONTENUS

Bloc d'information importante

Bloc d'information

Bloc de citation

Page 17: SOMMAIRE - création et refonte de site internet · Charte graphique - Agence AntheDesign Page 2 SOMMAIRE LOGOTYPE 4 Typographie utilisée 4 Signiication 4 Fonds colorés 5 Zone de

PageCharte graphique - Agence AntheDesign 17

STYLES DE BOUTONS

BOUTONS PRIMAIRES

Les boutons principaux suivent le code ci-contre, sauf cas particuliers tel que les boutons appelant au réseaux sociaux.

BOUTONS SIMPLES

Les boutons secondaires se caractérisent par un trait de contour de 1 point de la même couleur que le contenu texte.

BIG BOUTON (RÉSERVÉ À DES UTILISATIONS PARTICULIÈRES)

Page 18: SOMMAIRE - création et refonte de site internet · Charte graphique - Agence AntheDesign Page 2 SOMMAIRE LOGOTYPE 4 Typographie utilisée 4 Signiication 4 Fonds colorés 5 Zone de

PageCharte graphique - Agence AntheDesign 18

CHAMPS CHECKBOX

CHAMPS RADIO

FORMULAIRE & NOTIFICATIONS

CHAMPS TEXTES

Page 19: SOMMAIRE - création et refonte de site internet · Charte graphique - Agence AntheDesign Page 2 SOMMAIRE LOGOTYPE 4 Typographie utilisée 4 Signiication 4 Fonds colorés 5 Zone de

PageCharte graphique - Agence AntheDesign 19

CHAMP UPLOAD

BARRE DE STATUT

MENU DÉROULANT

Page 20: SOMMAIRE - création et refonte de site internet · Charte graphique - Agence AntheDesign Page 2 SOMMAIRE LOGOTYPE 4 Typographie utilisée 4 Signiication 4 Fonds colorés 5 Zone de

PageCharte graphique - Agence AntheDesign 20

700/200Larg/(1.75x2)

GABARITS DES VISUELS

Valeur de référence 1.75 (7/2/2)

700/400Larg./(1.75x1)

350 /100Larg/(1.75x2)

350 /350Larg/(1.75x0)

350 /200Larg/(1.75x1)

Page 21: SOMMAIRE - création et refonte de site internet · Charte graphique - Agence AntheDesign Page 2 SOMMAIRE LOGOTYPE 4 Typographie utilisée 4 Signiication 4 Fonds colorés 5 Zone de

PageCharte graphique - Agence AntheDesign 21

800/320Larg/(1.25x2)

800/640Larg./(1.25x1)

400 /160Larg/(1.75x2)

400/400Larg/(1.25x0)

400 / 320Larg/(1.25x1)

Valeur de référence : 1,25