Agence de création digitale

Refonte d'un site internet sur la sécurité des produits chimiques

Exacta France

Voir la galerie

Refonte de site internet pour un fabricant d'armoires de sécurité

Refonte du site internet de catalogue pour l'entreprise Exacta France

Refonte du site internet de catalogue pour l'entreprise Exacta France de Olloweb.com est mis à disposition selon les termes de la licence Creative Commons Attribution - Pas d'Utilisation Commerciale - Pas de Modification 4.0 International.
Licence Creative Commons

5/5 pour 43 notes

Notez cette page
Note sur 5
Je sélectionne des étoiles

Votre note a bien été prise en compte, notre équipe vous remercie pour votre collaboration.

Vous avez déjà noté cette page, encore merci pour votre collaboration !

Avec toute l'expérience acquise lors de la première version du site, il y a quelques années, l'agence Olloweb a abordé la refonte avec plus de sérénité et de recul. Nous avons proposé des solutions simples et directes pour l'accès au catalogue. La page d'accueil a été repensée en terme de “temps à consacrer” pour le client a l’actualisation de la page, avec seulement une partie actualité affichée occasionnellement. Le catalogue qui a évolué depuis la première version reprend en grande partie, la version papier réalisée par le fabricant. Un moteur de recherche a été ajouté à cette nouvelle version pour faciliter l'accès direct aux produits. Quelques autres éléments sont aussi au rendez-vous, comme la newsletter, le catalogue en PDF en ligne ou une page avec l'ensemble des PDF des produits en téléchargement.

Fabricant d’armoires de sécurité

Exacta France

Le site internet Exacta regroupe une gamme complète d'équipements pour le stockage de produits nocifs. Le site Exacta présente également des exemples de réalisations pour des clients prestigieux en Europe et dans le monde. Cela dans les domaines comme l'industrie, le pétrochimie, l'environnement, la recherche, etc.

Voici les principales catégories des produits proposés sur le site internet :

  • Armoires coupe-feu pour liquides inflammables
  • Armoires coupe-feu pour bouteilles de gaz
  • Armoires pour acides, bases, toxiques, avec étagères fixes ou coulissantes
  • Armoires sous Sorbonne ou paillasses pour acides, bases ou solvants
  • Solution pour le stockage de déchets liquides.
  • Hottes chimiques
  • Douches de sécurité
  • Rayonnages

Logo, menu, moteur de recherche

Haut de page

Le haut de page du site Exacta est composé du logo de l'entreprise, d'un menu langue pour l'accès au site dans plusieurs langue (seulement en français pour le moment), d'un moteur de recherche par mots clés, d'un menu général d'accès aux pages du site et du catalogue.

Le haut de page
Le haut de page

Copie d'écran de la version en ligne

Coordonnées, plan du site

Bas de page

Le bas de page est composé d'un premier espace avec une zone pour visualiser le catalogue papier en PDF ainsi qu'une zone pour l'inscription à la newsletter. Plus bas, un autre espace regroupe un plan de site pour l'accès aux catégories du catalogue, les coordonnées de l'entreprise, également quelques liens vers les pages intérieures du site. Enfin, un espace indique les informations de copyright du site ainsi qu'un bouton de retour vers le haut de page.

Le bas de page
Le bas de page

Copie d'écran de la version en ligne

Gros plan, actualité, catégorie

La page d'accueil

Sur le haut de la page d'accueil est présent un espace animé avec une liste de visuels qui présentent quelques réalisations de l'entreprise. Cette zone étant dynamique, le client peut facilement ajouter des éléments d’actualité ou des réalisations plus récentes.

Immédiatement à droite de cette partie, est présent une zone pour l’actualité de l’entreprise. Il peut s’agir d’annoncer la présence de l’entreprise à un salon, de présenter un nouveau produit ou de proposer une information en lien avec l’entreprise.

Ensuite, plus bas, pour faciliter l’accès au catalogue, les catégories, présentées avec visuel, nom et résumé donnent accès aux différents produits de l’entreprise.

Voir la page d'accueil

Page d'accueil sans le haut et bas de page
Page d'accueil sans le haut et bas de page

Copie d'écran de la version en ligne

Partie haute de la page de catégorie
Partie haute de la page de catégorie

Copie d'écran de la version en ligne

Le catalogue par catégories

Les pages de catégories

Pour donner accès aux nombreux produits, il était obligatoire d'utiliser un classement par catégories. Ainsi lors de la sélection d'une catégorie en page d'accueil ou depuis le menu situé en haut de page, une catégorie est affichée. Il s'agit d'un modèle de page avec sur le haut, le nom de la catégorie avec une couleur particulière reprise du catalogue papier. La norme utilisée des différents produits (PDF). Ensuite la liste des produits en version résumée avec une alternance d'alignement du visuel. À noter sur l'extrême droite de la page, un menu de navigation inter-catégories pour faciliter la navigation. Également un menu sur le haut de la page pour le retour à la page d'accueil ou retour à la catégorie si l'utilisateur est en page produit.

