SEMAINE 13

THÉORIE

  • Exemples d'UX pour vous aider dans le projet

 

Laboratoire

  • Correction

    • Esquisses fait à la main en vitesse - Remis dans un seul document PDF

    • Wireframe et plan de navigation fait dans Illustrator - Remis dans un seul document PDF

    • Plan de comportement tactile «gesture» - Remis sur le serveur soit en PDF ou PNG ou JPG

  • À faire dans ce laboratoire: Individuellement

    • Marquettes terminées à 50%

style-imagery-integration-imagetypeavatarsb_large_mdpi.png






SEMAINE 12

THÉORIE

  • Présentation du projet final

 

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

  • Une partie du projet est en équipe et l’autre individuel

  • Le document préparatoire fait en équipe (esquisses, wireframe, plan de navigation et plan de comportement)

  • Les maquettes statiques

  • Le prototype en ligne (Marvel app)

Ressources

  1. Esquisses - Télécharger le PDF

  2. Wireframe - Télécharger le PDF

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

  4. Plan de comportement

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

 

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

À 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 est de 2048 x 1536 ou 1536 x 2048 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 images matricielles doivent être intégrées dans les maquettes de façon en haute résolution (@2x)

  • Les calques doivent être correctement nommés et regrouper

  • Vous devez intégrer l’ensemble de vos interfaces et éléments d’interfaces au format PNG

  • 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 du document AI incluant les plans de travail

  • Le document AI doit être simplement identifié comme suit : nom_prenom_gr10XX.

Prototype:

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

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

ÉCHÉANCIER

  • Semaine 12: En équipe

    • Esquisses fait à la main en vitesse - Remis dans un seul document PDF

    • Wireframe et plan de navigation fait dans Illustrator - Remis dans un seul document PDF

    • Plan de comportement tactile «gesture» - Remis sur le serveur soit en PDF ou PNG ou JPG

  • Semaine 13: Individuellement

    • Marquettes terminées à 50%

  • Semaine 14: Individuellement

    • Marquettes terminées à 100%

    • Prototypage dans Marvelapp

  • Semaine 15: Individuellement

    • Préparer votre dossier de remise

    • Remise finale

    • Un lien URL de Marvelapp

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 35% et la remise aura lieu le lundi 11 décembre. 

 


SEMAINE 11

THÉORIE

  • Note de cours «Curation» PDF

 

LABORATOIRE

Mise en contexte

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

OBJECTIF

  1. Concevoir 2 écrans:

    1. Liste de message

    2. À l'intérieur d'un message

    • Un exemple de communication

style-imagery-integration-imagetypeavatarsb_large_mdpi.png
5da09f57692917.59dfa39250dbf.gif
17ff4731720889-1.565dff2ae8226.jpg

CONSIGNES

  • Taille de l'écran est pour mobile iPhone 8 (750 x 1334 px) ou Android (1080 x1920 px)

  • Projet en équipe de 2 personnes ou seul

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

REMISE

  • Wireframe fait dans Marvelapp

  • Plan de comportement tactile «gesture»

  • Dans un document au format GIF

 


SEMAINE 10

THÉORIE

  • Exercice pratique faite en théorie

 

LABORATOIRE

Mise en contexte

Dans ce projet, vous aurez concevoir une application qui permettra de créer des listes selon les besoins des utilisateurs. Voici quelques exemples: escapade urbaine, camping, voyage, etc. L’application se destine aux grands publics. Donc, accessible à tous. 

OBJECTIF

  • Concevoir une liste pour un voyage d'un week-end dans une capitale de votre choix (New-York, Milan, Paris, Pékin, libre à vous)

  1. Concevoir l’écran d'accueil

    • Nouvelle (liste)

    • Réglages (À ne pas développer: Synchroniser iCloud, choses prédéfinis, contacter)

  2. Concevoir l’écran de votre liste

    • Ajouter et annuler (vêtements, accessoires, etc.)

    • Modifier

  3. Concevoir l’écran dans votre liste

    • Afficher les produits et les quantités

CONSIGNES

  • Taille de l'écran est de 312 x 390 px.

  • Projet en équipe de 3 à 4 personnes se déroulant sur 1 journée - Remis sur le serveur au plus tard à 18h00

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

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

  • Créer un nouveau compte dans Marvelapp avec un nouveau courriel pour permettre à l'équipe de se partager le compte

REMISE

  • Vos 3 esquisses au minimum de qualité - Faire une photo ou numériser votre copie - Remis sur le serveur soit en PDF ou PNG ou JPG

  • Wireframe fait dans Illustrator - Remis sur le serveur soit en PDF ou PNG ou JPG

  • Plan de navigation (arborescence) fait dans Illustrator - Remis sur le serveur soit en PDF ou PNG ou JPG

  • Plan de comportement tactile «gesture» - Remis sur le serveur soit en PDF ou PNG ou JPG

  • Un lien URL de Marvelapp

Les critères d’évaluation sont les suivants : 

  • Le projet a été mis dans Marvel App

  • La navigation dans le prototype est fluide, intuitive et cohérente

  • Les animations sont pertinentes

  • Les « hotspots» pointe vers la bonne destination et les options associées sont bien configurées

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

  • La typographie est lisible et sa taille est juste

  • La mise en page est pertinente visuellement

Télécharger le PDF pour faire vos esquisses 

Capture d’écran 2017-11-01 à 20.20.45.png

 

 

Exemple: 

312x390bb.jpg

