6°) Charte graphique.

Compétences évaluées en fin de séquence

Charte graphique

Objectifs opérationels de la séquence

Charte graphique

Mise en situation :

Le jour du concours "Save The World", votre groupe de projet devra présenter à l'oral devant le jury, l'ensemble des travaux réalisés tout au long de l'année. Pour cela, vous allez devoir produire un certain nombre de documents numériques.

- Vous devrez construire grâce à l'outil numérique de présentation PREZI, le support qui vous accompagnera lors de votre oral.

- Vous devrez également construire le Design de la partie graphique de votre I.H.M. (Interface Homme Machine), permettant le contrôle de la porte de garage et du robot mBot.

Chacune de ces réalisations doivent clairement permettre d'identifier votre groupe de projet grâce à votre charte graphique.

- Lors de cette séquence, vous allez apprendre :

- Qu'est-ce qu'une charte graphique.
- De quels éléments elle se compose.
- Où utiliser votre charte graphique.
- Comment définir votre charte graphique.

Activité n°2 : "Je commence à m'interroger"

Travail en duo:

Travail duo Vous devez compléter les informations de la fiche S6-A2 grâce aux informations que vous trouverez plus bas dans les ressources de l'activité n°2.

Demandez la fiche à votre professeur.

Fichier : S6-A2

Pour télécharger le document ci-contre, faire un clic-droit puis choisir la commande "Enregistrer le lien sous..."

- Enregistrer alors le document sur ta clé USB :

Chemin : D:\Technologie\Séquences\S6\

Nom du fichier : Classe-Nom-Prénom-S6-A2.pdf

- 1 Le document est alors accessible en cliquant sur le dossier, en haut à droite du navigateur.

Téléchargement

Pour chaque fiche d'activité, vous devez remplir la zone grise en précisant :

              - Le(s) Thème(s),
              - Le nom de la fiche de synthèse,
              - Les Compétences étudiées.

Ces informations se trouvent en haut du chapitre bouton "Afficher les compétences"

Si tu es absent(e) le jour de cette activité, tu peux télécharger cette fiche et travailler chez toi.

Ressources pour l'activité n°2 : Préparation des savoirs

A) Qu'est-ce qu'une charte graphique ?

C'est un document qui décrit les règles de la présentation visuelle.

- Elle définit l'identité visuelle d'une entreprise, d'une organisation, d'un groupe.

- Elle assure la cohérence graphique de l'ensemble des réalisations.

B) Quels sont les éléments d'une charte graphique ?

1 - Le LogoType : C’est une représentation graphique qui sert à identifier immédiatement un produit, une organisation. C'est l’élément central d’une charte graphique. On le retrouve sur tous les supports de communication de l’entreprise, c’est à partir du logotype que l’on bâti une identité visuelle.

Il existe plusieurs type de logotypes :

2 - Les Couleurs : Les couleurs permettent de mettre en valeur un texte, une expression, un schéma ...

Le nombre de jeux de couleurs doit rester limité pour simplifier la mémorisation de l’identité visuelle et sa différenciation par rapport à la concurrence (4 ou 5 couleurs étant un compromis idéal.)

3 - La Typographie : La typographie est l’art et la manière de concevoir et de se servir des caractères pour réaliser une mise en page. La typographie s’appuie sur des polices, des tailles et des styles de caractères qui permettent de créer différentes compositions esthétiques.

Polices :

Tailles :

8 Points

10 Points

12 Points

14 Points

18 Points

Styles :

Standard - Gras - Italique - Souligné - Barré ^Exposant _Indice

4 - Les éléments graphiques : Les éléments graphiques comme les filigranes, les pictogrammes, les formes et les images, permettent de structurer les présentations.

Filigranes :

Pictogrammes :

C) Où utiliser votre charte graphique ?

Puisque la charte graphique permet de définir l'identité visuelle d'une entreprise, d'une organisation ou d'un projet, il faut l'utiliser sur toutes présentations numériques ainsi que sur les différents supports de communication.

1 - Sur les présentations numériques :

(Outils Numériques de Présentation)

Les outils numériques de présentation permettent de communiquer des informations à un public. Leur forme est choisie en fonction de leur usage : Présentation devant un public (éventuellement pour les revues de projet), et consultation à distance.

