POur communiquer avec le professeur en temps réel

Slack

https://dectim.slack.com/archives/C011HKQ734Z

Vous devez sélectionner

#cours-design-graphique-tony


POur communiquer avec le professeur

Mio


SEMAINE 10

THÉORIE+ Laboratoire

Contenu du cours: À venir


LABORATOIRE (TP3- Exposition virtuelle)

Réaliser à l’aide du logiciel FIGMA, la conception et la réalisation de deux interfaces web, un logotype ou signature présentant un designer graphique de réputation international dans le cadre d’une exposition virtuelle. 

À partir du designer qui vous a été attribué au hasard par votre professeur. Vous devrez faire une recherche sur celui-ci pour déterminer les contenus à inclure à votre mise en page.

  • Stefan Sagmeister 

  • Milton Glaser

  • Jessica Walsh

  • Neville Brody

  • David Carson

  • Saul Bass

  • Alex Trochut

  • Irma Boom

  • Jon Hicks

  • Armin Hofmann

  • Erik Nitsche

  • Alan Fletcher

  • Lotta Nieminen

  • John Maeda

  • Aaron Draplin

  • Kate Moross

  • Paula Scher

  • Massimo Vignelli

  • Paul Rand


OBJECTIFS

  • Permettre aux étudiants de mettre en pratique l’ensemble des notions acquises dans le cours de design graphique (mise en page).

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

  • Reconnaître les composantes de l’image de marque


ÉCHÉANCIER

Semaine 11:

  • Présentation du projet

  • Moodboard (remis au début du laboratoire 12)

  • Wireframe (remis au début du laboratoire 12)

  • Grille

Semaine 12 : 

  • Logotype (remis au début du laboratoire 13)

Semaine 13:

  • Travailler sur les interfaces.

Semaine 14:

  • Remise finale 2 interfaces : page d’accueil et page d’une oeuvre


Plan de travail

Vous devez télécharger obligatoirement la version 2 du .FIG pour qui sera votre plan de travail durant le projet. Ce fichier comporte 3 sections soit une pour chaque semaine.

ÉTAPE 1 - MOODBOARD - SEMAINE 11 

Moodboard (couleurs, oeuvres, artiste, typographie, textes, esquisse logo...)

  • À partir de la sélection du designer. Vous devrez faire une recherche sur celui-ci pour déterminer les contenus à inclure à votre mise en page.

Recherche de contenus

  • Au moins une photo de qualité du designer graphique

  • Son nom, année de naissance (et son année de décès si applicable)

  • Une courte biographie décrivant ses origines, ses études, son travail, ses influences, etc. 

  • Une citation inspirante du designer (si vous en trouvez une)

  • 8 et 12 oeuvres ou projets marquants du designer en leur associant un nom et un court descriptif. Vous pouvez organiser cette présentation en hiérarchisant les oeuvres et projets selon l’importance que vous leur attribuez. Par exemple, un projet particulièrement intéressant peut avoir sa section dédiée avec un peu plus de contenus.


ÉTAPE 2 - GRILLE DE MISE EN PAGE - SEMAINE 11 

  • La grille permet de mieux organiser les éléments graphiques.

  • Une suggestion de grille, utiliser une grille à 12 colonnes

  • Vous devrez créer des zones visuelles en fusionnant judicieusement des colonnes de la grille de mise en page afin de déterminer l’espace occupé par vos contenus. Chaque élément de votre composition doit être minutieusement disposé sur la grille de mise en page. Portez une attention particulière au premier écran de votre page Web (avant défilement) pour maximiser l’impact de votre présentation.


ÉTAPE 3 -  WIREFRAME - SEMAINE 11

Page : Interface d'accueil

  • Logotype de l’artiste (icône «image»)

  • Menu de navigation dans les sections de la page (icône «image»)

  • Informations sur l’artiste : nom, photo(s) et biographie. (icône «image»)

  • Une à trois oeuvres en vedette (icône «image»)

  • Galerie de 8 oeuvres supplémentaires (minimum) (icône «image»)

  • Liens vers ses réseaux sociaux (icônes) (icône «image»)

  • Un pied de page incluant les textes suivants que vous devez remettre en forme à votre guise : Présentation réalisée par Prénom Nom dans la cadre du cours de Design graphique - H2020- Techniques d’Intégration multimédia - Cégep Édouard-Montpetit. (icône «image»)

