SEMAINE 11

THÉORIE

  • Note de cours «Curation» PDF

LABORATOIRE

MISE EN CONTEXTE DU TRAVAIL DE FIN DE SESSION

Vous aurez à produire les esquisse, maquettes et prototypes d’une application pour iPad qui vous permettra de partager les contenus que vous aurez soigneusement choisis et organisés pour vos utilisateurs. Vous souhaitez faire de la curation. 


OBJECTIF 

  • Définir la stratégie et la portée du projet

  • Effectuer l’architecture de l’information

  • Réaliser les maquettes des interfaces de l’application

  • Concevoir un prototype fonctionnel

CONTEXTE DE RÉALISATION

  • Le projet est réalisé individuellement

  • Le document préparatoire (wireframe, plan de navigation et plan de comportement)

  • Les maquettes statiques

  • Le prototype en ligne (Marvel app)

RESSOURCES

  1. Wireframe petit format - Télécharger le PDF 

  2. Wireframe grand format - Télécharger le PDF 

  3. Plan de navigation peut se faire sur le wireframe dans Figma

  4. Plan de comportement

À FAIRE

  1. Wireframe version préliminaire - Papier

  2. Wireframe version finale - Figma

  3. Plan de navigation peut se faire sur le wireframe - Figma

  4. Plan de comportement - Figma

Capture+d’écran+2017-11-15+à+21.10.22.png
Capture+d’écran+2017-11-15+à+21.29.12.png
Capture+d’écran+2017-11-15+à+21.29.26.png

CONTENUS OBLIGATOIRES:

1 - INTERFACE DE DÉMARRAGE

  • Logotype simple ou logotype en lien avec le sujet de l’application

  • L’arrière-plan peut être simple, mais minimalement introduire la couleur d’ambiance dominante

2 - INTERFACE D’INSCRIPTION / CONNEXION

  • Répéter le logotype et ajouter une courte ligne présentant l’application (ex. : le meilleur du Web sélectionné pour vous)

  • Mettre de l’avant la possibilité de se connecter via Facebook, Twitter ou par courriel

  • Offrir la possibilité de s’inscrire à l’utilisateur n’ayant pas de compte

  • Inclure une option en cas d’oubli du mot de passe

  • Le processus de connexion peut être dans une une fenêtre modale

Capture+d’écran+2017-11-15+à+21.35.17.png

3 - INTERFACE DE L’INTRODUCTION DE L’ÉDITION

INTRODUCTION DE L’ÉDITION

  • Image introductive des contenus de l’édition (peut être un montage photographique, illustratif, graphique)

  • Identification de l’édition permettant de voir la publication et de la date de parution

  • Brève introduction décrivant l’édition active (présentation générale des contenus de l’édition) – maximum 5 lignes

IMG_0071.jpg

INTERFACES DES CONTENUS (MINIMUM CINQ CONTENUS DISTINCTS)

  • Image représentative, titre et court texte descriptif pour chacun des contenus de l’édition

  • Indication secondaire au choix (ex. : source, auteur, durée, temps de lecture, date de publication, catégorie, tags, etc.)

  • Tout le contenu ne doit pas nécessairement entrer dans un écran, le défilement est permis

FICHE D’UN CONTENU SPÉCIFIQUE

  • Le contenu principal complet (ex. : lecteur vidéo, lecteur audio, article, etc.)

  • Pour un lecteur vidéo ou audio, les fonctions de base doivent être représentées

  • Un lien doit conduire à la source du contenu (ex. : mener à YouTube ou à un site Web externe)

  • La fiche d’un contenu spécifique peut contenir plus d’un type de média (ex. : vidéo dans un article)

  • L’utilisateur doit pouvoir facilement ajouter le contenu spécifique à sa liste de favoris (obligatoire sur cet écran)

  • L’utilisateur doit pouvoir rapidement partager le contenu via Facebook, Twitter ou par courriel

Capture d’écran 2018-11-02 à 11.31.42.png

À PROPOS

  • Une photo présentant le curateur (ou l’équipe de curation)

  • Un titre et un texte présentant le curateur (ou l’équipe de curation)

  • Les informations de contact

PARAMÈTRES

  • Modifier le profil (n’inclure que l’option, ne pas concevoir l’écran associé)

  • Activation / désactivation des notifications lors de la parution d’une nouvelle édition

  • Déconnexion

AUTRES CONSIGNES

  • Un menu principal doit être conçu pour permettre une navigation conviviale dans l’application afin de :

    • Consulter la liste des éditions antérieures

    • Consulter la liste des favoris

    • Consulter la section à propos du curateur (ou l’équipe de curation)

    • Modifier les paramètres de l’application

  • La liste des éditions doit être représentative et simuler un minimum pertinent d’éditions passées

  • La liste des favoris doit être représentative et simuler un minimum pertinent de contenus favoris

  • Toutes les interactions doivent être simulées (ex. : ajout/retrait, activation/désactivation, fermeture/ouverture, etc.)

  • L’utilisation du Lorem Ipsum est permise dans les textes n’ayant pas d’impact sur la compréhension du contenu.

CONTRAINTES TECHNIQUES

  • Les maquettes doivent être réalisées dans un seul document Illustrator

  • Mode de couleurs : Couleurs RVB / Résolution : 72 pixels par pouce.

  • Les dimensions du iPad Pro 12,9 puces est de 1024 x 1366 px ou 1366 x 1024 px

  • L’orientation est au choix (paysage ou portrait)

  • Les éléments d’interface utilisateur (UI) tels que les icônes et boutons doivent être vectoriels

  • Les «frames» et «layers» doivent être correctement nommés et regrouper dans FIGMA

  • Pour chaque hotspot, vous devez définir la bonne destination et configurer adéquatement les options associées

  • Vous devez exploiter judicieusement les différents effets de transitions d’écran disponibles (ex. : fondu)

  • Vous devez utiliser adéquatement les différentes actions de toucher disponibles (ex. : glisser vers le haut)

REMISE

MAQUETTES:

  • Remise sur le réseau votre URL de votre projet FIGMA

PROTOTYPE:

  • Remise dans remise travaux dans le dossier de la semaine 14

  • Partager simplement le lien vers votre prototype en ligne Marvel App

