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.

http://centrededesign.com/annuel-de-design-2019/?fbclid=IwAR2cURHelMcUUjHrcfRUNY3tgpHIShtd3nLFeWL81MgzIPee4bsPGIs8cf8

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 paiement, 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

    
    

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

• Contenu du cours: Logotype + Direction photo

• Logotype : PDF

• Icône : PDF

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: 

1. Moodboard

2. logotype en 3 tailles (15 x 15 cm, 128 x 128 px et 32 x 32 px)

3. Typographie

4. Intégration du logotype dans une page de mobile

5. Direction photo

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

• https://creativemarket.com/Occy/3411951-Brand-Guidelines

Processus de création du logotype

Exemples de recherche typographique :

Exemple du logotype finale: 

Exemple de choix typographique: 

Exemple intégrer dans un site internet: 

Exemple de direction photo: 

Médias sociaux : Les différentes plateformes

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é

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)

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