SEMAINE 14

THÉORIE

  • Examen

LABORATOIRE

  • Remise du projet final

SEMAINE 13

THÉORIE

  • Rétroaction avec Céline Tremblay pour le MTL&MOI

LABORATOIRE

  • Travailler sur le projet final

SEMAINE 12

THÉORIE

  • Révision des contenus pour le projet final

LABORATOIRE

 

TRAVAIL DE FIN DE SESSION / Site web 

  • Réaliser à l’aide d'illustrator, la conception et la réalisation d'interfaces pour une marque de votre choix. 
  • Mettre en pratique les notions de mise en page  et surtout d'interactivité
  • Un exemple de cas réel de E-Com https://www.frankandoak.com ou http://www.simons.ca/simons/
  • Uniquement pour l'Iphone 6 PLUS

 

1 - PAGE D'ACCUEIL

  • Présentation de la marque
  • Menu (libre à vous de choisir le nombre de sections)
  • Logotype
  • Images

2 - FIL D'ARIANNE (processus d'achat)

  • Le processus d'achat

3- FICHE DE 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)

4 - INFOLETTRE

  • Produit
  • Image
  • Texte (très court)

 

DEVIS

  • Cet exercice doit être réalisé en individuellement.
  • Le  style graphique est libre  (Ex: flat design) 
  • Vous devez utiliser du vrai texte en français et cohérent avec le sujet.
  • Conçu pour un appareil mobile Iphone 6 PLUS (1242 x 2208 px) en mode portrait.
  • La remise du projet aura lieu à la semaine 14 au 1/3 du laboratoire.
  • 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

 

ÉCHÉANCIER

  • Semaine 12: 
    • Moodboard (Recherche du concept). Dans votre compte Pinterest, vous devez créer un tableau qui sera nommé «PROJET FINAL» contenant 50 pins.
    • Organigramme
  • Semaine 13: 
    • Marquettes terminées à 50%
  • Semaine 14: 
    • Remise du projet au 1/3 du cours.

SEMAINE 11

THÉORIE

  • À venir

LABORATOIRE

  • Remise du projet MTL&MOI
    • URL Mobile
    • URL Ipad
    • Bannière de votre projet 750 x 140 px
    • Remettre le tout sur le serveur dans le dossier de remise MTL&MOI
    • Travailler sur l'infolettre

SEMAINE 9

THÉORIE

  • Exercice sur l'infolettre
  • 2 personas : primaire et secondaire 
    • Profil socio-démographique 
    • (sexe, âge, profession, habitat)
    • Relation à la marque 
    • Des habitudes de navigation sur le web
  • Maquette préliminaire fait à la maison 

Thème: Libre

  • Description du concept
  • En équipe de deux personnes
  • À remettre à la fin du laboratoire la version papier
  • Voici les détails pour la réalisation final:
    • 1280 x 1024 px
    • Comtenus intéressants
    • Images esthétiques
    • Pouvoir s'inscrire et se désinscrire
    • Indiquer qu'il s'agit d'une infolettre
    • Mettre un tagline
    • Mettre une date
    • Et aussi, un bon mariage entre les textes et les images

 

LABORATOIRE

  • Pinterest : 300 pins au total pour la semaine 9 au début du laboratoire
  • Ce projet compte pour 10 points

SEMAINE 10

THÉORIE

  • Le commerce en ligne

LABORATOIRE

  • Travailler sur les maquettes pour le projet MTL&MOI

SEMAINE 8

THÉORIE

  • L'infolettre

 

LABORATOIRE

  • Moodboard 
  • Fil de fer + organigramme
  • Recherche du concept et des UI (style graphique) à mettre dans le Pinterest
  • Correction: Moodboard, 2 personas et fil de fer 

 

 




LABORATOIRE

