Dans la fenêtre d'impression, choisissez « Enregistrer en PDF », format A4 paysage, marges aucune.
WEBINALSemaine 1 · Maquette et direction artistique
OMMY · Propositions de design
Présenté par WEBINAL
Objectif de S1
Choisir l'identité de la boutique parmi trois propositions Select complètes et comparables : Cobalt, Grille et Pro. Modifications possibles selon vos retours : couleurs, typographie, sections, combinaison de versions.
Contenu
Pour chaque concept : accueil, catalogue, fiche produit et panier, sur ordinateur, tablette et smartphone.
Cadre
Interface en français, prix en CHF. Sept produits et photos fournis par OMMY. Identité et prix proposés à valider.
Déclinaison 1
Select Cobalt
La version de référence, modulaire et efficace
Bandeau bleu profond, recherche au centre de l'en-tête et accueil en mosaïque : une grande accroche et deux catégories mises en avant. Catalogue dense avec ajout rapide au panier.
Impression recherchée : Efficacité, choix, innovation
Typographie proposée : Archivo · IBM Plex Sans
- Bleu profond#0E1A45
- Cobalt#2D5BE3
- Glacier#E8EEFB
- Blanc#FFFFFF
- Accueil
- Mosaïque : accroche + 2 catégories
- En-tête
- Bleu profond, recherche centrale
- Cartes
- Encadrées, ajout rapide
- Catalogue
- Filtres en puces
Modifications possibles : couleurs, typographie et sections ajustables selon vos retours.
Aperçus issus de la maquette interactive (accueil, ordinateur et smartphone). Produits OMMY et prix proposés à valider.
Déclinaison 3
Select Grille
La recherche d'abord, lignes nettes
Accueil construit autour d'un grand champ de recherche, puis une grille stricte de catégories. Angles droits, filets fins noirs et bleu électrique : très lisible, très structuré.
Impression recherchée : Précision, rapidité, clarté
Typographie proposée : Space Grotesk · IBM Plex Sans
- Blanc#FFFFFF
- Encre#0B0D12
- Électrique#1F4BFF
- Gris clair#F1F2F4
- Accueil
- Grand champ de recherche central
- En-tête
- Blanc, filet fin
- Cartes
- Angles droits, filets
- Catalogue
- Filtres en colonne
Modifications possibles : couleurs, typographie et sections ajustables selon vos retours.
Aperçus issus de la maquette interactive (accueil, ordinateur et smartphone). Produits OMMY et prix proposés à valider.
Déclinaison 6
Select Pro
Place de marché complète, dense
Organisation de type place de marché : colonne des catégories toujours visible sur l'accueil, bannière principale et bloc avantages. La plus dense, prête pour un catalogue large.
Impression recherchée : Exhaustivité, maîtrise, évolutivité
Typographie proposée : Outfit · IBM Plex Sans
- Marine#0A1A3F
- Cobalt#2563EB
- Ciel#DBEAFE
- Gris#F4F6FA
- Accueil
- Colonne catégories + bannière
- En-tête
- Marine, catégories
- Cartes
- Compactes, sans bordure
- Catalogue
- Filtres en colonne
Modifications possibles : couleurs, typographie et sections ajustables selon vos retours.
Aperçus issus de la maquette interactive (accueil, ordinateur et smartphone). Produits OMMY et prix proposés à valider.
Écran type · Catalogue
Vue catalogue hypothétique
Le même catalogue de démonstration, filtré sur les gourdes, dans les trois propositions. Les filtres catégorie, prix et disponibilité, le tri et le compteur de résultats sont présents partout, mais organisés différemment.
- 1Filtres · catégorie, prix maximum, disponible uniquement
- 2Tri · pertinence, prix croissant ou décroissant, nom
- 3Carte produit · photo, nom, prix CHF, disponibilité
- 1Évolutivité · les catégories sont générées depuis le catalogue, une nouvelle catégorie apparaît sans refonte
- 2Stock · « Stock limité » et « Rupture » visibles, ajout bloqué si épuisé
- 3S2 · branchement du catalogue réel et du stock
Écran type · Fiche produit
Page produit
Tous les éléments demandés par le cahier des charges : photos, nom, description complète, prix, disponibilité et niveau de stock, puis ajout au panier.
- 1Photo produit · une seule photo du produit fournie par OMMY
- 2Nom et catégorie · fil d'Ariane pour revenir au catalogue
- 3Prix CHF · identifié comme illustratif
- 4Disponibilité · pastille de couleur et stock restant
- 5Quantité · limitée au stock disponible
- 6Ajouter au panier · confirmation immédiate
- 7Livraison, retours, paiement · textes illustratifs à rédiger
- 8Produits recommandés IA · sélection personnalisée sous la fiche, détaillée plus loin
Écran type · Recherche
Les éléments de recherche
La recherche interne est accessible depuis l'en-tête de chaque page et dans le catalogue. Elle porte sur le nom, la description courte et la catégorie.
- 1Champ d'en-tête · présent sur toutes les pages
- 2Recherches rapides · suggestions de mots (concept B)
- 1Combinaison · recherche + filtres + tri cumulables
- 2Lien partageable · la recherche reste dans l'adresse de la page
- 1Prévu S2 · recherche sur le catalogue réel
- 2Prévu S9 à S10 · recherche en langage naturel par l'assistant IA
Intelligence artificielle · Accueil
Recommandé pour vous par l'IA
Exemples réels de la maquette : la sélection s'adapte aux fiches consultées et aux recherches du visiteur. La même logique est habillée selon chaque direction graphique.
Parcours partagé
produits consultés et recherches, communs à toutes les versions
Catalogue vérifié
références contrôlées, aucun produit inventé
Besoin précis
le lien ouvre le Conseiller pour affiner la sélection
Démonstration
calcul réel côté serveur, produits OMMY et prix proposés
Aperçus fonctionnels · 1 / 2
Espace client
Écrans de principe pour valider l'ergonomie. Le solde d'argent et les points de fidélité sont deux systèmes distincts, avec des couleurs et des unités différentes.
Statuts de commande : Commandée → À préparer → Préparée → Expédiée → Livrée.
Aperçus fonctionnels · 2 / 2
Assistant, administration et logistique
L'assistant tient compte du budget et des points. Le préparateur ne voit ni prix ni information financière et ne peut passer une commande qu'en « Préparée » puis « Expédiée ».
Simulations avec données de démonstration. Le style final suivra la direction retenue.
Intelligence artificielle · Fiche produit
Produits recommandés IA
Sous la fiche du gourde compacte, l'IA propose des alternatives et des compléments issus du catalogue, sans répéter le produit ouvert. Chaque carte explique sa pertinence. La sélection peut varier à chaque calcul.
Sans parcours sur l'accueil, un état d'attente propose un exemple voyage. Sur une fiche, le produit ouvert donne déjà un contexte à l'IA.
Aperçus fonctionnels · Personnalisation
Du parcours aux idées adaptées
Exemple présenté au client : gourde et coussin de nuque consultés, recherches « gourde » et « voyage », puis comparaison du catalogue par le Conseiller côté serveur.
Crédits
20 crédits de démonstration partagés entre versions, 1 par réponse du Conseiller. Les recommandations intégrées ne les décomptent pas. Chaque nouveau calcul utilise néanmoins les crédits IA de l'espace de travail.
Données utilisées
Parcours conservé dans le navigateur. Le résumé utile est envoyé au modèle lors du calcul. La maquette n'utilise ni compte client réel ni historique d'achat réel.
À valider pour la production
Consentement et durée de conservation, compteur sécurisé lié au client, points de fidélité, budget et ton des réponses. La sélection reste en mémoire de session jusqu'à un changement de parcours.
Comparatif des trois propositions
| Critère | Select Cobalt | Select Grille | Select Pro |
|---|---|---|---|
| Impression | Efficacité, choix, innovation | Précision, rapidité, clarté | Exhaustivité, maîtrise, évolutivité |
| Accueil | Mosaïque : accroche + 2 catégories | Grand champ de recherche central | Colonne catégories + bannière |
| En-tête | Bleu profond, recherche centrale | Blanc, filet fin | Marine, catégories |
| Cartes | Encadrées, ajout rapide | Angles droits, filets | Compactes, sans bordure |
| Catalogue | Filtres en puces | Filtres en colonne | Filtres en colonne |
| Ambiance | Claire avec blocs sombres | Claire, graphique | Dense, fonctionnelle |
| Palette |
Points à valider
- ☐ Déclinaison retenue : Cobalt · Grille · Pro · combinaison
- ☐ Identité
- ☐ Navigation
- ☐ Lisibilité
- ☐ Présentation des produits
- ☐ Expérience mobile
- ☐ Nom et logo OMMY : la typographie proposée est provisoire, en attente du logo définitif.
- ☐ Couleurs définitives de la marque.
- ☐ Prix proposés des sept produits, stocks réels, matières et âge recommandé de la gourde enfant.
- ☐ Règles et tarifs de livraison (affichés « À déterminer »).
- ☐ Conditions de retour et mentions légales.
- ☐ Moyens de paiement souhaités pour la Suisse (proposition en S3).
- ☐ Barème des points de fidélité et valeur d'un point.
- ☐ Ton de communication : vouvoiement retenu par défaut.
Prochaine étape
S2 · Catalogue en test
Intégration du catalogue réel dans la direction retenue : recherche interne, filtres par catégorie, prix et disponibilité, fiches produits complètes.
Ensuite : S3 commandes et paiements · S4 boutique V1 en test · S5 à S8 gestion, fidélité et recharge · S9 à S12 IA et bilan.