Page : Interface d’une oeuvre

  • Grande photo et bref descriptif de l’oeuvre (icône «image»)

  • Un bouton permettant le retour à la page d’accueil (icône «image»)


ÉTAPE 4 - (SEMAINE 12-13) 

Design graphique des 2 interfaces web et logotype

Dans votre mise en page, cherchez à intégrer le style graphique mis de l’avant par le designer qui vous a été attribué, que ce soit par le traitement graphique de la zone hero, des images et des textes, vos choix de couleurs et de polices, l’ajout de textures ou de motifs en arrière-plan, l’inclusion d’éléments graphiques divers, etc. Soyez créatif!

PAGE D'ACCUEIL (contenus minimaux à inclure)

  • Logo de l’artiste (votre création personnelle)


  • Menu de navigation dans les sections de la page


  • Informations sur l’artiste (nom, photo(s), bio, etc.)


  • Un texte personnel d’un paragraphe expliquant en quoi cet artiste vous inspire.


  • Une à trois oeuvres en vedette


  • Galerie de 8 oeuvres supplémentaires (minimum)


  • Liens vers ses réseaux sociaux (icônes) 


FICHE D’UNE OEUVRE (contenus minimaux à inclure)

  • Grande photo et bref descriptif de l’oeuvre


  • Un bouton permettant le retour à la page d’accueil


LOGOTYPE  (contenus minimaux à inclure)

  • Réaliser un logotype avec le nom complet de l’artiste. Ce logotype doit s’inspirer du style de l’artiste ou doit représenter sa discipline. Si l’artiste a déjà son logotype, vous devez présenter une nouvelle version.

  • Le logotype peut être réalisé dans Figma ou Illustrator.

DÉTAILS

  • Cet exercice doit être réalisé individuellement. 

  • Le choix de clientèle est libre (miléniaux, génération x ou y, boomer, etc.)

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

  • Il est interdit de récupérer des images comportant déjà des traitements graphiques et des textes.

  • Taille de l’interface (1440 x 3645 px).


DOCUMENTS À REMETTRE

