Aller au contenu

Carte des vins de France – E-commerce

Philippe Stevenou Oenologue – Photo©Grégory Maucorps/Liberté le Bonhomme libre

Philippe Stevenou Oenologue reconnu, passionné de surcroît, créateur des dîners obscurs et de la société Oenanthique-conseils avait besoin d’un site e-commerce pour vendre ses cartes de vins. Ayant déjà acheté le nom de domaine cartesdesvinsdefrance.fr.

Il a donc fait appel à moi et Olivier Lahaye pour la réalisation de son site via CréaNEX-Studio.
Philippe nous a alors expliqué qu’il co-travaillait avec Charlotte Gellens une graphiste talentueuse, qui lui confectionnait de magnifiques cartes géographiques sur les vignobles et les cépages Français.

Analyse du besoin :

  • Un site e-commerce responsive avec peu de produits pour commencer.
  • Une ambiance chaleureuse voire même avec un humour décalé.
  • L’univers du vin omniprésent.

Nous allions commencer le site avec trois produits mais il était important que la structure du site soit adaptée pour une évolution du catalogue.

Après s’être mis d’accord sur l’arborescence et avoir validé la proposition du zoning, je me suis attelé au Webdesign.

La mise en avant des produits de la marque « Les stations oenanthiques® » était une volonté de notre client.
J’ai alors proposé des mockups en première page et dans les mises en avant des produits afin de favoriser ses produits.

#gallery-1 {
margin: auto;
}
#gallery-1 .gallery-item {
float: left;
margin-top: 10px;
text-align: center;
width: 33%;
}
#gallery-1 img {
border: 2px solid #cfcfcf;
}
#gallery-1 .gallery-caption {
margin-left: 0;
}
/* see gallery_shortcode() in wp-includes/media.php */

La demande était aussi d’avoir un beau slider pouvant exprimer l’utilité des produits dans le quotidien. Après plusieurs conversations sur l’utilisation de l’une de ces cartes dans les toilettes Olivier proposa directement une diapositive avec des toilettes. Dans le même esprit d’alléger cette commercialisation, j’ai proposé des notes d’humour via la création d’un personnage fictif alias Gary McGILL un détective privé utilisant les cartes des vins les stations oenanthiques® comme des outils d’enquête. Philippe était tout de suite séduit par l’idée, lui aussi voulait bousculer le carcan élitiste sur le monde de l’œnologie.

#gallery-2 {
margin: auto;
}
#gallery-2 .gallery-item {
float: left;
margin-top: 10px;
text-align: center;
width: 25%;
}
#gallery-2 img {
border: 2px solid #cfcfcf;
}
#gallery-2 .gallery-caption {
margin-left: 0;
}
/* see gallery_shortcode() in wp-includes/media.php */

nature & webdesign

#gallery-1 {
margin: auto;
}
#gallery-1 .gallery-item {
float: left;
margin-top: 10px;
text-align: center;
width: 25%;
}
#gallery-1 img {
border: 2px solid #cfcfcf;
}
#gallery-1 .gallery-caption {
margin-left: 0;
}
/* see gallery_shortcode() in wp-includes/media.php */

Exemples de Web-design orientés nature.

Mode sac

#gallery-1 {
margin: auto;
}
#gallery-1 .gallery-item {
float: left;
margin-top: 10px;
text-align: center;
width: 33%;
}
#gallery-1 img {
border: 2px solid #cfcfcf;
}
#gallery-1 .gallery-caption {
margin-left: 0;
}
/* see gallery_shortcode() in wp-includes/media.php */

#gallery-2 {
margin: auto;
}
#gallery-2 .gallery-item {
float: left;
margin-top: 10px;
text-align: center;
width: 33%;
}
#gallery-2 img {
border: 2px solid #cfcfcf;
}
#gallery-2 .gallery-caption {
margin-left: 0;
}
/* see gallery_shortcode() in wp-includes/media.php */

Web-design’s réalisé dans le domaine du sac à main.

webdesign retro

Voici une petite sélection d’anciens webdesign‘s réalisés au fur et à mesure du temps. Ces derniers m’ont été demandés pour des entreprises de Caen (Normandie) et pour d’autres entreprises normandes dans divers secteurs d’activités.

Bien entendu, il s’agit ici d’anciens webdesigns de 2008 pour le plus vieux à 2013 pour les plus récents. Même démodés, je les trouve toujours aussi intéressants.

Tous ces webdesign’s ne sont peuvent être au goût tout le monde. C’est bien heureux car le but pour un webdesigner est de correspondre à la demande d’un secteur d’activités donné.

 

Administration & organisme

#gallery-1 {
margin: auto;
}
#gallery-1 .gallery-item {
float: left;
margin-top: 10px;
text-align: center;
width: 33%;
}
#gallery-1 img {
border: 2px solid #cfcfcf;
}
#gallery-1 .gallery-caption {
margin-left: 0;
}
/* see gallery_shortcode() in wp-includes/media.php */

Architecture & BTP

#gallery-2 {
margin: auto;
}
#gallery-2 .gallery-item {
float: left;
margin-top: 10px;
text-align: center;
width: 33%;
}
#gallery-2 img {
border: 2px solid #cfcfcf;
}
#gallery-2 .gallery-caption {
margin-left: 0;
}
/* see gallery_shortcode() in wp-includes/media.php */

Commercial

#gallery-3 {
margin: auto;
}
#gallery-3 .gallery-item {
float: left;
margin-top: 10px;
text-align: center;
width: 33%;
}
#gallery-3 img {
border: 2px solid #cfcfcf;
}
#gallery-3 .gallery-caption {
margin-left: 0;
}
/* see gallery_shortcode() in wp-includes/media.php */

Industrie

#gallery-4 {
margin: auto;
}
#gallery-4 .gallery-item {
float: left;
margin-top: 10px;
text-align: center;
width: 33%;
}
#gallery-4 img {
border: 2px solid #cfcfcf;
}
#gallery-4 .gallery-caption {
margin-left: 0;
}
/* see gallery_shortcode() in wp-includes/media.php */

Services

#gallery-5 {
margin: auto;
}
#gallery-5 .gallery-item {
float: left;
margin-top: 10px;
text-align: center;
width: 33%;
}
#gallery-5 img {
border: 2px solid #cfcfcf;
}
#gallery-5 .gallery-caption {
margin-left: 0;
}
/* see gallery_shortcode() in wp-includes/media.php */

site scolaire

J’ai créé toutes les illustrations ainsi que les icônes, cela afin d’améliorer le Web design à destination des groupes scolaires.

 

mamie

Voici un site pour une ferme qui produit de la viande.J’ai
proposé de créer une mascotte sous les traits d’une grand-mère
avec un style campagnard bien prononcé. Ainsi que de trois notes d’humour pour améliorer les ventes

 

icone ios

Icône dans le style euskomorphisme comme les icônes que l’on trouve sur l’ios de l’Iphone ou sur apple mac.

Cette icône représente une application créé par Fabien Lefebvre. Cette appli est un sonomètre proposant toutes les fonctionnalités d’un tel appareil et même plus: vous y trouverez des fonctions qui ne sont disponibles que sur les gammes professionnelles.

Voila cette fameuse appli disponible sur le célèbre I-tunes d’Apple >

icone du speaker-meterVoila la deuxième icône sur laquelle j’ai rajouté des barres de statistiques et une courbe électrifié. >

 

Et voici d’autres Applis de Fabien Lefebvre >