SEMAINE 14

THÉORIE

  • Contenu du cours: Charte graphique

 

LABORATOIRE

  • TP de fin de session (BOUTIQUE EN LIGNE)

  • La date de remise du projet est le mardi 26 mai qui devient un jeudi

  • Charte graphique:

    • La fiche de l'article

    • La description détaillée en pixel de l'emplacement des éléments graphiques

    • Les couleurs

    • Les typographie


SEMAINE 13

THÉORIE

  • Contenu du cours: Planification


LABORATOIRE

  • TP de fin de session (BOUTIQUE EN LIGNE)

  • La date de remise du projet est le mardi 26 mai qui devient un jeudi.


SEMAINE 12

THÉORIE

  • Contenu du cours: E-Com 2 /2


LABORATOIRE

  • TP de fin de session (BOUTIQUE EN LIGNE)


SEMAINE 11

THÉORIE

  • Contenu du cours: E-Com

 

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 sont des gens entre 17 à 25 ans.

  • Le style graphique est libre (Ex: flat design)

  • Le projet comporte 3 interfaces finales (Accueil, Fiche de l’article, Panier d’achat).

  • Vous devez utiliser du vrai texte, cohérent avec le sujet.

  • Vous devez créer 2 icônes pour le mode paiement.

  • 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.

  • Vous devrez créer les icônes. Les caractéristiques seront remis pendant la réalisation du projet. Exemples d’icônes: les 2 modes de paiement, 3 médias sociaux, la corbeille, etc.

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

  • 5 icônes (2 modes de paiement, 3 médias sociaux)

  • 1 moodboard

  • 1 charte graphique

  • 4 interfaces (Accueil, Fiche de l’article, Panier d’achat)

 

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

    • 5 icônes (2 modes de paiement, 3 médias sociaux) dans Illustrator

    • 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 responsive


LABORATOIRE

EXERCICE 1 - 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: Congé de pâque

LABORATOIRE

EXERCICE 1 - Révision typographique

  • Ce travail a pour but de mettre en pratiques les règles de typographie. Vous devez modifier l'interface du site site Internet en ajoutant les erreurs de typographiques possibles.

  • En équipe de deux personnes

  • Utiliser le PSD qui se trouve sur le serveur

  • Voici les éléments à ajouter:

    • L'orphelin

    • Les guillemets

    • La césure (séparation)

    • La longueur des lignes

    • Le titre flottant

    • L'approche de groupe

    • L'approche de paire

    • la couleur typographique

    • La veuve

EXERCICE 2 - Blogue (Refonte)

  • Utiliser le PSD qui se trouve sur le serveur

  • Actualiser le design graphique (refonte) du blogue

  • L'objectif est d'apprendre la mise en page à partir d'un design existant

  • Adapter le design en fonction d'un public cible (17 à 25 ans)

  • Il est possible de travailler en équipe

  • À travailler:

    • Les couleurs

    • La typographie

    • C'est lourd visuellement (noir)

    • On ajoute les médias sociaux

    • Les icônes (flat design)

    • Le logotype (ayoye)


SEMAINE 8

THÉORIE

  • Contenu du cours: La base du design graphique

LABORATOIRE

EXERCICE 1 - Dossier spécial Presse+

  • Dossier la PRESSE +

  • Thème: DOSSIER SPÉCIAL (le choix est à votre discrétion)

  • Étape 1: Les esquisses sont obligatoires (développer deux concepts et choisir celui qui est le plus pertinent)

  • Étape 2: 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

  • Étape 3: Votre dossier doit contenir les éléments suivante:

    • Texte (lorem ipsum)

    • 3 pages de contenu

    • Surtout des images

    • Il est possible d'y ajouter une vidéo (simulation)

    • Icônes: Partager , En direct, Envoyer cet article par courriel

    • Visuels: un graphique ou une carte

    • Mettre les crédits Photo

    • Ajouter le nom et une image fictive du journaliste

  • Vous devez obligatoirement utiliser une grille et la respecter

  • Le travail est fait en équipe de 2 personnes

  • Taille: de 2048 px x 1536 px (orientation est paysage)

  • Il ne faut pas oublier l'harmonie des couleurs

  • La remise aura lieu à semaine 9 au début du laboratoire sous la forme d'un document PDF

  • Ce projet compte pour 5%

  • Mettre en application: la grille, la lisibilité de la typographie et rendre votre projet intéressant visuellement


