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

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)
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 et PSD 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)

Cet exercice compte pour 5 points et sera évalué au prochain cours en laboratoire

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