Accueil → Réalisations → Vins d’Alsace

Vins d’Alsace

Site web - Identité visuelle
Le CIVA avait pour objectif de mettre en ligne début 2014 la nouvelle version de son site internet grand public vinsalsace.com. Il nous a dans ce contexte, sollicité pour participer à leur appel d'offre, nous vous expliquons toute l'histoire… une très belle histoire d'ailleurs.
Client
Le CIVA
Infos
Le Conseil Interprofessionnel des Vins d’Alsace est l’interprofession de tous les vins AOC (Appellations d’Origine Contrôlée) d’Alsace.
La refonte du site des vins d'alsace en 2014

LE CLIENT

Le conseil Interprofessionnel des Vins d’Alsace

Réunissant plus de 950 opérateurs (caves particulières, coopératives, négociants), la mission du CIVA est d’apporter des services à la viticulture tels que des études économiques, la transmission d’informations techniques, mais aussi la sensibilisation aux obligations réglementaires et déclaratives). Bien entendu son rôle est également de promouvoir les vins et les vignobles d’Alsace en France comme à l’étranger d’ailleurs, par de la publicité, des relations publiques, des formations et du soutien à l’export.

LES OBJECTIFS DU NOUVEAU SITE

Définition

L’objectif était de proposer un site pour promouvoir les vins d’Alsace, valorisant leurs relations avec les terroirs dans un esthétisme dont le regard moderne saurait accompagner l’expression du voyage sensoriel. Le développement du site devait être parfaitement souple et évolutif pour pouvoir s’adapter aux futurs besoins. La solution de gestion du site devait permettre d’assurer une autonomie indispensable aux utilisateurs ayant rôles et fonctions dans l’évolution des contenus.

D’où l’importance pour ce type de projet, de répondre aux quatre questions suivantes :

  • le Quoi : quels contenus exploiter, quelles informations nous voulons transmettre ?
  • le Qui : à qui s’adresse le site, quels sont les profils de visiteurs à cibler ?
  • le Quand : de quelle manière l’évolution et la diffusion des contenus s’inscrit dans le temps ?
  • le Comment : quels sont les moyens (outils logiciels et humains) pour y parvenir ?

Notre réponse

Pour offrir à l’internaute un confort optimal de lecture, nous avions axé notre proposition sur :

  • l’expérience du produit : offrir aux internautes une véritable immersion au cœur des vins d’Alsace et de sa culture
  • l’exploration identitaire : révéler l’identité visuelle et la décliner sur chaque page du site, comme l’écrin idéal des contenus
  • l’accessibilité : parce que chaque individu, quel qu’il soit et dans tous types de conditions matérielles et géographiques doit pouvoir idéalement accéder aux contenus d’un site web, l’accessibilité numérique du web est devenue aujourd’hui une norme
  • un design responsive : pour s’adapter aux différents terminaux de lecture, le web design du nouveau site pensé et conçu selon leurs dimensions et intégré pour y répondre dynamiquement
  • les interactions : une présentation claire et dynamique servie par des effets élégants et fluides
Gamme de couleurs pour l'identité des vins d'alsace
Illustrations de Lotie pour les Vins d'Alsace

L’EXPLORATION IDENTITAIRE

Couleurs et gamme

Il faut se rendre en Alsace pour comprendre que son vin est le reflet de ce qu’est cette région. Une architecture riche et variée, des paysages qui mêlent les couleurs vives des chaumes et le vert sombre des sapinières, la rondeur de ses monts et la douceur de ses vallées. L’Alsace offre aux amoureux de la nature de superbes paysages.
Et c’est d’un paysage dont nous sommes partis pour créer une gamme de couleurs évocatrice de l’Alsace. Une gamme de couleurs suffisamment forte affirmant le caractère unique des Vins d’Alsace. Une gamme de couleurs partant du ciel pour finir au cœur des terroirs Alsacien; sa terre.

  • Le vert est une couleur qui fait penser à la nature, c’est pourquoi il représente le naturel, l’équilibre, la permission et la fraîcheur.
  • Le bleu nous rappelle la nature et l’infini puisqu’elle nous fait penser directement à la mer et au ciel. Le bleu est une couleur qui symbolise la paix, le calme, la sérénité, la fraîcheur, mais aussi la sensibilité.
  • L’ocre jaune nous fait penser à la chaleur du soleil et à la richesse. Elle est une couleur douce facile à associer, elle se marie parfaitement avec les tons neutres.
  • Bien que ce soit une couleur terne, le gris est une couleur très élégante.
    En décoration, il a la particularité de convenir à tous les décors et de donner une touche de modernité.

