The story of Plantarium - a no-code website made with Webflow
No-code development is full of possibilities. But is it possible to create an esthetic and stunning digital website without writing a single line of code? Read about our latest Awwwards project and find out the answer. Here is the story of Plantarium. Learn how we used the Webflow tool to build this Awwwards-nominated site.
Table of contents
No-code product idea
Just a few weeks ago we published an article about the no-code revolution. We see great potential in no-code solutions, so we use them for building some of our products. No-code also turned out to be the best choice for building our latest landing page - Plantarium.
The Plantarium website helps pet owners identify whether plants are safe or dangerous for dogs and cats. How did we come up with the topic? Many employees at Boldare love pets - it’s their passion to take good care of our four-legged friends. That’s why they care about the information published on the Plantarium site - it is meaningful to them and hopefully for other visitors to the website too.
How did we get started with Webflow development?
After we knew we wanted to build the page without any coding, we took a closer look at some of the no-code tools that are available online. Webflow seemed the most suitable for our project. With this tool you can create a website by just choosing ready-made elements and dragging them around the screen.
We formed a team of five professionals to work on the project:
- Magdalena Morzuch - PO and web design,
- Ilona Górska - product development,
- Zuzanna Talik - webwriting,
- Anna Bil - mentoring,
- Patryk Malinowski - mentoring.
The person who operated directly in Webflow was Ilona Górska, who normally works as a PHP developer. This is what she says about the experience:
Working in Webflow brings a lot of satisfaction. You can immediately see all applied changes on the screen. And HTML knowledge is not needed here. I relied completely on the tool and it did not disappoint me.
She also states that having clear guidance from the Webflow creators helped her a lot. Here is where you can find it: Webflow University.
Creating our landing page in Webflow - step by step
We started our project with a product workshop. Our PO, Magdalena Morzuch, presented her ideas for the design in Figma. We came up with some valuable insights and new ideas for design, copy, images, etc. After the layout was ready, Ilona started the product creation process in Webflow. She built the website block by block and manipulated block styles, where needed.In the meantime, our designer created amazing pet and plant images, animating them using Adobe After Effects (special thanks to Piotr Morzuch for taking care of this part). Animations were then exported into files with the Lottie JSON extension, which takes 600% less disk space than GIF files and are easily imported into Webflow.
Simultaneously, one of Boldare’s copywriters, Zuzanna Talik, created all the text content for the Plantarium site. The next step was to insert it, together with the visuals and animations, into Webflow blocks prepared by Ilona. Here she came across a little challenge with CSS attributes while positioning images, but apart from that, she did not experience any issues while working in Webflow. When the job was done, she said:
It’s amazing how fast you can build a landing page in Webflow. It led my hand through the process, pointing to the elements that needed improvements. I think it’s easy and convenient and can be used by anyone who is willing to take some time and play with it.
Final remarks on Webflow development
The whole process of learning Webflow, creating blocks and filling them with ready content took approximately 40 working hours. In the end, we could just download the whole HTML code of the page and add it to Netlify in order to keep it outside of Webflow servers (you can also decide to leave it there).
And how much does Webflow cost? We purchased a subscription for $28 - we wanted to be able to export the code - but if you just want to test the tool, you can choose a basic plan (without code download) or use Webflow for free (with a limited number of projects). Isn’t it just great?
Now, we invite you to click around our Plantarium site. It has already been nominated for an Awwward, so we can immodestly say: it’s a great piece of work. We hope you’ll agree. Enjoy.
Share this article:
