Adresse du site : www.******.fr

1–Description générale

1.1-Couleurs :

Mon but est d'avoir une boutique avec beaucoup de surfaces blanches. De nombreux onglets doivent être de couleur. Je souhaite des couleurs claires. Par son design cette boutique doit donner confiance. Cette boutique doit être claire. Son design ne doit pas agresser l'internaute. Par sa simplicité elle doit donner confiance. Je souhaite donc avoir un nombre très limité de couleurs différentes. La couleur doit surtout être sur les onglets. Le style de cette boutique doit être simple, propre et élégant.

Un peu comme sur fnac.com ou maisonsdumonde.com

1.2-Couleur de référence :

Mon objectif est d'avoir une couleur de référence, qui soit présente dans les éléments importants tels que :

-le prix des articles (Peut-être que le prix serait mieux simplement en noir, à voir.)

-le bouton « ajouter au panier »

-la barre de menu déroulant horizontal.

Cette couleur doit faire ressortir ces trois éléments, qui seront ainsi mis en évidence par rapport aux autres informations sur les pages.

Ainsi l'œil de l'internaute sera attiré par la barre de menu déroulant horizontale, par l'onglet « ajouter au panier » et par le prix.

La barre de menu horizontale doit donc être de couleur mais les sous-catégories qui apparaissent quand on déplace le curseur sur une catégorie de la barre horizontale, doivent rester comme elles sont, c'est à dire sur un fond blanc. Comme sur : telephone-grosses-touches.com.

Comme couleur pour ces trois éléments, (barre horizontale, bouton « ajouter au panier », Prix) je pense qu'un bleu doux, clair, rassurant, non agressif serait peut-être pas mal. Ce bleu doit exprimer la sérénité. Ce bleu donnera confiance. Une sorte de bleu épuré.

Ce bleu ne doit pas être foncé. (Ou alors seulement par petites touches sur les pages.)

Je pense qu'on pourrait aussi mettre en bleu les boutons suivant :

-Le bouton « retour » (pour retourner à la page précédente)

-D'autres boutons de navigation pour guider l'internaute sur le site.

-Le bouton « Envoyer à un ami » (qui devra notamment être renommé en : « recommander à un ami »)

1.3-Seconde couleur du site:

Pour donner au site de la vivacité, du dynamisme, je pense qu'une couleur orange serait l'idéal. On pourrait ainsi retrouver cette couleur par endroit sur les pages.

Cette couleur orange pourrait aussi être la couleur de référence.

Je souhaite ainsi voir des aperçus de différents designs, pour choisir celui qui me conviendra.

Ce site doit ainsi avoir des couleurs claires. Il doit donner une sensation de confiance, de transparence quand aux produits et aux services proposés par cette boutique (paiement, livraison, SAV).

1.4-Promotions : Pour l'onglet « Promotions », je pense qu'un rouge vif serait parfait. Comme sur biotonic.com.

1.5-Grosseur de police de caractère des onglets et de l'ensemble des textes du site :

Cette police doit être plus grosse que sur les sites que l'on rencontre généralement. Il faut bien comprendre que ce site s'adresse pour un grand nombre, à des jeunes retraités qui commencent à avoir du mal à lire les textes écrits en petit. Tous les onglets et textes du site doivent donc être facilement lisibles pour ces personnes. J'imagine qu'une grande majorité de sites est écrit en verdana 12. Je souhaiterais alors avoir du 13 ou du 14.

Je souhaite voir des essais des deux grosseurs puis je choisirai celle qui me conviendra.

1.6-Type de police de caractère :

Verdana, Times new roman, … ? Qu'utilise vente-privee.com ? Qu'utilise Biotonic.com ?

Pour pouvoir choisir la police définitive, je souhaite avoir un texte en verdana, un texte en times new roman, et d'autres textes avec d'autres polices pour pouvoir comparer puis choisir celui qui me conviendra.

1.7-Couleur de la police de caractère:

J'hésite entre une couleur noire (comme sur biotonic.com) ou une couleur grisâtre foncé (comme sur celyatis.com). Comment s'appelle la couleur utilisée sur celyatis.com ?

Pour pouvoir choisir la couleur définitive, je souhaite avoir un texte en noir et un autre dans cette couleur grisâtre foncé puis je ferai mon choix.

2–Page d'accueil

2.1-Le numéro de téléphone de la boutique avec un message du type « Contactez-nous ! Prix d'un appel local » doivent apparaître en haut à droite en assez gros. Pour la grosseur d'écriture du numéro de téléphone, je souhaite avoir la même grosseur que sur telephone-grosses-touches.com.

2.2-En haut au milieu, doivent apparaître une photo montrant le buste d'un homme et d'une femme de 40 – 50 ans souriants, heureux, confiants et complices. Le fond de cette photo doit être très clair.

Je souhaite voir plusieurs photos pour choisir celle qui me conviendra.

2.3-En haut à gauche apparaitra le logo « Objectif Confort ». Logo à ce jour pas encore créé.

2.4-En haut à droite : Le symbole du panier doit être plus gros et différent que celui actuel. Ce symbole doit représenter un panier ou un chariot ou un sac, avec la mention « Mon panier ».

Je souhaite voir plusieurs symboles de paniers pour choisir celui qui me conviendra.

2.5-Sur la partie gauche (dans les modules de gauche): il doit y avoir les logos de PayPal, CB, Visa, MasterCard, avec la mention « Paiement 100 % sécurisé ». Tous ces logos ainsi que cette mention, doivent être en lien hypertexte. Ce lien doit pointer vers une page interne d'explication sur le paiement sécurisé.

2.6-Tout en bas de la page (sur toute la largeur de l'ecran): Il doit y avoir la possibilité d'écrire un texte écrit en petit caractères comme sur celyatis.com.

Ce texte doit être écrit sur un fond coloré. (Par exemple bleu ciel ou orange).

2.7-Positionnement des modules sur la partie de gauche (de haut en bas):

-Inscription à la News letter

-Logo Paiement Sécurisé

-Informations

-Produits déjà vus

2.8-Positionnement des modules sur la partie de droite (de haut en bas):

-Mon panier

-Promotions (2 articles présentés un au-dessus de l'autre) comme sur biotonic.com

-Meilleures ventes (2 articles présentés un au-dessus de l'autre) comme sur biotonic.com

3 - Catégories

Quand l'internaute clique sur une catégorie, (par exemple : « Informatique et Communication »), il arrive sur la page où il y a (comme c'est déjà le cas) les sous-catégories listées. Pour chaque sous-catégorie, le nom de la sous-catégorie doit être écrit au-dessus de la photo correspondante à cette sous-catégorie. Le nom et la photo sont entourés par un cadre fin et légèrement grisâtre.

Comme sur : laboutiquedudos.com/4-oreillers-literie-anatomique

4 – Sous-catégories

Quand l'internaute clique sur une sous-catégorie, (par exemple : « cuisine » (dans la catégorie « autonomie et vie pratique »)), il arrive sur la page où il y a (comme c'est déjà le cas) les produits listés. Au-dessus de cette liste il doit y avoir un cadre avec sur la partie droite du cadre : la photo du buste d'une personne. Sur la partie gauche du cadre : le titre de cette sous-catégorie. Comme sur biotonic.com.

Je souhaite voir plusieurs photos pour choisir celles qui me conviendront.

Pour les produits en promotion, la promotion est écrite en blanc (ex.: « - 5 € ») sur fond rouge foncé. Le prix réduit est affiché. En dessous de ce prix réduit est inscrit le prix initial barré avec devant la mention écrite en plus petit « au lieu de ». Comme sur biotonic.com

5 – Fiche produit

Descriptif des produits :

Le texte décrivant les produits doit être écrit sur un fond blanc. Un cadre fin et légèrement grisâtre doit entourer cette description. Comme sur celyatis.com

Le bouton « Recommander à un ami » sera doté du symbole d'une enveloppe comme sur vente-privee.com.

Pour les produits en promotion, la promotion est écrite en blanc (ex.: « - 5 € ») sur fond rouge foncé. Le prix réduit est affiché.

-Au-dessus de ce prix réduit est inscrit : « En réduction ».

-Au-dessous de ce prix réduit est inscrit le prix initial barré avec devant la mention écrite en plus petit « au lieu de ». Comme sur biotonic.com

6 – Compte utilisateur

Dans la première page du compte utilisateur, chaque catégorie du compte utilisateur doit être présentée dans un cadre. Le titre des catégories doit être écrit en gras. Sous chaque titre doit apparaître une petite mention comme par exemple « Modifiez et complétez vos coordonnées personnelles ». Cela permet aux internautes de savoir de suite ce qu'ils peuvent faire dans cette catégorie. Comme sur vente-privee.com

7 – Processus de paiement

Depuis la fin du remplissage du panier jusqu'à la page de paiement sécurisée : le design de toutes les pages que rencontre l'internaute doit être amélioré. Sur un fond blanc, on doit y retrouver les couleurs (bleu et orangé) présentes sur les fiches produit.

8 – Duplication de cette charte graphique

Dans l'optique de créer d'autres sites également avec Prestashop, et de réutiliser la charte graphique qui sera créée avec cette demande de devis, je souhaite que cette dernière puisse être reprise (copiée) facilement par, éventuellement, un autre designer pour être installée sur mes autres futurs sites.

9 – Remarques

-Dans cette demande de devis, j'ai souvent cité en référence des sites et j'ai écrit : « comme sur lesite...). Je souhaite en effet avoir un résultat similaire aux sites cités. Il m'apparaît cependant important de ne pas recopier les sites référencés.

-Dans cette demande de devis, j'ai listé mes demandes très précisément. Ceci dit, je suis ouvert à toutes propositions légèrement différentes. On peut en discuter.

- Modification de la couleur du texte sur les mails

- Permettre l' ajout ou la suppression de l'image en  page d'accueil

 
Commentaire de l'administrateur :

• Ce projet a fait l'objet d'une validation par téléphone par un administrateur GraphistesOnline. Il est sérieux, et a de grandes chances de se concrétiser, à condition de recevoir des offres pertinentes de la part des prestataires.
• Le client est : Une boutique en ligne
  
• Le client affirme souhaiter concrétiser son projet  ASAP
  
• Description du projet :
  • L'objectif du projet :Réalisation d'une charte graphique
  • Détails du projet :Réalisation d'une charte graphique ,le client à une idée defini de ce qu'il souhaite (Cf en haut ).
    
  • Logiciel utilisé/conseillé : Presta-shop
    
  • Estimation du budget par jour appliqué : 250 euros
    
  • Type de mission : télétravail
  • Estimation du délai de réalisation : 4 jours