ÉCHÉANCIER

  • Semaine 11:

    • Wireframe fait à la main en vitesse sur papier - Oui, oui, sur papier

    • Wireframe et plan de navigation fait dans FIGMA - Fait dans un # «frame » nommé : wireframe

    • Plan de comportement tactile «gesture» - Fait dans un # «frame » nommé : plan de comportement

    • Plan de navigation - Fait dans un # «frame » nommé : plan de navigation

  • Semaine 12:

    • Débuter les interfaces dans FIGMA

  • Semaine 13:

    • Marquettes terminées à 75% dans FIGMA

  • Semaine 14:

    • Marquettes terminées à 100% dans FIGMA

    • Prototypage dans Marvelapp

    • Préparer votre dossier de remise : un lien URL de Marvelapp et un lien FIGMA

    • Remise finale sur le serveur dans remise travaux

CRITÈRES D'ÉVALUATION

  • Les critères d’évaluation vous seront remis dans un document séparé présentant la grille d’évaluation du TP3.

Les retards seront comptabilisés après l’échéance (-10% par jour de retard). 

Ce projet compte pour 40% et la remise aura lieu le lundi 3 décembre de la semaine 14.


SEMAINE 10

THÉORIE

  • Note de cours

LABORATOIRE

MISE EN CONTEXTE

Dans ce projet, vous aurez concevoir une application «messages» pour le mobile. 

CONSIGNES

  • Taille de l'écran est pour mobile iPhone 10

  • Projet fait seul

  • Remettre sur le serveur le lien dans le dossier de remise de votre groupe du lab 10

REMISE

  • Maquette fait dans Figma

  • Remettre un fichier optimisé (PNG, SVG, JPG)

RESSOURCE

style-imagery-integration-imagetypeavatarsb_large_mdpi.png
b1d8f5c46c88ca72e03e9ab2fbcf886c.jpg
Capture d’écran 2018-11-05 à 10.52.20.png
97274ea2dd4ae7d4149d941ab1ba1bf5.jpg
52ccfe4587000848f23a723adfb97f41.jpg




LABORATOIRE

PAGE D'ATTÉRISSAGE

MISE EN CONTEXTE ET OBJECTIF

Dans ce deuxième projet pratique, vous concevrez les interfaces d’une page d’atterrissage adaptative présentant le produit que vous avez sélectionné lors des activités préparatoires. La landing page se destine à présenter le produit au visiteur, incluant par exemple son fonctionnement, ses caractéristiques, ainsi que les bénéfices pour l’utilisateur. Les interfaces seront déclinées pour ordinateur et téléphone. Cette série d’interface a pour principal but d’offrir du contenu utile permettant à la fois de mettre en valeur le produit et potentiellement convertir le visiteur en client. 

SEMAINE 9

THÉORIE

  • Présentation du devis

LABORATOIRE

PAGE D'ATTÉRISSAGE

MISE EN CONTEXTE ET OBJECTIF

Dans ce deuxième projet pratique, vous concevrez les interfaces d’une page d’atterrissage adaptative présentant le produit que vous avez sélectionné lors des activités préparatoires. La landing page se destine à présenter le produit au visiteur, incluant par exemple son fonctionnement, ses caractéristiques, ainsi que les bénéfices pour l’utilisateur. Les interfaces seront déclinées pour ordinateur et téléphone. Cette série d’interface a pour principal but d’offrir du contenu utile permettant à la fois de mettre en valeur le produit et potentiellement convertir le visiteur en client. 



OBJECTIF

Concevoir une page d’atterrissage adaptée pour l’ordinateur et le téléphone.

  1. Faire une recherche sur le produit à mettre en vedette et concevoir deux tableaux de photos sur Pinterest.

  2. Définir la stratégie en lien avec la clientèle ciblée et rédiger deux personas distincts (primaire et secondaire).

  3. Analyser l’architecture de différentes pages d’atterrissage et en dégager les points forts pour s’en inspirer.

  4. Déterminer la portée des interfaces et des contenus au moyen d’esquisses sur papier.

  5. Concevoir les maquettes préliminaires pour ordinateur..

  6. Produire les maquettes finales des interfaces adaptées à chacun des contextes de diffusion.

 

CONTEXTE DE RÉALISATION

  • Projet individuel

  • Les tableaux Pinterest et le persona (fait au cours 7)

  • Les croquis et maquettes préliminaires sont évalués 

  • Les interfaces adaptées (ordinateur) seront évaluées 

 

CONTRAINTES TECHNIQUES

  • Les interfaces doivent être réalisées dans un seul document Photoshop utilisant des plans de travail distincts.

  • Mode de couleurs : Couleurs RVB.

  • Résolution : 72 px

  • Largeur pour ordinateur : Optimisée pour un écran de 1920 px. Une suggestion, vous pourriez utiliser 12 colonnes.

  • La hauteur de chaque adaptation sera déterminée par la longueur des contenus.

  • Les éléments d’interface utilisateur (UI) tels que les icônes et boutons doivent être vectoriels.

  • Les calques doivent être correctement nommés et regrouper en dossiers bien identifiés pour chaque plan de travail.

 

CONTENUS À INTÉGRER

ENTÊTE

  • Logotype en lien avec le produit choisi (entreprise qui le distribue ou produit comme tel).

  • Navigation principale (qui peut représenter les sections dans la page ou d’autres pages dans le site).

ZONE « HERO »

  • Image mettant en vedette le produit de façon explicite (on doit comprendre tout de suite la mission de la page).

  • Argument de vente principal (souvent présenté en quelques mots en gros suivi d’une courte phrase plus petite).

  •  Bouton proposant un appel à l’action simple, clair et précis (ex. : Acheter maintenant).

  • Si le menu est masqué à l’arrivée ( ), il faut également présenter une version avec le menu ouvert.

  • L’entête et la zone « hero » doivent être visibles en un coup d’œil sur le premier écran de chacune des adaptations.

QUATRE SECTIONS DE CONTENUS DISTINCTES

  • Présentation du produit

  • Comment ce produit fonctionne

  • Ses bénéfices pour l’utilisateur

  • Ses fonctionnalités (caractéristiques)

  • Témoignages d’utilisateurs

  • Foire aux questions

  • Spécifications techniques

  • Présentation de l’équipe derrière le produit

  • Historique de l’entreprise

  • Processus de conception du produit

  • Abonnement à une lettre de nouvelle

  • Localisation de l’entreprise

  • Un minimum de trois sections sur quatre doit incorporer des éléments visuels pour appuyer les contenus.

  • Une section présente l’information de façon plus créative et originale que les autres.

  • Les sections doivent être hiérarchisées en ordre d’importance pour l’utilisateur (persona principal).

  • La hauteur de chacune des sections peut être variable et définie en fonction des contenus.

  • La mise en forme des textes doit être cohérente avec le contenu présenté (titre, paragraphe, liste, etc.).

  • L’utilisation du Lorem Ipsum est permise dans les textes n’ayant pas d’impact sur la compréhension du contenu.

  • Si une section ne présente qu’une vidéo (ou contenu très simple), les autres sections devront être davantage élaborées.

  • L’appel à l’action doit être rappelé dans une des quatre sections au minimum (peut être reformulé).

