Web Design

Définition

Une charte graphique définit les différents composants visuels d'une marque / organisation / produit ainsi que des directives précises sur la mise en place de ces composants. Ces dernières doivent être respectées par toute personne travaillant avec ou pour ce client, afin de respecter son identité visuelle.

Directives générales

Voici des éléments susceptibles de se retrouver dans une charte graphique axée web :

• logo
• palette de couleurs
• typographie(s)
• élément(s) graphique(s) (médias, boutons, icônes, etc.)
• tone of voice
• etc.

Logo

Montre le logo et ses déclinaisons (avec slogan, sans slogan, minimal, etc.). On y retrouve aussi des exemples d'utilisation (print, version noir et blanc, etc.). Si nécessaire, on peut proscrire certaines utilisations comme le changement de couleur ou des déformations.

Couleurs

Cette section définit la palette de couleurs qui peuvent être utilisées dans les supports de communication. On y retrouve les couleurs avec une importance primordiale pour l'identité visuelle: les couleurs du logo, d'actions, de typographies, de fonds, etc. On évitera de présenter les couleurs secondaires ou de soutiens (traits, ombrages, etc.). On y retrouve un guide d'utilisation ainsi que les références RVB / Hexadécimal (digital) et/ou CMJN / Pantone (print).

Typographies

On y retrouve les typographies officielles utilisées dans le logo, pour les titres et pour les textes. Des exemples peuvent montrer les différentes tailles ou styles à respecter dans les compositions visuelles.

Éléments graphiques

Dans certains projets, on peut définir comment certains médias doivent être traités graphiquement comme des images, des vidéos, des pictogrammes ou d'autres décorations graphiques (fonds, boutons, textures, traits, formes, etc.).

Tone of voice

Le tone of voice, ou direction éditoriale n'est pas forcément visuelle mais permet de s'assurer d'une cohérence dans le traitement du contenu textuel et donc par extension pourrait avoir un impact sur la direction artistique.

Avantages

• Fournir les directives essentielles et ainsi faire gagner du temps à l'équipe de designers et développeurs.
• Maintenir la cohérence au travers de différents canaux de communications (print, site web, réseaux sociaux, etc.).
• Assurer une différenciation pour se démarquer de la concurrence.

Le jour de l'examen, une charte graphique vous sera fournie et vous devrez la mettre en pratique dans un design type. Voici les différents éléments qui y seront présents

1. En-tête
2. Sommaire
3. Présentation du produit
4. Palette de couleurs
5. Densité des couleurs
6. Typographie(s) (titrage et texte)
7. Boutons

En-tête

L'en-tête de la charte graphique, qui énonce son sujet.

Sommaire

Liste les différentes sections de la charte graphique.

Le produit / service

Présentation du produit avec un texte court remettant le contexte. Cela permet de cerner le sujet principal.

Couleurs & densité

On retrouve notre palette de couleurs principales, avec des références hexadécimal, RGB et leurs usages. Le nom de la couleur provient du site color-name.com. Un schéma de densité représente la quantité de chacune des couleurs dans nos réalisations graphiques.

Typographie(s)

Présente la ou les typographies choisies pour nos titres et textes. On y cite le nom de la typographie et d'où elle provient ainsi que ses créateurs si on a l'information. En plus de ceci, on définit différentes tailles et exemples d'utilisation.

Boutons

Présente les designs de nos boutons avec 2 styles pour des actions primaires et secondaires.

Exercice

À terminer pour le prochain cours

Briefing

Sur base de la charte graphique que nous venons de voir, vous devez reproduire le design suivant et y appliquer les différentes directives de la charte. La mise en page doit être identique et respecter ces consignes :

Consignes

• Dans une frame desktop > desktop 1440x1024 (ou bureau > bureau 1440x1024 en français)
• Utiliser une grille en 12 colonnes, 32px de marges et 32px de gouttières
• Respecter les directives de la charte graphique (couleurs, typographies, boutons, etc.)
• Ne pas modifier le contenu textuel
• Les zones grises doivent être remplacées par des images
• Mettre en place des techniques vues aux cours (frame, auto-layout, composant, etc.)