TRAITEMENT DES IMAGES

Traitement de la couleur sur une page web
Traitement de couleurs de photos
Style de couleur css d'une image
Gestion des couleurs

L’EXPÉRIENCE UTILISATEUR

La page d’accueil

La page d’accueil, c’est la vitrine du site et bien souvent, la première page d’entrée. Dès lors, l’internaute forge sa première impression. C’est la page la plus visitée, celle qui fait qu’un internaute franchit ou non le seuil du site. Le rôle de la page d’accueil est stratégique.

Les intentions de la page d’accueil

L’idée était d’offrir à l’internaute une immersion totale dans l’univers des Vins d’Alsace. L’identité visuelle devait servir ces intentions, l’utilisation d’images à différents formats, de vidéos en auto-play, les remontées d’informations et les remontées d’entrée de rubriques aussi.
Le rôle de la page d’accueil, c’est d’expliquer à l’utilisateur comment naviguer dans le site, mais c’est aussi lui proposer de l’information que vous souhaitez qu’il regarde.

Zoning

La première étape était d’établir un découpage précis de la page et d’imaginer l’organisation des contenus :

  • Diaporama : il pouvait contenir plusieurs actualités fortes autour de Vins d’Alsace. L’internaute avait la possibilité de les faire défiler ou les cliquer pour aller sur la page concernée.
  • Des remontées de contenus de type : actualités du site, réseaux sociaux, mise en avant d’un produit, mise en avant d’une rubrique, mise en avant d’un service,… La mise en valeur de certaines remontées pouvait se faire en fonction de leurs positions et de leurs tailles.
  • Bouton «charger plus» : L’internaute était invité à charger plus de contenu sur sa page d’accueil.
Mockup de la page d'accueil
Flat-Devices-iPad-iPhone-browser
responsive-design-flat

Le responsive webdesign

Le Responsive Design, c’est l’ensemble des outils qui permettent aux sites de s’adapter à la taille de l’écran de l’internaute. Ainsi, cela facilite la consultation du même contenu présenté sous des formes différentes, que l’on utilise un ordinateur, une tablette ou encore un smartphone.

Objectif

Cette évolution des techniques de webdesign, d’intégration et de développement se base sur un objectif simple : un même site doit pouvoir s’adapter lui-même aux différentes résolutions d’écrans… et donc son contenu aussi !

La navigation dans un navigateur d’ordinateur

C’est celle que nous connaissons principalement. Ce terminal reste le support le plus utilisé pour consulter du contenu. Il demeure encore à ce jour indispensable d’appréhender l’ergonomie selon ses dimensions propres.

La navigation sur une tablette

La navigation pousse le contenu sur la droite pour venir révéler les rubriques du site. Le comportement de la navigation reste le même que sur un navigateur d’ordinateur.

La navigation sur mobile

La navigation pousse le contenu sur la droite pour venir révéler les rubriques du site. Le comportement de la navigation reste le même que sur un navigateur d’ordinateur

Le concept de navigation

Un site ergonomique est un site où la navigation est intuitive. Cela signifie que la majorité des visiteurs trouvent l’information qu’ils recherchent instinctivement et rapidement.

La navigation que nous proposions tendait à répondre à cette problématique. Nous l’avions imaginé comme un marque-page sur un livre ouvert.
Ce marque-page (zone de gauche) restait fixe en permanence dans le navigateur pour révéler les différents contenus (zone de droite) qui eux peuvent être scrollables dans le navigateur.

navigation javascript moderne pour un site internet
Page produit vins d'alsace
page article du blog des vins d'alsace

Les fonctionnalités

Moteur de recherche

Pour optimiser la mise à disposition de ses contenus, le site aurait intégré un moteur de recherche. Nous pensions utiliser le moteur d’indexation de contenus Sphinx qui travaille sur les contenus textuels selon différentes langues. Ainsi un utilisateur du site en version anglaise peut trouver uniquement les contenus rédigés dans sa langue.

Actualités

