Cours 1 | Intro¶
Présentation du plan de cours¶
Quelques définitions¶
Art¶
Expression
L'art est une expression personnelle. L'artiste crée pour exprimer une vision, une émotion ou une idée.
🎯 Poser des questions, choquer ou émouvoir.
Graphisme¶
Style et technique
Le graphisme concerne la mise en forme visuelle : couleurs, formes, typographies, images et composition.
🎯 Créer un objet visuel cohérent et esthétique.
Design¶
Solution et utilité
Le design est une méthode de réflexion pour répondre à un problème selon des contraintes (public, contexte, support, temps, budget, accessibilité, etc.).
On recherche une solution pratique, simple, efficace.
🎯 L'objet (ou l'image) fonctionne bien pour la personne qui l'utilise.
Design + graphisme¶
Mission !
Le design graphique est l'art de concevoir des images pour transmettre un message précis à un public, dans un contexte donné.
C'est une communication visuelle qui se veut surtout stratégique.
🎯 Convaincre, informer ou guider l'utilisateur rapidement.
Histoire du design graphique¶
Les tendances actuelles en print
Design (graphique) Web¶
Les tendances en graphisme peuvent être pertinentes comme références, mais le graphisme Web a de nombreuses considérations techniques et conceptuelles qui changent la façon dont on aborde le design et l'esthétisme. Par exemple :
- Numérique et non imprimé
- Interactivité
- Expérience utilisateur (navigation, temps de chargement)
- Médias animés (gif, vidéo, animation)
- Accessibilité
- Responsive
Le design graphique¶
L’expertise du designer graphique c'est la communication.
Il faut faire comprendre quelque chose (un message ou une information) rapidement, le plus efficacement possible.
Étude de cas - Panneaux de stationnement
En 2014, Nikki Sylianteng a eu l'initiative de repenser l'information des panneaux de stationnement à Los Angeles dans l'optique de simplifier leur compréhension par le design graphique.
La méthode QQOQCCP¶
Pour y arriver, il faut bien comprendre l'objectif !
On peut alors utiliser la méthode QQOQCCP :
| Questions | |
|---|---|
| Quoi ? | quel est le message / l’objectif ? (informer, convaincre, vendre, faire agir) |
| Qui ? | à qui on parle ? (public cible, besoins, codes, attention) |
| Où ? | où est-ce que ce sera vu ? (téléphone, affiche, site, écran, rue) |
| Quand ? | à quel moment ? (urgence, saison, période, humeur du public) |
| Comment ? | avec quels choix visuels ? (hiérarchie, contraste, cohérence, divulgation progressive, accessibilité) |
| Pourquoi ? | pourquoi le message importe ? |
Exercice - Portes ouvertes
Message : « Portes ouvertes, 5 février 18h à 21h »
On vous demande de faire une affiche sur un mur de la cafétéria et de faire une story Instagram.
Comment aborder cette demande ?
🌱 Indice : Le « où » et le « comment » sont importants
Exercice - Application de budget
Une application de budget
On vous demande de faire 2 applications de gestion de budget. Une pour les étudiants et une pour les parents.
Comment aborder cette demande ?
🌱 Indice : Le « qui » et le « quoi » sont importants.
Les enjeux de la désinvolture¶
Si on fait abstraction des besoins et du contexte :
- On peut difficilement justifier ses choix
- On risque de devoir recommencer plusieurs fois (beaucoup d'irritants pour tout le monde)
- Ça peut nuire à la marque
L'effet des contraintes¶
Pour viser juste, il faut prendre le temps d'avoir bien compris, de laisser reposer son oeuvre, de la faire évaluer par d'autres, etc. Ça c'est les conditions idéales, mais dans le monde professionnel, c'est assez rare d'avoir peu de contrainte.
Parfois c'est pas toujours la faute du designer. Un classique pour déterminer la faisabilité d'un projet est l'acronyme QCD.
La phase d'inspiration¶
La phase d'inspiration est toujours très importante pour ne pas avoir à refaire la roue à chaque fois. S'inspirer des pros est la meilleure façon d'apprendre.
Voici quelques sources :
Qu'est-ce que je regarde ?
Trouver des œuvres jolies, c'est bien, mais connaître le style et ses origines apporte une compréhension essentielle à la professionnalisation.
Prenons l'exemple de l'esthétisme low-poly dans les jeux vidéo. Il est intéressant de savoir que cet esthétisme existe depuis les années 90, mais il est encore plus intéressant de savoir pourquoi ce style a resurgi dans les années 2010 : performance, coût de production. Donc son usage va au-delà de ses qualités esthétiques. Son usage fait partie d'une stratégie ! C'est la même chose en design graphique.
En cas de doute, utilisez par exemple https://imgops.com/ (un genre de google images) pour trouver les origines d'une image. Pour en savoir plus sur son courant artistique, utilisez l'IA (LLM) ou allez à la bibliothèque ;)
Techniques de création¶
Lorsqu'on crée, l'inspiration est un bon support, mais il faut connaître certaines techniques afin de faciliter le processus.
C.R.A.P.¶
Le principe C.R.A.P.1 est un principe simple permettant d'orienter son approche au design graphique en 4 volets : contraste, répétition, alignement et proximité.
12(ish) principes de design graphique¶
En vrai, il n’y a pas de recettes universelles, mais on observe des principes récurrents qui augmentent les chances qu’un visuel soit efficace.
Ce ne sont pas des « règles esthétiques »
En tout cas, pas que !
Ce sont des leviers pour rendre un message plus clair, lisible et convaincant. Un peu comme une boîte à outils 🛠️ du designer.
Figma¶
Figma est un outil de conception collaboratif en ligne qui permet de créer, prototyper et commenter des interfaces (maquettes, UI, UX) en temps réel directement dans le navigateur.
Création de compte¶
Rendez-vous sur https://www.figma.com/login
Utilisez l'adresse courriel du CÉGEP
Finalisez la création de compte
Introduction à Figma¶
Structure¶
Équipe > Projet > Composition > Pages > Frames
Navigation¶
- Déplacements et zoom
- Ordre des calques
- Sélection, multi-sélection, verrouillage
- Alignements et distribution
Formes¶
- Panneau des propriétés
- Glisser avec Shift garde les proportions
- Carré : coins arrondis
- Grouper / dégrouper
- Snap
- Redimensionnement et rotation
- Flip horizontal / vertical (effet miroir)
Propriétés visuelles¶
- Remplissages : solide + pipette, dégradé
- Tracé (stroke)
- Transparence
Texte¶
- Outil texte
- Styles de base : taille, graisse, interlignage, alignement
Sauvegarde et bonnes pratiques¶
- Figma sauvegarde automatiquement dans le cloud.
- Renommer clairement les fichiers, pages et frames (éviter "Untitled" / "Frame 1").
- Exporter (png/svg) et enregistrer la source (
.fig).
Exercices¶
Exercice - Figma
Mosaïque
Exercice - Figma
Sonic boom
Devoir¶
Devoir - Figma
Activer la version étudiante gratuite