TP2 -MTL&MOI

  • Mise en contexte: Réaliser à l’aide des logiciels d’infographie de votre choix, la conception et la réalisation d’un site web pour l’entreprise MTL&MOI.
  • Je vous propose de prendre connaissance du contenu texte en format WORD.
  • Explorer, adapter et justifier le design de la page-écran en respectant le message, le public-cible et le contexte.
  • Mettre en application les «patterns» UX et les principes de navigation.
  • Le travail est réalisé en équipe de deux.
  • Étape 1 : Réalisez les esquisses (fil de fer) dans Illustrator et surtout avant de faire les maquettes finales. Voir image plus bas dans la semaine 2. Aussi, joindre dans un document WORD votre bibliographie des sites qui vous ont servis d'inspiration.
  • Étape 2 : Faire l'organigramme (architecture de l'information) dans Illustrator. Voir image plus bas dans la semaine 3.
  • Étape 3 : Intégrer vos interfaces optimisées dans marvelapp  
  • Étape 4 : Ajoutez l'interactivité, les liens entre chaque page dans marvelapp  
  • Vous devez créer deux versions distinctes: iphone 6 (750 x 1334 px) et Ipad Air (1536 x 2048 px)
  • Libre à vous de choisir l'orientation soit portrait ou paysage
  • Vous devez faire un persona primaire.
  • Le texte utilisé est celui remis sur le serveur
  • Les images se trouvent sur le serveur
  • Le logotype est sur le serveur.

Votre projet comporte 2 sections  à développer : 

  1. Gens, vous devrez développer le portrait d'Annie Lachapelle
  2. Lieu, vous devrez développer le lieu Bota Bota

 

Critères d'évaluation

  • 1-  Persona ( 2  points ) 
  • 2- Fil de fer + organigramme ( 4 points ) 
  • 3- Moodboard ( 3 points ) / Exemple: https://fr.pinterest.com/pin/52495151881433787/
  • 4-Interfaces préliminaires (3 points ). Elles seront corrigées en classe pendant le laboratoire. 
  • 5-Interfaces finales (10 points ). Plusieurs éléments seront évalués : unité visuelle, unicité du travail, interactivité, ergonomie, typographie, couleur et cohérence de l’ensemble du projet.

La remise du projet est à la semaine 10. Ce travail compte pour 25 %.

À remettre:

  • URL

 

Planification

Semaine 7

  • Moodboard 
  • Fil de fer + organigramme
  • Recherche du concept et des UI (style graphique)

Semaine 8

  • Réalisation des maquettes préliminaires à 40 % pour le début du laboratoire de la semaine 8
  • Correction: Moodboard, 2 personas et fil de fer pour le début du laboratoire de la semaine 7

Semaine 9

  • Travailler sur les maquettes

Semaine 10

  • Terminer les maquettes finales 
  • Préparation du dossier et remise du projet
  • Remise du projet final

SEMAINE 7

THÉORIE

  • Lancement du projet de mi-session, MTL&MOI, 25%
  • La remise aura lieu à la semaine 10
  • Notre invitée cliente sera Céline Tremblay

 

LABORATOIRE

  • Création du compte Pinterest
  • Ajouter une image à votre profil
  • Compléter le profil (résumé sur vous) 
  • Faire les tableaux sur Pinterest  
    • UI = 125 pins
    • UX = 75 pins
    • Design (toute les formes de design) = 20 pins
    • Typography = 20 pins
    • Color = 20 pins
    • Moodboard = 20 pins
    • Divers (libre à vous pour le contenu) = 20 pins
  • Pinterest : Pour la semaine 7 à la fin du laboratoire, 30 pins pour chacun des 2 tableaux: UI et UX
  • Pinterest : Pour la semaine 8 au début du laboratoire, 10 pins pour chacun des 5 tableaux: Web design, Design, Type, Color et Moodboard
  • Pinterest : 300 pins au total pour la semaine 9 au début du laboratoire
  • Ce projet compte pour 10 points

 

  • Début du projet de mi-session, MTL&MOI

 


APPLICATION IPAD MILAN



SEMAINE 6

THÉORIE

  • Exemples d'UX pour Apple Watch


LABORATOIRE

Exercice : Application pour appareil Apple Watch

  • Remise de l'organigramme
  • La remise finale aura lieu au début du laboratoire de la semaine 7
  • À remettre: Le lien URL qui va me permettre de visualiser voir projet.

SEMAINE 5

THÉORIE

  • Exemples d'UX pour Apple Watch

 

LABORATOIRE