Le Diaporama :

Le diaporama est une présentation animée sous forme de diapositives avec des éléments visuels : Texte, Photos, Dessins, Graphiques.

Diaporama de présentation du fonctionnement du réseau informatique du collège.

Le Prézi :

Le prézi est une application en ligne qui permet de créer des présentations dynamiques sans diapositives.

Prézy de présentation pour l'oral du concours d'architecte (Save The World)

Les scènes animées :

Le logiciel Sketchup permet de créer une succession de plusieurs scènes pour présenter un objet technique.

Sketchup : Présentation de la salle de technologie E03 - Collège la Boétie.

Le Montage vidéo :

Le montage vidéo permet de réaliser des films avec des incrustations d'images, du texte, du son.

Les vidéos de la chaine de Technologie suivent une charte graphique

Le Site Web :

La publication sur internet permet de communiquer à travers des pages web consultables à distance, des contenus variés (textes, images, vidéo, animations ...)

Le site de technologie du collège la Boétie suit aussi une charte graphique

2 - Sur les supports de communication. (PUB)

Une entreprise, une organisation, un groupe de projet ont besoin de communiquer pour se faire connaitre. Pour cela ils utilisent des supports de communication comme les affiches, les cartes de visite, les goodies etc...

Supports de communication

Activité n°3 : "Création de votre Charte Graphique"

A) Comment définir sa charte graphique ?

Cette activité va vous aidez à construire la charte graphique de votre groupe de projet et de l'appliquer sur tous les documents ou présentations que vous réaliserez lors du projet.

Pour le concours d'architecte (Save the World), vous devrez appliquer votre Charte Graphique sur :

- Votre présentation "Prezi" (Pour la soutenance du projet)
- Votre application android "I.H.M" (Porte de garage & robot mBot).

1 - Définir les couleurs de votre charte graphique :

Pour définir vos couleurs il vous faudra :

Procédure : S6-A3-Couleur

a/ Récupérer la procédure S6-A3-Couleur ci-contre en cliquant simplement dessus.

b/ Accéder à un générateur de palettes de couleurs comme celui de "Adobe Color"

c/ Suivre la "procédure liste" S6-A3-Couleur pour créer et enregistrer la palette de couleur de votre charte graphique.

2 - Définir vos 4 polices de caractères :

Pour la composition de vos futurs documents vous serez amené à écrire des TITRES, des SOUS-Titres, des TITRES de chapitre, du TEXTE.

Chacun de ces 4 éléments structurels doivent être associés à une police de caractère différente, c'est pourquoi il vous en faudra 4.

Procédure : S6-A3-Typo

a/ Récupérer la procédure S6-A3-Typo ci-contre en cliquant simplement dessus.

b/ Accéder à un générateur de polices de caractères comme celui de "Google-Font"

c/ Suivre la "procédure liste "S6-A3-Typo" pour définir vos 4 polices de caractères.

3 - Réaliser votre Logo-Type :

Le LogoType est certainement l'élément de votre charte graphique le plus important. C'est grâce à lui que votre groupe de projet sera facilement reconnaissable. Il est l'identité visuelle de votre équipe.

Vous devez donc réaliser votre LogoType, à partir de votre mascotte ci-dessus et en utilisant PhotoFiltre7.

Vous devez bien évidemment utiliser la police de caractère que vous avez choisi à l'étape n°2 et respecter les couleurs choisi lors de l'étape n°1.

Couleurs

Exemple de LogoType

L'idée ! c'est de reprendre les éléments graphiques de base de votre mascotte, de les réassortir et d'y rajouter des éléments extérieurs trouvés sur internet. (Comme ici, la couronne et le collier)

Des éléments typographiques doivent être aussi rajouté pour préciser votre classe et votre nom de groupe.

Vous trouverez les éléments graphiques de base en suivant le chemin ci-dessous.

Q:\Documents en consultation\technologie\PhotoFiltre7-Exercice2-LogoType\

Activité n° 5 : "Pour finir, je rempli la fiche de mémorisation"

Travail en solo:

Travail solo Grâce aux fiches de connaissances que tu trouveras ci-dessous et grâce à ce que tu as appris lors de cette séquence, tu dois maintenant remplir la fiche de mémorisation pour préparer l'évaluation.