I’m building a gallery of free HTML/CSS landing pages for startups
Some weeks ago, I was trying to validate a new product on Indie Hackers, and from that moment on, I started receiving several appraisals on the idea itself, alongside inquiries about how we've designed our landing page for Wirize.
As a product designer, I'm very conscious that many startups have the same damn problem: They may have a killer product, but their landing pages are often poorly designed, so they end up leaving a lot of money on the table.
After all, the first impression is what counts most, and a poorly designed product is maybe the worst way to attract a new lead.
Along with @pasqualevitiello, we've tried to find a simple solution to solve that matter, and we came up with an idea of free HTML/CSS templates for startups, ready to use and super easy to customize.
To make this approach more effective, we've divided each template into four different categories (idea validation, pre-launch, beta and start-up), so that we’re able to cover different startup needs.
Here are the first four templates, that you can download/use straight away:
The next 4 are already in the making, and our intention is to build a gallery of 30+ templates, so that we can help several startups setting up a landing page their products deserve, without wasting time and especially money.
A lost note: I'm aware that not everyone has the skills to customise a template, so if you need any help or guidance please feel free to reach us out!
We're keen to hear your opinions!
Those are fantastic templates! Thank you so much! :)
I like your templates and would like to contribute if possible. I am already running a side project Wired Dots where I continuously add free and premium landing pages.
Hey Atta, nice stuff on Wired Dots :) What kind of contribution are you envisioning?
Hey Atta, these templates look good! Is it possible to build templates for an entire SaaS app - something simple, like a page with forms, a landing page, a page with FAQ, one with privacy policy etc?
I am so glad you like them. I usually build one-page landing templates because it is easier and take less time. Since I redesigned most of the Bootstrap 4 components, these can be used to create a SaaS app template too.
One example is Wired Dots site itself. I used one of my own premium landing page templates to develop the complete Wired Dots site.
WOW!! That's awesome!
Congrats on your skills and thanks a lot for sharing this with the community. Definitely will refer to this thread when giving feedback to people struggling with their landing page design.
One minor nitpick though: I do not like animations in a landing page. Especially in the hero section. When it works perfectly, it gives a good impression. When it works anything less than perfectly, it confuses the visitor. I do not think the net result is positive.
Example: I just visited Wirize from phone on a good wifi connection. The menu and background appear immediatelly, so I know the site is loaded. But I see no content. I had the time to scroll the page, very confused, imagining the link might be wrong, then I scroll back to the top and only then I see the content showing up being animated.
As you say this is only CSS (I haven't checked the source code), it might be just the timing of the animation that is waiting too long. But even so, I would totally remove any animation to show the content of the hero section and speed up the animations on the other sections
Hey Rodrigo,
Thanks for your kind words :)
That's definitely a good point in terms of usability, and overall I totally agree with you!
In the case of Wirize the live checkout has the merit to explain directly what the product does, on the other hand, it may not load immediately!
Anyway, you can easily turn off animations on each template by getting rid the class “has-animations” from the body tag :)
Great! Easy to turn-off animations just made your templates perfect! :)
Awesome templates! The CSS animations are sweet and really diferentiate these templates from 90% of other templates.
The feel is really premium, good luck on developing the rest of these! I might use these for a side project or two so thanks in advance !
I just love it! I used one of your template to build https://www.strongify.app/
I customized it a little bit and integrated Typeform to collect emails. Thank you for this!
Hi Gustavo, thank you for sharing it! You've made a great job with customizations, and the final result looks very nice and professional :) Good luck with Strongify and keep up the good work ;)
This is way cool (and very beautiful designs)! I've bookmarked so that next time I want to spin up a landing page, I can quickly do it with one of your templates.
Cheers,
Jonathan
Glad to hear that, Thank you Jonathan :)
Wow. These are fantastic. Would you be willing to blog or make a video tutorial of how you did these? Design is still a dark art to me. I have been in backend codes all my life.
Thank you Ted!
Yes, we're considering a round of Medium articles, where we'll share different actional tips like content hierarchy, typography, palette and design hints in general :)
Hey David. Great work. Have you considered creating a mailing list where you send one template from each category maybe weekly? Would definitely sign up.
Thank you Masharty :) Within a month we will launch the next four templates, plus a website to host all the landings.
I will keep you posted here on IH, and of course, we will set up a mailing list to share all the news on a weekly-monthly basis :)
Great work, nice animation skills.
Some suggestions:
-Integrate a marketing model in your template. For example. First container: explain the situation of the potential customer, second container: describe his/her problem or question. Third container: describe your solution. Last container: describe your solution is the best.
This way it's easier to fill in the template and the end result will look prettier.
My advise, focus on one or two, instead of 30. And deliver the best thinkable added value for your target audience, if you succeed, you can always diversify. Don't forget that you have to support 30 templates, manuals, libraries, forum.. etc.
Hey Tijs, these are definitely some great hints, thank you!
We're already discussing some options to increase the current value, but you know, it's very difficult to predict such a thing at this stage!
I hear you about the difficulties to support/manage for 30+ templates, and this is something that we're going to automate.
Anyway, we'll try our best :)
I once was involved in project where we sold Themes on Themeforest. These customers have very high expectation when it comes to fast service, 24 hours a day. The competition is fierce, but it's also THE platform to search for themes. Automation is not an option, outsourcing is, but it's not cheap and you must be very lucky with finding the person to do the support well.
Thinking about it. Analyse your competitors on Themeforest. To be honest I think there is room for a niche (Landingspage for startups/SAAS, with well defined documentation how to connect to Stripe or/and with the most used PHP frameworks)
Since your customer is likely to be tech-savvy, he might look for a html template instead of a WordPress theme.
Hey Tijs, we're going to stick to HTML/CSS templates, so isn't our intention to turn on WordPress and start selling themes on ThemeForest!
Yes, maybe there is a niche for high-quality landing pages on ThemeForest, but as you pointed out, the market is very saturated, furthermore, I totally agree when you say that an HTML/CSS template can work better than a WP theme in this particular case!
Those actually look really slick, great work. I love the choice of color palettes as well as the amount of spacing and 'cleanness' of the sites. Great job, looking forward to see more, if you could ever use any help - don't be shy to shoot me a message!
Definitely I won't. Thank you Dennis!
These are some great templates. And I love how you have them broken out for different stages.
One suggestion I have is to look at adding login / signup templates as well as different templates. Always on the look out for nice login / signup templates.
Thank you James! It's a nice idea, feedback annotated :)
Great, looking forward to whats next. :)
Awesome templates. Thanks for the share!
These are awesome!
Wow really nice templates man, thanks.
They look really nice, I just downloaded Ava and Agnes
Awesome templates! 😍
Great work Davide. The templates are awesome! Very clean design. Thumbs up!
Wow, can I just say thank you so much for sharing these awesome templates. I really appreciate it a lot.
THANK YOU SO MUCH
Looks awesome :) I will use Agnes.
OMG Awesome!! Thank you som much! =D
Such an amazing job. If you need an extra hand, let me know.
I believe this is amazing. I mean the whole product, but also this specific approach solves a big problem for non design privy people, as there are so many ways one can make (and fail) a landing page.
I am definitely going to reuse one of the templates myself.
Little question, what's your business model?
Thank you, Omar!
Yes, the real challenge was to define a scalable approach to differentiate the templates also in terms of contents! So, I'm very happy you pointed it out :)
Business model: Honestly we would like to create a value first, and then we'll take care of the monetization side. For now, we're considering premium components, commissions and custom services in general!
Thank you Davide for your answer!
(funny, I've been in Malta only 2 weeks ago. loved it!)
Did you consider having a more end-to-end experience, something such as launchaco.com?
It basically allows to create a website, customize it, deploy it and get a domain as well.
I understand from your post that you're targeting people who probably have a certain skillset to build products, so they might not need you to take care of the deployment phase.
With that said, since some of the categories target ideas explicitly, I imagine it could deliver tremendous value if "I" could start testing an idea with "just a click of a button".
I'd be interested to be involved if it matches your plans (I automate a lot of deployments among other things).
Oh, if you ever come back here, let's catch up :)
Thank you for all the suggestions, I'm going to reply point by point:
On the other hand, we're evaluating the opportunity of a ready-to-use solution to cover just a specific scenario like the idea validation process. You can image a pre-hosted landing page with the possibility to accept payments via Stripe or Paypal! Pretty much like you've proposed I think.
I will definitely keep in mind your proposition :)
Will do! ;)
In case I was confusing, I did not suggest pivoting this into a full website builder, but providing an end to end experience related to launch pages.
I'm anyway closely following your project. It's a very interesting endeavour and I wish you all the best.
Absolutely wonderful templates. Fantastic work!
fatanstic templates!
Amazing landing pages! Thank you so much, and keep coding 😍
They are awesome. It would be great to have email capture
Commenting so I can find this again
Hi Davide,
Your template are really cool, and I would love to use them. Unfortunately, since they are distributed under GPL3, derivative works need to be open source as well, and I don’t want to open source an entire website which would likely have a lot of code other than the template. Will you please consider distributing this work under the MIT license or even putting the templates up for sale on a marketplace?
Thanks so much.
Hi IndieHacker11,
I wasn't aware of such a restriction using the GPL3, so thank you for pointing it out!
We're going to distribute the templates under the MIT license, and I will have all the necessary sorted by Thursday.
In the meantime, you can keep using them without problems :)
Thanks so much! I’m very grateful.
Great Job and thanks for sharing it!
I used Freebies Bug as a template for my co's website:
https://freebiesbug.com/code-stuff/sedna-one-page-website-template/
Nice designs. Bit too Stripe-y for me, though. :D
Love these - already downloaded one
Nice work Davide.
Landing page is very important to any web app.
To a large extent, it determines if the user will take further action on the site.
Beautiful designs Davide. We only know how much work is requited from designing a landing page to final implementation. This can be such a time saver. Well done!
my 2 cents - a couple of free bootstrap templates I've made: https://gettemplate.com
Clean and beautiful. Thank you Davide for sharing
Really love these. Will definitely use in the future. Saved me hours!
This is beautiful!!! thumbs up
These templates look great! There is definitely a market for something like this -- it's hard to find well-designed templates for free.
This is awesome, @Davidep86! Thanks for contributing this to help out fellow IHers!
Hey, nice project. I am also running a very similar side project Themes For App where we release 4 new themes every month for indie makers. All previously released themes are also available for download on the website.
Btw, I thought you were using Bootstrap, what framework are you using?
Hey Dark, we just use our own guidelines and best practices!
check out the stuff by https://www.creative-tim.com/
stealing the thunder man
Love the idea! What about throwing in analytics?
Just annotated! Thanks for your input Rahul ;)
This comment was deleted a month ago.