Making of : Site web OVA

Making of : Site web OVA

OVA
Immersion for all
Facebook Twitter Linkedin

Nous avons récemment lancé un site web tout neuf, et il va sans dire que nous en sommes plutôt fiers. 😎

Bien sûr, nous n’aurions jamais pu y parvenir sans le travail acharné de notre fantastique équipe. Mais certains outils, que nous avons eu le plaisir d’utiliser, ont également contribué à faciliter l’ensemble du processus. 

Comment, donc, cet ambitieux projet a t-il vu le jour? Jetons-y un coup d’oeil!

 

Wireframing

La toute première étape était de définir la structure de base du site web. Pour la conception de maquettes, nous avons utilisé Balsamiq, un outil cherchant à reproduire l’esquisse sur papier. 

Balsamiq était l’outil tout désigné pour la phase initiale de création puisqu’il permet, par sa simplicité et son accessibilité, de créer une grande quantité d’instances rapidement. Sans barrière, ni courbe d’apprentissage... il n’y a plus qu’à laisser aller sa créativité! Ainsi, nous avons pu mettre toutes nos idées sur papier (ou dans ce cas, sur écran!), tester différentes approches et identifier rapidement les meilleures solutions. Les composantes étant réduites à leur plus simple expression, nous avons pu nous concentrer sur le classement du contenu et la navigation, tout en évitant de nous laisser emporter par nos goûts personnels ou par la subjectivité des éléments graphiques.

Et voilà: la structure, le contenu et les comportements de notre site web, rapidement et aisément!

Balsamiqfinal-60-png


Conception visuelle

L’étape suivante était la couche graphique. Nous avons choisi Figma, une plateforme de conception numérique basée sur le cloud.

Les documents Figma sont stockés entièrement en ligne; ainsi, pas besoin de se lancer la balle constamment en créant des versions infinies du même document. Nous avons pu tous collaborer sur le même projet, en même temps, au même endroit! Le design, le prototypage et la rétroaction en ont été grandement facilités. Le suivi des modifications s’est fait tout seul, sans que nous ayons à demander constamment des mises au point; les commentaires ou les discussions se faisaient directement sur les maquettes, en temps réel. 

La plateforme était parfaite pour chaque membre de l’équipe, puisque: 

  • Elle reprend les raccourcis auxquels les designers graphiques et les artistes sont habitués; 
  • Les paramètres de contour, de direction et d’espacement se convertissent directement en code, simplifiant ainsi le transfert aux développeurs;
  • Elle est facile à comprendre, tout simplement! Tous ceux qui souhaitaient contribuer au projet, formation ou non, ont pu le faire. Même pas besoin d’application, elle fonctionne à 100% sur navigateur web!

C’est ainsi que de magnifiques visuels sont nés.


Rendus 3D

En ce qui concerne les charmantes illustrations 3D parsemées sur le site web, nous avons opté pour des outils classiques.

Blender, un logiciel 3D gratuit et open-source, a été utilisé pour quelques rendus. Cet outil est déjà un must pour nos artistes 3D, qui l’utilisent quotidiennement pour créer les nouveaux assets de StellarX. Il s’est révélé plutôt utile pour ce projet également! 

La majorité des rendus, toutefois, ont été créés avec Cinema 4D par Maxon. Il s’agit d’un outil de modélisation fiable et professionnel nous ayant permis de créer de magnifiques objets, personnages, scènes, et même animations. 

C4D


Programmation

Il était maintenant temps de donner vie à notre site web. Pour la programmation, nous avons utilisé Webflow, une plateforme permettant à ses utilisateurs de concevoir, construire et lancer des sites web entiers… sans coder. Du tout.

Ça ne vous rappelle pas quelque chose? 😉😉

Webflow fait une grande partie du travail pour nous, du montage à la maintenance. Un éditeur visuel nous montre exactement le résultat final lorsque nous créons, copions ou modifions une page web. Et tout changement — la révision de texte, la mise en page, l’ajout d’images, la modification de liens — se fait en un tour de main. Un seul clic, et juste comme ça, le tout est en ligne. Pas de processus complexe. Pas de casse tête. 


webflow


Traduction

Comme vous le savez probablement déjà, nous sommes une entreprise basée à Québec, au Canada (en tout cas, si vous ne le saviez pas, maintenant vous le savez!). Mais nous sommes également en pleine expansion, et nous taillons peu à peu notre place à l’international. C’est pourquoi il était essentiel que notre nouveau site web soit multilingue.

Pour la phase de traduction, nous avons utilisé Weglot, qui nous a permis d’ajouter une version française à notre site en un temps record. Sérieusement. 

Nous n’avons eu qu’à intégrer Weglot à Webflow, tout simplement. L’outil a généré des traductions automatiques à partir de notre texte, que nous pouvions ensuite réviser et modifier manuellement. Le fait de travailler à partir d’une base existante a grandement facilité le processus. Les pages traduites ont également été indexées automatiquement sur Google, en suivant les meilleures pratiques de SEO multilingue. Rapide et efficace!

Ainsi, lorsque nous voudrons ajouter plus de langues, ce sera facile comme Bonjour / Hi! 😋🈺

weglot


Marketing

Une fois le site fonctionnel, on pourrait croire que le travail est terminé… Mais ce n’est pas tout à fait le cas! 

Pour les tâches de routine et tout ce qui concerne l’après-lancement, nous avons connecté notre site web à Hubspot. Ce logiciel marketing tout-en-un vous aide à croître votre entreprise de toutes les façons possibles, et permet de centraliser les opérations pour un maximum d’efficacité et de productivité.

Chez OVA, nous utilisons cette plateforme à de nombreuses fins. Mais spécifiquement pour notre nouveau site web, elle s’est avérée utile pour: 

  • L’analyse des données, telles que le trafic et le taux de conversion, grâce à un tableau de bord personnalisable et facile d’utilisation;
  • La communication client et l’échange de messages, tous réunis au même endroit afin de ne rien manquer; 
  • La mise en ligne et la gestion des articles de blog, grâce à un éditeur de texte totalement intuitif.

 

Hubspot2

 

. . .

 

Le voici, le voilà! C’est ainsi que le tout nouveau site web d’OVA a vu le jour. C’était toute qu’une aventure, mais nous y sommes arrivés! Nous devons avouer, nous sommes plus que satisfaits du résultat final. 🙌

N’oubliez pas de partager cet article sur les médias sociaux si vous l’avez apprécié. Et restez à l’affût, puisque d’autre contenu est à venir très bientôt sur notre blog! ✨

Like the article? Spread the word
Facebook Twitter Linkedin