ECOLE COMMUNAUTAIRE DE L’ENSEIGNEMENT SUPERIEUR
DEPARTEMENT INFORMATIQUE
DST : DEV WEB
FORMATEUR : GOTENI LEVI
Chers étudiants,
Votre mission pour ce projet est de personnaliser un design de base de site e-commerce en y
ajoutant votre touche personnelle. Voici les directives pour vous guider dans cette tâche :
1. Ajout de Couleurs
- Palette de couleurs: Choisissez une palette de couleurs harmonieuse et appliquez-la à
différents éléments du site tels que l’arrière-plan, les boutons, les en-têtes, et les pieds de
page.
- Cohérence: Assurez-vous que les couleurs choisies respectent l'identité visuelle glo-
bale du site et offrent une bonne lisibilité.
2. Insertion de Photos et Images
-Images de produits : Ajoutez des images de haute qualité pour chaque produit. Vous
pouvez utiliser des banques d'images libres de droits ou vos propres photos.
- Bannières et sliders : Créez des bannières attrayantes pour la page d’accueil et
d’autres sections importantes du site. Les sliders d’images peuvent aussi être utilisés pour at-
tirer l’attention sur des offres spéciales ou des nouveautés.
3. Personnalisation des Cartes de Produit
-Style des cartes : Personnalisez l'apparence des cartes de produit en modifiant la dis-
position, les bordures, les ombres, et les arrière-plans.
-Informations affichées : Choisissez les informations à afficher sur les cartes de produit
(nom, prix, description courte, note, etc.) et disposez-les de manière claire et esthétique.
4. Typographie
- Choix des polices : Sélectionnez des polices de caractères qui correspondent à l’esprit
du site. Utilisez des combinaisons de polices pour les titres, le corps du texte, et les boutons.
- Lisibilité : Assurez-vous que les polices choisies sont lisibles et que la taille du texte
est appropriée.
5. Mise en Page et Disposition
- Grille et alignement : Utilisez des grilles pour structurer la mise en page et assurez-
vous que les éléments sont bien structurés par rapport au rendu.
- Espace blanc : Intégrez suffisamment d’espace blanc pour éviter que le site ne soit
surchargé et pour améliorer l’expérience utilisateur.
6. Interactivité et Animations
- Hover effects: Ajoutez des effets interactifs pour les éléments cliquables comme les
boutons et les cartes de produit (changements de couleur, ombres, etc.).
- Transitions et animations : Utilisez des animations pour rendre les transitions plus
fluides et améliorer l’expérience utilisateur. Assurez-vous que ces animations ne ralentissent
pas la performance du site.
7. Responsive Design
- Compatibilité mobile : Assurez-vous que votre design est responsive et s’adapte cor-
rectement aux différentes tailles d’écran (mobiles, tablettes, ordinateurs de bureau).
L'objectif de ce projet est de laisser libre cours à votre créativité tout en appliquant les prin-
cipes de design et de développement web.
Bon travail à tous !
