Making of : OVA Website

Making of : OVA Website

OVA
Immersion for all
Facebook Twitter Linkedin

We recently launched our brand new website, and needless to say, we’re pretty proud of it. 😎

Of course, it couldn’t have been done without the hard work of our fantastic Crew. But, we also had the pleasure of using a few handy tools along the way, which helped keep the whole process as smooth as possible. 

So… how did this all come to life? Let’s walk through it together!

 

Wireframing

First, we had to determine the base structure of our website with wireframes. We used Balsamiq, a tool that reproduces the experience of sketching on a page. 

This tool was perfect for the early creation stages, since it’s quick and easy to use; no complicated controls to learn, no learning curve whatsoever... just you and your brainstorming! With Balsamiq we were able to throw a bunch of ideas on paper (well, in this case, on screen!), try different approaches, and quickly figure out the ones that worked better. The stripped down components allowed us to focus solely on the structure itself, without getting carried away by graphical elements or personal taste. 

There we had it: our website’s structure, content, and behaviors... fast and easy!

Balsamiqfinal-60-png


Visual Design 

The next step involved the graphic layer. For this step, we chose to work with Figma, a cloud-based digital design platform. 

Figma documents are stored online, so there’s no need to get lost in infinite versions of the same document for feedback.  With Figma, we were all able to collaborate on the same project, at the same time, all in one place! It made designing, prototyping, and sharing feedback way easier. We could all keep tabs on the changes being made without having to request permission from one another, and we left comments, suggestions, and key discussion points right there on the mockups themselves. 

The platform was perfect for each and every member of the team, for the following reasons: 

  • It uses all the same shortcuts Graphic Designers and Artists are used to using;
  • Padding, direction, and spacing settings translate directly into code, simplifying Developer handoffs;
  • It’s just really easy to pick-up! Basically everyone that wanted to contribute to the project… could. No app needed, it even works on a web browser.

Thus, beautiful visuals were born!

 

3D Renders

For the charming 3D illustrations sprinkled all over the website, we went with classics.

Blender, a free and open-source 3D software, was used to create a few renders. This tool is already a must for our 3D Artists, who use it on the daily to create new StellarX’s assets. It proved quite useful for this project, too! 

The majority of them, though, were created with Maxon’s Cinema 4D, a professional and reliable modeling tool which allowed us to create stunning objects, characters, scenes, and even animations.

C4D


Programming

It was now time to bring our website to life! For programming, we used Webflow, an online tool that allows users to design, build, and launch websites… without coding. At all. 

Sound familiar? (wink wink 😉)

Webflow does the bulk of the work for you, from editing to maintenance. Creating, duplicating, and editing web pages is easier than ever,  thanks to a visual editor that shows you exactly what the website is going to look like. And changes — editing text, altering layout, uploading images, updating links — are made in a snap. A single click, and just like that, all of it is live. No complex processes. No headache. 


webflow


Translating

As you probably already know, we’re a business based in Quebec, Canada (and if you didn’t, well, now you do!). But we’re also expanding fast, and leaving our mark all over the world, which is why it was essential for us to offer a multilingual website.

For the translation phase, we used Weglot, which allowed us to publish a French version of our website within minutes! And, when we say minutes... we mean it. 

All we had to do was to integrate Weglot to Webflow. The tool generated automatic translations of our existing text, which we could then review and edit manually. It gave us an organized base to work with, and made the whole process a lot smoother. Our translated pages were also automatically indexed on Google, following best practices in multilingual SEO. So effortless!

Thanks to this tool, when we add more languages, it’ll be easier than ever to update our website. Bonjour / Hi… And more, eventually! 😋🈺

weglot


Marketing

Once the website is up and running, you might think that everything’s done… but it’s not!

For daily tasks and everything post-launch, we linked our website to Hubspot. This all-in-one marketing software has a solution for virtually anything you need to help scale your business, and allows us to centralize operations for maximum efficiency and productivity.

Here at OVA, we use this platform for a lot of purposes (like, a lot!). But specifically for our new website, it proved quite useful for...

  • Analytics, such as traffic and conversion stats, with an easy-to-use, customizable dashboard;
  • Client communication and messaging, all grouped up in one place to make sure we’re not missing anything; 
  • Posting and managing blog articles, thanks to an intuitive text editor.

     

Hubspot2

 

. . .

 

So, there you have it! That’s how the new and shiny OVA website was born. It was quite a ride, but we buckled down and we made it happen! We have to say, we’re really happy with the final result. 🙌

Don’t forget to share on social media if you enjoyed the article, and keep an eye on our Blog since more awesome content is on its way! ✨

Like the article? Spread the word
Facebook Twitter Linkedin