Exercice : Application pour appareil Apple Watch

  • Mise en contexte: Vous devez créer un concept et ensuite, les interfaces d'une application pour l'Apple Watch
  • Votre application doit être adaptée à l'Apple Watch et surtout, le plus important, la pertinence...
  • http://www.apple.com/ca/fr/watch/watch-reimagined/
  • Appliquer les principes de navigation d'UX vues en théorie
  • Votre public cible, libre à vous
  • Je vous propose de consulter le guide de conception pour mieux comprendre la manière de concevoir une application pour l'Apple Watch 
  • Le travail est réalisé en équipe de deux personnes pour stimuler les idées créatives
  • J'ai mis sur le serveur le modèle en vectoriel (Illustrator) de l'Apple Watch qui servira à faire le fil de fer et l'organigramme
  • Étape 1 : Réalisez les esquisses (fil de fer) dans Illustrator et surtout avant de faire les maquettes finales. Voir image plus bas dans la semaine 2.
  • Étape 2 : Faire l'organigramme (architecture de l'information) dans Illustrator. Voir image plus bas dans la semaine 3.
  • Étape 3 : Intégrer vos interfaces optimisées dans marvelapp  
  • Étape 4 : Ajoutez l'interactivité, les liens entre chaque page dans marvelapp  
  • Créer un compte commun dans marvelapp   pour travailler en collaboration.
  • Taille: de 312 x 390 px (Apple Watch 42 mm)
  • L'orientation est portrait
  • À remettre: Le lien URL qui va me permettre de visualiser voir projet.
  • Une partie de cet exercice sera évalué au début du laboratoire 6 (fil de fer + organigramme)
  • Kickstarter est une entreprise américaine de financement participatif (crowdfunding en anglais), essentiellement réputée pour son site Internet, créée en 2009 et précurseur dans le domaine. Kickstarter donne la possibilité aux internautes de financer des projets encore au stade d'idée, en réduisant les lourdeurs associées aux modes traditionnels d'investissement. Je vais vous expliquer en classe les détails.
  • Cet exercice compte pour 10 points et sera évalué à la semaine 7  (fil de fer, 3 pts - organigramme, 2 pts - interfaces dans Marvel App)
  • Voici quelques exemples d'application pour Apple Watch

SEMAINE 4

THÉORIE

  • À venir


LABORATOIRE

Exercice 1 : Mise en page de votre site web pour appareil mobile à partir du en fil de fer

Vous devez la mis en page à partir de vos fils de fer (wireframe) pour une application mobile. 

  • Le thème est une agence de votre choix de services personnalisés de maison. Il s'agit de services qui simplifie la vie des gens. Par exemple, vous pourriez offrir ces types de services: gouvernante de maison, gardienne d'enfant, gardien, chef cuisiner, service ménager, chauffeur, majordome, valet, assistante personnelle, tuteur, nounou, etc.
  • Étape 1 : Vous mettre en équipe de 5 personnes.  Présenter votre prototype crée dans marvelapp afin d'avoir des commentaires constructifs qui serviront à améliorer votre projet.
  • Étape 2 : Prendre en considération les commentaires et planifier la mise en forme.
  • Étape 3 : Réalisez les interfaces dans Illustrator ou Photoshop.  
  • Étape 4 : Préparer vos interfaces optimisées. Ensuite, vous pourrez les intégrer dans marvelapp.
  • Étape 5 : Ajoutez l'interactivité, les liens «Hot spot» sur les éléments graphiques pertinents de vos interfaces dans marvelapp  pour être capable de naviguer de page en page.
  • Le nombre de pages est à votre discrétion. L'objectif est de permettre d'avoir une idée graphique convaincante de votre site mobile.
  • Travailler dans marvelapp pour le modèle Iphone
  • Taille: de 1242 x 2208 px (Iphone 6 - Plus)
  • Travail individuel
  • Cet exercice compte pour 3 points et sera évalué au prochain cours en laboratoire

SEMAINE 3

THÉORIE

  • Projet: START-AP

 

LABORATOIRE

