Scribd
Importer
27 vues3 pages

Projet Final Webdesign

Le projet final de webdesign consiste à créer un site responsif nommé 'BookVerse' pour la découverte et l'achat de livres en ligne, avec des maquettes organisées pour desktop, tablette et mobile. Les pages clés incluent l'accueil, le catalogue, la fiche produit, le panier et le contact, avec des détails spécifiques sur la disposition responsive. La palette de couleurs et la typographie sont définies, et des animations pour les micro-interactions sont également prévues.

Transféré par

bamba.gningue
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
27 vues3 pages

Projet Final Webdesign

Le projet final de webdesign consiste à créer un site responsif nommé 'BookVerse' pour la découverte et l'achat de livres en ligne, avec des maquettes organisées pour desktop, tablette et mobile. Les pages clés incluent l'accueil, le catalogue, la fiche produit, le panier et le contact, avec des détails spécifiques sur la disposition responsive. La palette de couleurs et la typographie sont définies, et des animations pour les micro-interactions sont également prévues.

Transféré par

bamba.gningue
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd

Projet Final Webdesign : Site Responsif avec Figma

1. Choix du Thème

 Nom du site : "BookVerse"


 Objectif : Permettre aux utilisateurs de découvrir, acheter et réserver des livres en ligne.

2. Structure du Projet Figma

Le design sera organisé en 3 versions :

1. Desktop (≥1024px)
2. Tablette (768px - 1023px)
3. Mobile (<768px)

3. Maquettes Clés

Pages à inclure :

 Accueil (Bannière promo, livres populaires, catégories)


 Catalogue (Filtres, grille de livres)
 Fiche Produit (Image, description, prix, bouton "Ajouter au panier")
 Panier (Récapitulatif, validation)
 Contact (Formulaire + carte interactive)
4. Détails Responsive

Élément Desktop Tablette Mobile

Menu Horizontal (6 liens) Icône burger + menu déroulant Icône burger

Grille livres 4 colonnes 3 colonnes 2 colonnes

Bannière Pleine largeur + texte Image réduite + texte Image empilée sur texte

Formulaire 2 colonnes 1 colonne Champs empilés

5. Palette de Couleurs & Typographie

 Couleurs :

o Primaire : #2A5C99 (bleu littéraire)


o Secondaire : #F5F5F5 (fond épuré)
o Accent : #E63946 (rouge pour les CTA)
 Polices :

o Titres : Playfair Display (élégant)


o Corps : Open Sans (lisibilité)

6. Livrables Figma

1. Frame Desktop :

o Header + bannière hero


o Section "Nouveautés" (4 livres/range)
o Footer avec liens sociaux
2. Frame Tablette :

o Menu burger activable


o Grille de 3 livres/range
o Formulaire de contact en 1 colonne
3. Frame Mobile :

o Contenu réorganisé en scroll vertical


o Boutons agrandis pour le tactile
o Panier sous forme de modal

7. Bonus (Animations)

 Micro-interactions :

o Survol des livres : ombre portée + zoom léger


o Bouton "Ajouter au panier" : changement de couleur au clic

Étapes Suivantes

1. Créer les frames dans Figma avec les breakpoints.


2. Designer les composants réutilisables (navbar, cartes de livre).
3. Tester l’affichage avec l’outil Figma Mirror (pour mobile).

Vous aimerez peut-être aussi