Web design : cas pratique d’un site e-commerce
127 vues 2 commentaires, > Commentez vous aussi cette article
Phenix Vétérinaire est un site de vente de livres et de parties de livres sur les thèmes regroupés dans « agriculture et agronomie, sciences de l’environnement, sciences aquatiques, océanologie » et » Médecine vétérinaire, santé animale, zoologie » .
La première étape, suite à la création du logo, était de déterminer l’utilisation des gammes de couleurs du site. Je pars souvent du principe que le logo sert de base créative à l’ensemble du site, car le logo est la partie principale de l’identité visuelle que se soit pour de la communication visuelle, pour de la vidéo ou du web… Ici le logo que j’ai créé pour le client était riche en couleurs. J’ai donc déterminé les couleurs dominantes afin de m’en servir pour le design du site. Cela apporterait une cohérence certaine entre chaque élément.
Le choix des couleurs
- Le marron devait servir de pilier, de couleur mère de l’ensemble du design, comme c’est le cas en arrière plan du logo.
- Le bleu qui est utilisé dans le texte « VÉTÉRINAIRE » et sur la couverture du livre du logo, est léger mais vient soutenir les pages du livre et le phénix qui en sort, ainsi que le mot « PHENIX ». C’est donc une couleur que j’ai utilisée en soutien, pour les titres des blocs de produits, les liens, ainsi que l’ensemble des éléments passifs et l’arrière plan du site avec des teintes plus claires.
- Le Jaune orangé, quant à lui, est la couleur principale qui constitue le phénix, c’est une couleur très dynamique et vivante. Elle s’accordait donc parfaitement et naturellement avec les boutons d’action, ou des rappels sur des zones pour leur donner de l’importance.
- Le blanc placé derrière l’écriture du logo apporte de la pureté et de la clarté à l’information. Cela m’a permis d’utiliser communément cette couleur blanche pour le fond de l’intérieur des pages.
- Le gris est la couleur d’écriture choisie pour l’ensemble des textes des pages et des zone de remplissage. Il sert à afficher l’information mais ne choque pas l’œil comme cela aurait pu être le cas avec un noir sur fond blanc. L’utilisation du gras pour les titrages ou les tarifs, permet de les mettre en avant. Néanmoins contrairement à un site de type « discount », ici l’importance n’est pas le prix, les réductions ou les supers affaires… C’est la qualité de l’information, car nous sommes dans le domaine médical et scientifique. Il était donc plus éthique de mettre en avant l’information sans la différencier « fortement » du prix avec un changement de couleur par exemple.
Moteur de recherches
Lors de la création du design de ce site ecommerce, la demande consistait à mettre en avant le moteur de recherches pour permettre aux personnes de trouver des livres correspondants. Il est placé de telle manière qu’il est accessible et visible rapidement puisqu’il est situé à l’intérieur du haut de page et sur quasiment l’ensemble de la largeur de la page. On ne peut pas le manquer ! Néanmoins, l’utilisation de couleurs douces, d’un jeu d’ombres et d’une perspective le mettent en avant mais n’agresse pas l’œil de l’utilisateur.
L’accessibilité des informations détaillées
La demande était de mettre en forme l’état d’un bloc de produit avec ces informations obligatoires puis avec des informations détaillées accessibles en un clic sans changer de page. Grâce à l’agrandissement dynamique du bloc produit, la quasi totalité de l’information du produit devient disponible. Cet aperçu permet à l’utilisateur de naviguer entre les produits et d’en savoir plus sans changer de page.
Conclusion
Ce design de site de type e-commerce m’a permis notamment d’exprimer un nouveau jeu de couleurs que j’ai trouvé intéressantes, d’organiser un webdesign basé sur la recherche et de mettre en forme un procédé d’accessibilité d’information. Le site se compose de plus d’une dizaine de pages en maquettes. Si vous êtes curieux de webdesign ou de thèmes de recherche du site, je vous invite à le consulter pour voir l’ensemble du travail effectué.
Vous pouvez aussi me laisser votre avis juste en dessous.
Voir le site Phénix vétérinaire : http://www.phenix-veterinaire.com/
Frédéric-Michel... (1)
Micka (1)
OxiDesign (1)
Pascal Colombani (1)