# Retours Maquette Master :::success ++Documents reçus++ * Desktop * Desktop_maquette_arial * Desktop_maquette_sego UI * Desktop_vue-densemble * Mobile * Mobile_maquette * Mobile_vue_d'ensemble ::: :::info Après analyse des maquettes envoyées, je ressens que vous avez peut-être un blocage sur comment bien intégrer les principes d'écoconception (je me trompe peut-être). J'ai l'impression que vous vous limitez à fond sur tous les choix importants d'UI de peur d'intégrer une mauvaise pratique. Si ce blocage existe réellement n'hésitez pas à échanger directement avec moi. J'essaye d'être le plus précis possible dans mes retours, j'ai un ton à l'écrit qui est parfois sec mais ca ne correspond pas à mon appréciation de votre travail. Je suis reconnaissant du travail fourni. On est là pour avancer ensemble et je suis là pour faciliter votre travail au vu des objectifs techniques et de contenu. ::: [ToC] ## Général * Les maquettes envoyées me semblent trop "brutes, elles manquent de lisibilité, ceci peut être à la hiéarchisation des contenus et au manque d'équilibre des tailles de corps de texte * Il y a sûrement des meilleurs jeux typogaphiques à trouver pour mieux hiéarchiser les informations comme sur l'image ci-dessous. L'objectif pour l'ensemble des maquettes est fournir une bonne lisibilité, répondre aux critères d'accessbilité, et de fournir une bonne hiéarchie de l'information. Je ne pense pas que nous en soyons là pour l'instant. ![Exemple](https://i.imgur.com/0VO9ghd.png) [Exemple de Minimalist List avec une seule police](https://mnmll.ist/) :::info ++Outils Accessibilité Couleurs et Contrastes++ * [Check My Colours](https://www.checkmycolours.com/) * [Contrast Ratio](https://contrast-ratio.com) ::: * Quelle est la taille du corps de texte pour les blocs courants d'article * Eviter les titres surlignés car le trait coupe certaines lettres (q,p,j, etc.) * Il serait préférable d'ajouter de la couleur sur le site, on n'est pas obligé de rester en N&B, on peut même utiliser les niveaux de gris * De façon générale j'ai du mal à voir comment est construire la grille pour la partie Master * Comment on alterne entre la version française et anglaise * Je conseillerai d'utiliser un meilleur style de liste à puces * Réorganiser bien vos H1, H2, H3, etc. ## Menu * Espace et texte trop petits sur la version mobile lorsque l'on est sur une page. Le menu pensé pour le desktop ne fonctionne pas sur la version mobile, il faut penser à une autre stratégie si on veut intégrer le principe du menu desktop (normalement il faudrait mieux faire l'inverse). L'espace texte + bloc dédié ne répond à des bonnes pratiques d'accessibilité web. ![Version mobile](https://i.imgur.com/bKuHMGR.png) ## Page d'accueil * Le principe de centrage de la page d'accueil ne se retrouvent nulle part dans le reste de la maquette desktop, pourquoi ce choix ? Ce centrage est plus intéressant sur la version mobile car cela a trait à une bordure. Je serai plus intéressé par le principe de bordure qui peut marquer aussi par la couleur le changement de contenu entre Master et Pédagogie * ## Partie Master ### Présentation #### Version mobile * Est-ce que les notes de bas de page sont centrées dans la colonne ? * Peut-on unifier le traitement graphique des logos (n&b ou autres) ? * Prévoir plus d'espace en pied de page (entre la fin du texte et le footer) * Pourquoi le principe de calage des logos est différent entre les partenaires et la partie avec les 2 écoles ? #### Version desktop * Les CTA sont peut-être trop "bruts" mais je pense que c'est lié à la gestion des échelles de corps de texte et à l'absence de couleur * Pourquoi le décalage du corps de texte entre le bloc "The place" par exemple et le bloc "They support us" ? ### Intervenants #### Version mobile * Les encadrés fonctionnent plutôt bien mais je pense qu'on retrouve ici un problème général d'équilibre des tailles de texte / hiérarchie de contenu. * Est-ce que c'est une liste en scroll infini avec un lazyload ou est-ce qu'il y a de pages ? * Peut-on intégrer un filtre par lettre de l'alphabet ou par domaine ? #### Version desktop * Mêmes remarques que la version mobile ### Programme #### Version mobile * La hiéarchie du contenu ne fonctionne pas ici, il est très dur de savoir où regarder, l'oeil dérape. * Il semblerait que le contenu ait été copié-collé sans travail sur l'affichage de la donnée "nombre d'heures" * Je réitère mes observations sur l'équilibre des textes #### Version desktop * Mêmes remarques que la version mobile ### Actualités #### Version mobile * Le système de bloc fonctionne mais même remarque générale * Attention à ne pas surligner les titres * Est-ce que c'est une liste en scroll infini avec un lazyload ou est-ce qu'il y a de pages ? * Quelle est la différence entre une photo en couleur et en N&B ? #### Version desktop * Mêmes remarques que la version mobile ### Article #### Version mobile * Est-ce qu'on peut intégrer une photo à l'article pour voir comment c'est traité ? Pareil pour les notes de bas de page ? #### Version desktop * Mêmes remarques que la version mobile ---- ## Pédagogie #### Version mobile * La trame de fond est trop visible, c'est du noir 100% et donc ca brouille l'expérience de lecture * Le puce de chargement des images n'est pas bonne, elle doit indiquer un changement d'état plus visible (cf. Low-tech Lab) #### Version desktop * Mêmes remarques que la version mobile * Il y a un encadré autour de la puce de chargement des images dans la version desktop mais pas mobile :::info ++Retour d'Alexandre Monnin++ J'aimerais bien qu'on accentuât la séparation horizontale entre les contenus publiés -> Éviter que les contenus postés ne ressemble à un long tunnel de texte sans relief, ajouter des démarcations horizontales si possible ::: ### Article #### Version mobile * Dans le fil d'ariane il y a un retour en arrière possible (les productions), c'est une page dédiée ? * Est-ce que le format d'affichage du titre d'article convient vraiment ? Tous les mots de plus de 8 lettres vont être coupés. * Les listes à puces ne sont pas activées dans la biblio #### Version desktop * Mêmes remarques que la version mobile * Problème d'équilibre de taille des textes ## Inspirations / Exemples Je vous conseille d'aller voir des sites faits avec Kirby pour dévérouiller un possible blocage technique : [Kirbysites](https://kirbysites.com/#) Il y a peut-être d'autres façons de traiter visuellement le changement entre deux types de contenus (Master / Pédagogie), exemple possible : [Deutsche und Japaner](https://deutscheundjapaner.com/)