Aller au contenu
FiveX
LogicielDesign

Nechma — boutique en ligne pour un magasin de vêtements de Souk Ahras

Une vitrine pour un magasin qui recevait déjà des clients. L'arabe est la langue par défaut et la page est composée de droite à gauche pour elle ; le français est à un clic et recompose les mêmes pages au lieu de traduire un cadre figé. Navigation, filtres, panier et paiement à la livraison, avec expédition dans tout le pays.

Visiter le site
Plateforme
Web
Secteur
Prêt-à-porter
Année
[YYYY]
Durée
[N] semaines
La page d'accueil de Nechma en arabe, disposée de droite à gauche : une photographie de l'intérieur du magasin avec portants et étagères, un sélecteur de langue proposant Français et عربية, un champ de recherche et un panier dans l'en-tête.

Écrans

la vitrine en production

  • La page d'accueil en arabe, de droite à gauche : une photographie de l'intérieur du magasin, un sélecteur de langue proposant Français et عربية, un champ de recherche et un panier dans l'en-tête.
  • La rangée des nouveautés sur la page d'accueil, au-dessus d'une bande de vignettes de catégories.
  • Une section en deux parties associant la photographie d'un artisan au travail à une phrase sur le trajet du cœur de la ville à votre penderie, au-dessus d'une rangée de quatre meilleures ventes.
  • Le bas de la page d'accueil : une bande en trois parties sur l'authenticité, le paiement à la livraison et l'expédition nationale, une rangée Instagram de six photographies, et le pied de page sombre avec liens rapides, coordonnées et horaires.
  • L'index des produits avec le panneau de filtres ouvert : cases de catégories, curseur de prix, boutons de taille et pastilles de couleur à côté d'une grille de vêtements avec les prix en dinars.
  • La page d'un chemisier en lin : une pastille de remise à côté du prix, les choix de taille et de couleur, un sélecteur de quantité, un bouton d'ajout au panier, et une photographie avec une bande de vignettes.
  • La page des catégories : de grandes tuiles photographiques pour homme, femme, accessoires, chaussures et enfant, chacune légendée en arabe.
  • La page « à propos » : le logotype au-dessus d'un paragraphe d'ouverture, un titre sur les débuts dans un seul magasin avec deux colonnes de texte, trois cartes de valeurs, et une bande photographique dessous.
  • La page de contact : un titre et une invitation à écrire, au-dessus d'un formulaire nom, e-mail, téléphone, objet et message.
  • La même page de contact défilée jusqu'au pied de page, montrant l'adresse du magasin, son téléphone et son e-mail, les horaires jour par jour, et un panneau de carte.
  • La page d'accueil basculée en français, la navigation affichant Accueil, Produits, Catégories, À propos et Contact, avec un bandeau de livraison en haut.

système de design

  • L'artboard de l'accueil desktop : un en-tête de droite à gauche portant le logotype NECHMA, une bannière pleine largeur sur une photographie, une rangée de six tuiles de catégories, des rangées de nouveautés et de meilleures ventes avec les prix en dinars, une bande livraison et paiement, et une grille Instagram.
  • L'artboard de l'accueil mobile : un en-tête avec pastille de panier et bouton de menu, une bannière pleine page annotée comme photographie lifestyle, des tuiles de catégories annotées en défilement magnétique à six tuiles, et deux cartes produit de nouveautés au format 4:5.
  • L'artboard de la page produit : un fil d'Ariane, le nom du vêtement et un prix remisé, les choix de taille et de couleur, un sélecteur de quantité, un bouton d'ajout au panier avec une action secondaire en dessous, des sections dépliables, une grande image avec une bande de vignettes, et une rangée de produits similaires.
  • L'artboard du système de design : les rôles de couleur en pastilles avec leurs valeurs hexadécimales, une échelle typographique associant Poppins pour le latin et les chiffres à la fonte arabe avec un spécimen à chaque taille, la matrice des boutons dans leurs variantes et états, les champs de saisie, les badges, et la carte produit dans cinq états.
  • L'artboard de la page « à propos » : le logotype au-dessus d'un titre sur les débuts dans un seul magasin, un paragraphe de texte, trois cartes de valeurs, une bande d'image large, et une rangée de trois chiffres avec leurs légendes.

Technologies

  • Next.js
  • Turbopack
  • next/image

Étude de cas suivante

Dites-nous où le système casse.

Une seule équipe senior, cinq disciplines, aucune passation au milieu. Envoyez-nous la contrainte et nous vous dirons ce que nous construirions.

Démarrer un projetRéserver un appel technique