Blog | F4 Design : Créer différemment.

  • Accueil > 
  • Blog > 
  • #Web
  •  > Web design : cas pratique d’un site e-commerce

Web design : cas pratique d’un site e-commerce

image de webdesign d"une étude d'un site e-commerce

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

Webdesign moteur de recherche scientifique et médicale

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

schema de processus d'accessibilité d'information d'un produit

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/

A propos Loïc Tortelier

Dans le domaine de la communication imprimée, web et vidéo depuis 2008, avec une expertise digitale appliquée à la communication de produits numériques et de services, l’accompagnement dans la création d’identités visuelles pour votre marque et l’application de techniques marketing visuelles et sensorielles.

Recevez la newsletter !

liste des supports de communication pour un projet d'entreprise

Recevez dès votre inscription la liste incontournable pour définir vos supports de communication pour votre projet.

  • 42 supports de communication proposés
  • 4 questions indispensables pour chaque supports

Ainsi que les prochains articles et vidéos des projets ou conseils en création de communication visuelle, web et multimédia pour des sociétés, entreprises et indépendants directement par email !






* champ obligatoire.

2 réflexions au sujet de « Web design : cas pratique d’un site e-commerce »

  1. Je comprend la démarche et trouve cet aspect descriptif intéressant..et assez cohérent car un logo est l’image immédiate et le site se doit de lui ressembler en termes d’harmonies de couleurs.Ce qui implique qu’avant de construire un blog ou un site il faut s’intéresser à la préparation de son logo…j’ai compris.
    Par contre le choix des couleurs du logo semble plus intuitif que pensé en terme de liens avec le métier sur lequel porte le logo? est-ce que je me trompe? auquel cas il me parait y manquer une démarche d’analyse métier essentielle….mais peut-être cela a t’il était fait et n’est pas cité dans cette explication?
    En tout cas le logo est super!
    etre libre Articles récents..GOUVERNANCE ACTUELLE DES PEUPLESMy Profile

    1. Concernant les couleurs du logo,je pense que chaque personne a sa propre façon de faire pour la création de celles-ci. Me concernant, j’ai tout d’abord pri en compte la demande du client, pour voir si la gamme de couleurs demandés me semblait cohérentes, puis j’ai adapté ou changé certaines couleurs pour dégager plusieurs idées en fonction de l’importance de telle ou telle couleurs, du phenix avec sa correspondance à la couleur du mot phenix, de même pour le livre avec sa correspondance au mot vétérinaire et l’aspect de recherche…. Mais pour plus de précision sur la façon de penser la création d’un logo et de ces couleurs, cela fera peut être l’objet d’un article… Cela n’était effectivement pas le but dans cette article.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Je possède un blog et je souhaite afficher un lien vers l'un de mes articles