Exercice 1 : Application pour appareil mobile sur Ipad Mini - V2/10 sept.

  • Mise en contexte: Vous devez créer une application qui se nomme « Bouffer Extrême » que l'on peut télécharger sur l'Itunes Store. 
  • Appliquer les principes de navigation de base et d'UI (voir contenu de cours qui se trouve sur le serveur)
  • Votre public cible est la « Génération Y » 19 à 25 ans
  • Le travail est réalisé en équipe de deux personnes
  • Étape 1 : Réalisez les esquisses (fil de fer) sur papier avant de faire les maquettes finales. J'ai mis un document sur le serveur
  • Étape 2 : Faire l'organigramme (architecture de l'information) sur papier. Voir image plus bas
  • Étape 3 : Intégrer vos interfaces optimisées dans marvelapp  
  • Étape 4 : Ajoutez l'interactivité, les liens entre chaque page dans marvelapp  
  • Vous pouvez vous créer un compte commun dans marvelapp   pour travailler en collaboration.
  • Taille: de 768 x 1024 (Ipad Mini)
  • Libre à vous de choisir l'orientation soit portrait ou paysage
  • À remettre: Le lien URL qui va me permettre de visualiser voir projet.
  • Une partie de cet exercice sera évalué au début du laboratoire 5.
  • Cet exercice compte pour 7 points et sera évalué au cours des prochains  laboratoire
  • Voici le contenu à intégrer
    • Titre de votre application « Bouffer Extrême »  / Montréal

    • 3 jours / 2 nuits (Occ.4)

    • Un weekend intensif de bouffe à Montréal. Vous allez découvrir des restaurants renommées telles que le Pied de cochon, le Montreal Plaza, le Joe Beef, etc. Et même, vous irez dans les rues de la ville pour y découvrir les camions de cuisine «food truck»! Ce forfait est idéal pour les amateurs de bouffe ayant déjà eu une première expérience à Montréal. Vous aurez le service d'un guide gourmand bilingue d'expérience «foodies» afin de faciliter la planification de vos réservations aux restaurants. 

      • Suggestion: Vous pouvez faire apparaître ces informations avec une fenêtre surgissante  «pop-up».

  • Notre hôtel

    • RITZ-CARLTON HOTEL
    • 2 nuitées et 2 déjeuners chauds
    • WI-FI gratuit dans votre chambre
    • Casse-croûte et restaurant à prix abordable
    • Plusieurs canaux télévisés spécialisés tels que HBO etc...
    • À seulement 15 minutes réelles du centre-ville
  • Nos options disponibles
    • Une croisière sur le fleuve avec un chroniqueur de bière d'Unibroue (valeur de 32$)
    • Ensemble-souvenirs de Montréal pour 25$ (valeur de 40$)
    • Ascension dans la cuisine du chef Normand Laprise du Toqué pour 25$
    • Visite de la boutique de cuisine Les Touilleurs incluant le service de thé pour 5$ 
    • Guide gourmand bilingue d'expérience
    • Arrêt WPCO (plus de 200 restaurants)
  • Notre programme complet et itinéraire
    • Jour #1 - Départ pour Montréal. Remise des documents de voyage et des supers iPad. Dîner en route ($). Film. Arrivée en plein centre-ville de Montréal vers 13h00. Souper 5 étoiles au Montreal Plaza (l'un des plus influent restaurant de Montréal), visite du vieux-montréal des bistros et terrasses en Bixi, etc. Votre guide francophone est avec vous pour vous aider à choisir vos activités et visites du jour. En fin d'après-midi transfert vers le fish market. Souper libre ($) et shopping jusqu’à environ 20 heures dans le quartier Mile-end (avec ses « pubs » Waverly et Snack'n blues) Retour à l'hôtel par la suite.
    • Jour #2 - Déjeuner inclus. Départ pour Montreal pour une journée complète de dégustation . Votre guide francophone qui vous suggérera des marchés publics, des salons de thé privé et de club exclusif de scotch. Plusieurs arrêts précis de débarquement pour vous rapprocher des principaux bistros. Au choix, vous pouvez visiter le quartier chinois, gaie, Plateau,  Mile-end, Plateau, etc. Retour à l'hôtel vers 22h30.
    • Jour #3 - Déjeuner inclus. Départ de l'hôtel avec les bagages vers la cabane à sucre du Pied de cochon. Visite de la cave à bière et  des fumoirs. Vers 14h00, départ de Mirabel vers Montréal. Arrêt à mi-chemin pour la pause-souper ($). Film et tirages sur la route du retour. Arrêt à la boutique Montréal - J'en mange (si le temps le permet). Arrivée à la maison en début de soirée.
  • Réserver
    • Réserver ce forfait
Exemple d'organigramme (architecture de l'information)

Exemple d'organigramme (architecture de l'information)


SEMAINE 2

THÉORIE

  • Mobile (UI) - Notions avancées

 

