CHARTE GRAPHIQUE

DESIGN & ARTS APPLIQUES

Marie-Ange Pena
L’objectif de ce document porte sur la refonte du site national des Arts Appliqués

DE L’IDEE A L’OBJET

> Un axe de recherche

la recherche graphique préalable à la réalisation de la présente charte porte sur la démarche

artistique et conceptuelle qui précède toute création d’arts appliqués. Avec cette idée,
la frontière entre les recherches graphiques et la realisation finale est questionnée,
et rendue visible.

> Une identité visuelle

Cette piste induit des notions de temporalité, de cheminement, de progression

et de mise en forme. Elles seront traduites graphiquement à travers des jeux de superposi-
tions de dessins techniques et de croquis; mettant ainsi en avant la frontière entre
le concept graphique et la réalité physique de l’objet.
( entre abstraction > superpositions de traits, et figuration > dessins qui se distinguent du fond)
La superposition de traits et de croquis dans le traitement des fonds fera écho à l’organisation
des pages elles-mêmes, via la superposition des blocs texte et image. Enfin, la notion
de cheminement, de recherche, sera renforcée par les fonds colorés/gribouillés;
et contrebalencée par la sobriété de la typographie et l’organisation rigoureuse des pages.
Cette idée fait écho aux qualités du designer à la fois créatif et rigoureux.

INTRODUCTION
1/ Typographie
2/ Couleurs
3/ Fonds utilisés
4/ Titrages dessinés
5/ Puces et éléments graphiqes
6/ Rollovers
7/ Visuels des pages
8/ Gabarits

SOMMAIRE
 TYPOGRAPHIE “IDENTITAIRE” TYPOGRAPHIE DE TEXTE COURANT

MISO VERDANA
ABCDEFGHIJKLMNOPQRSTUVWXYZ
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz

TITRAGES MENUS TEXTES ET CONTENUS

BOUTONS RUBRIQUES PRINCIPALES/ MISO LIGHT / 22pts TITRES RUBRIQUES / VERDANA BOLD / 11pts
CONTENUS / CHAPEAU / VERDANA BOLD / 12pts
BOUTONS RUBRIQUES SECONDAIRES / MISO LIGHT / 15pts CONTENUS / TEXTE COURANT /VERDANA REGULAR / 10pts
CONTENUS / TEXTE COURANT /VERDANA ITAC / 10pts
TITRAGE MENU BAS DE PAGE
BOUTONS RUBRIQUE / MISO LIGHT / 14pts

EXEMPLE EXEMPLE

TYPOGRAPHIES
La Miso est utilisée comme “identitée” du site. Elle entre en adéquation
avec l’aspect graphique général fin et sobre. (typographie fine et sans serif)
La Verdana est utilisée pour le texte courant et le contenu général.
Ce choix permet d’assurer la compatibilité avec tous les ordinateurs
sans contraster avec la Miso.
 #FFFFFF - DESSINS TECHNIQUES - TITRAGES DESSINES - CONTOURS BLOCS - #000000
Traitement des fonds : superpositions de dessins avec variation de gris
Certains titres dessinés (dont nom du site) avec variation de niveau de gris

#B6B6B7 - FONDS “GRIBOUILLES” - PUCES - TEXTES COURANTS ARRIERE-PLAN -

#00B7FF - PUCES - ROLLOVER MENU - TITRAGES DESSINES - LIEN “EN SAVOIR PLUS”- CONTOURS BLOCS -

#FFA300 - PUCES - ROLLOVER MENU -

COULEURS
Les couleurs sont utilisées ponctuellement. Elles sont vives et permettent
de donner une dynamique. Utilisées dans les menus, elles pointent les éléments
des menus déroulants, et servent de repérage coloré dans l’arborescence
des pages.
 Fond page d’accueil Fond page formation

FONDS UTILISES Les fonds sont dessinés à la main ou réalisés à la tablette graphique.
Ils peuvent changer suivant les rubriques cliquées,
ou bien de manière aléatoire. D’autres peuvent s’ajouter à ceux
présenter ici, s’ils respectent l’ambiance colorée et graphique.
 Autre fond utilisable Fond page BTS /Galerie
(Ce fond doit impérativement être utilisé avec la galerie d’images
car les rectangles visibles en fond correspondent à la dimension
des images et font écho à leur format.)

FONDS UTILISES
 Fond page BTS Communication Visuelle option Multimédia Variation / Autre fond utilisable

FONDS UTILISES / dessins techniques

 Autre fond utilisable

FONDS UTILISES / dessins techniques

 NOM DU SITE (titre principal H1)
TYPOGRAPHIE TW CENT BOLD / CONTOURS “BRUSHES” ILLUSTRATOR ET RETOUCHES MANUELLES / 40pts

NOM DE PAGE (titre H2)

TYPOGRAPHIE TW CENT BOLD / CONTOURS “BRUSHES” ILLUSTRATOR ET RETOUCHES MANUELLES / 25pts

TITRAGES DESSINES
 EXEMPLE

PUCES / TYPOGRAPHIE “MISO”/ RUBRIQUES 22pts / SOUS-RUBRIQUES 15pts

- Menus principaux - Rubriques pincipales et sous-rubriques

FLECHES DIRECTIONNELLES / TYPOGRAPHIE “MISO”/ 50pts

- Flèches de défilement de la galerie d’images

EXEMPLE

PUCES / TYPOGRAPHIE “MISO” / RUBRIQUES 22pts / SOUS-RUBRIQUES 15pts

- Menu secondaire (Menu “actualités” visible en page d’accueil)
- Rubriques principales et sous-rubriques

FLECHES DIRECTIONNELLES / TYPOGRAPHIE “MISO” /

- ”Ascenceurs” rubriques actualités de la page d’accueil
- “Ascenceurs” bloc “Formation” page “BTS communication visuelle”’

TITRAGES DESSINES
 MENU PRINCIPAL MENU SECONDAIRE / PAGE FORMATION

ROLLOVERS
 MENU SECONDAIRE / PAGE D’ACCUEIL MENU SECONDAIRE / PAGE BTS

ROLLOVERS
VISUEL DES PAGES / Accueil
VISUEL DES PAGES / Accueil
VISUEL DES PAGES / Page formation
VISUEL DES PAGES / Page formation
VISUEL DES PAGES / Page BTS
VISUEL DES PAGES / Page BTS
VISUEL DES PAGES / Page BTS
VISUEL DES PAGES / Page BTS
VISUEL DES PAGES / Page BTS
GABARITS / Accueil
GABARITS / Accueil
 MENU SECONDAIRE / Menu déroulant > la taille varie en fonction
de la taille du contenu
MENU PRINCIPAL / Menu déroulant > la taille varie en fonction de la taille
du contenu

GABARITS / Accueil
 MARGES EXTERIEURES MARGES INTERIEURES

GABARITS / Blocs actus

GABARITS / Page formation
GABARITS / Blocs page formations
GABARITS / Page BTS
GABARITS / Blocs page BTS
GABARITS / Page BTS
GABARITS / Galerie images page BTS