Sur le serveur du Cégep / Remise travaux  dans le bon groupes

  • 1 x Dossier (nommé à votre nom : tony_gaudette_tp3

  • 1 x Moodboard (logotype, sigle, couleur, etc.)

  • 2 x fil de fer «wireframe»

  • 2 x interfaces : page d’accueil et page d’une oeuvre (pages exportées en .png ou .jpg)

CRITÈRES D’ÉVALUATION

  • Qualité des wireframes + moodboard 25%

  • Qualité du concept du logotype   20%

  • Qualité des interfaces (accueil et fiche) 40%

  • Qualité de la réalisation technique 15%


  • Ce Travail pratique compte pour 40% de la session

  • Pénalité pour retard : -10 points par jour 

Page Accueil - Professeur.png
Fiche oeuvre - Professeur.png



1011

  • Ali, Parviz Khidree - Stefan Sagmeister 

  • Chakib, Racim Selhi - Milton Glaser

  • Christophe, Gauthier - Jessica Walsh

  • Émilie, Pinsonneault-Lysight - Neville Brody

  • Jade, Sawyer-Thivierge - David Carson

  • Jessie, Broadfield - Alex Trochut

  • Karl-Adrien, Élusmé - Irma Boom

  • Kélane, Rondeau-Boisvert - Jon Hicks

  • Marc-Antoine, Lamontagne - Erik Nitsche

  • Maria, Ichtar Benlaredj - Alan Fletcher

  • Miguel, Sarria - John Maeda

  • Mohamed, El Moctar Harouna Ibrahim - Aaron Draplin

  • Mohammed, Abbaoui - Kate Moross

  • Samuel, Gilbert - Massimo Vignelli

  • Shuaib, Mawludad - Paul Rand

  • Thomas, Fluet - Saul Bass

  • Thomas, Nadeau - Paula Scher

1012

  • Amélie, Ouellet - Stefan Sagmeister 

  • Anthony, Des Ormeaux - Milton Glaser

  • Ariel, Génier-McLean - Jessica Walsh

  • Axel, Duriez - Neville Brody

  • Catherine, Léveillé - David Carson

  • Clément, Boucher - Saul Bass

  • Félix, Bourré - Alex Trochut

  • Jeremy, Brosseau - Irma Boom

  • Julien, Dulude - Jon Hicks

  • Justin, Daniciuc - Armin Hofmann

  • Kelvin, Venkatasami - Erik Nitsche

  • M, Hammed Khilaji - Alan Fletcher

  • Philippe, Lachance-Emond - Lotta Nieminen

  • Samuel, Blondeau-Fournel - John Maeda

  • Samuel, Palma-Lemieux - Aaron Draplin

  • Sophie, Trudel - Kate Moross

  • Yash, Noorsaï - Paul Rand

1021

  • Anthony, Lacroix - Stefan Sagmeister 

  • Augusto, Aldana - Milton Glaser

  • Caroline, Forget - Jessica Walsh

  • Cédryk, Moreau - Neville Brody

  • Dylan, Bourret - David Carson

  • Édouard, Jamieson - Saul Bass

  • Ian, Grignon - Alex Trochut

  • Irina, Michot - Irma Boom

  • Jean-Chrystophe, Fréreault - Jon Hicks

  • Jérémy, Perreault - Armin Hofmann

  • Marie-Eve, Lamontagne - Erik Nitsche

  • Marie-France, Yang - Alan Fletcher

  • Maxime, Picard - Lotta Nieminen

  • Mouhammad, Wagan Diouf - John Maeda

  • Nickolas, Laforest - Paul Rand

  • Olivier, Gilbert - Massimo Vignelli

  • Olivier, Turgeon - Paula Scher

  • Rémi, Therrien - Kate Moross

  • Ricardo, Alberto Yanez Gomez - Saul Bass

  • Roméo, Girard - Aaron Draplin

1022

  • Antwan, Fenelus - Paul Rand

  • Aryel, Schaydleur - Massimo Vignelli

  • Benjamin, Biron - Paula Scher

  • Brandon, Helpin - Kate Moross

  • Caroline, Loubier - Aaron Draplin

  • Danik, Boisclair - John Maeda

  • Étienne, Gagné - Lotta Nieminen

  • Félix, Chrétien - Alan Fletcher

  • Gabriel, Gauthier - Erik Nitsche

  • Gabriel, Handfield-Picard - Armin Hofmann

  • Jérémy, Bleau - Jon Hicks

  • Jerry, Wang - Irma Boom

  • Louis, Séguin - Alex Trochut

  • Ludovic, Brillon - Saul Bass

  • Mathieu, Baillargeon - David Carson

  • Nicholas, Gosemick - Neville Brody

  • Paul, Mariuta - Milton Glaser

  • Rudy, Breton - Stefan Sagmeister 


SEMAINE 10

THÉORIE+ Laboratoire

Contenu du cours: Symbole PDF

À remettre avant le début du cours:  

  • Rien

À faire:  

  • Poursuivre les interfaces dans FIGMA


SEMAINE 9

THÉORIE+ Laboratoire

Contenu du cours: Logotype PDF

À remettre avant le début du cours:  

  • Wireframe fait dans FIGMA, créer un # «frame »  nommé : wireframe

  • Moodboard fait dans FIGMA, créer un # «frame »  nommé : : moodboard

À faire:  

  • Poursuivre les interfaces dans FIGMA


SEMAINE 8

THÉORIE+ Laboratoire

Contenu du cours: Icône PDF

  • Théorie à faire d’ici la fin de session:

  • Cours 8 :  icônes 

  • Cours 9 :  logotype  

  • Cours 10-11 : commerce électronique 

  • Cours 12 : charte graphique 

  • Cours 13  : mouvements design + art


LABORATOIRE (TP2- Application Achat de billets)

Réaliser à l’aide du logiciel de conception FIGMA, la conception et la réalisation d’une application pour tablette pour l’achat de billets. Vous devrez uniquement faire l’UI, il n’est pas question de créer l’ UX (aucune interactivité). 

L’application doit contenir les 8 sections suivantes:  Je souhaite que votre travail soit original. Alors, soyez créatif dans vos propositions. SVP,  je veux aucune une copie de mes interfaces (UI). Il s’agit de mon exemple et l’objectif est de vous permettre d’avoir une idée globale du projet.

  1. Page d’accueil «splash page»

  2. Spectacle «show»

  3. Salle

  4. Carte

  5. Détails

  6. Sélection des sièges

  7. Billet et Compte

Devis

  • Thème: Libre à vous / Mon exemple est une application pour l’achat de billet d’un spectacle d’humour

  • La clientèle cible se situe entre 18 et 30 ans

  • Votre moodboard doit contenir au minimum: Couleurs, textures, logotype, icônes, images et typographies

  • Taille des interfaces est de 834 x 1194 pixels (Ipad Pro 11 pouces)

  • Utiliser du vrai texte au lieu du texte de remplissage http://www.lipsum.com

  • Vous devez créer vos icônes et ils doivent avoir une unité visuelle (le même style)

  • Mettre en application: la grille, la couleur, la composition et la typographie

  • La remise aura lieu sur le serveur du serveur du Cégep dans remise travaux et choisir votre groupe: 

  • Wireframe + Moodboard au format PNG pour le début du laboratoire 9

  • Maquettes terminées (8 interfaces PNG dans une seule image au début du laboratoire 11

Fichier de travail (.FIG)

  • Fichier de départ pour étudiant (Wireframe et Moodboard) Téléchargez le .FIG

  • Wireframe UI KIT, Téléchargez le .FIG

  • iOS 13 UI, Téléchargez le .FIG

  • iOS 12 UI, Téléchargez le .FIG

Remise finale sur le serveur dans remise travaux MAC

  • Préparer votre dossier de remise travaux sur mac (design graphique): «prénom_nom_APP Achat de billets_groupe». 

Vous aurez à remettre deux PNG : 

  • 1 x Moodboard + 1 x Wireframes (dans le même document) 

  • 1 x Interfaces : Remettre une seule image optimisée PNG regroupant vos 7 interfaces

  • Ne pas mettre les documents dans un dossier.

    • Exemple: tonygaudette_moodboard

    • Exemple: tonygaudette_wireframe


Les critères d’évaluations: 35 points

  1. Moodboard ( 7 points ) 

  2. Wireframes ( 8 points)

  3. Mise en page (20 points ) - Il y a plusieurs éléments qui seront évalués : Typographie, couleur, l’architecture de l’information, unité visuelle (cohérence dans l’ensemble du projet) et créativité du projet. 


Échancier

Semaine 8:  

  • Wireframe fait dans FIGMA, créer un # «frame »  nommé : wireframe

  • Moodboard fait dans FIGMA, créer un # «frame »  nommé : : moodboard

Devoir de la semaine : Débuter les interfaces dans FIGMA

Semaine 9:  

  • Poursuivre les interfaces dans FIGMA

Semaine 10:  

  • Travailler sur les maquettes dans FIGMA

Semaine 11:  

  • Maquettes terminées à 100% dans FIGMA au début du laboratoire


Il s’agit d’un exemple du projet. Vous pouvez vous en inspirez!! SVP, je ne veux surtout pas de copie de ses interfaces.

Page d’accueil «splash page»

Ipad.png

Spectacle «show»

Ipad.png

Salle

Ipad.png

Carte

Ipad.png

Détails

Ipad.png

Sélection des sièges

Ipad.png

Billet et Compte


Wireframe et Interfaces finales

Ipad.jpg





SEMAINE 7

THÉORIE

  • Contenu du cours: Révision

LABORATOIRE

EXERCICE 1 - MAGAZINE NUMÉRIQUE POUR IPAD

  • Thème: Humoriste

  • 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 grille, le design émotionnel «storytelling» les images et la typographie

  • 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 8 au début du laboratoire sous la forme d'un document PNG

  • Vous aurez à remettre : 1 x Interfaces : Remettre une seule image optimisée PNG regroupant vos 3 interfaces

  • Travail en équipe de 2 personnes

  • Utiliser du texte de remplissage http://www.lipsum.com

  • Utiliser le logiciel FIGMA

  • Résumé (le design émotionnel «storytelling» ):

    • C’est quoi? Le design émotionnel, c’est de l’émotion.

    • Le storytelling va apporter des émotions positives à l’utilisateur en le mettant à l’aise et en installant un climat de confiance. 

    • De se démarquer

    • De parler spécifiquement à son public

    • D’augmenter son taux de conversion

    • D’obtenir une reconnaissance de la marque

    • De fidéliser davantage son public.

    • Si une marque explique ses motivations et ses ambitions, le consommateur percevra ce désir de transparence et se sentira d’avantage rassuré. Le reflet d’une marque doit être unique et particulier. 

    • Les mots ont leur importance. Le nom des pages, les labels des boutons/menu, les phrases descriptives ou engageantes.

  • Résumé (la grille ):

    • La grille est importante pour créer du rythme, de la lisibilité et aussi, de la structure dans la mise en page. 

    • Elle permet de rendre l’information plus fluide avec du contenu organisé. 

    • La grille permet d’avoir une harmonie visuelle.



evenko_accueuil.jpg
evenko_contenu-1.jpg
evenko_contenu_2.jpg

SEMAINE 6

THÉORIE

  • Contenu du cours: Storietelling PDF

LABORATOIRE : TP1- Application Camion de bouffe de rue

Semaine 6: 

  • Compléter les interfaces

  • La remise des interface aura lieu à la fin du laboratoire 6

Vous aurez à remettre deux PNG : 

  • 1 x Interfaces : Remettre une seule image optimisée PNG regroupant vos 10 interfaces


SEMAINE 5

THÉORIE

  • Contenu du cours: Typographie PDF

LABORATOIRE : (TP1- Application Camion de bouffe de rue

À remettre avant le début du laboratoire

  • Wireframe fait dans FIGMA, créer un # «frame »  nommé : wireframe ( 4 points ) 

  • Moodboard fait dans FIGMA, créer un # «frame »  nommé : : moodboard ( 7 points)

Semaine 5: 

  • Débuter les interfaces UI dans FIGMA

  • La remise des interface aura lieu à la fin du prochain laboratoire 6


SEMAINE 4

THÉORIE

  • Contenu du cours: Grille PDF

LABORATOIRE (TP1- Application Camion de bouffe de rue)

Réaliser à l’aide du logiciel de conception FIGMA, la conception et la réalisation d’une application mobile pour camion de bouffe de rue. Vous devrez uniquement faire l’UI, il n’est pas question de créer l’ UX (aucune interactivité). 

L’application doit contenir les 10 sections suivantes: Je souhaite que votre travail soit original. Alors, soyez créatif dans vos propositions. SVP, je veux aucune une copie de mes interfaces (UI).

  1. Connectez-vous

  2. Menu principal

  3. Recherche

  4. Carte

  5. Nouvelle

  6. Inscrivez-vous

  7. Connexion

  8. Details

  9. Menu

  10. Menu items

tp1.jpg


Devis

  • Thème: Camion de bouffe de rue

  • La clientèle cible se situe entre 18 et 30 ans

  • Votre moodboard doit contenir au minimum: Couleurs, textures, logotype, icônes, images et typographies

  • Taille des interfaces est de 375 x 812 pixels

  • Utiliser du vrai texte au lieu du texte de remplissage http://www.lipsum.com

  • Mettre en application: la grille, la couleur, la composition et la typographie

  • La remise aura lieu à la fin du laboratoire de la semaine 6

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


Ficher de travail (.FIG)

  • Fichier de départ pour étudiant (Wireframe et Moodboard) Téléchargez le .FIG

  • Wireframe UI KIT, Téléchargez le .FIG

  • iOS 13 UI, Téléchargez le .FIG

  • iOS 12 UI, Téléchargez le .FIG

Remise finale sur le serveur dans remise travaux

  • Préparer votre dossier de remise travaux sur mac (design graphique): «prénom_nom_APP Camion de rue_groupe». 

Vous aurez à remettre deux PNG : 

  • 1 x Interfaces : Remettre une seule image optimisée PNG regroupant vos 10 interfaces

  • 1 x Moodboard + 1 x Wireframes (dans le même document)


Les critères d’évaluations: 25 points

  1. Moodboard ( 4 points ) 

  2. Wireframes ( 7 points)

  3. Mise en page (14 points ) - Il y a plusieurs éléments qui seront évalués : Typographie, couleur, l’architecture de l’information, unité visuelle (cohérence dans l’ensemble du projet) et créativité du projet. 

Échancier

Semaine 4:  

  • Wireframe fait dans FIGMA, créer un # «frame »  nommé : wireframe

  • Moodboard fait dans FIGMA, créer un # «frame »  nommé : : moodboard

Semaine 5: 

  • Débuter les interfaces dans FIGMA

Semaine 6: 

  • Maquettes terminées à 100% dans FIGMA à la fin du laboratoire

Semaine 7: 

  • Présentation de 3 minutes qui ne compte pas

1555348568138-YP397E65ZVACB4J9AABL.jpeg

1 - Connectez-vous

Connectez-vous.png

2 - Menu principal

Menu principal.png

3 - Recherche

Recherche.png

Carte

Carte.png

5 - Nouvelle

Nouvelle.png

6 - Inscrivez-vous

Inscrivez-vous.png

7 - Connexion

Connexion.png

8 - Détails

Details.png

9 - Menu

Menu.png

10 - Menu items

Menu items.png

SEMAINE 3

THÉORIE

  • Contenu du cours: Couleur PDF

LABORATOIRE

  • Vous devez utiliser l’application FIGMA , télécharger le .FIG

  • Selon la clientèle cible, vous devez tenir compte des éléments à travailler :

    • Contraste

    • Couleur dominante

    • Harmonie

    • Couleur monochrome

  • https://color.adobe.com/fr/create

couleur.jpg

SEMAINE 2

THÉORIE

  • Contenu du cours: La base du design, Voir le 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 - Facebook / Publicité

  • Vous devez utiliser l’application FIGMA qui est une application gratuite et disponible en ligne.

  • Il suffit de télécharger le template au format .FIG

  • Aller dans l’application FIGMA

    • Publicité image simple (1200 x 628 pixels)

    • Publicité carrousel (1080 x 1080 pixels)

    • Publicité de type «side bar» (1200 x 628 pixels)

  • Thème : Promotion d’un produit

  • Le contenu est à votre discrétion

  • Utiliser du vrai texte

  • Vous devez faire 3 publicités différentes du même produit en conservant l’unité visuel (même style)

  • Le choix typographique est de mise, pensez lisibilité

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

Capture+d’écran,+le+2020-01-10+à+21.28.09.png

EXERCICE 2 - GRILLE - PORTFOLIO

  • Vous devez utiliser l’application FIGMA qui est une application gratuite et disponible en ligne.

  • Thème : Votre portfolio

  • Le contenu est à votre discrétion

  • Vous devez ajouter 4 sections:

    • Section 1 : Accueil (menu: projets, à propos, contact)

    • Section 2 : projet 1 (fictif)

    • Section 3 : projet 2 (fictif)

    • Section 4 : Contact (fictif)

  • 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 1440 X 4096 pixels (desktop).

  • Inspiration : https://www.figmafreebies.com/download/gravity-agency-portfolio-template/

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

tony-Portfolio.jpg

SEMAINE 1

THÉORIE

  • Contenu du cours: La base du design 1 /2 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 : Voir le PDF

LABORATOIRE


EXERCICE 1 - INTERFACEs DE RESTAURANT

  • Vous devez utiliser l’application gratuite  FIGMA qui une application gratuite et disponible en ligne.

  • Il suffit d’aller dans l’application FIGMA et choisir CRÉER le template de dimension: 1350 X 650 pixels.

  • Créer une page dans Figma «Page d’accueil». Le «page» a une fonction de boîte et le «frame» permet de ranger les groupes ou les sous-groupes ou les objets. Bref, c’est la base pour l’organisation.

  • 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, français, colombien, japonais, indien, etc.)

  • 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 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. Utiliser Export pour sauvegarder votre image.

  • 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 FIGMA qui une application gratuite et disponible en ligne.

  • Il suffit d’aller dans l’application FIGMAet choisir CRÉER le template de dimension 1080 X 1080 pixels.

  • Créer une page dans Figma «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

  • Cet exercice doit être remis à la fin du cours sur le serveur au format optimisé en PNG. Utiliser Export pour sauvegarder votre image.

  • Nommer le document (nom de famille)_( première lettre du prénom ) Exemple : gaudet_t_instagram

instagram.jpg

 

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.

  • Créer une page dans Figma «Facebook»

  • 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

facebook.jpg
Capture d’écran, le 2020-01-10 à 20.41.24.png