N’oubliez pas les principales qualités recherchées dans vos contenus de sections :

  • Être utile (pertinent, vrai, concis)

  • Accroître la valeur (attrayant, engageant, punché)

  • Appeler à l’action (dans les textes, boutons, liens)ç

PIED DE PAGE

Les éléments suivants sont suggérés pour la conception du pied de page

  • Information sur l’entreprise distribuant le produit (court paragraphe)

  • Formulaire simple de contact ou d’abonnement à un bulletin de nouvelle

  • Liens vers les réseaux sociaux principaux

  • Un rappel du menu de navigation

  • Les droits d’auteurs et autres modalités d’utilisation

  • Ces éléments sont des exemples, vous pouvez intégrer d’autres éléments si vous le souhaitez.

  • Votre pied de page doit être « consistant » et présenter davantage qu’un simple rappel du menu + droits d’auteurs.

REMISE FINALE

  • Remise à la semaine 10

  • Remise du document PSD 

  • Remises de chaque interface adaptée (ordinateur) au format PNG.

  • Le dossier de l’étudiant doit être identifié nom_prenom_gr10XX.

  • Les fichiers PNG doivent être identifiés selon l’exemple suivant : nom-prenom_produit_mobile.png.


SEMAINE 9

THÉORIE

  • Présentation du devis

LABORATOIRE

PAGE D'ATTÉRISSAGE

MISE EN CONTEXTE ET OBJECTIF

Dans ce deuxième projet pratique, vous concevrez les interfaces d’une page d’atterrissage adaptative présentant le produit que vous avez sélectionné lors des activités préparatoires. La landing page se destine à présenter le produit au visiteur, incluant par exemple son fonctionnement, ses caractéristiques, ainsi que les bénéfices pour l’utilisateur. Les interfaces seront déclinées pour ordinateur et téléphone. Cette série d’interface a pour principal but d’offrir du contenu utile permettant à la fois de mettre en valeur le produit et potentiellement convertir le visiteur en client. 





OBJECTIF

Concevoir une page d’atterrissage adaptée pour l’ordinateur et le téléphone.

  1. Faire une recherche sur le produit à mettre en vedette et concevoir deux tableaux de photos sur Pinterest.

  2. Définir la stratégie en lien avec la clientèle ciblée et rédiger deux personas distincts (primaire et secondaire).

  3. Analyser l’architecture de différentes pages d’atterrissage et en dégager les points forts pour s’en inspirer.

  4. Déterminer la portée des interfaces et des contenus au moyen d’esquisses sur papier.

  5. Concevoir les maquettes préliminaires pour ordinateur..

  6. Produire les maquettes finales des interfaces adaptées à chacun des contextes de diffusion.

 

CONTEXTE DE RÉALISATION

  • Projet individuel

  • Les tableaux Pinterest et le persona (fait au cours 7)

  • Les croquis et maquettes préliminaires sont évalués 

  • Les interfaces adaptées (ordinateur) seront évaluées 

 

CONTRAINTES TECHNIQUES

  • Les interfaces doivent être réalisées dans un seul document Photoshop utilisant des plans de travail distincts.

  • Mode de couleurs : Couleurs RVB.

  • Résolution : 72 px

  • Largeur pour ordinateur : Optimisée pour un écran de 1920 px. Une suggestion, vous pourriez utiliser 12 colonnes.

  • La hauteur de chaque adaptation sera déterminée par la longueur des contenus.

  • Les éléments d’interface utilisateur (UI) tels que les icônes et boutons doivent être vectoriels.

  • Les calques doivent être correctement nommés et regrouper en dossiers bien identifiés pour chaque plan de travail.

 

CONTENUS À INTÉGRER

ENTÊTE

  • Logotype en lien avec le produit choisi (entreprise qui le distribue ou produit comme tel).

  • Navigation principale (qui peut représenter les sections dans la page ou d’autres pages dans le site).

ZONE « HERO »

  • Image mettant en vedette le produit de façon explicite (on doit comprendre tout de suite la mission de la page).

  • Argument de vente principal (souvent présenté en quelques mots en gros suivi d’une courte phrase plus petite).

  •  Bouton proposant un appel à l’action simple, clair et précis (ex. : Acheter maintenant).

  • Si le menu est masqué à l’arrivée ( ), il faut également présenter une version avec le menu ouvert.

  • L’entête et la zone « hero » doivent être visibles en un coup d’œil sur le premier écran de chacune des adaptations.





QUATRE SECTIONS DE CONTENUS DISTINCTES

  • Présentation du produit

  • Comment ce produit fonctionne

  • Ses bénéfices pour l’utilisateur

  • Ses fonctionnalités (caractéristiques)

  • Témoignages d’utilisateurs

  • Foire aux questions

  • Spécifications techniques

  • Présentation de l’équipe derrière le produit

  • Historique de l’entreprise

  • Processus de conception du produit

  • Abonnement à une lettre de nouvelle

  • Localisation de l’entreprise

  • Un minimum de trois sections sur quatre doit incorporer des éléments visuels pour appuyer les contenus.

  • Une section présente l’information de façon plus créative et originale que les autres.

  • Les sections doivent être hiérarchisées en ordre d’importance pour l’utilisateur (persona principal).

  • La hauteur de chacune des sections peut être variable et définie en fonction des contenus.

  • La mise en forme des textes doit être cohérente avec le contenu présenté (titre, paragraphe, liste, etc.).

  • L’utilisation du Lorem Ipsum est permise dans les textes n’ayant pas d’impact sur la compréhension du contenu.

  • Si une section ne présente qu’une vidéo (ou contenu très simple), les autres sections devront être davantage élaborées.

  • L’appel à l’action doit être rappelé dans une des quatre sections au minimum (peut être reformulé).





N’oubliez pas les principales qualités recherchées dans vos contenus de sections :

  • Être utile (pertinent, vrai, concis)

  • Accroître la valeur (attrayant, engageant, punché)

  • Appeler à l’action (dans les textes, boutons, liens)ç





PIED DE PAGE

Les éléments suivants sont suggérés pour la conception du pied de page

  • Information sur l’entreprise distribuant le produit (court paragraphe)

  • Formulaire simple de contact ou d’abonnement à un bulletin de nouvelle

  • Liens vers les réseaux sociaux principaux

  • Un rappel du menu de navigation

  • Les droits d’auteurs et autres modalités d’utilisation

  • Ces éléments sont des exemples, vous pouvez intégrer d’autres éléments si vous le souhaitez.

  • Votre pied de page doit être « consistant » et présenter davantage qu’un simple rappel du menu + droits d’auteurs.