ESQUISSES

Esquisses

Esquisses

Wireframe et arborescence

Wireframe et arborescence

Cmportement (gesture)

Cmportement (gesture)

219a0a25128597.5635533133878.gif

SEMAINE 9

THÉORIE

  • Note à venir PDF «La couleur»

 

LABORATOIRE

  • Travailler sur le Landing page

  • La remise aura lieu au début du laboratoire 10

  • Je vais vérifier dans le laboratoire vos interfaces préliminaires (mobile + desktop) voir PDF

 

REMISE

  • Début du prochain laboratoire 10

  • Remises de chaque interface adaptée (ordinateur et téléphone) 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.

  • Pour la présentation créer deux projets dans Marvel App soit un pour le mobile et l'autre pour le desktop

  • Remettre sur le serveur les 2 liens dans le dossier de remise de votre groupe du lab 10


SEMAINE 8

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 et téléphone.

  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 et téléphone) 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.

  • Largeur pour téléphone (portrait) : Optimisée pour un écran de 375 px (iPhone 6).

  • 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 images matricielles dans les interfaces pour téléphone doivent être en haute résolution (@2x).

  • 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 et téléphone) 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.

Compte pour 25%


SEMAINE 6-7

THÉORIE

  • Note PDF «La portée»

LABORATOIRE

DÉFINIR LA PORTÉE

 

Mise en contexte et objectif

Après avoir officialisé votre choix de produit, vous devez établir et structurer les contenus qui seront présentés sur votre future « landing page ». Cette activité formative (vous la faites pour vous!) est préparatoire au TP2.

OBJECTIF DE L’EXERCICE

  • Analyser un « landing pages » différentes

  • Dresser la liste des contenus potentiels liés à votre produit en fonction de vos observations

  • Préciser votre choix de contenus et les disposer sur des croquis réalisés à la main

  • Amorcer un premier jet d’interface présentant vos contenus de votre « landing page »

ACTIVITÉ #1 – ANALYSE DEs landing pages

ACTIVITÉ #2 – Réalisation DE votre LANDING PAGES

Dans votre cahier d’esquisses, 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É #3 – 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

REMISE

  • Vos esquisses

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

Ressources

À lire

Exemple 0.jpg

Exemple 2.jpg

SEMAINE 5

THÉORIE

  • Note de cours «Persona» PDF

  • Note de cours «Stratégie» PDF

LABORATOIRE

Mise en contexte et objectif

Afin de vous préparer au deuxième travail pratique du cours Design interactif, vous devez choisir un produit pour lequel vous aurez à concevoir un site Web. 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

  • Prendre connaissance des différents profils utilisateurs par génération

  • Faire une recherche / analyse de sites Web s’adressant à différentes générations

  • Choisir un produit s’adressant à la génération de votre choix

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

 

ACTIVITÉ #1 – CHOISIR UN PRODUIT

Le produit que vous choisirez sera à la base de votre TP2 qui s’échelonnera jusqu’à la mi-session, 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 : 

  • Le produit doit être un objet physique, existant ou inventé

  • Le produit doit être quelque chose dont on a besoin (utile).

  • Le produit doit être un objet unique, simple, innovateur ou commun

  • Le produit doit être quelque chose qui se vend bien en ligne

  • Le produit doit être esthétique / design

  • Le produit 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

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

  • Afin d’amorcer votre recherche, vous devez créer un premier tableau sur Pinterest pour cumuler un maximum de photos 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 présentant uniquement votre produit avec un minimum de 7 photographies, 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).

ACTIVITÉ #2 – RECHERCHE CLIENTÈLE CIBLE

Pour identifier vos utilisateurs types, vous aurez à créer deux personas, un primaire et un secondaire. Traduire le gabarit selon cet exemple : https://app.xtensio.com/folio/xb8niu1r

  • Créer votre persona primaire

  • Créer votre persona secondaire

À remettre

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

  • Partager les liens vers vos deux tableaux Pinterest

Compte pour 5%



SEMAINE 4

THÉORIE

  • Note PDF (Suite du cours 3)

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


SEMAINE 3

THÉORIE

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

É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

É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)

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

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

SOURCE D'INSPIRATION POUR L'ÉCRAN DE vote

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

ecranvote.jpg

Remise

  • La remise des quatre interfaces doit se faire avant le début du prochain du laboratoire, à la semaine 3

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

  • 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 retards seront comptabilisés dès que le laboratoire de la semaine 3 sera amorcé (-10% par jour de retard)

Les critères d’évaluation de la DEUXIÈMe partie sont les suivants : 

  • Attrait de l’écran de démarrage (logo, composition, introduction de la direction artistique)

  • Qualités esthétiques et fonctionnelles de l’écran d’accueil incluant les trois entrées de films différents

  • Pertinence et attrait du système de vote se présentant en deux modes (avant et après)

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

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

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

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 de Photoshop 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 et est évaluée sur 5 points

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

CONTFAINTES TECHNIQUES

  • Vous devez faire des esquisses papiers avant de travailler dans photoshop ou illustrator

  • Les interfaces finales doivent être réalisées dans Photoshop

  • Le document PSD doit utiliser un mode de couleur RVB

  • Les dimensions du document de base doivent être précisément la résolution en pixels CSS du iPhone 7

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

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

  • Remises de l’interface de l’écran d’accueil aux formats PNG sur le réseau dans le dossier de remise.

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

 

lab1.54.jpg

Cet exercice compte pour 5 points.