Cette rubrique présentait l’ensemble des activités liées au Vins d’Alsace sous la forme d’un Tumblelog mettant en avant des visuels et proposant des remontées d’actualités provenant de différents flux : interne (site) et externes (réseaux sociaux).
L’objectif était d’être davantage dans un fil d’actualités avec une place importante donnée à l’image pour recentraliser le flux d’expression de la marque Vin d’Alsace.
N’oublions pas que le but pour l’internaute est aussi de venir sur le site pour obtenir une information sur les vignobles,…

Interactions avec les réseaux sociaux

L’ensemble des contenus pouvaient être partagés sur les réseaux sociaux, permettant de déployer la visibilité du site et la propagation des informations liées aux Vins d’Alsace.

Les flux RSS

La syndication des contenus était gérée au format RSS et les flux mis à jour automatiquement en fonction des contenus des sites. Fournissant des résumés d’articles, les flux RSS offrait à l’internaute une sélection facile des informations prioritaires à consulter sur le site.

L’annuaire du vignoble

Ce module fonctionnel pouvait regroupe l’ensemble des informations liées aux vignobles (cave, vignerons,…) dont la base de données étaient également exploitée par la carte interactive.

Les événements

Un calendrier des manifestations était présenté sur le site pour proposer une vision claire et informative des événements à venir. Il pouvait être envisagé d’y intégrer pour chaque événement un lien permettant de l’ajouter directement à un calendrier de type Google Agenda,…

Les médias

L’exploitation des images, photos et vidéos pouvait se fera de deux manières :

  • depuis un centre de médias interne au site (gérant photos et vidéos)
  • depuis les bibliothèques d’images si une API le permet

La carte interactive

Alliant performance et convivialité, la carte interactive offrira à l’internaute une expérience de consultation graphique de contenus par son interaction avec celle-ci. La solution technique de cette carte reposera (sous réserve de compatibilité navigateur) sur les services du géoportail de l’IGN Open Layer 3. Les panoramas seront intégrés dans une cartographie faite par Idéematic et en collaboration avec iRéalité.

Cette pourra présenter :

  • le périmètre AOC Alsace [IRealité]
  • les 51 grands crus [Back office]
  • les 13 AOC Communales [Back office]
  • le tracé de la route des vins [IRealité]
  • les 5 territoires oenotouristiques de la route des vins [IRealité]
  • une 20 aine de points d’intérets autour villes et villages d’Alsace [Back office]
  • une 50 aine de vignerons de l’annuaire du vignoble (sur 700) [Depuis vinsalsace.pro]
  • l’annuaire des vignobles

À terme (contenus en collaboration avec des partenaires ) :

  • où manger ?
  • où déguster ?
  • où dormir ?
developpement carte interactive javascript

Une gestion simple, centralisée et partagée des contenus

Mis à disposition du client, le site disposerait d’un outil simplifié d’actualisation des contenus. Très intuitif dans son utilisation, il ne requerrait aucune connaissance informatique pointue. Les principales caractéristiques de ce gestionnaire de contenus seraient les suivantes :

  • plusieurs individus travailleraient sur un même document
  • il fournirait une chaîne de publication (workflow)
  • les opérations de gestion de la forme et du contenu seraient séparées
  • il permettrait de structurer le contenu
  • il possèderait des outils de hiérarchisation de l’information permettant de fluidifier la diffusion des informations dans le propre site (moteur de recherche, liens hypertextes évolués, structuration des catégories de contenu, syndication RSS, etc.)
  • doté de systèmes d’authentification évolués il permettrait d’attribuer des droits étagés aux différents opérateurs de la mise à jour du site (l’opérateur simple envoie du contenu de niveau 1 tel que des news, l’opérateur avancé pourrait éditer des pages principales, l’administrateur général peut valider et contrôler l’intégralité des contenus modifiés ou ajoutés)
  • le système put inclure un contrôle de version, permettant alors de gérer plusieurs états chronologiques de sites afin de pouvoir revenir en arrière ou de déterminer les évolutions du site.
organisation de la gestion des contenus du site en fonction d'utilisateurs et de roles
Quelle est la stratégie digitale pour votre site internet ?

Pour tenir ses promesses, votre site internet doit avoir la capacité de répondre aux objectifs que vous lui donnez. C’est l’intérêt de définir une stratégie cohérente avec vos enjeux et de pouvoir mesurer votre retour sur investissement en même temps que le développement de vos affaires. Notre approche est logiquement de vous proposer un accompagnement sur mesure pour des résultats prometteurs !

Demandez votre devis

Autres références

Toutes les références →

Air Antilles

Site web

Bernardaud

Site web