SEMAINE 13 à 15

THÉORIE

  • Correction de l'examen semaine 13
  • Pas de cours (remplacement à cause du OFFF)

LABORATOIRE

TRAVAIL DE FIN DE SESSION / BOUTIQUE EN LIGNE (E-COM)

  • Réalisation du projet de boutique en ligne.

SEMAINE 12

THÉORIE

  • Examen

LABORATOIRE

TRAVAIL DE FIN DE SESSION / BOUTIQUE EN LIGNE (E-COM)

  • Réalisation du projet de boutique en ligne.

SEMAINE 11

THÉORIE

  • Contenu du cours: Storytelling
  • Contenu du cours: Commerce en ligne

LABORATOIRE

TRAVAIL DE FIN DE SESSION / BOUTIQUE EN LIGNE (E-COM)

  • Réaliser à l’aide d'illustrator, la conception et la réalisation de trois interfaces pour une boutique en ligne de votre choix. Par exemple: les tee-shirts, les vélos, les jeux, etc.
  • Mettre en pratique les notions de mise en page 
  • Un exemple de cas réel de E-Com  http://milandesign.co

OBJECTIFS

  • Permettre aux étudiants de mettre en pratique l’ensemble des  notions acquises dans le cours de design graphique.
  • Explorer, adapter et justifier le design de la page-écran en respectant le message, le public-cible et le contexte de présentation.
  • Reconnaître les composantes du processus de communication dans la page-écran.
  • Interpréter les objectifs de communication liés à un commerce électronique.

DEVIS

  • Cet exercice doit être réalisé en individuellement.
  • Votre clientèle cible, libre à vous.
  • Le  style graphique est libre  (Ex: flat design) 
  • Le projet comporte 4 interfaces finales (Accueil, Fiche de l’article, Panier d’achat et Fil d'arianne).
  • Vous devez utiliser du vrai texte, cohérent avec le sujet.
  • Vous devrez faire un minimum de 6 esquisses à main levée.
  • Une suggestion, la grille permet de mieux organiser les éléments graphiques.
  • Vous devez développer l’ensemble des visuels de vos interfaces. 
  • Vous devrez avoir une résolution de 750  pixels en largeur et la longueur est libre. Ce qui représente un appareil mobile Iphone 6 (750 x 1334 px).
  • La remise du projet aura lieu à la semaine 14 au laboratoire.
  • Le moodboard doit contenir au minimum: les 5 couleurs, les 4 typographies, 5 images au minimum et éléments graphiques. 
  • Référence pour le moodboard,  https://www.pinterest.com/tonygaudette/inspiration-moodboard/
  • La remise aura lieu sous la forme d'un PDF.
  • Vous devrez préparer une présentation d’une durée de 3 minutes et vos arguments avec soin. Votre présentation fait partie de l’évaluation.
  • Ce projet compte pour 25% de la session

À FAIRE

  • 6 Esquisses  (2 accueils, 2 fiches de l’article, 2 paniers d’achat)
  • 1 moodboard
  • 1 charte graphique
  • 4 interfaces (Accueil, Fiche de l’article, Panier d’achat et fil d'ariane)

 

1 - PAGE D'ACCUEIL

  • Présentation d’une promotion ou d’un produit vedette ( ex: bannière )
  • Présentation d’un minimum de 4 produits
  • Pour chaque produit présenté, vous devez inclure :
    • Le nom 
    • Le prix
  • Le bas de page, vous devez inclure :
    • Service à la clientèle: Numéro de téléphone, Courriel, 3 médias sociaux)
    • Liste des produits, le nom seulement
  • Lien d’abonnement à la lettre de nouvelles

2- FICHE DE L'ARTICLE

  • L’article détaillé
    • Photographie de l’article
    • Le nom de l’article et sa fonction (ex: Patrizio, tablier de cuisine)
    • Le prix de l’article
    • Ajouter au panier
    • Brève description de l’article
    • Médias sociaux (ex: Pinterest et Facebook)

 

3 - PANIER D'ACHAT

  • Liste des items présents au panier ( minimum 2) avec, pour chacun :
    •  Le nom de l’article
    •  Description des options choisies
    •  La possibilité de retirer l’article du panier
    •  La possibilité d’indiquer la quantité désirée
    •  Le prix selon la quantité désirée pour l’article sélectionné
    • Appliquer un code promo
    • Passer au paiement
    • Le montant total

 

4 - FIL D'ARIANNE (processus d'achat)

  • Le processus d'achat
    • Les étapes du processus d'achat (voir les icônes sur l'image)
    • Nom
    • Nom de la compagnie 
    • Adresse
    • Ville
    • Pays
    • Province / État
    • Code postal
    • Téléphone
    • Courriel
    • Case : Utiliser cette adresse pour la livraison
    • 2 boutons: Étape précédente et Étape suivante

 