SEMAINE 7

THÉORIE

  • Contenu du cours: Tendance graphique

LABORATOIRE

EXERCICE 1 - MAGAZINE NUMÉRIQUE POUR IPAD/ PROJET DE MI-SESSION

  • Travailler sur le projet


SEMAINE 6

THÉORIE

  • Contenu du cours: Les symboles et le logotype

LABORATOIRE

EXERCICE 1 - MAGAZINE NUMÉRIQUE POUR IPAD/ PROJET DE MI-SESSION

  • Travailler sur le projet


SEMAINE 5

THÉORIE

  • Contenu du cours: Design émotionnel

LABORATOIRE

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

  • Thème: OFFF 2015

  • Mon magazine doit contenir les 6 pages ou sections suivantes:

    • 1- Page d'accueuil (voir mon exemple)

    • 2- Page de contenu (exemple: Hymne à la culture…)

    • 3- Page de contenu de l'événement

    • 4- Page d'un ou d'une conférencière de votre choix

    • 5- Page avec du visuels et l'intégration des logotypes

    • 6- Page des illustrateurs «En masse» avec l'intégration de leur logotype et texte. Vous pouvez mettre quelques illustrateurs qui sont des collaborateurs, libre à vous.

  • La clientèle cible sont les gens qui s'intéressent à la culture numérique

  • 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 est paysage)

  • La remise aura lieu à semaine 7 à la fin du laboratoire sous la forme d'un document PDF

  • Ce projet compte pour 25%

  • 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.

  • Mettre en application: la grille, le design émotionnel et la typographie

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 4

THÉORIE

  • Contenu du cours: La typographie 2 / 2

LABORATOIRE

EXERCICE 1 - Magazine numérique pour ipad

  • Thème: OFFF

  • Créer 2 maquettes du magazine numérique pour ipad: une interface conférencier et une interface de votre choix

  • La clientèle cible sont les gens qui s'intéressent à la culture numérique

  • Préparer votre mise en page dans AI (Illustrator)

  • Taille: de 2048 px x 1536 px (orientation est paysage)

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

  • Le choix typographique est de mise, pensez lisibilité

  • Le magazine devra être créatif

  • Vous pouvez vous inspirer de mon exemple


SEMAINE 3

THÉORIE

  • Contenu du cours: La typographie 1/2

LABORATOIRE

EXERCICE 1 - CRÉER 3 mises en page de menu

  • Il s'agit d'un menu pour un restaurant ou un bistro.

  • Vous devez faire 3 maquettes différentes.

  • Il est important de varier la grille ( 2, 3, 4 colonnes, etc.)

  • Le choix typographique est de mise, pensez lisibilité

  • Le contenu est à votre discrétion

  • Votre public cible est âgé entre 18 à 25 ans

  • Préparer votre mise en page dans AI (Illustrator)

  • Taille: de 1920 x 1080 px

  • L'orientation est paysage

  • Le travail est réalisé en équipe de deux personnes

  • Nommer le document (nom de famille)_(prénom)_ex1 Exemple: gaudette_tony+stark_philippe_ex1.jpg


SEMAINE 2

THÉORIE

  • Contenu du cours: La couleur

LABORATOIRE

EXERCICE 1 - Créer 6 Harmonies des couleurs de l'interface

  • Réaliser 2 interfaces en modifiant les couleurs pour créer une harmonie de couleur froide monochrome.

  • Réaliser 2 interfaces en modifiant les couleurs pour créer une harmonie de couleur chaude monochrome.

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

  • Réaliser 1 interface1 en modifiant les couleurs pour créer une harmonie de couleur de votre choix.

  • Voir exemple sur le serveur en JPG

  • Nommer le document (nom de famille)_(prénom)_ex1 Exemple: gaudette_tony_ex1.jpg

http://whatcolourisit.scn9a.org

EXERCICE 2 - DEVOIR: HALCYON

  • À partir du fichier exercice 2. Vous devez actualiser l'harmonie de couleur.

  • Créer une harmonie de couleur plus dynamique, plus créative, plus lumineuse, plus saturé...

  • Le choix de couleur à votre est à votre discrétion. Soyez, l'influenceur.

  • Il est possible de changer les couleurs des images.

  • Nommer le document (nom de famille)_(prénom)_ex1 Exemple: gaudette_tony_halcyon.jpg


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 pouvez utiliser les images fournis par le professeur ou utiliser vos images.

  • 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