Le département de stratégie et d’expérience utilisateur vous a rendu son premier livrable : le prototype. Vous, en tant que concepteur(s), devez prendre en charge la deuxième phase de production de la plateforme Web : la maquette. Celle-ci devra être adaptée à de multiples appareils, de multiples configurations de fenêtre et devra, aussi, respecter les intentions initiales du prototype. À ce stade-ci de la production, il est encore temps d’apporter des ajustements et de faire des propositions. Profitez-en donc pour améliorer le travail de vos collègues stratèges et concepteurs UX tout en vous assurant de bien justifier chacun des ajustements et chacune des propositions.
Prenez connaissance du prototype qui vous a été fourni. Lisez attentivement les justifications présentes dans le fichier « arguments ». Ajoutez ou modifiez une zone de contenu dans la scénarisation de l’accueil. Remplacez chaque pseudo-image par une image pertinente à votre sujet. Élaborez un langage graphique qui représente bien l’entreprise et son message. Appliquez le langage graphique à la composition fonctionnelle du prototype de l’accueil. Intégrez tous les styles interactifs (survol, focus, etc.). Adaptez votre maquette pour les résolutions de 320px à 1920px. Assurez-vous que votre maquette respecte les principes à la fois : de la communication graphique de l’expérience usager de l’accessibilité Justifiez votre ajout/modification puis vos choix au sein du langage graphique et de l’adaptation. Si vous êtes en équipe, attribuez chaque partie du travail au coéquipier l’ayant effectuée. Notes supplémentaires Seulement la page d’accueil est à faire pour l’instant. Les autres pages seront abordées lors du TP #03.
Libre à vous de récupérer le code du prototype et de construire les styles sur cette base établie. Vous pouvez aussi écarter le code et repartir à zéro. Il est toutefois important, dans un cas ou dans l’autre, de justifier votre décision. Pourquoi avoir récupéré ou non le code ?
Un argumentaire écrit des choix les plus importants devra être également fourni. Par exemple, la navigation, la priorisation des éléments, la pertinence de votre ajout, etc. Un fichier argumentaire.txt doit être livré avec la maquette.
Étant donné la nature « progressive » du lot de travaux pratiques cette session-ci, 13% (2 points) de la note sera accordé pour avoir ajusté votre maquette en fonction des commentaires et recommandations de l’enseignant.
Déposez sur Léa une archive zip de votre maquette contenant tout le matériel nécessaire.
Critères d’évaluation Expérience utilisateur / 3 Respect des règles et principes de l’ergonomie Respect de l’accessibilité Adaptation complète et efficace Communication graphique / 4 Cohérence et uniformité du langage graphique Communication graphique fonctionnelle & esthétique Méthode de travail / 3 Le HTML est sémantique, valide et accessible Le code CSS est bien organisé et les intentions sont claires Le langage CSS est généralement bien utilisé Appréciation générale / 3 Argumentation des choix les plus importants Présence et qualité des éléments requis Propreté et rigueur générales Respect des consignes Ajustement aux commentaires de l’enseignant / 2 Total / 15 Remise La remise des travaux se fera sur Léa avant la séance #17. Aucun retard ne sera toléré, un travail remis après l’échéance sera considéré avec un jour de retard.
Politique sur les retards : Un travail en retard sera pénalisé de 5 % de la note maximale pour chaque jour de retard, et ce jusqu’à concurrence de 25 %. Aucun travail ne sera accepté au-delà de 5 jours de retard.