REMISE FINALE

  • Remise à la semaine 10

  • Remise du document PSD 

  • Remises de chaque interface adaptée (ordinateur) au format PNG.

  • Le dossier de l’étudiant doit être identifié nom_prenom_gr10XX.

  • Les fichiers PNG doivent être identifiés selon l’exemple suivant : nom-prenom_produit_mobile.png.


SEMAINE 7-8

THÉORIE

  • Note PDF «La portée»

LABORATOIRE

CHOIX DES CONTENUS

MISE EN CONTEXTE ET OBJECTIF

Après avoir officialisé votre choix de produit, vous devez établir votre public cible, observer des pages d’atterrissage professionnelles et structurer les contenus qui seront présentés sur votre future « landing page ».

OBJECTIF DE L’EXERCICE 

  • Rédiger un persona primaire reflétant dans un client typique les caractéristiques des utilisateurs principaux du produit

  • Faire la recherche et l’analyse de trois pages d’atterrissage professionnelle, moderne et attrayante

  • Dresser la liste des contenus potentiels liés à votre produit et les disposer sur des croquis réalisés à la main

  • Amorcer un premier jet d’interface (croquis fil-de-fer) présentant vos contenus de votre « landing page »



ACTIVITÉ #1 – ANALYSE DE pages d’atterissage «LANDING PAGES»

  • Parcourir les exemples fournis par votre professeur (dossier Exemples produits)    

  • Trouver trois exemples inspirants de page d’atterrissage présentant un produit unique (peu importe le produit)

  • Dégager des points forts au niveau des contenus, des interfaces, de l’interactivité et de l’expérience utilisateur

  • Compléter le document préparatoire en y intégrant vos exemples de pages d’atterrissage inspirantes

  • Compléter le document PDF

ACTIVITÉ #2 – Définir la portée- MAISON MILAN

Dans votre cahier d’esquisses, au moyen du gabarit imprimable. Compléter le document PDF

  • Revoir les contenus, les fonctionnalités et la présentation des exemples analysés

  • Rechercher de nouveaux exemples pouvant inspirer le choix des contenus et fonctionnalités à inclure au projet

  • Porter une attention particulière aux éléments interactifs permettant l’affichage de contenus particulier

  • Déterminer précisément les contenus et fonctions de votre page d’atterrissage à concevoir dans le cadre du TP2

  • Lors de cette activité de réflexion, il est fortement conseiller de dresser une liste des contenus pouvant potentiellement faire partie de votre projet. Par exemple, vous pouvez noter qu’intégrer dans votre page des témoignages de clients satisfaits pourrait s’avérer pertinent. Vous pouvez même prendre des captures d’écran de sections qui pourraient vous servir d’exemples afin de vous inspirer du design d’information lors de la réalisation de vos propres interfaces.

ACTIVITÉ #3 – Réaliser le wireframe

Dans votre cahier d’esquisses, au moyen des gabarits imprimables (voir dossier) ou encore en utilisant les feuilles quadrillées fournies par votre professeur, vous devez préciser votre choix de contenus et les découper en écran distincts. Au moyen du gabarit imprimable. Compléter le document PDF

Éléments à représenter :

  • Entête de la page (logo, navigation…)

  • Zone « hero » (grande image, argument de vente principal)

  • Quatre sections distinctes minimum, par exemple :  

    • Présentation du produit

    • Comment ce produit fonctionne

    • Ses bénéfices pour l’utilisateur

    • Ses fonctionnalités (caractéristiques)

    • Les produits dérivés

    • Ses avantages sur la concurrence

    • Critiques de sites spécialisés

    • Témoignages d’utilisateurs

    • Foire aux questions

    • Spécifications techniques

    • Présentation de l’équipe derrière le produit

    • Historique de l’entreprise

    • Processus de conception du produit

    • Application mobile liée au produit

    • Abonnement à une lettre de nouvelle

    • Localisation de l’entreprise 

  • Pied de page (information sur l’entreprise, formulaire de contact, réseaux sociaux)

ACTIVITÉ #5 – VERSION PRÉLIMINAIRE DE VOTRE LANDING PAGE

Afin de se préparer votre prochain laboratoire, vous pouvez réaliser un premier jet d’interface dans le logiciel de votre choix. 

Logiciels suggérés :

  • Wireframes dans une application en ligne (balsamiq, mockflow, mockinbird, wireframe.cc, etc.)

  • Photoshop

  • Illustrator

  • Sketch

REMISE

  • Pour recevoir des commentaires en classe laboratoire, la remise formative de votre croquis fil-de-fer doit se faire avant le début du prochain laboratoire de la semaine (au retour de la relâche) :

  • Vos esquisses

  • Première ébauche d’interface au format PNG (nom-prenom_desktop_nom-du-produit.png)

RESSOURCES

À LIRE


Exemple+0.jpg


SEMAINE 6

THÉORIE

  • Note PDF (UI / UX)

LABORATOIRE

MISE EN CONTEXTE ET OBJECTIF

Afin de vous préparer au deuxième travail pratique du cours Design interactif, vous devez choisir un objet pour lequel vous aurez à concevoir une « product landing page », . Cet exercice préparatoire consiste à utiliser les différents outils présentés en classe théorique afin d’être en mesure d’établir une stratégie se basant sur les besoins de l’utilisateur et les objectifs du site Web.

OBJECTIF DE L’EXERCICE 

  • Choisir un objet unique répondant à un besoin chez un groupe d’utilisateurs spécifique (large ou plus niché)Prendre connaissance des différents profils utilisateurs par génération

  • Présenter des photos de l’objet de bonne qualité et de résolution suffisante

  • Rédiger des personas primaire reflétant les utilisateurs de ce produit

ACTIVITÉ #1 – CHOISIR UN objet «PRODUIT»

