tags
btech devweb session-47

Jour 13 : Projet de groupe #1

Thème et sujet du site

• thème et sujet : site de vente (enchères) de jouets d'une classe de CM1 (9-10 ans)
• quel est l'objectif du site ?
  • vente (enchères) de jouets fait par les enfants
  • présenter une activité/un projet : pour financer des associations de dons de jouets aux enfants démunis (ex. VivaForLife, Cap48, ...)
• à qui s'adresse le site (public cible) ?
  • parents
  • milieu scolaire
• existe-t-il déjà des exemples de sites similaires à montrer ? non
• y a-t-il des éléments à éviter (thèmes sensibles, style à exclure, ...) ? pas de photos d'enfants reconnaissables car pas d'autorisations parentales prévues

Design (UI/UX)

Style visuel :

• style attendu :

  • layout vivant
  • coloré mais pas cliché/sur-contrasté
  • rempli et organisé

• couleur à privilégier : rouge, blanc et vert avec matériaux naturels comme bois ou pomme de pin, sans tomber dans le cliché des écoles avec un style amateur (couleurs saturées, etc...)

• couleur à éviter : tout ce qui n'est pas "privilégié" sauf accessibilité

• primaire : #F6EEC9 (autour)

• secondaire : vert ou #799351 (WCAG)

• tertiaire : #EE4E4E ou qui tranche quand CTA

• police d'écriture :

  • primaire : sans-serif (ex. Montserrat 700)
  • secondaire : sans-serif (ex. Hind Vadodara)
  • tertiaire : libre mais pas cursive ou fantasy

• exemples d'inspirations visuelles à fournir :

  • DPAM
  • Starbucks Jap.
  • JoueClub ➡ exemple de ce qu'il faut éviter

Organisation de la page :

• ordre souhaité du contenu :
  • page 1 : accueil
    • navbar
    • banner : enchères + CTA achat
    • pour qui (asso)
    • par qui (classe)
    • footer
  • page 2 : enchères
    • catalogue de produits avec :
      • 2 rangées de 3 produits max (pagination ok)
      • card produit :
        1. image
        2. descriptif
        3. nom enfant (Prénom)
        4. bouton enchère
  • page 3 : présentation de l'asso et de l'école
    • court, concis
    • réseaux sociaux de l'asso'
    • école :
      • photo
      • histoire
      • localisation (iframe maps)
    • classe :
      • nom de la classe
      • âge des enfants
      • nom de l'instit'

Contenu (textes et images)

Textes :

• textes à fournir ?

  • non : les étudiants proposent du texte crédible

• tons attendus :

  • convivial
  • s'adresse aux parents

• mots-clés importants à intégrer :

  • non : les étudiants proposent des mots-clés crédibles

Images :

• images à fournir ?

  • non : les étudiants proposent des images crédibles

• types d'images souhaitées :

  • illustrations pour banner page d'accueil
  • photos pour les produits + présentation association + présentation école
  • icônes pour enchères CTA

• contraintes légales ou de droits à respecter : droit à l'image infantile à respecter, donc pas de visages ou silhouettes reconnaissables

Responsive design

• page lisible sur le format desktop uniquement

Containtres et consignes spécifiques

• mentions légales à afficher :
  • pas de plan de site
  • droit à l'image des enfants
  • crédits médias (utilisation libre de droits)
  • adresses
  • réseaux sociaux école
• contraintes de langage/vocabulaire :
  • pas infantilisant car s'adresse aux parents
  • pas pros car cadre scolaire
• niveau de fidélité attendu par rapport à la demande :
  • partiel : des éléments à suivre précisément (contenu), d'autres non (design)

Validation avec le "client participant"

• le "client participant" est informé :
  • que les sites seront réalisés par des débutants
  • que les technologies sont limitées à HTML et CSS, dans un nombre limité de notions basés sur le contenu pédagogique de l'initiation BTech
  • que le rendu est pédagogique, non profesionnel
• le "client participant" validera le périmètre et les limites de la forme et du contenu du site
• le "client participant" sera disponible pour un échange avec les étudiants au début/lancement du projet
• le "client participant" sera disponible pour des retours sur le visuel et le contenu à la fin du projet