SEMAINE 14
REMISE DU PROJET FINAL - URL FIGMA
LABORATOIRE
SEMAINE 13
THÉORIE
Contenu du cours: Examen
LABORATOIRE
TRAVAIL DE FIN DE SESSION / BOUTIQUE EN LIGNE (E-COM)
SEMAINE 12
THÉORIE
Contenu du cours: Révision en préparation de l’examen final qui aura lieu la semaine 13
LABORATOIRE
TRAVAIL DE FIN DE SESSION / BOUTIQUE EN LIGNE (E-COM)
Inscription au vernissage de l’expositions des finissants en design de l’UQAM 2019
Faire l’inscription avant le 30 avril pour participer au vernissage qui aura lieu le mercredi 1 mai 2019 à 18h00.
SEMAINE 11
THÉORIE
Contenu du cours: Storytelling
LABORATOIRE
TRAVAIL DE FIN DE SESSION / BOUTIQUE EN LIGNE (E-COM)
Réaliser à l’aide de FIGMA, la conception et la réalisation de deux interfaces pour une boutique en ligne de votre choix dans deux styles différents. Par exemple: crayons, skate, jeux de table, etc.
Mettre en pratique les notions de mise en page
Un exemple de cas réel de E-Com http://maisonmilan.com
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é individuellement.
Votre clientèle sont des gens entre 17 à 25 ans.
Le style graphique est libre (Ex: Material design)
Le projet comporte 2 interfaces finales (Accueil et Fiche de l’article). Toutefois, vous devez faire 2 styles différents.
Vous devez utiliser du vrai texte, cohérent avec le sujet.
Vous devez créer ou trouver 6 icônes du fil d’Ariane:
Panier d’achat
Adresse du paiement
Adresse de livraison
Méthode de livraison
Type de paiements
Confirmation de livraison
Vous devrez faire un minimum de 4 fil de fer (wireframe) à 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 375 pixels en largeur et la longueur est libre. Ce qui représente un appareil mobile Iphone 10 (375 x 812 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 6 icônes.
Référence pour le moodboard, https://www.pinterest.com/tonygaudette/inspiration-moodboard/
La remise aura lieu sous la forme d'un PDF.
Vous pourrez sur une base volontaire présenter votre projet devant la classe. Votre présentation ne fait pas partie de l’évaluation.
Utiliser FIGMA MIRROR pour voir votre projet sur le mobile. Télécharger l’application sur l’App Store ou Google PLAY STORE
Ce projet compte pour 30% de la session
À FAIRE
2 interfaces (1 x accueil et 1 fiche de l’article)
4 fils de fer (wireframe) 2 x accueils et 2 x fiches de l’article
6 icônes du fil d’ariane (Panier d’achat, adresse du paimeent, adresse de livraison, méthode de livraison, type de paiements et onfirmation de livraison
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 11 -12:
1 moodboard
2 fils de fer (wireframe) / accueils
2 fils de fer (wireframe) / fiches de l’article
Semaine 13:
6 icônes du fil d’ariane (Panier d’achat, adresse du paimeent, adresse de livraison, méthode de livraison, type de paiements, confirmation de livraison)
Page d'accueil terminé à 50%
Page du produit à 50%
Charte graphique
Partager le lien FIGMA «view» seulement. Vous m’envoyez le lien et de le mettre sur le serveur dans remise travaux.
Semaine 14:
1 page d'accueil terminé à la fin laboratoire
1 page de l'article terminé à la fin du laboratoire
1 page d’achat contenant intégration des 6 icônes du fil d’ariane
Remise sur le serveur
Fil d’ariane avec les 6 icônes
Page d’accueil
Page de l’article
SEMAINE 10
THÉORIE
Contenu du cours: Charte graphique
Travailler sur le branding de L’Atim
SEMAINE 9
THÉORIE
Contenu du cours: Logotype et Icône
Branding Maison Milan : PDF
LABORATOIRE
Travailler sur le branding de L’Atim
SEMAINE 8
THÉORIE
LABORATOIRE
Devis: Ce projet a pour objectif de concevoir et de réaliser l’image de marque de l'ATIM. La compréhension rapide et l’efficacité graphique du logotype doit être la priorité.
La taille est un format lettre 8 1/2 x 11 po. (libre à vous de me mettre portrait ou paysage)
La version finale doit être en format PDF
Cet exercice est réalisé individuellement.
Le style graphique sont à votre choix.
Votre logotype doit être lisible et percutant
Faire une recherche de visuels, d'inspirations dans un document de format lettre 8 1/2 x 11 po. (libre à vous de me mettre portrait ou paysage)
Tenir compte du client, du public et du message
Logotype TIM .AI
À remettre:
Moodboard
logotype en 3 tailles (15 x 15 cm, 128 x 128 px et 32 x 32 px)
Typographie
Intégration du logotype dans une page de mobile
Direction photo
Médias sociaux : storie instagram, publication instagram et facebook
Remise:
À la fin du laboratoire 10
Critères d’évaluation (30 points):
1- Respect des consignes demandées (3 points ) - Voir les consignes du devis
2- Moodboard (6 points )
3- Mise en page (21 points ) - Il y a plusieurs éléments qui seront évalués : Créativité du projet, typographie, couleur, et unité visuelle.
À remettre:
Un fichier pdf regroupé de plusieurs pages PDF identifiés à votre nom
Inspiration : Charte graphique
https://creativemarket.com/studiostandard/2910115-Auburn-Brand-Guidelines
https://creativemarket.com/studiostandard/2691886-ROSE-—-Brand-Guidelines
https://creativemarket.com/studiostandard/1270024-Phoebe-Design-Guidelines
https://creativemarket.com/Imagearea/2368516-Design-Brand-Guidelines
https://creativemarket.com/circular/2427400-SANTONA-Brand-Guidelines
Processus de création du logotype
Exemple de moodboard
Exemples de recherche typographique :
Exemple du logotype finale:
Exemple de monogramme:
Exemple de taille pour vérifier la lisibilité
Exemple de choix typographique:
Exemple intégrer dans un site internet:
Exemple de direction photo:
Médias sociaux : Les différentes plateformes
Instagram : Storie
Facebook : Exemple de rédaction
SEMAINE 7
THÉORIE
Contenu du cours: Le design émotionnel (suite)
LABORATOIRE
Maquettes terminées à 100% dans FIGMA
Présentation de 3 minutes qui ne compte pas
Transmettre par MIO votre lien FIGMA
Identifiez avec dossier et fichier (prénom_nom)
Remise finale sur le serveur dans remise travaux
Dossier interfaces:
PNG ou JPG - 1 - Page d'accueil
PNG ou JPG - 2 - Page du glossaire
PNG ou JPG - 3 - Page de contenu
PNG ou JPG - 4 - Page avec une publicité
PNG ou JPG - 5 - Moodboard
PNG ou JPG - 6 - Wireframe (Page d'accueil )
PNG ou JPG - 7 - Wireframe (Page du glossaire)
PNG ou JPG - 8- Wireframe (Page de contenu)
PNG ou JPG - 9 Wireframe (Page avec une publicité
1011 (12h à 15h)
Francis Gagnon
Karianne Perreault
Marianne Comeau
Samuel Rousseau
1012 (15h à 18h)
Antoine-Olivier Hamilton
Xavier Sercia
1031 (8h à 12h)
SEMAINE 6
THÉORIE
Contenu du cours: Le design émotionnel
LABORATOIRE
Compléter les interfaces dans FIGMA les sections suivantes:
1- Page d'accueil
2- Page du glossaire
3- Page de contenu
4- Page avec une publicité
POur le prochan laboratoire
Semaine 7:
Maquettes terminées à 100% dans FIGMA
Présentation de 3 minutes qui ne compte pas
Préparer votre dossier de remise : un lien FIGMA
Remise finale sur le serveur dans remise travaux
EXERCICE - AFFiche
À intégrer :
Logo TIM
AIDE TIM
Un étudiant est sur place pour t’aider à avancer tes projets
Tous les mercredis de 12h à 14h
Local : D2912
Logotype : Télécharger
Vous devez utiliser l’application CANVA qui une application gratuite et disponible en ligne.
Il suffit d’aller dans l’application CANVA et choisir CRÉER le template MARKETING / Prospectus ou Flyers (8 1/2 x 11 pouces)
Export / PDF pour impression
Identifiez avec votre (prénom_nom)
SEMAINE 5
THÉORIE
Contenu du cours: La typographie
LABORATOIRE
Thème: Exemples: L’été de mes 12 ans, le camping, la banlieue, le bal des finissants, les phobies, les tout-inclus, les prénoms, etc.
Mon magazine doit contenir les 4 pages ou sections suivantes:
1- Page d'accueil
2- Page du glossaire
3- Page de contenu
4- Page avec une publicité
1- Page d'accueil
2- Page du glossaire
3- Page de contenu
4- Page avec une publicité
La clientèle cible sont les gens entre 18 et 30 ans
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. Une seule page fait dans le logiciel Figma de 834 px x 1112 px ( paysage)
Taille des 4 interfaces pour le iPad Pro de 1o,5 pouces de 834 px x 1112 px ( paysage)
La remise aura lieu à semaine 7 au milieu du laboratoire sous la forme d'un document PDF
Mettre en application: la grille, la couleur, la composition et la typographie
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.
Utiliser du vrai texte au lieu du texte de remplissage http://www.lipsum.com
À FAIRE
Wireframe - Figma
Interfaces finale - Figma
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 )
ÉCHÉANCIER
Semaine 5:
Wireframe fait dans FIGMA - Fait dans un # «frame » nommé : wireframe
Moodboard
Semaine 6:
Débuter les interfaces dans FIGMA
Semaine 7:
Maquettes terminées à 100% dans FIGMA
Présentation de 3 minutes qui ne compte pas
Préparer votre dossier de remise : un lien FIGMA
Remise finale sur le serveur dans remise travaux
Références
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 le logiciel de votre choixau format lettre 8 1/2 x 11 pouces (orientation portrait).
Taille des 3 interfaces pour le iPad Pro de 11 pouces de 834 px x 1194 px ( paysage ou portrait)
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
Tutorial gratuit pour apprendre FIGMA sur TUTO https://fr.tuto.com/ux/gratuit-maitrisez-les-bases-de-figma-ux,104881.html
Utiliser le logiciel FIGMA
SEMAINE 3
THÉORIE
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 - Carte d’affaires (La GRille + La couleur)
Vous devez utiliser l’application CANVA qui une application gratuite et disponible en ligne.
Il suffit d’aller dans l’application CANVA et choisir CRÉER le template «carte professionnelle»
Créer 3 propositions recto - verso différentes. Thèmes obligatoire : Tatoueur, Journaliste, Photographe
Utiliser les principes de composition:
Symétrie et asymétrie
Contraste
Hiérarchie
Proportion
Harmonie ou unité visuelle
Alignement
Point focal
Travailler avec une grille pour l’alignement des éléments
Recto et Verso
On doit retrouver les éléments suivants sur la carte:
Prénom et nom
Titre (ex: Designer, Intégrateur, etc.)
Numéro de téléphone
Courriel
Site web
Appliquer les principes de composition
Taille : 3 1/2 x 2 pouces
EXERCICE 2 - La COULEUR
Vous devez utiliser l’application CANVA qui une application gratuite et disponible en ligne.
Il suffit d’aller dans l’application CANVA et choisir CRÉER le template «Logo»
Ex 1 : Créer une harmonie avec le logo « Micheur »deux propositions 1 x couleur froide et 1 x couleur chaude
Ex 2 : Créer une harmonie deux propositions 1 x couleur interactive et 1 x contraste de qualité
Nommer le document (nom de famille)_(prénom)_ex1 Exemple: gaudette_tony_exe2.jpg
Taille : 500 x 500 px
EXERCICE 3 - La grille
Vous devez utiliser l’application CANVA qui une application gratuite et disponible en ligne.
Il suffit d’aller dans l’application CANVA et choisir CRÉER le template «Infographie»
Libre à vous de choisir le modèle dans la section «Infographie»
Vous devez changer les couleur et la composition graphique
Utiliser 2, 3 ou plus de colonnes
Nommer le document (nom de famille)_(prénom)_ex3.png Exemple: gaudette_tony_exe3.png
Taille : 800 x 2000 px
SEMAINE 2
THÉORIE
Contenu du cours: La base du design PDF
Révision
Principe de design :
Forme et fonction
Anticipation
Métaphore
Idiome
Principe de composition:
Forme et fonction
Proximité
Symétrie et asymétrie
Contraste
Balance
Hiérarchie
Mouvement
Rythme
Répétition
Proportion
Harmonie ou unité visuelle
Alignement
Similarité
Point focal
Règles des tiers
Nombre d’or
LABORATOIRE
EXERCICE 1 - Grille - BANNIÈRE Twitter
Vous devez utiliser l’application CANVA qui une application gratuite et disponible en ligne.
Il suffit d’aller dans l’application CANVA et choisir CRÉER le template «bannière twitter»
Thème : Promotion d’un produit
Le contenu est à votre discrétion
Utiliser du vrai texte
Vous devez faire 2 maquettes différentes du même produit.
Il est important de varier la grille ( ex: 1, 2, 3 colonnes, etc.)
Le choix typographique est de mise, pensez lisibilité
Taille: 1500 x 500 px
Nommer le document (prénom)_(nom de famille)_ex1 Exemple: tony_gaudette_ex1.jpg
EXERCICE 2 - GRILLE - PORTFOLIO
Vous devez utiliser l’application CANVA qui une application gratuite et disponible en ligne.
Il suffit d’aller dans l’application CANVA et choisir CRÉER le template «site web»
Thème : Portfolio
Le contenu est à votre discrétion
Vous devez ajouter 4 pages:
Page 1 : Accueil (menu: projets, à propos, contact)
Page 2 : projet 1
Page 3 : projet 2
Page 4 : Contact
Utiliser du vrai texte
Vous devez faire 1 maquette
Il est important d'utiliser une grille ( ex: 1, 2, 3 colonnes, etc.)
Le choix typographique est de mise, pensez lisibilité
La dimension des interfaces est de 1350 X 650 pixels.
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 PDF
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 à venir…
LABORATOIRE
Site web du professeur pour trouver les détails du cours tonygaudette.ca
Survol du logiciel de design d’interface en ligne gratuit à utiliser CANVA. À titre de référence, c’est un logiciel similaire à Adobe SPARK.
Ressource pour vous inspirer… Consulter «#TheFutur» https://www.youtube.com/results?search_query=%23TheFutur
EXERCICE 1 - INTERFACEs DE RESTAURANT
Vous devez utiliser l’application CANVA qui une application gratuite et disponible en ligne.
Il suffit d’aller dans l’application CANVA et choisir CRÉER le template «site web»
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 à votre choix (ex: italien, japonais, indien, etc.)
La dimension des interfaces est de 1350 X 650 pixels.
Vous devez créer un menu principal comprenant boutons qui seront identifiés : Restaurant, Menu, Carte des vins, Localisation, Réservation.
Utilisez les images de votre choix, libre à vous.
Intégrez un logotype de votre choix pour le restaurant, les coordonnées et une zone mettant en évidence la réservation en ligne.
Cet exercice doit être remis à la fin du cours sur le serveur au format optimisé en PNG
Nommer le document (nom de famille)_( première lettre du prénom ) Exemple : gaudet_t_desktop
EXERCICE 2 - publication Instagram pour votre restaurant
Vous devez utiliser l’application CANVA qui une application gratuite et disponible en ligne.
Il suffit d’aller dans l’application CANVA et choisir CRÉER le template «publication instagram»
L'objectif est de créer une publicité
Trouvez un titre, par exemple le nom du restaurant
Ajouter une images ou une couleur
Personnalisez la mise en page
La dimension de l’interface est de 1080 X 1080 pixels.
Cet exercice doit être remis à la fin du cours sur le serveur au format optimisé en PNG
Nommer le document (nom de famille)_( première lettre du prénom ) Exemple : gaudet_t_instagram
EXERCICE 3 - photo de couverture Facebook de votre restaurant
L'objectif est de créer un montage graphique pour la couverture du Facebook
Trouvez un titre, par exemple le nom du restaurant
Ajouter une images ou une couleur
Personnalisez la mise en page
La dimension de l’interface est de 820 X 312 pixels.
Cet exercice doit être remis à la fin du cours sur le serveur au format optimisé en PNG
Nommer le document (nom de famille)_( première lettre du prénom ) Exemple : gaudet_t_facebook