L’objet que vous choisirez sera à la base de votre TP2 qui s’échelonnera jusqu’à la semaine 9, donc ce choix est crucial pour avoir un projet de bonne qualité. Évitez les produits inutiles, niaiseux ou qui n’ont aucune qualité esthétique. Voici les critères qui pourront vous guider dans votre choix : 

  • L’objet doit être un produit physique existant

  • L’objet doit être quelque chose d’utile et désirable

  • L’objet doit être unique

  • L’objet doit être quelque chose qui se vend bien en ligne

  • L’objet doit être agréable à l’oeil (qualités esthétiques)

  • L’objet doit avoir de nombreuses photos (bonus pour vous si des vidéos existent)

    • Qualité professionnelle

    • Haute résolution

    • Angles de vue nombreux

    • Produit en contexte d’utilisation

    • Dessins techniques

  • Le site réel faisant la promotion du produit ne doit pas être une tentation au plagiat.

  • Attention :Le produit ne peut être virtuel (ex. : application mobile), un service en ligne (ex. : abonnement à un site de musique sur demande), un service dans le monde réel (ex. : restaurant) ou un groupe de produits plutôt qu’un objet unique (ex. : boutique de chaussures).

  • Afin d’amorcer votre recherche, vous devez créer un premier tableau «products» sur Pinterest pour cumuler un maximum de photos (minimum 25 images) de produits divers et autres références Web. Ceci est une phase exploratoire, ne vous concentrez pas sur votre premier choix !

  • Ensuite, constituer vous un second tableau «Product landing page» présentant uniquement votre produit avec un minimum de 10 images, ainsi que d’autres références inspirantes en lien avec ce produit spécifique.

  • Le produit ne peut être virtuel (ex. : application mobile), un service en ligne (ex. : abonnement à un site de musique sur demande), un service dans le monde réel (ex. : restaurant) ou un groupe de produits plutôt qu’un objet unique (ex. : boutique de chaussures).

  • Conseil Assurez-vous qu’au moins une de vos images soit de 1920 px ou plus de large.

Débuter le document préparatoire pour le prochain laboratoire

  • Page de présentation (inclure votre meilleure photo)

  • Informations sur la compagnie et le produit

  • Images du produit choisi basé sur votre second tableau Pinterest (minimum de 10 images)

  • Télécharger le fichier à compléter DOC

ACTIVITÉ #2 – RECHERCHE CLIENTÈLE CIBLE

Pour identifier vos utilisateurs types, vous aurez à créer un persona primaire. Pour se faire, vous devez utiliser l’application en ligne xtensio.com :https://app.xtensio.com/folio/xb8niu1r

  • Créer votre persona primaire

  • Se créer un compte sur le site xtensio.com à cette adresse : https://app.xtensio.com/invite/kmul1tyk

  • Démarrer un gabarit de persona dans l’application en ligne (templates > user persona)

  • Traduire le gabarit selon cet exemple : https://app.xtensio.com/folio/xb8niu1r

  • Créer votre persona primaire

  • Inclure votre persona dans le document préparatoire

À REMETTRE

  • Remettre le document TP01-Document préparatoire-01.docx sur le serveur dans le remise travaux  / Lab 7 / Dans votre groupe

  • Partager les liens vers votre tableau Pinterest

Cette partie cOMPTE dans le cadre du TP2

À LIRE


SEMAINE 5

THÉORIE

  • Note PDF (UI / UX)

LABORATOIRE

MISE EN CONTEXTE

Dans ce deuxième projet pratique, vous concevrez les interfaces d’une page d’atterrissageadaptativeprésentant le produit que vous avez sélectionné lors des activités préparatoires. La landing pagese destine à présenter le produit au visiteur, incluant par exemple son fonctionnement, ses caractéristiques, ainsi que les bénéfices pour l’utilisateur. Les interfaces seront déclinées pour ordinateur et téléphone. Cette série d’interface a pour principal but d’offrir du contenu utile permettant à la fois de mettre en valeur le produit et potentiellement convertir le visiteur en client. 

Objectif

Concevoir une page d’atterrissage adaptée pour l’ordinateur et le téléphone.

  1. Faire une recherche sur le produit à mettre en vedette et concevoir un tableau de photos sur Pinterest.

  2. Mettre en contexte le produit et joindre une fiche décrivant le persona type représentant la clientèle ciblée.

  3.  Analyser l’architecture de différentes pages d’atterrissage et en dégager les points forts pour s’en inspirer.

  4. Déterminer les contenus et structurer l’interface au moyen d’esquisses sur papier et croquis sur ordinateur.

  5. Concevoir les maquettes préliminaires pour ordinateur et téléphone.

  6. Produire les maquettes finales des interfaces adaptées à chacun des contextes de diffusion.

  7. Prototyper l’interactivité des interfaces

Contexte de réalisation

  • Projet individuel

  • Le document préparatoire sera évalué distinctement des interfaces lors de la remise finale.

  • Les croquis et maquettes préliminaires seront évalués de façon formative en classe laboratoire.

  • Les interfaces adaptées (ordinateur et téléphone) seront évaluées de façon sommative lors de la remise finale.

  • Le prototype interactif sera évalué distinctement des interfaces lors de la remise finale.

  • Le travail pratique 2 équivaut à 30 %de votre note finale du cours Design interactif.

CONTRAINTES TECHNIQUES

  • Les interfaces doivent être réalisées dans un seul document de votre choix utilisant des pages/plans de travail distincts. 

  • Largeur pour ordinateur : Optimisée pour un écran de 1440 px, mais utilisant un conteneur à 1170 px pour des contenus disposés sur une grille de 12 colonnes (il est possible qu’une section ou deux soient de pleine largeur).

  • Largeur pour téléphone (portrait) : Optimisée pour un écran de 375 pixels CSS (iPhone 8).

  • La hauteurde chaque adaptation sera déterminée par la longueur des contenus.

  • Les calques doivent être correctement nommés et regrouper en dossiers bien identifiés pour chaque plan de travail.

  • Les symboles et les styles doivent être judicieusement exploités dans le logiciel.

  • Le prototype doit permettre de visualiser autant que possible les effets « hover » et les éléments interactifs.

CONTENUS À INTÉGRER

ENTÊTE

  • Logotype en lien avec le produit choisi (entreprise qui le distribue ou produit comme tel).

  • Navigation principale (qui peut représenter les sections de contenus dans la page)

  • Facultatif : Navigation secondaire (qui peut représenter une navigation alternative ou d’autres pages du site Web).

ZONE « HERO »

  • Image mettant en vedette le produit de façon explicite (on doit comprendre tout de suite la mission de la page).

  • Argument de vente principal (souvent présenté en quelques mots en gros suivi d’une courte phrase plus petite).

  • Bouton proposant un appel à l’action simple, clair et précis (ex. : Acheter maintenant).

  • Si le menu est masqué à l’arrivée (), il faut également présenter une version avec le menu ouvert.

  • L’entête et la zone « hero » doivent être visibles en un coup d’œil sur le premier écran de chacune des adaptations.

QUATRE SECTIONS DE CONTENUS DISTINCTES