Voir une page de catégorie

Caractéristiques, galerie, documentation

Les produits du catalogue

Après avoir sélectionné un produit depuis la page de catégorie, un page de détail présente l'ensemble des éléments d'un produit. Cette page est organisée suivant la séquence suivante :

  • Présentation
  • Caractéristiques
  • Galerie
  • Documentation

Un menu avec les différentes séquences permet de naviguer directement dans une des séquences sélectionnée.

Présentation

Ici est présenté le nom du produit ainsi que la certification, ensuite le visuel principal du produit avec en dessous des icônes propres au produit.

Caractéristiques

Cette partie regroupe les informations techniques du produit. En CMS, il est possible de choisir différentes options de présentation afin d'avoir une mise en page élaborée.

La galerie

La galerie offre différentes vue du produit. Lors d'un clic sur une des photos, un diaporama plein écran s’ouvre de l'ensemble des visuels présentés.

Documentation

Pour chaque produit, il est possible d'ajouter des documents sous la forme de PDF. Les documents sont donc proposés en téléchargement sur le bas de cette page. Noter qu'une page spéciale regroupe par produits, l'ensemble des documents.

Détail d'une page produit
Détail d'une page produit

Copie d'écran de la version en ligne

Modèle de page de présentation
Modèle de page de présentation

Copie d'écran de la version en ligne

Entreprise, mentions légales et autres pages

Présentation d'activités