ÉCHÉANCIER

  • Semaine 11: 
    • 1 moodboard
    • 2 esquisses  (page d'accueil)
  • Semaine 12: 
    • Page d'accueil terminé à 100%
    • 2 esquisses fiches de l’article et 2 esquisses paniers d’achat
  • Semaine 13: 
    • Page de l'article terminé à 100%
    • Page du panier d'achat à 50%

SEMAINE 10

THÉORIE

  • Contenu du cours: Storytelling

LABORATOIRE

  • Exercice: Créer votre Storytelling
  • Racontez une histoire que l'on va croire… Soyez authentique, parler avec votre coeur.
  • Créer une histoire qui va rendre votre produit unique pour que votre utilisateur s'approprie la notoriété de la marque.
  • Surtout, attirer votre utilisateur jusqu'à la fin de l'histoire.
  • Pour le choix des mots, vous pourriez utiliser un ton engageant qui va nous toucher.
  • Le thème est libre (NB, Addidas, Molson, Pepsi, etc.).
  • Site web  de type «one-page», taille : 1200 px de largeur x longueur libre à vous.
  • Voici quelques exemples d'éléments à intégrer pour créer votre Storytelling: Vidéos (image), photos, graphiques, histoires, commentaires, typo, etc. Une histoire bien racontée est une histoire imagée, dans tout le sens du terme.
  • Créer un persona dans un fichier .DOC
    • Ses habitudes de lecture d’une page
    • Ses moyens de navigation sur Internet
    • Les émotions qui le sensibilisent le plus
    • Les causes qu’il serait prêt à défendre
    • Le type de communication qui le touche le plus (vidéo, image, graphique, etc.)
  • Vous devez proposer 1 interface originale.
  • Vous devez intégrer des textes en prenant en considération leur importance hiérarchique.
  • Vous devez travailler à partir d’une grille. 
  • Cet exercice doit être remis sur le serveur au début du prochain
  • laboratoire au format jpg.
  • Nommer l’interface ( nom de famille )_( prénom )_lab10_v1 
  • Exemple : gaudette_tony_lab10v1

SEMAINE 9

THÉORIE

  • Contenu du cours: Icônes

LABORATOIRE

  • Présentation:  TP2 - OFFF TOUR
  • Exercice typographique:
  • Cet exercice est réalisé individuellement.
  • La taille des deux interfaces est  de 851 x 315 px - Facebook (haut de page) et de 512 x 512 px - Publicité.
  • Vous devez intégrer des textes en prenant en considération leur importance hiérarchique.
  • Vous devez travailler à partir d’une grille. 
  • Les fichiers sources vectoriels sont sur le serveur
  • Cet exercice doit être remis sur le serveur au début du prochain
  • laboratoire au format jpg.
  • Nommer l’interface ( nom de famille )_( prénom )_fb
  • Exemple : gaudette_tony_lab9_fb et pub

SEMAINE 8

THÉORIE

  • Contenu du cours: Courants artistiques

LABORATOIRE

  • Travailler sur le TP2 - OFFF TOUR

SEMAINE 7

THÉORIE

  • Contenu du cours: Lancement du projet de mi-session

LABORATOIRE

  • Travailler sur le TP2 - OFFF TOUR

SEMAINE 6

THÉORIE

  • Contenu du cours: Typographie (la suite)

LABORATOIRE

EXERCICE:

Le travail a pour but de vous introduire au système de grille et le traitement typographique de manière créative. À partir de grilles, vous devrez créer une interface pour le iPad.

  • Cet exercice est réalisé individuellement.
  • Les deux esquisses au minimum sont obligatoires.
  • Le thème est la découverte d’une personne, sur la table de...
  • Le texte lorem ipsum est autorisé. Utilisez la même quantité de texte que l'exemple.
  • La taille du gabarit est de 1536 x 2048 pixels. Voir le fichier PSD sur le serveur iPad-Air.
  • Vous devez intégrer les éléments suivants: des images et des textes. Le traitement de la typographie doit être original.
  • Vous devez proposer 1 interface originale.
  • Vous devez intégrer des textes en prenant en considération leur importance hiérarchique.
  • Vous devez travailler à partir d’une grille. 
  • Cet exercice doit être remis sur le serveur au début du prochain
  • laboratoire au format jpg.
  • Nommer l’interface ( nom de famille )_( prénom )_lab6_v1 
  • Exemple : gaudette_tony_lab6v1

SEMAINE 5

THÉORIE

  • Contenu du cours: Design émotionnelle (la suite)
  • Contenu du cours: Typographie 

LABORATOIRE

Exercices:

  • L5_typo1.pdf (voir devis sur le serveur)
  • L5_typo2.pdf (voir le devis sur le serveur)
  • L5_typo2.pdf (1 composition pour chaque slogan)

TP2 - OFFF TOUR 2016- 25%

Créer un moodboard (ex: https://www.pinterest.com/tonygaudette/inspiration-moodboard/)

Projet

  • Réaliser une image  pour le OFFF TOUR QC 2016
  • Le format est  851 x 315 px - Facebook (haut de page) 

Objectifs

  • Comprendre les besoins du client et définir le message
  • Traduire le message en forme graphique
  • Communiquer la solution trouvée

Étape 1 : Répondre aux questions suivantes 

  • Qui (émetteur, client) : 
  • Dit quoi (message) :
  • À qui (récepteur):
  • Par quel moyen (média utilisé):
  • Avec quel effet :

Étape 2 : Effectuer une recherche graphique

  • Trouvez un élément graphique symbolisant la valeur 3. Dans votre processus créatif, il est possible de vous inspirez du caractère typographique 3. Ne perdez pas le focus sur le symbole comme élément graphique.
  • L’élément doit être simple, cohérent et percutant visuellement.
  • Au rendez-vous les principes de base du design dont les lois de la Gestalt pour y présenter votre composition graphique...
  • Définissez quelle composition traduit le mieux le message à véhiculer et ajoutez les textes et les informations pertinentes pour la transformer en affiche. Vous pouvez ajouter un slogan pour appuyer le visuel.

Étape 3 : Présenter la démarche

  • Préparer un pdf 
  • La présentation doit être cohérente visuellement sobre
  • On doit y retrouver les éléments suivants :
    • Les réponses aux 5 questions de l'étape 1.
    • La présentation du symbole choisi et son explication.
    • Une évolution des solutions graphiques essayées.
    • Un moodboard (inspirations) dans une page
    • La solution graphique (concept final) choisie et son explication.
    • L’image finale intégrer dans un gabarit
    • Ce document sera présenté en classe par l'étudiant dans un court exposé de 2 à 5 minutes.

À remettre

  • Dans un dossier identifié à vos nom et prénom suivi de _DG_tp1 (tremblay_pierre_DG_tp1)
  • L'image JPG ou PNG devra être dans un format 851 x 315 px -  Identifié à votre nom
  • Un pdf -  Identifié à votre nom

Date de remise 

  • Semaine 9

Évaluation 

  • 40% Pertinence du message et de son expression
  • 40% Recherche graphique
  • 20% Présentation + pdf

 


SEMAINE 4

THÉORIE

  • Contenu du cours: Design émotionnelle

LABORATOIRE

EXERCICEs - CRÉER un design graphique avec les principes du design émotionnelle

  • Thème: Proraso (crème à barbe) ou Marvis (dentifrice) 
  • Tout est italien. Deux marques de produits de luxe
  • Réaliser des interfaces:
    • Facebook (haut de page) : 851 x 315 px
    • Youtube (vidéo): 1280 x 760 px
    • Instagram (miniature): 161 x 161 px
    • Instagram (photo): 1080 x 1080 px
    • Twitter (haut de page): 1500 x 500 px
    • Pinterest (image): 222 x 150 px
  • Le choix des images est votre discrétion
  • Vous devez nous faire sentir l'émotion, il ne faut pas oublier que nous voulons créer des expériences humaines. Vous pourrez humaniser vos compositions graphiques...
  • Attirer votre utilisateur avec un graphisme efficace: typographie, image, couleur. 
  • Les expériences émotionnelles laissent une empreinte dans notre mémoire à long terme. 
  • Soyez authentique et utiliser une bonne ligne éditoriale
  • Votre cible, le persona primaire

SEMAINE 3

THÉORIE

  • Contenu du cours: La base du design

LABORATOIRE

EXERCICE 1 - CRÉER à l'aide de points différents concepts

  • 1 exemple de Gestalt
  • 1 exemple de proximité
  • 1 exemple de symétrie
  • 1 exemple d'asymétrie
  • 1 exemple de tension
  • 1 exemple d'effervescence
  • Importer ce fichier GIF dans Illustrator pour l'utiliser comme gabarit

 

EXERCICE 2 - CRÉER DES INTERFACES PRÉLIMINAIRES À L'AIDE d'images

  • 1 exemple de proximité
  • 2 exemples d'asymétrie
  • 1 exemple de rythme
  • Importer ce fichier GIF dans Illustrator pour l'utiliser comme gabarit
lab3_2.gif




SEMAINE 2

THÉORIE

  • Contenu du cours: La grille
  • Contenu du cours: La couleur

LABORATOIRE

EXERCICE 1 - modifier la grille des INTERFACEs

Il est possible de modifier les interfaces pour le format portrait ou panoramique, libre à vous.

  • Exercice 1.0  Créer une nouvelle grille : 3 colonnes 
  • Exercice 2.0  Créer une nouvelle grille : 2 colonnes
  • Exercice 3.0  Créer une nouvelle grille : 3 colonnes

EXERCICE 2 - CRÉER 2 HARMONIES DES COULEURS DE L'INTERFACE

  • Réaliser 1 interface en modifiant les couleurs pour créer une harmonie de couleur froide monochrome.
  • Réaliser 1 interface en modifiant les couleurs pour créer une harmonie de couleur chaude monochrome.

EXERCICE 3 - CRÉER une HARMONIE (couleur dominante)

  • Réaliser 1 interface en modifiant les couleurs pour créer une harmonie de couleur dominante avec une couleur interactive.

http://whatcolourisit.scn9a.org


SEMAINE 1

THÉORIE

  • Contenu du cours: La grille
  • Présentation du professeur 
  • But du cours
  • Présentation du plan de cours  
  • Communication par Léa
  • Disponibilités et mon bureau E-201

LABORATOIRE

  • Adresse courriel professionnelle et nom de domaine 
  • Les contenus des exercices sont sur le serveur.

EXERCICE 1 - INTERFACE DE RESTAURANT

  • Les contenus des exercices sont sur le serveur.
  • Ce travail a pour but de valider vos connaissances techniques et votre potentiel créatif. Vous devez créer une interface pour le site Internet d’un restaurant italien ou japonais.
  • Cet exercice doit être réalisé individuellement en couleur RVB
  • La dimension de l’interface finale est de 1920 X 1080 pixels.
  • Vous devez créer un menu principal comprenant boutons qui seront identifiés : Restaurant, Menu, Carte des vins, Localisation, Réservation.
  • Vous devez utiliser les images fournis par le professeur.
  • Vous devez intégrer le logotype du restaurant, le slogan, le court texte, les coordonnées et une zone mettant en évidence la réservation en ligne.
  • Vous pouvez utiliser le ou les logiciel(s) de votre choix pour réaliser votre interface. Il est préférable d'utiliser Photoshop.
  • Cet exercice doit être remis à la fin du cours sur le serveur au format jpeg ou png ou gif et ne doit pas surpasser 300 Ko.
  • Nommer le document (nom de famille)_( première lettre du prénom ) Exemple : gaudet_t

EXERCICE 2 - Profil

  • Trouvez un nouveau titre
  • Changez la typographie
  • Modifiez la couleur
  • Ajouter votre photo
  • Personnalisez l'arrière plan
  • Conservez la taille du cadre
  • Taille de l'interface: 425 x 425 pixels
  • Taille de la mise en page: 800 x 600 pixels

EXERCICE 3 - Widget

  • Mettre en mode de couleur monochrome (variation d'une même couleur)
  • Changez la destination (ville)
  • Ajouter une image de cette ville
  • Changez la typographie
  • Modifiez la mise en page
  • Conservez la taille du cadre
  • Taille de l'interface: 360 x 480 pixels
  • Taille de la mise en page: 800 x 600 pixels