Revoici la liste d’exemples de section présentée lors de l’activité sur la portée des contenus :

  • Présentation du produit

  •  Comment ce produit fonctionne 

  • Ses bénéfices pour l’utilisateur

  •  Ses fonctionnalités (caractéristiques)

  • Les produits dérivés

  •  Ses avantages sur la concurrence

  • Critiques de sites spécialisés

  • Témoignages d’utilisateurs

  • Foire aux questions

  • Spécifications techniques

  •  Présentation de l’équipe derrière le produit

  • Historique de l’entreprise

  • Processus de conception du produit

  •  Application mobile liée au produit

  • Abonnement à une lettre de nouvelle

  •  Localisation de l’entreprise

  • Un minimum de trois sections sur quatre doivent incorporer des éléments visuels pour appuyer les contenus.

  • Il est attendu qu’une section présente l’information de façon plus créative et interactive que les autres.

  • Les sections doivent être hiérarchisées en ordre d’importance pour l’utilisateur (persona principal).

  • La hauteur de chacune des sections peut être variable et définie en fonction des contenus.

  • La mise en forme des textes doit être cohérente avec le contenu présenté (titre, paragraphe, liste, etc.).

  •  L’utilisation du Lorem Ipsumest permise dans les textes n’ayant pas d’impact sur la compréhension du contenu.

  • Si une section ne présente qu’une vidéo (ou contenu très simple), les autres sections devront être davantage élaborées.

  • L’appel à l’action doit être rappelé dans une des quatre sections au minimum (peut être reformulé).

N’oubliez pas les principales qualités recherchées dans vos contenus de sections :

  1. Être utile(pertinent, vrai, concis)

  2. Accroître la valeur(attrayant, engageant, punché)

  3. Appeler à l’action(dans les textes, boutons, liens)

PIED DE PAGE

  • Les éléments suivants sont suggérés pour la conception du pied de page 

  •  Information sur l’entreprise distribuant le produit (court paragraphe)

  •  Formulaire simple de contact ou d’abonnement à un bulletin de nouvelle

  • Liens vers les réseaux sociaux principaux 

  • Un rappel du menu de navigationÀ

  • Les droits d’auteurs et autres modalités d’utilisation

  • Ces éléments sont des exemples, vous pouvez intégrer d’autres éléments si vous le souhaitez.

  • Votre pied de page doit être « consistant » et présenter davantage qu’un simple rappel du menu + droits d’auteurs.

REMISE FINALE

  • Semaine 9, à la fin du laboratoire

·     Remise du document .sketch incluant l’ensemble des interfaces.

·     Remises de chaque interface adaptée (ordinateur et téléphone) au format PNG.

·     Le lien vers le prototype en ligne au format .url

·     Le dossier de l’étudiant doit être identifié nom_prenom_gr10XX.

·     Les fichiers PNG doivent être identifiés selon l’exemple suivant : nom-prenom_produit_ordinateur.png.

Les retards seront comptabilisésdès que le laboratoire de la semaine 9 sera amorcé (-10% par jour de retard).


SEMAINE 4

THÉORIE

  • Note PDF (Suite du cours 3)

  • Conférence obligatoire le mercredi 19 septembre de 12h15 à 14h00 au local D-2702 situé à la bibliothèque.

  • Le thème abordé sera le logiciel SKETCH.

  • Il n'y a aura pas de cours de théorie le le lundi 17 septembre de 11h10 à 12h00.

LABORATOIRE

Mise en contexte

Dans cette dernière partie du projet TIMFLIX, le but de présenter vos interfaces TIMFLIX en action à votre client, vous devez intégrer vos maquettes dans le logiciel en ligne www.marvelapp.com afin de concevoir un prototype interactif qui lui permettra de naviguer dans votre app mobile.

OBJECTIF DE LA PARTIE 4/4 : Finaliser le design d’interfaces utilisateur (UI).

  • Exporter l’ensemble de vos interfaces en PNG @2x (pour une intégration iPhone 7 en haute résolution)

  • Faire la navigation en les différents écrans prévus dans la commande :

  • Écran de démarrage

  • Écran de connexion (avec affichage d’un clavier en calque + champs remplis)

  • Écran d’accueil avec trois entrées de films (avec menu overflow et image plein écran en calques)

  • Écran de vote avant et après

  • Écran de profil

À remettre

  • Un lien vers votre prototype en ligne Marvel App. Je vais les prendre au début du prochain la laboratoire.

  • Remises des interfaces aux formats PNG @2x et PSD sur le réseauau début du prochain la laboratoire.

    • Le dossier de l’étudiant doit être identifié nom_prenom_gr10XX

    • Les fichiers remis doivent être identifiés selon l’exemple suivant : timflix_accueil_mobile.png

 

Critères d'évaluation

  • Dans Marvel App, le prototype est identifié par votre logo TIMFLIX et rassemble toutes les interfaces

  • La navigation dans le prototype est fluide, intuitive et cohérente avec les interfaces créées

  • Les interactions importantes associées à la présentation de contenus sont correctement simulées

  • Chaque hotspot pointe vers la bonne destination et les options associées sont bien configurées

  • Le prototype utilise un entête et/ou un pied de page fixe dans l’écran

  • Le prototype respecte les consignes et spécifications techniques présentées dans les consignes


URL MARVELAPP

  • Anabelle, Langelier

  • Christian, Bouchard

  • Gabriel, Scheunemann

  • Jacob, Garneau

  • Laurianne, Benoît

  • Marie-Pier, Proulx

  • Martin, Gélinas

  • Mélody, Bédard-Martin

  • Michael, Contant-Holowatyj

  • Nadia, Brière

  • Nicolas, Morissette

  • Sébastien, St-Cyr

  • Simon, Conway

  • Simon, Larochelle

  • William, Bonneterre

  • Xavier, Lavoie

  • Xavier, Sercia


SEMAINE 3

THÉORIE

  • Note à venir

LABORATOIRE

MISE EN CONTEXTE

Dans cette partie du projet TIMFLIX, vous aurez à finaliser votre séquence d’interfaces en intégrant trois nouvelles pages écrans dans votre projet.

OBJECTIF DE LA PARTIE 3/4 : FINALISER LE DESIGN D’INTERFACES UTILISATEUR (UI).

  • Concevoir l’écran de connexion

  • Concevoir l’écran de profil d’un membre

  • Concevoir le menu « overflow » reporté du premier cours

CONSIGNES

  • Les écrans Connexion, Profil et Menu overflow doivent être finalisés sur des plans de travail distincts

  • Les interfaces finales doivent être réalisées à partir des plans de travail créés dans Photoshop ou Illustrator

  • Les éléments d’interface utilisateur (UI) tels que les icônes et boutons doivent être vectoriels

  • Les images matricielles doivent être intégrées à l’interface de façon à prévoir l’affichage en haute résolution (@2x)

  • ·Les calques doivent être correctement nommés et regrouper en dossiers bien identifiés pour chaque plan de travail

