SEMAINE 13

THÉORIE

  • Contenu du cours: À venir

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
  • Un exemple   http://afteroom.com

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 sont des gens entre 17 à 25 ans.
  • Le  style graphique est libre  (Ex: flat design) 
  • Le projet comporte 2 interfaces finales (Accueil et Fiche de l’article).
  • Vous devez utiliser du vrai texte, cohérent avec le sujet.
  • Vous devez créer  3 icônes pour les médias sociaux.       
  • Vous devrez faire un minimum de 4 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 5336 px).
  • La remise du projet aura lieu à la semaine 14 au laboratoire.
  • Le moodboard doit contenir au minimum: les 3 couleurs, les 3 typographies, 6 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 30% de la session

À FAIRE

  • 2 interfaces (accueil et fiche de l’article)
  • 4 Esquisses  (2 x accueils et 2 x fiches de l’article)
  • 3 icônes (médias sociaux)
  • 1 moodboard
  • 1 charte graphique

 

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 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 à l'infolettre

 

2- FICHE D'UN PRODUIT

  • Le produit 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)

 

ÉCHÉANCIER

  • Semaine 12 -13: 
    • 1 moodboard
    • 3 icônes  (médias sociaux) dans Illustrator
    • 2 esquisses  (page d'accueil)
    • 2 esquisses (fiches du produit)
    • Page d'accueil terminé à 50%
    • Page du produit à 50%
  • Semaine 14: 
    • Page de l'article terminé au milieu du laboratoire
    • Page du panier d'achat au milieu du laboratoire
    • Préparation du document de remise PDF
    • Présentation

SEMAINE 12

THÉORIE

  • Contenu du cours: Charte graphique + présentation du travail final

LABORATOIRE

EXERCICE - Interface selon un courant artistique

  • Mettre en pratique les notions du cours de théorie sur le Responsive
  • Utiliser le modèle pour vous inspirer dans Illustrator : Modèle Web / Commun / Taille: 1280 x 1024 px
  • Thème: Bar
  • Une section dans le site : Accueil, Menu, Galerie, Contact
  • Utiliser leu texte Lorem ipsum
  • Faire une recherche sur l'époque et le courant artistique dans un moodboard
  • La remise aura lieu la semaine prochaine

SEMAINE 11

THÉORIE

  • Contenu du cours: À venir

LABORATOIRE

TP2 - RESPONSIVE : Mobile

  • Mettre en pratique les notions du cours de théorie sur le Responsive
  • Utiliser le modèle pour vous inspirer dans Illustrator : Modèle Mobile / Iphone 6/6s / taille: 750 x 1334 px
  • Thème: Uniqlo
  • Une section dans le site : Femme, homme, enfant et bébé
  • Utiliser le texte réel
  • La remise aura lieu la semaine prochaine
  • À travailler:
    • Le responsive
    • Les couleurs
    • La typographie
    • L'unité visuel entre les différents médiums (mobile, tablette, ordinateur)
    • Les icônes s'il y a lieu
    • Le style (ex: flat design)
  • La remise aura lieu à semaine 12 à la fin du laboratoire sous la forme d'un document PDF
  • Ce projet compte pour 15%

À faire:

  • 1 - Une interface pour mobile
  • 2- Moodboard
  • 3 -Publicité Uniqlo

Les critères d'évaluations:

  • 1- Respect des consignes demandées ( 2 points ) - Voir les consignes du devis
  • 2- Moodboard ( 3 points ) -  Je vous propose d’utiliser les notions théoriques sur la conception et la réalisation des esquisses.
  • 3- Mise en page (10 points ) -  Il y a plusieurs éléments qui seront évalués : Typographie, couleur, l’architecture de l’information et unité visuelle (cohérence dans l’ensemble du projet).

SEMAINE 10

THÉORIE

  • Contenu du cours: Exercice pratique sur le design émotionnel

LABORATOIRE

EXERCICE - RESPONSIVE 

  • Mettre en pratique les notions du cours de théorie sur le Responsive
  • Utiliser le modèle pour vous inspirer Responsive.psd, il se trouve sur le serveur
  • Un exemple de cas réel qui fonctionne (responsive) http://tonygaudette.com
  • Thème: Une entreprise de votre choix
  • Section dans le menu: Produits, Acheter en ligne, Qui sommes-nous et blog.
  • Le texte courant sera du lorem ipsum 
  • La remise aura lieu la semaine prochaine
  • À travailler:
    • Les couleurs
    • La typographie
    • L'unité visuel entre les différents médiums (mobile, tablette, ordinateur)
    • Les icônes s'il y a lieu
    • Le style (ex: flat design)

SEMAINE 9

THÉORIE

  • Contenu du cours: Design émotionnel

LABORATOIRE

TP1 - MAGAZINE NUMÉRIQUE POUR IPAD/ Projet de mi-session


    SEMAINE 8

    THÉORIE

    • Contenu du cours: Exercice pratique ( la suite)

    LABORATOIRE

    TP1 - MAGAZINE NUMÉRIQUE POUR IPAD/ Projet de mi-session

    • Thème: Magazine de cuisine
    • Mon magazine doit contenir les 6 pages ou sections suivantes:
      • 1- Page de couverture ou d'accueuil
      • 2- Page de glossaire 
      • 3- Page de 3 collaborateurs + textes descriptifs (photographe, rédacteur, chef)
      • 4- Page de contenu qui est en lien avec le culinaire
      • 5- Page d'une recette
      • 6- Page de publicité - un objet à vendre (ex: BBQ, tablier, sauces piquantes, breuvage, etc.)
    • La clientèle cible sont les gens de 17 à 20 ans qui s'intéressent au mouvement culinaire
    • Votre moodboard doit contenir au minimum: couleurs, typographies, images et éléments graphiques. La remise est sous la forme d'un PDF, JPG ou PNG. Il fait partie de l'évaluation
    • Taille: de 2048 px x 1536 px (orientation portrait ou paysage)
    • La remise aura lieu à semaine 9 à la fin du laboratoire sous la forme d'un document PDF
    • Ce projet compte pour 20%
    • Processus de réalisation: 
      • Créer sa grille (2 , 3, 4 colonnes) sur papier
      • Faire des esquisses du concept sur papier
      • Trouver des images qui gravite autour du design émotionnel (ex: Pinterest)
      • Choisir les bonnes typographies (https://www.fontsquirrel.com)
    • Une présentation d’une durée de 3 minutes aura lieu. Votre présentation ne fait pas partie de l’évaluation. Il s’agit simplement de présenter votre projet. 

    Les critères d'évaluations:

    • 1- Respect des consignes demandées ( 3 points ) - Voir les consignes du devis
    • 2- Moodboard ( 4 points ) -  Je vous propose d’utiliser les notions théoriques sur la conception et la réalisation des esquisses.
    • 3- Mise en page (15 points ) -  Il y a plusieurs éléments qui seront évalués : Typographie, couleur, l’architecture de l’information et unité visuelle (cohérence dans l’ensemble du projet).
    • 4- Créativité du projet ( 3 points )

    SEMAINE 7

    THÉORIE

    • Contenu du cours: Exercice pratique

    LABORATOIRE

    EXERCICE 1 - Journal

    • Travailler sur le projet

    SEMAINE 6

    THÉORIE

    • Contenu du cours: Logotype

    LABORATOIRE

    EXERCICE 1 - Journal

    • Objectif: Il s'agit d'une refonte de cette page de journal en vous inspirant du design émotionnelle
    • Le public cible est entre 17 et 25 ans
    • Modifier la typographie et les couleurs
    • Vous pouvez changer la grille, libre à vous
    • Utiliser avec les images proposées par le professeur
    • Installer les fontes avant d'ouvrir le document, voir le dossier Fontes dans le dossier
    • Utiliser le fichier source (journal_tony.ai)  pour modifier le document. C'est un document Illustrator.

    SEMAINE 5

    THÉORIE

    • Contenu du cours: Design émotionnel 

    LABORATOIRE

    EXERCICE 1 - CARte d'affaires

    • Thème: Votre carte à vous
    • Elle doit contenir les éléments  suivants:
      • Nom de l'entreprise ou logotype
      • Prénom et nom
      • Profession
      • Numéro de téléphone
      • Courriel
      • Site web
    • Taille 2 x 3 1/2 pouces (libre à vous de l'orientation soit portrait ou paysage)
    • Nommer le document (prénom)_(nom de famille)_ex1_lab5.jpg   Exemple: tony_gaudette_ex1_lab5.jpg

     

    EXERCICE 2 - Présentation d'une entreprise

    • Thème: Libre
    • Elle doit contenir les éléments  suivante:
      • Page d'accueil
      • À propos
      • L'équipe
      • Services offerts
      • Portfolio général
      • Portfolio en détail
      • Localisation du bureau
    • Taille : page 11 x 8 1/2 pouces (orientation est paysage) ou 8 1/2 x 11 pouces (orientation est portrait) 
    • La remise aura lieu au début du laboratoire 7 dans le dossier de remise MAC sous la forme d'un document PDF. Vous aurez un peu de temps pour finaliser votre projet durant le laboratoire. 
    • Utiliser du texte de remplissage http://www.lipsum.com
    • Mettre en application: la grille, la couleur et la typographie

    Page d'accueil

    À propos

    L'équipe

    Services offerts

    Portfolio général

    Portfolio en détail

    Localisation du bureau


    SEMAINE 4

    THÉORIE

    • Contenu du cours: La typographie

    LABORATOIRE

    EXERCICE 1 - MAGAZINE NUMÉRIQUE POUR IPAD

    • Thème: Libre
    • Mon magazine doit contenir les 3 pages ou sections suivantes:
      • 1 x page d'accueuil 
      • 2 x pages de contenu
    • La clientèle cible sont les gens qui sont abonnés au journal La Presse
    • Mettre en avant plan la typographie et les images
    • Votre moodboard doit contenir au minimum: couleurs, typographies, images et éléments graphiques. La remise est sous la forme d'un PDF, JPG ou PNG. Une seule page fait dans Illustrator au format lettre 8 1/2 x 11 pouces (orientation portrait).
    • Taille des 3 interfaces: de 2048 px x 1536 px (orientation est paysage)
    • La remise aura lieu à semaine 5 au début du laboratoire sous la forme d'un document PDF
    • Utiliser du texte de remplissage http://www.lipsum.com
    • Mettre en application: la grille, la couleur et la typographie


    SEMAINE 3

    THÉORIE

    • Contenu du cours: La couleur

    LABORATOIRE

    EXERCICE 1 - La GRille + La couleur

    • Réaliser 1 interface en modifiant la grille en deux colonnes à partir du fichier «grille_1.psd»
    • Réaliser 1 interface en modifiant la grille en trois colonnes «grille_2.psd». Soyez créatif
    • Ouvrir les fichiers dans Illustrator. Oui, oui dans Illustrator
    • C'est tout à fait normal que la typographie soit avec un rectangle rose. Vous pourrez utiliser la fonte de votre choix.

     

    http://whatcolourisit.scn9a.org

    EXERCICE 2 - La COULEUR

    • Réaliser 2 interfaces en modifiant les couleurs pour créer une harmonie de couleur froide.
    • Réaliser 2 interfaces en modifiant les couleurs pour créer une harmonie de couleur chaude.
    • Utiliser les deux documents : Facebook.psd et meteo.psd
    • Ouvrir les fichiers dans Illustrator. 
    • Vous libre de changer l'ensemble des éléments graphiques, typographies, etc.
    • Nommer le document (nom de famille)_(prénom)_ex1   Exemple: gaudette_tony_froide1de2.jpg
    • Nommer le document (nom de famille)_(prénom)_ex1   Exemple: gaudette_tony_froide2de2.jpg

    SEMAINE 2

    THÉORIE

    • Contenu du cours: La base du design - Suite
    • Contenu du cours: La grille

    LABORATOIRE

    • Création de la grille dans Illustrator : Affichage / Règles 
    • Pour rendre visible vos guides : Affichage / Repères
    • Pour l'affichage d'une grille: Afficher la grille

    EXERCICE 1 - Grille - Facebook

    • Thème : Marque de commerce
    • Le contenu est à votre discrétion
    • Utiliser du vrai texte 
    • Vous devez faire 2 maquettes différentes. 
    • Il est important de varier la grille ( ex: 1, 2, 3 colonnes, etc.)
    • Le choix typographique est de mise, pensez lisibilité
    • Préparer votre mise en page dans AI (Illustrator)
    • Taille: de 1200 x 627 px
    • L'orientation est paysage
    • Nommer le document (prénom)_(nom de famille)_ex1   Exemple: tony_gaudette_ex1.jpg

    EXERCICE 2 - GRILLE - instagram

    • Thème : Marque de commerce
    • Le contenu est à votre discrétion
    • Utiliser du vrai texte 
    • Vous devez faire 2 maquettes différentes. 
    • Il est important de varier la grille ( ex: 1, 2, 3 colonnes, etc.)
    • Le choix typographique est de mise, pensez lisibilité
    • Préparer votre mise en page dans AI (Illustrator)
    • Taille: de 1080 x 1080 px
    • L'orientation est paysage
    • Nommer le document (prénom)_(nom de famille)_ex2 Exemple: tony_gaudette_ex2.jpg

    SEMAINE 1

    THÉORIE

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

    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. Dans Illustrator choisir Web - Large dans le panneau Web.
    • Vous devez créer un menu principal comprenant boutons qui seront identifiés : Restaurant, Menu, Carte des vins, Localisation, Réservation.
    • Vous pouvez utiliser les images fournis par le professeur, libre à vous. 
    • Vous devez intégrer le logotype du restaurant de votre choix, le slogan,  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 Illustrator pour la mise en page et de faire le traitement des images dans 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_desktop
    • Remis soit en JPG ou en PDF

    EXERCICE 2 - Instagram

    • L'objectif est de créer une publicité
    • Trouvez un titre
    • Ajouter une images ou une couleur
    • Personnalisez la mise en page
    • Taille (Instagram): 1200 x 1200 pixels
    • Nommer le document (nom de famille)_( première lettre du prénom ) Exemple : gaudet_t_instagram
    • Remis soit en JPG ou en PDF

     

    EXERCICE 3 - Facebook

    • L'objectif est de créer une publicité
    • Trouvez un titre
    • Ajouter une images ou une couleur
    • Personnalisez la mise en page
    • Taille (Facebook): 1200 x 627 pixels
    • Nommer le document (nom de famille)_( première lettre du prénom ) Exemple : gaudet_t_facebook
    • Remis soit en JPG ou en PDF