Le modèle de page de présentation permet une organisation variée. Il offre la possibilité de générer des pages simples (condition de vente, mentions légales) ou des pages complexes (l'entreprise, exemple de produit, etc.).  Le site Exacta comporte un ensemble de pages utilisant ce modèle.

Newsletter

Un page d'inscription et de désinscription à la newsletter de l'entreprise, permet aux internautes, la gestion de l'abonnement à cette lettre. Par ailleurs, un emailing développé séparément permet d'informer les abonnés des actualités de l'entreprise.

Contact

La page de contact permet aux internautes de demander facilement des informations à l'entreprise par le biais d'un formulaire avec enregistrement en base de données et confirmation automatique par mail personnalisable.

Moteur de recherche

Le moteur de cherche situé en haut, dispose d'un solution d'interrogation directe (dataliste) et propose des résultats par auto-complémentation. Le résultat est ensuite affiché dans une page dédiée avec filtre, tri et navigation en Ajax.

Le briefing de projet

Avec l'expérience acquise lors de la création de la première version du site, nous avons abordé ce projet avec plus de facilité. Lors du rendez-vous de briefing, le chef de projet a proposé de nouvelles solutions en prenant en compte des remarques et les objectifs du site à refondre. Nous avons notamment proposé des solutions d’une mise en page plus élaborée tout en étant compatible avec le responsive design.

En savoir plus

Briefing de projet
Briefing de projet

Le briefing de projet est un document qui défini les orientations globales du projet avant de lancer la production.

Organigramme de site
Organigramme de site

Un organigramme de site internet pour une vue d'ensemble des pages web.

Plan de site

Pour ce type de projet avec seulement un niveau de complexité (catégorie), il n’était pas nécessaire de créer un plan complet des pages du site.

En savoir plus

Maquettes

Avant de démarrer la création graphique dans Adobe Photoshop, il est préférable de passer par une étape intermédiaire de création de maquettes. Pour le site Exacta, nous avons élaboré plusieurs maquettes pour la page d’accueil. Ensuite après avoir échangé avec le client, la maquette la plus appropriée a été sélectionnée et améliorée afin de répondre le plus justement possible aux attentes du client. Par la suite nous avons travaillé à la création d’autres maquettes pour les pages intérieures.

En savoir plus

Maquette pour site web
Maquette pour site web

Explorer des possibilités de mise en page afin de déterminer la meilleure configuration possible pour un site internet.

Interface graphique
Interface graphique

La conception d'interface graphique pour une expérience intuitive chez les utilisateurs.

La conception graphique

Après avoir élaboré toutes les maquettes, nous avons lancé la conception graphique. Depuis Adobe Photoshop, nous avons dessiné les modèles des pages du site Internet en prenant comme base de travail les maquettes préalablement réalisées.

La page d’accueil a été conçue puis validée par le client. Par la suite nous avons réalisé des déclinaisons de la page d’accueil pour tablette et téléphone. Il restait ensuite à procéder à la création graphique des autres pages : catégorie, produit, présentation, etc. Voir la galerie plus bas pour le détail de la conception graphique.

Après avoir dessiné toutes les pages modèles dans Photoshop et décliné le graphisme pour mobile et tablette, la création graphique fut approuvée par le client, avec notamment des modifications au niveau des pages de catalogue initialement prévues uniquement pour recevoir des PDF.

En savoir plus

Le développement HTML et CSS

Après avoir terminé la partie graphique, nous avons lancé le développement des pages. Chaque modèle de page a donc été codé pour reproduire fidèlement la version graphique. L'utilisation du HTML5 facilite le développement des pages grâce aux nouvelles balises qui permettent de mieux structurer le code et de gagner en lisibilité. Le CSS3 avec les Média Queries facilite la déclinaison du site en version tablette et smartphone.

Le développement dynamique

Après avoir terminé toutes les pages modèles du site, nous avons ajouté le codage PHP pour rendre le site dynamique  et faciliter la mise à jour des pages à l'aide du CMS de l'agence Olloweb.

La gestion du site

Pour faciliter l'intégration des produits et toutes les parties dynamiques du site, nous avons utilisé notre système de gestion de contenu destiné à des sites pros sur mesure.  Ainsi avec quelques heures de formation au CMS Olloweb, le client a pris rapidement le contrôle du site pour ajouter des produits au catalogue et modifier toutes les parties du site.

Rédaction pour site internet de catalogue
Rédaction pour site internet de catalogue

Profitez de l'expérience d'un professionnel de la communication pour faire réaliser les contenus de votre site internet de catalogue.

Rédaction web

Concernant la rédaction du contenu du site, notre rédactrice Web a pris en charge la reprise du catalogue papier pour un intégration digitale.  Tous les produits ont été intégrés au site avec textes, tableaux et visuels. Des pages de présentation de l'entreprise, etc., ont également été réalisées et intégrées par notre rédactrice.

En savoir plus

La validation du projet

Avant de procéder à l'ouverture du site, l'agence Olloweb lance une vérification complète du site internet afin de garantir le codage. Le site de catalogue une fois validé est garanti pour une durée de deux ans. Cette garantie couvre ainsi les bugs éventuels et les mises à jours des navigateurs.

Les statistiques
Les statistiques

Suivre une action en image par l'intermédiaire de statistiques aussi riches que possibles.

Les statistiques et le référencement

Pour obtenir des statistiques de fréquentation du site, nous procédons à l'installation de module Google ou Piwik. Un plan de l'ensemble des pages web du site est rendu disponible en ligne et ajouté dynamiquement pour Google et les autres moteurs de recherche.

En savoir plus

Galerie refonte d'un site internet sur la sécurité des produits chimiques

Proposition de maquette de la page d'accueil

Proposition de maquette de la page d'accueil

Autre proposition de maquette de la page d'accueil

Autre proposition de maquette de la page d'accueil

Proposition de maquette du modèle des pages de catégorie

Proposition de maquette du modèle des pages de catégorie

Autre proposition de maquette du modèle des pages de catégorie

Autre proposition de maquette du modèle des pages de catégorie

Proposition de maquette du modèle des page de présentation

Proposition de maquette du modèle des page de présentation

Conception graphique de la page d'accueil

Conception graphique de la page d'accueil

Conception graphique en version tablette

Déclinaison graphique en version tablette

Déclinaison graphique en version téléphone

Déclinaison graphique en version téléphone

Conception graphique de la page catégorie

Conception graphique de la page catégorie

Autre version graphique de la page de catégorie

Autre version graphique de la page de catégorie

Conception graphique de la page produit

Conception graphique de la page produit

Conception graphique de la page de présentation

Conception graphique de la page de présentation

Conception graphique de la page de newsletter

Conception graphique de la page de newsletter

Conception graphique de la page de documentation

Conception graphique de la page de documentation

Conception graphique de la page de contact

Conception graphique de la page de contact

Conception et réalisation suivant l'offre de refonte de site internet de catalogue pro

Refonte de site de catalogue pro

Refonte de site de catalogue pro

Olloweb CMS

Refonte de site internet de catalogue pro

La refonte de votre site de catalogue pour une meilleure mise en page, une plus grande facilité d'accès au catalogue, une nouvelle interface graphique unique et originale, de multiples options pour personnaliser le catalogue, un cms performant pour la gestion complète du site internet de catalogue.

L'offre de refonte de site internet de catalogue pro
à partir de 4 920,00 HT - 5 904,00 € TTC OFFRE PRO

Détail de l'offre

L'agence Olloweb utilise désormais
le fournisseur d'energie Enercoop
pour la création digitale

Enercoop
Energie 100% renouvelable