Le projet consiste à créer un site e-commerce pour la vente de jouets en tout genre. Le site s’appelle Ludorama.
La force de Ludorama est de proposer des jouets de qualité, originaux et surtout pour tout le monde, pour tous les ages et pour toutes les envies.
Le site doit être attractif, ludique et facile d’utilisation. Il doit donner envie de naviguer et de découvrir les produits.
Le site doit être responsive et s’adapter à tous les supports (PC, tablette, smartphone).
Le site doit être sécurisé et respecter les normes RGPD.
Le site doit être évolutif et permettre l’ajout de nouvelles fonctionnalités.
Les objectifs du site sont les suivants :
- Présenter les produits de manière claire et attractive
- Offrir aux utilisateurs une expérience personnalisée et sécurisée.
- Répondre aux besoins des clients adultes en leur permettant de noter et de consulter les souhaits de leurs enfants.
- Faciliter la navigation pour les clients enfants en leur permettant de trouver des jouets adaptés à leur âge.
- Mettre en place un système de fidélisation pour récompenser les clients réguliers.
- Assurer une gestion efficace et intuitive des avis et des évaluations des produits.
- Intégrer des fonctionnalités de filtrage avancées pour simplifier la recherche de produits.
- Fournir des informations complètes et détaillées sur chaque produit pour aider les clients à faire des choix informés.
Pour développer le site Ludorama une palette de couleur nous a été imposer :
--dark-purple: linear-gradient( #6d00b0, #b06bdc) + --clair-purple: #c267ff + --medium-purple: #8A2BE2 + --light-purple: #e6d1f2 + --accent-pink: #FF69B4 + --white: #FFFFFF + --light-gray: #F0F0F0 +
Analysons maintenant les copies écran du site Ludorama et expliquons les choix graphiques qui ont été faits.
(noter que toutes les pages n’ont pas encore été développer étant donnée que nous avons simplement fais la charte graphique du site, puisque nous n’avions pas les codes du serveur php)
-
La page d’accueil :
Voici le haut de la page d’accueil sur laquelle nous pouvons voir le header, élément important du site qui permet de visualiser toutes les catégories, et de voyager vers d’autres page (connexion/compte, panier, localisation des magasin).
De plus ce header est composé ici d’une barre de recherche qui permet naturellement de rechercher des produits à sa guise.
En haut à gauche du header se trouve un menu déroulant permettant de filtrer les produits par catégories
La page d’accueil affiche la toute dernière collection de Ludorama au premier plan. En dessous nous avons la possibilité de voyager vers différentes zone catégorisée selon l’âge (pour l’instant uniquement la zone des enfants à été développer). L’une des zones les plus importantes est la LudiZone, la zone des enfants.
En descendant un peu, on voit les quatres coups de cœur des clients qui sont affichés à la une, mais aussi l’exposition des événements (Ludi’Events), qui mènent vers d’autres pages, qui n’ont pas encore été développées.
Pour finir, voici le footer, qui est aussi présent sur toutes les pages du site. Ce dernier permet d’avoir beaucoup plus d’informations sur le site en se renseignant sur les différents magasins physiques, l’histoire de Ludorama, etc… Il donne également des renseignements sur les événements du moment et les nouveautés. Il permet aussi de filtrer par certaines marques les plus connues ou type de produits les plus demandés et permet aussi de voir les sites des différents pays.
-
La page de la LudiZone :
Voici le haut de la LudiZone, autrement dit la zone réservé aux enfants qui regroupe les meilleurs jouets pour les enfants et affiches les coups de coeur de ces derniers. La LudiZone propose la possibilités de filtrer les produits selon les envies du client que ce soit par prix, par catégorie, par marque ou par avis.
Ici on affiche le dernier jeu créé par Ludorama et quand l’utilisateur clique dessus il est redirigé vers tous les jouets créés directement par Ludorama.
Le reste de la page est composé de l’exposition des ludi’Events et du footer comme la page d’accueil.
-
La page de Description d’un produit :
Ici nous avons la page de desciption d’un produit en particulier qui affiche plusieurs images du produit ainsi que toutes les informations associées à ce dernier. La page propose la possibilité d’ajouter le produits au panier ou dans sa liste de souhait mais encore de choisir un magasin pour vérifier les disponibilités du produits ou le commander.
-
La page panier :
La page panier permet de visualiser le panier du client. Elle permet à l’utilisateur de sélectionner les différents produits de son panier et cela affiche le total à payer en fonction. Depuis là, le client peut continuer vers le paiement du produit en suivant toutes les étapes.
-
La page de connexion :
La page de connexion permet à l’utilisateur de se connecter à son compte Ludorama ou à un client visiteur de se créer un compte en cliquant sur "Créer un compte".
La page de création de compte permet à un utilisateur de créer son compte en remplissant toutes les informations nécessaires.
Une fois la connexion effectuée ou le compte créé, l’utilisateur est redirigé vers la page de son compte. Cette dernière affiche toutes les informations le concernant et lui permet aussi de les modifier en cliquant sur le bouton "modifier". La page affiche aussi les dernières commandes du client et lui permet de les parcourir en détail.
Tout ce qui vous a été présenté n’est que la cahrte graphique et c’est pourquoi toutes les pages ne sont pas présentes ou encore pourquoi il manque certains éléments. N’ayant pas encore les codes de connexion au serveur php nous n’avons pas pu afficher convenablement les produits de notre base de données.
Le site actuel n’est donc qu’une maquette faites uniquement en HTML et CSS, dont l’entiéreté du code et toutes les pages peuvent être retrouvé dans la branche "WEB" de notre github.