INTERFACES À PRODUIRE:

1- ÉCRAN DE DE CONNECTION

  • Répéter le logo et inclure une courte ligne introduisant l’application (trouvez des films et séries TV selon vos gouts)

  • Inclure des champs pour se connecter avec son courriel et son mot de passe

  • Inclure un bouton principal pour se connecter et un bouton secondaire pour s’inscrire

  • Inclure la possibilité de se connecter via Facebook (peut être plus discret)SASAQWQ4W2

 

2- ÉCRAN DE PROFIL D'UN MEMBRE

  • Avatar et nom complet

  • Bouton pour suivre le membre

  • Nombre d’abonnés

  • Nombre d’abonnements

  • Nombre d’articles (films commentés)

  • Dernier film commenté (reprendre une entrée de l’accueil)

3- MENU «OVERFLOW»

Le menu « overflow » contient les items supplémentaires du menu principal (accessible depuis les trois petits points)

  • Les éléments suivants doivent être représentés dans le menu « overflow » avec pour chacun une icône

    • Profil

    • Liste de films

    • Activités

    • Recherche

  • Paramètres (seulement l’icône universelle est nécessaire et elle peut être plus discrète que les autres)

REMISE

  • La remise des trois interfaces doit se faire avant le début du prochain du laboratoire

  • Remises des interfaces aux formats PNG ou et PSD sur le réseau dans le dossier de remise.

  • Le dossier de l’étudiant doit être identifié nom_prenom_grXXXX

  • Les fichiers remis doivent être identifiés selon l’exemple suivant : timflix_accueil_mobile.png

CRITÈRES D'ÉVALUATION

  • Cohérence et constance de l’ensemble des interfaces (uniformité des couleurs, icônes, typo, etc.)

  • Qualités esthétiques des interfaces (choix de couleurs, de typos, de composition, de mise en forme, etc.)

  • Qualités fonctionnelles des interfaces (formulaire de connexion, navigation, système de vote, etc.)

  • Qualités techniques des interfaces (espacements, alignements, intégration des images et icônes)

  • Intégration de l’ensemble des éléments demandés sur l’ensemble des interfaces

  • Respect des consignes et contraintes énoncées dans ce document


 

SEMAINE 2

THÉORIE

  • Note de cours PDF

LABORATOIRE

https://www.16personalities.com/fr/types-de-personnalite

Application mobile TIMFLIX 2 de 4

Dans cette seconde partie du projet TIMFLIX, vous aurez concevoir des interfaces complémentaires à l’application afin d’établir la direction artistique de votre design (le look and feel). Vous devrez ainsi appliquer des styles graphiques à vos différents éléments de UI, incluant un logo simple et efficace présentant le nom de l’application au démarrage.

OBJECTIF DE LA PARTIE 2/4 : Appliquer les styles graphiques au design d’interfaces utilisateur (UI).

  • Finaliser le design de l’écran d’accueil et l’agrandir pour présenter trois entrées distinctes (menu sticky au bas)

  • Concevoir un logo simple, efficace et original pour le nom TIMFLIX (logotype uniquement encouragé)

  • Concevoir l’écran de démarrage (launch screen) présentant le logo et introduisant la direction artistique

  • Concevoir l’écran de vote à partir des commentaires recueillis en classe afin de maximiser son attrait

CONSIGNES

  • Les écrans Démarrage, Accueil et Vote (x2) doivent être finalisés sur des plans de travail distincts

  • L’écran Démarrage doit présenter minimalement le logo sur un fond de couleur uni

  • L’écran Accueil doit être agrandi pour révéler trois entrées de films différentes (ajuster la hauteur selon les besoins)

  • L’écran Vote doit présenter l’écran avant le vote et après le vote sur deux plans de travail superposés

CONTRAINTES TECHNIQUES

  • Les interfaces finales doivent être réalisées à partir des plans de travail créés dans Photoshop

  • Les éléments d’interface utilisateur (UI) tels que les icônes et boutons doivent être vectoriels

  • Les images matricielles doivent être intégrées à l’interface de façon à prévoir l’affichage en haute résolution (@2x)

  • Les calques doivent être correctement nommés et regrouper en dossiers bien identifiés pour chaque plan de travail

ÉCRAN DE DÉMARRAGE

  • L’écran d’accueil doit minimalement présenter un logo TIMFLIX de votre création

  • Il est possible d’inclure une ligne d’accroche (tagline) ou un slogan sous la forme de quelques mots

  • L’arrière-plan peut être constitué d’un fond uni, dégradé, texturé, photographique, etc. au choix

SOURCES D'INSPIRATIONS POUR L'ÉCRAN DE DÉMARRRAGE

  1. http://pttrns.com/?scid=12

  2. http://www.mobile-patterns.com/splash-screens

  3. https://material.io/guidelines/patterns/launch-screens.html

ecran_exemples.jpg

ÉCRAN D'ACCUEIL

  • Faire les ajustements visuels nécessaires suite aux commentaires

  • Appliquer les styles graphiques à votre interface utilisateur

  • Étirer le plan de travail pour permettre l’affichage de trois entrées de films distincts.

ÉCRAN DE VOTE

  • L’écran de vote doit être représenté avant et après le vote (deux plans de travail superposés)

  • Les éléments suivants doivent être représentés dans l’écran de vote :

    • Le titre du film (avec l’année)

    • Un élément d’entrée (input) satisfaisant et efficace pour placer un vote sur une échelle de 1 à 10

    • Un bouton pour soumettre le vote

    • Un bouton de retour en arrière (retour à l’écran d’accueil)

    • Ne pas inclure le sticky menu pour cet écran puisqu’un bouton de retour est prévu

REMISE : 

La remise des interfaces de l’écran d’accueil doit se faire avant le début du prochain du laboratoire, à la semaine 3

  • Remises des écrans aux formats PNG ou JPG sur le réseau dans le dossier de remise TP1-Remise 1 :

    • Écran d'accueil (déjà remis sur le serveur au lab-01 mais vous devez faire les ajustements visuels nécessaires suite aux commentaires )

    • Écran de vote

    • Écran overflow

    • Écran de démarrage

    • Logotype ou symbole intégré dans l'écran de démarrage

  • Le dossier de l’étudiant doit être identifié nom_prenom_gr10XX

  • Les fichiers remis doivent être identifiés selon l’exemple suivant : timflix_ecranoverflow.png et timflix_ecrandevote.png

  • Les retard seront comptabilisés dès que le laboratoire de la semaine 2 sera amorcé (-10% par jour de retard)

