Creating a Stunning Landing Page for Vini: The Step by Step Process
Hey everyone, Jésus Husbands here, Co-Founder of Melior. Today, I’m excited to share the journey of creating a landing page for Vini, an events app I’m developing. This landing page is crucial for gathering interest and building a waiting list for the app. In this blog, I’ll take you through the entire process — from designing in Figma to developing in Webflow. Let’s get started!
Step 1: Designing the Landing Page in Figma
First up, the design phase. I kicked things off by using Relume’s AI to help create the sitemap and wireframes for Vini’s landing page. My prompt was simple: “A landing page for an event marketplace app called Vini. The main CTA is to sign up for the waiting list for the app. Highlight these features: browse events, search events, buy and redeem tickets.”
With the initial wireframe ready, I dove into some inspiration hunting. Landbook was my go-to resource. I collected a few designs that stood out to me and stored them in Figma. This helped me piece together elements I liked to create a design that’s both functional and visually appealing.
Step 2: Developing the Landing Page in Webflow
Once I had the design locked down, it was time to bring it to life in Webflow. Webflow is an amazing tool that makes the transition from design to development smooth and code-free. I started by importing the wireframe from Relume into Webflow to set a solid foundation.
Next, I went into a time-lapse mode to build the site, making sure every element was aligned with the design in Figma. The result? A sleek, functional landing page ready to collect emails and sign-ups for Vini. You can check out the live landing page and join the waiting list here: Vini Landing Page.
Why a Landing Page?
Landing pages are a powerful tool to gauge interest and gather early adopters. For Vini, the landing page serves to collect emails and prompt sign-ups for the waiting list. If this was a for-profit project, the next step would be running social media ads to drive traffic to the page and optimize for conversions.
Special Mention
Before I go any further, a big shoutout to Julien Alfred for winning the 100m Gold medal at the Olympics. We St. Lucians are incredibly proud of her achievement!
What’s Next?
Next up, I’ll be conducting research on existing event apps to gather insights and feedback. This will help ensure Vini meets the needs of its users and stands out in the market.
If you enjoyed this blog and want to watch the video where I develop the landing page from start to finish here you go.
Building Vini’s landing page was a crucial first step in our 22-week journey to develop a production-ready events app. Using Figma and Webflow, we’ve designed and built a functional landing page to help us gather interest and build a waiting list. Stay tuned for more updates as we continue this exciting journey!
Links:
