Sujet¶

Il vous est demandé de travailler sur un site internet d’un commerce de proximité qui se spécialise dans la vente de deux produits, les glaces et les gâteaux maison. Le site se compose de quelques pages (voir liste).

Format¶

3 formats de page sont demandé pour chaque page :

un format mobile (à titre indicatif format portrait 375 par 812 px)
un format tablette (à titre indicatif format portrait 768 par 1024 px)
un format ordinateur (à titre indicatif format paysage 1100 par 800 px)

liste des pages et éléments¶

Navigation¶

La navigation est à votre appréciation, à vous de voir au vue de l’arborescence, les éléments à y intégrer.

zone panier¶

La navigation doit contenir une partie panier indiquant soit que le panier est vide, soit que le panier contient des articles.

Lorsque l’on clique sur celui-ci, on doit afficher sur la page, pour chaque article :

son nom
son prix
le nombre de fois où l’article est dans le panier
un symbole permettant de supprimer l’article du panier
un texte ou symbole permet de fermer la zone panier

La zone panier contient aussi un lien permettant de naviguer jusqu’à la page panier.

check-liste

chaque item de ma zone panier a d'indiqué son nom
chaque item de ma zone panier a d'indiqué son prix
chaque item de ma zone panier a d'indiqué le nombre d'items commandés
chaque item de ma zone panier a un symbole associé permettant de supprimer l'item du panier
ma zone panier possède un bouton permettant d'accéder à la page panier
ma zone panier possède un bouton permettant de fermer la zone panier
ma zone panier possède une version où le panier est vide avec l'indication de cet état

Mentions génériques¶

Note

Les mentions génériques doivent figurer sur toutes les pages.

Important

Tous ces éléments ne sont pas forcément au même endroit !

le logo/nom du site
un court texte de présentation (20 à 40 mots)
l’adresse postale du commerçant
une mention « copyright »
une liste de réseaux sociaux
- mentions « réseaux sociaux »
- instagram
- facebook

arborescence¶

Page d’accueil¶

La page d’accueil affiche :

un court message d’accroche [1]
un texte court de présentation
une illustration [2]
deux blocs
- avec la mention « nos glaces » ou « nos gâteaux »
- avec une image
- la mention « découvrir »
un court texte sur la structure avec une mention « en savoir plus » renvoyant vers la page à propos.

Page produit¶

nom du produit (1 à 5 mots)
description courte du produit (10 à 20 mots)
description longue du produit (peut contenir une 50aine de mots, une liste d’éléments)
prix en euros
catégorie (1 à 3 mots)
image principale (1)
images secondaires (0 ou plus)
bouton d’ajout au panier
zone « articles similaires » : affichage de 3 articles similaires
- nom du produit
- image principale
- prix

Page catégorie¶

le titre de la page (la catégorie)
une liste de produits avec chacun :
- l’image principale du produit
- le nom du produit
- la description courte du produit
- le prix du produit
- un bouton « ajouter au panier »

Page panier¶

Une mention « contenu du panier »
un tableau
- avec comme en-têtes dans l’ordre souhaité :
  - la mention « article »
  - la mention « prix »
  - la mention « quantité »
- avec pour chaque ligne dans l’ordre souhaité :
  - l’image principale
  - le nom du produit
  - la quantité d’items
  - le prix total des items
  - un bouton permettant de supprimer l’item du panier
un bouton « payer »

Page à propos¶

le titre « à propos »
un texte de présentation
une illustration

Page mentions légales¶

Titre de la page
long bloc de texte mention légales avec deux niveaux de titre

[1]	Une accroche est une courte phrase permettant de présenter le site de manière très résumée et, idéalement, très efficace.

[2]	Une illustration = une image, qui peut être un dessin, une photo…