LABORATOIRE

  • À faire au début du lab: Remettre sur le serveur vos 2 exercices du laboratoire 1 (#2 et #3)
  • marvelapp  - INFORMATION - Il est possible d'avoir au maximum 3 projets dans l'application. Si, vous en avez plus, il faudra en effacer un. Nous utilisons la version gratuite, c'est pour cette raison le nombre de projet actif.

 

Exercice 1 : Site web appareil mobile uniquement en fil de fer

Créer un prototype fonctionnel à partir de vos fils de fer (wireframe) pour une application mobile. Vous devrez vendre des services personnalisés pour une clientèle ayant peu de temps. Voir l'exemple pour le fil de fer plus bas en gif animé.

  • Le thème est une agence de votre choix de services personnalisés de maison. Il s'agit de services qui simplifie la vie des gens. Par exemple, vous pourriez offrir ces types de services: gouvernante de maison, gardienne d'enfant, gardien, chef cuisiner, service ménager, chauffeur, majordome, valet, assistante personnelle, tuteur, nounou, etc.
  • Étape 1 : Rédigez votre persona (clientèle cible) dans un fichier Word. Information: prénom, âge et occupation. Comportement internet: lieu d'utilisation et fréquence.
  • Étape 2 : Établir une liste de services que doit contenir votre application. 
  • Étape 3 : Réalisez les esquisses (fil de fer) dans Illustrator ou Photoshop.  
  • Étape 4 : Préparer vos images dans PSD ou AI. Ensuite, vous pourrez les intégrer dans marvelapp.
  • Étape 5 : Ajoutez l'interactivité, les liens «Hot spot» sur les éléments graphiques pertinents de vos interfaces dans marvelapp  pour être capable de naviguer de page en page.
  • Le nombre de pages est à votre discrétion mais vous devez y mettre au minimum les pages suivantes: accueil, services, description du service. L'objectif est de permettre d'avoir une idée graphique convaincante de votre site mobile.
  • Travailler dans marvelapp pour le modèle Iphone
  • Taille: de 1242 x 2208 px (Iphone 6 - Plus)
  • Travail individuel
  • Cet exercice compte pour 4 points et sera évalué au prochain cours en laboratoire

Semaine 1

Théorie

  • Présentation du professeur 
  • But du cours
  • Présentation du plan de cours  
  • Site web du professeur
  • Communication par Léa
  • Disponibilités et mon bureau E-201
  • Théorie : Mobile (introduction)

Laboratoire

  • Avez-vous des comptes professionnels (Twitter, LinkedIn, Blog, DeviantArt…)?

Exercice 1 : Questionnaire en lien avec l'interactivité 

  • En équipe de 2 personnes
  • Créer un document Word pour mettre vos réponses
  • Donner une courte définition dans vos mots des éléments suivants : Interactivité / Ergonomie / Utilisabilité / Accessibilité / Persona 
  • Nommer 5 raisons qu’aurait un internaute pour quitter un site Web dès la page d’accueil.
  • Quels sont les éléments de présentation qui vous dérangent le plus dans un site web?


Exercice 2 : Conversion d'un site web en version mobile

  • Réaliser 4 pages = 4 interfaces, libre à vous de choisir les pages à développer. (exemple: tour, nouvelles, musique, boutique, vidéos, etc.)
  • Le thème est la musique (ex: groupe, chanteur/se, etc.)
  • Modifiez svp la mise en page pour qu'il soit adapter au mobile. Des exemples pour vous aider à visualiser vos interfaces en version web et mobile wix.com
  • Comment faire une capture écran en partie sur mac Commande + Maj + 4 ou de la totalité de l'écran Commande + Maj + 3
  • Réalisez le fil de fer (esquisse) avant de débuter les interfaces finales
  • Travailler dans marvelapp  pour réaliser votre prototype en ligne pour le modèle Iphone 6 plus 
  • Taille: 1242 x 2208 px. / Résolution apple
  • Exercice individuel
  • Adaptez la taille de la typographie
  • Adaptez le menu
  • À remettre: 1 capture écran du fil de fer en JPG ou PNG
  • À remettre: 1 capture contenant les 4 interfaces en JPG ou PNG. 
  • À faire: Mettre vos 4 interfaces dans l'application marvelapp. Pour la navigation, mettre un «hotspot» par interfaces pour être capable de naviguer de page en page.


Exercice 3 : Public cible

  • Chercher un site qui est intéressant au niveau de  l'interaction pour chaque public-cible suivants: 
  •  10-14 ans,  40 ans, 65 ans
  • Exemple de ressource thefwa.com
  • Faire une impression écran pour chaque interface en gardant toutes les infos de la fenêtre web. Le format doit être en jpeg 200 ko max. S’assurer que l’adresse url soit visible et identifiable.
  • Un court texte qui justifie la pertinence de votre choix (excellente navigation, homogénéité du site, clarté de l'information, etc.)

Devoir

  • Terminer les 3 exercices
  • Lecture du plan de cours
  • À essayer: Application gratuite pour faire des prototype en ligne  marvelapp