O2Sources V5 (ou l’histoire d’une renaissance)

Dans le monde de l’entreprise, chaque grand changement est souvent accompagné d’une évolution dans la manière de communiquer.

C’est ainsi qu’après le naufrage de l’Erika en 1998, les grands groupes pétroliers ont changé leur fusil – de communiquants – d’épaule en faisant évoluer radicalement leurs logotypes, passant de la lettre capitale à la minuscule et en adoptant un discours plus nature. BP et sa transformation eco-friendly en est l’exemple le plus parlant.

Même sans naufrage, ce renouveau peut être une nécessité pour une entreprise. C’est le cas chez O2Sources.

Suite à de nombreux changements, nous avons évolué : structurellement, humainement ainsi que dans notre positionnement. C’est donc pour rester fidèles à ce que nous sommes devenus que nous avons pris la décision de transformer notre principal outil de communication.

Pour élaborer cette nouvelle charte, nous nous sommes auto-briefés. Après tout, ce qui fonctionne avec nos clients ne devrait-il pas fonctionner avec nous ?
De ce dialogue avec nous-mêmes se sont dégagés nos principaux mots clés : Renaissance – Évolution – Dynamisme – Modernité – Victoire – Humain – Chaleur. Ils ont été à la base de tout notre travail.

C’est ainsi qu’après quelques recherches autour de la symbolique de ces mots, nos obliques ascendantes ont vu le jour ; nos feuilles de lauriers ont trouvé leur place ; il a été décidé d’utiliser la lettrine ; nous avons créé Jean-Neige, notre nouvelle mascotte ; nous avons décidé de vous en dire un peu plus sur nous…

recherches-croquis

Chacun des nouveaux éléments de notre charte graphique a du sens. Moins de bullshit et plus de profondeur pourrait-on dire.

recherches-typo-JN

Nous avons également profité de cette nouvelle vitrine pour explorer et expérimenter. Nous voulions un site performant, ludique, respectant un maximum de critères Opquast et techniquement abouti.

Ainsi, différents effets ont été mis en place. L’animation SVG de notre lettrine – pour accentuer la symbolique de (re)construction – a été réalisée à partir de cette démo Codrops.
Les articles de Sara Soueidan ont été une grande source d’informations. C’est en la lisant que nous avons opté pour la découpe de l’image de fond – bannière de la page d’accueil – en CSS via l’utilisation d’un SVG et de la propriété clip-path. La librairie scrollreveal a été couplée à diverses animations CSS3 pour créer la timeline de la page narrant notre histoire.
Pour optimiser le chargement de certaines pages et mettre en place quelques transitions originales, c’est du côté de Smoothstate que notre veille nous a mené. Enfin, nous avons testé Isotope MetaFizy pour la partie présentant nos références.

Des heures de veille, de recherches, de brainstorming et surtout énormément de plaisir nous permettent de vous présenter aujourd’hui notre nouveau visage.

Bonne visite et bienvenue chez nous !

Laisser un commentaire

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