SOURCE D'INSPIRATION POUR L'ÉCRAN DE VOTE

  1. http://pin.it/kj-wNBe

ecranvote.jpg
criteres.gif

SEMAINE 1

THÉORIE

  • Présentation du professeur

  • But du cours

  • Plan de cours PDF

  • Note de cours PDF

  • 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

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

 

Application mobile TIMFLIX 1 de 4

Mise en Contexte et objectif: Dans ce premier projet, vous aurez concevoir les interfaces principales de la nouvelle application mobile TIMFLIX qui permet à ses utilisateurs de partager leurs goûts en matière de cinéma, de recommander des films à leurs amis et gérer une liste de films à voir. L’application se destine principalement à un réseau de cinéphiles âgés entre 16 et 34 ans.

OBJECTIF DE LA PARTIE: 

Vérifier les compétences acquises en design d’interfaces utilisateur (UI).

  • Réaliser l’interfaces de l’écran d’accueil à partir du croquis fourni par le professeur

  • Utiliser les fonctions avancées d'Illustrator pour concevoir des interfaces professionnelles

  • Appliquer les recommandations techniques en vigueur dans le domaine

  • Faire une recherche visuelle en vue de la conception d’un écran de vote efficace et satisfaisant

CONSIGNES

  • Projet individuel se divisant en quatre parties se déroulant sur quatre semaines

  • Chaque partie est à remettre avant le début du laboratoire suivant le début des travaux

  • Ce projet équivaut à 25 % de votre note finale du cours Design interactif

CONTRAINTES TECHNIQUES

  • Vous devez faire des esquisses papiers avant de travailler dans Illustrator

  • Les interfaces finales doivent être réalisées dans Illustrator, c'est plus Italien!

  • Le document Illustrator doit utiliser un mode de couleur RVB

  • Créer vos éléments graphiques en objet dynamique

  • Les dimensions du document de base doivent être précisément la résolution en pixels CSS pour le iPhone 6-7-8 @2x (700 × 1334 px)

  • Les dimensions du document de base doivent être précisément la résolution en pixels CSS pour le iPhone 6-7-8 @1x (375 x 667 px)

  • L’application mobile doit être conçu pour une orientation de type portrait uniquement

  • Chaque interface doit être construite sur son propre plan de travail

  • Les éléments d’interface utilisateur (UI) tels que les icônes et boutons doivent être vectoriels

  • Les images matricielles doivent être intégrées à l’interface de façon à prévoir l’affichage en haute résolution (@2x)

  • Exemples de format iPhone https://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions

  • Les calques doivent être correctement nommés et regrouper en dossiers bien identifiés pour chaque plan de travail

 

interface à produire

1 - ÉCRAN D’ACCUEIL

  • L’écran d’accueil doit être conçu selon le croquis à main levée fournie par le professeur

  • Tous les éléments s’y trouvant doivent être représentés dans l’interface finale

  • Les icônes ajoutées doivent être clairs et de style uniforme (création originale ou tirées d’une source libre de droits)

  • Une image matricielle représentant le film utilisé en exemple doit également être intégrée de façon à permettre une exportation éventuelle @2x (utiliser l’objet dynamique). Attention au recadrage! Explication voir les deux URL et URL

2- MENU « OVERFLOW »

Un menu « overflow » contient les items supplémentaires du menu principal (accessible depuis les trois petits points)

  • Les éléments suivants doivent être représentés dans le menu « overflow » avec pour chacun une icône

    • Profil

    • Films à voir

    • Fil d’activités

    • Paramètres (seulement l’icône universelle est nécessaire et elle peut être plus discrète que les autres)

3- ÉCRAN DE VOTE

  • Les éléments suivants doivent être représentés dans l’écran de vote :

  • Le titre du film (avec l’année)

  • Un élément d’entrée (input) satisfaisant et efficace pour placer un vote sur une échelle de 1 à 10

  • Un bouton pour soumettre le vote

  • Un bouton de retour en arrière (retour à l’écran d’accueil)

  • Ne pas inclure le sticky menu pour cet écran puisqu’un bouton de retour est prévu

Après la connexion, l’utilisateur se rend à l’écran d’accueil où il verra les derniers films aimés, notés et commentés par les membres de son réseau. 

1.1  Éléments apparaissant dans le croquis de l’écran d’accueil : 

  • Pastille photo du membre

  • Nom du membre

  • Dernière connexion (22 minutes)

  • Note attribuée au film par le membre

  • Image du film (agrandissable)

  • Le titre du film (et son année plus discrète)

  • Les catégories associées au film (3)

  • Un bouton pour aimer

  • Un bouton pour commenter

  • Un bouton pour voter

  • Un bouton pour voir la bande-annonce du film

  • Un bouton pour ajouter à la liste de films à voir

  • Le nombre de « J’aime » actuel

  • Le nombre de commentaires actuel

  • Le commentaire rédigé par le membre affiché

  • Un bouton de recherche

  • Un bouton de retour à l’accueil

  • Un bouton permettant l’accès au menu « overflow »

  • Le menu au bas du l’écran est « sticky », c’est-à-dire qu’il apparait toujours au bas de l’écran. En faisant défiler le contenu, l’utilisateur voit plusieurs films recommandés par les membres (voir petit aperçu ci-contre).

 

Les critères d’évaluation de la première partie sont les suivants : 

  • Bonne utilisation du logiciel Photoshop (image @2x, icônes en vecteur, plans de travail, calques organisés, etc.)

  • Interprétation juste du croquis fait à la main par le professeur

  • Intégration de l’ensemble des éléments demandés (textes, boutons, icônes, images, etc.)

  • Qualité générale des interfaces (composition, espacements, alignements, constance, cohérence, etc.)

  • Respect des consignes et contraintes énoncées dans ce document

 

REMISE : 

La remise de l’interface de l’écran d’accueil doit se faire avant le début du prochain du laboratoire, à la semaine 2

  • Remise du wireframe en version papier

  • Remises des écrans aux formats PNG ou JPG sur le réseau dans le dossier de remise TP1-Remise 1 : écran d'accueil

  • Le dossier de l’étudiant doit être identifié nom_prenom_gr10XX

  • Les fichiers remis doivent être identifiés selon l’exemple suivant : timflix_accueil_mobile.png

  • Les retard seront comptabilisés dès que le laboratoire de la semaine 2 sera amorcé (-10% par jour de retard)

Cette partie du projet compte pour 10%. L'ensemble du projet TP1 compte pour 25%.

Télécharger le wireframe en PDF

wireframe.jpg
lab1.54.jpg
200w.gif

Il design, è la vita!