After my previous post, I got a lot of requests asking how I created my landing page. I promised to dedicate this post to creating a landing page using Webflow.
The landing page of my current product and my previous product is built using Webflow. I have never used Webflow before. In both cases, I was able to put together an initial version that looked good within a few days.
I would love to share my perspective as a founder who is not an expert in webflow on how I build landing pages.
But first, let's start with why even build a landing page yourself.
Why build a landing page yourself?
Most founders I know turn to Fiverr or Upwork for a landing page. It's very tempting. Invest a few hundred dollars, a few hours to specify the requirements, and you have a landing page ready in just a few days. As a founder, you have so much on your plate, so why take another project that is not your specialty?
In my opinion, you should do that for two reasons:
- The landing page is the first thing anyone will see about your product: Customers, investors, or friends who want to help. If it looks half-assed, it will put people off.
- Despite the low initial effort, most of the work comes afterwards. Your product will change and you will want to change your landing page too. Beyond the cost of maintenance, the time you will spend on the landing page will increase significantly over time. To make changes, you will have to communicate with another person who doesn't know your product as well as you do.
Building the landing page yourself will require a little more investment upfront, but you will get a result you can be proud of and easier to maintain.
So far I have only tried to build landing pages using Webflow and Unbounce, so I have no experience with other tools.
For my needs, Webflow was by far the better option:
- It has a selection of templates that look great and are very easy to use.
- Webflow's flexibility allowed me to design almost everything.
So what's my process for building a landing page using Webflow?
Choose a Webflow template (half a day - day)
The first step which is the foundation for everything else is the template.
Webflow is full of good looking templates, sorted by categories. For example, templates for SaaS products.
When I choose a template, I usually look at the general structure of the page, the navigation, the examples of the different sections in the template, the colors and the font (which can also be changed later).
I usually invest in choosing the template somewhere half a day to a day. Everything you do afterwards will be based on the template, so it's important that you choose one you are proud of.
Create a new Webflow project with the template (1-2 hours)
Once you select the template, you will have to pay for it (ranging between $50 - $130), and then you will get a new project with the selected template. Once you have a new project you can make changes as you wish. You don't have to worry about making the wrong changes, Webflow automatically saves your previous versions, so you can always restore them.
Assemble the landing page from the sections you like (half a day - day)
To create an initial version in a few days, I recommend mixing and matching existing sections. Designing your own sections can take a little longer. It's very easy to copy sections from page to page (it's actually copy paste), so you can build your landing page from the sections that appear on the entire template’s pages.
Change the copy (day)
Copy is a significant part of a high quality landing page. Even if you use Fiverr or Upwork to build your landing page, you would need to think about the copy yourself.
From my experience, most of my time in creating a landing page is spent on the copy and creating illustrations.
Create illustrations (day)
Creating illustrations is not easy, especially for anyone that never created a landing page before. As with the previous parts of the process, to get an initial version ready within a few days, I would not recommend starting with designing illustrations yourself. I typically use 4 main tools to create illustrations:
- The awesome illustration library of unDraw. You can also select a color to match your brand colors.
- If you have a product or MVP, and own a Mac, I recommend the excellent Cleanshot to take product screenshots. If it's a web product, you can also Zoom In on Chrome to avoid screenshots with too many details.
- The icon library of Flaticon.
- Webflow templates usually come with ready-made illustrations. Sometimes, for example with BRIX Templates, you can request the Figma file of the template and edit the illustrations. It may sound complicated if you never used Figma before, but if you're just editing existing illustrations, the learning curve is not too bad, and you can come up with quality illustrations in no time.
Add a domain and publish (1-2 hours)
The last step is to add your domain. Webflow has tutorials on how to set up your domain on popular sites like GoDaddy.
It’s true, building a landing page yourself requires a little more work, and there is a learning curve. But I promise it won’t be in vain. In the long run you will save time, and have a landing page you are proud of.
Hope this helps! And let me know if you have any questions, I would love to help!
Want to share your tips on how to build a great looking landing page quickly? Feel free to start a conversation with me on Twitter @nirshub